邮政/页面上的WordPress插件

Question

我打算将现有的jQuery插件转换为WordPress插件。这将是我的第一个WP插件（请温柔）。我已经设置了基本的插件结构，并且可以成功激活/停用插件（导致向站点添加必要的JS和CSS文件）。到目前为止一切都很好。

我不理解的棘手部分。

我想在帖子或页面上完成的任务：

1 - 定位帖子或页面中的单个元素（图像） 2 - 将特定类应用于该元素 3 - 允许用户再将插件设置提供给该元素

我不知道如何做到这一点。

我发现有关WordPress插件开发的所有内容详细说明了如何在仪表板中设置设置面板。不幸的是，我找不到任何针对帖子或页面中特定元素的详细信息，然后将插件设置应用于这些元素。

在标准HTML网站上，插件代码如下所示：

<img src="..." class="myPlugin"/>

// INIT
$(document).ready(function(){
    $('.myPlugin').myPlugin({ someOptions });
});

设置也可以这样应用：

<img src="..." class="myPlugin" data-myPlugin='{ someOptions }' />

希望这对每个人来说都是足够的代码，我希望有人可以指出我正确的方向。

谢谢！

Answer 1

您可以使用过滤器挂钩image_send_to_editor。当我们使用添加媒体按钮选择附件时，它会返回在帖子/页面上插入的HTML。

我已经看到一个有趣的用法here，改编自下面。我们基本上使用$attachment上传递的附件属性重建HTML。

add_filter('media_send_to_editor', 'media_html_so_22584846', 10, 3 );

function media_html_so_22584846( $html, $attachment_id, $attachment )
{
    $post = get_post( $id ); // used to get the post title, but there's a bug in WP, the title is never printed
    $url = $attachment['url'];
    $align = ! empty( $attachment['align'] ) ? $attachment['align'] : 'none';
    $size = ! empty( $attachment['image-size'] ) ? $attachment['image-size'] : 'full';
    $alt = ! empty( $attachment['image_alt'] ) ? $attachment['image_alt'] : '';
    $rel = ( $url == get_attachment_link( $attachment_id ) );
    $new_html = get_image_send_to_editor( $attachment_id, $attachment['post_excerpt'], $post->post_title, $align, $url, $rel, $size, $alt );
    return $new_html;
}

您可以使用字段Alt和Description来传递自定义选项。另一个选择是在媒体库弹出窗口中插入自定义字段，但这不是一件容易的事。

插入上一张图片后，这里是数组$attachment。

生成的HTML：

[caption id="attachment_662" align="alignright" width="584"]
    <a href="http://plugins.dev/del-me/ampi" rel="attachment wp-att-662">
        <img src="http://plugins.dev/wp-content/uploads/2013/10/ampi-682x1024.jpg" alt="alt"  width="584" height="876" class="size-large wp-image-662" />
    </a>
 caption[/caption]