如何在Wordpress帖子中制作任何插件图标？我想在插件代码中插入的代码将出现在帖子栏中[wp-admin / post.php]。

类似于此图像：
输出：如果单击该图标，它将自动将[plugin]写入如下所示的帖子内容：

评论

添加您想要获得的结果的屏幕截图。不清楚你想要什么。
我想您想创建一个插件，向添加了WordPress短代码的编辑器添加TinyMCE按钮，对吧？

#1 楼

要将按钮添加到TinyMCE编辑器，我们需要做一些事情：


将按钮添加到工具栏
注册TinyMCE插件
创建该TinyMCE插件，在其中告诉TinyMCE单击按钮时该怎么办。

步骤＃1和＃2

在这些步骤中，我们注册了TinyMCE插件，该插件将位于'path/to/shortcode.js'上的javascript文件（请参见下面的wpse72394_register_tinymce_plugin()）

 // init process for registering our button
 add_action('init', 'wpse72394_shortcode_button_init');
 function wpse72394_shortcode_button_init() {

      //Abort early if the user will never see TinyMCE
      if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
           return;

      //Add a callback to regiser our tinymce plugin   
      add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin"); 

      // Add a callback to add our button to the TinyMCE toolbar
      add_filter('mce_buttons', 'wpse72394_add_tinymce_button');
}


//This callback registers our plug-in
function wpse72394_register_tinymce_plugin($plugin_array) {
    $plugin_array['wpse72394_button'] = 'path/to/shortcode.js';
    return $plugin_array;
}

//This callback adds our button to the toolbar
function wpse72394_add_tinymce_button($buttons) {
            //Add the button ID to the $button array
    $buttons[] = "wpse72394_button";
    return $buttons;
}


步骤＃3

现在我们需要创建TinyMCE插件。这将放入文件'path/to/shortcode.js'（如早期步骤中指定）。

jQuery(document).ready(function($) {

    tinymce.create('tinymce.plugins.wpse72394_plugin', {
        init : function(ed, url) {
                // Register command for when button is clicked
                ed.addCommand('wpse72394_insert_shortcode', function() {
                    selected = tinyMCE.activeEditor.selection.getContent();

                    if( selected ){
                        //If text is selected when button is clicked
                        //Wrap shortcode around it.
                        content =  '[shortcode]'+selected+'[/shortcode]';
                    }else{
                        content =  '[shortcode]';
                    }

                    tinymce.execCommand('mceInsertContent', false, content);
                });

            // Register buttons - trigger above command when clicked
            ed.addButton('wpse72394_button', {title : 'Insert shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/path/to/image.png' });
        },   
    });

    // Register our TinyMCE plugin
    // first parameter is the button ID1
    // second parameter must match the first parameter of the tinymce.create() function above
    tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);
});


评论

在第1步中，将init钩子更改为admin_init钩子也可以在前端节省一些额外的处理。

–蒂姆·马隆（Tim Malone）
16年11月16日在2:01
这取决于您是否也可以在前端使用TinyMCE。但是，是的，如果这仅是管理员端，则最好使用admin_init。

–斯蒂芬·哈里斯（Stephen Harris）
16年11月17日在10:19
所以shortcode.js需要放在这里wp-includes / js / tinymce / js / shortcode.js，并且按钮没有图标

–杰迪（Jadeye）
20年8月8日在20:03

#2 楼

这里有太多内容无法完整回答，因此请查看本指南：http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

您必须创建一个Javascript文件，该文件可通过您通过WordPress注册的按钮执行操作，并将TinyMCE按钮插入编辑器。

评论

使用query_posts，所以可能不是链接到的最佳示例。

–布拉德·道尔顿（Brad Dalton）
2014年7月11日14:27