問題描述

如何使任何外掛圖示在 wordpress 的帖子？我想插入外掛程式碼的程式碼將出現在 post bar [wp-admin / post.php] 中。

喜歡這個圖片：

輸出：如果我點選圖示，它將自動將 [plugin]寫入帖子內容，如下所示：

最佳解決方案

要將我們的按鈕新增到 TinyMCE 編輯器中，我們需要做幾件事情：

  1. 將我們的按鈕新增到工具欄
  2. 註冊一個 TinyMCE 外掛
  3. 建立 TinyMCE plug-in，告訴 TinyMCE 當我們的按鈕被點選時該怎麼辦。

步驟＃1 和＃2

在這些步驟中，我們註冊了我們的 TinyMCE plug-in，它將生活在'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 plug-in 。這將進入檔案'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);
});

次佳解決方案

把這個答案放在這裡，太多了，請結帳本指南：http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

您必須建立一個 Javascript 檔案，從您透過 WordPress 註冊的按鈕採取行動，將 TinyMCE 按鈕插入編輯器。

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。