用于短代码的WordPress编辑器图像

Moj*_*wen 7 wordpress wysiwyg tinymce

关于WordPress的快速问题.我一直在谷歌搜索,无法找到答案.

基本上我想要复制添加图库时发生的事情:将图像显示为图库短代码[图库]的替代品.当你去编辑HTML时,短代码是可见的.

我想完全复制这个效果:当一个短代码插入到编辑器中时,我希望将其渲染为图像.

我试过的事情:

  • 插入一个元素(图像,div,我发现一个输入是非常难以理解的等),它被一个短代码包裹起来(这个工作正常,不太好.短代码仍然可见,WP会自动添加段落到元素中以创建用户空间可能会添加可被短代码吃掉的内容 -
  • 将短代码作为<! - - >注释(这也不太好用,WP会偶尔吃它在Visual/HTML之间移动.评论也会吃掉你的内容<! - [shortcode] - >占位符<! - [/ shortcode] - > = <! - 渲染短代码 - >)

这就是我想到的事情.我找不到如何模仿[gallery]行为的指南,也无法通过wp-admin的胆量找到它.

谢谢!

Moj*_*wen 6

好吧,感谢Dan的暗示,找到了答案.这是怎么做的:

首先(正如Dan建议的那样)看看他们如何将Gallery插件添加到Tiny MCE.实际上有一个未压缩的js文件可以为您提供所需的概述,可以在以下位置找到:

/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin.dev.js

这有关于将此类插件添加到TinyMCE的基础知识(此处有更多信息).要让WP使用您的TinyMCE插件加载.js文件,请参阅此有用指南.

基本上这是代码:

if ( get_user_option('rich_editing') == 'true') {
    add_filter("mce_external_plugins", "add_jolokia_tinymce_plugin");
//Applying the filter if you're using the rich text editor
}

function add_jolokia_tinymce_plugin($plugin_array) {
    $plugin_array['example'] =  '/path/to/example.js';
    return $plugin_array;
}
Run Code Online (Sandbox Code Playgroud)

将它添加到主题中的插件或function.php并且你很好!