我记得有一次我这样做了，昨天我找到了地方，但代码是坏。所以今天我对它做了一些改进，我将与大家分享。在我想解释我做什么之前。

首先，有三件事要做：

在标准2旁边添加选项卡标题，在选项卡内容中添加一些内容，使内容在单击选项卡标题时显示，在单击标准选项卡标题时消失，大多数内容都需要js，因此我们还需要在正确的页面中添加js（post.php和post new.php）。

第1点can\'t 可以通过PHP完成，因为这些按钮的标记直接从wp_editor 函数，无需任何过滤器处理。所以唯一的机会就是通过javascript添加它们。

第二点，可以通过PHP轻松完成，使用函数挂钩the_editor 滤器

第三点是通过javascript完成的。

对于所有代码，我创建了一个包含3个文件的简单插件：

• gmet.php - 主插件文件gmet.js - 包含javascript的文件gmet-content.php - 这个文件包含选项卡内容，我为选项卡内容创建了另一个文件，这样就可以轻松地对其进行自定义，而无需深入研究代码。

  gmet。php

  <?php namespace GMET;
  /*
   * Plugin Name: GM Editor Tab
   * Author: Giuseppe Mazzapica
   * Author URI: http://wordpress.stackexchange.com/users/35541/g-m
   *
   * Text Domain: gmet
   */
  
  
  \\add_action(\'admin_init\', \'\\GMET\\init\'); 
  
  function init() {
    \\load_plugin_textdomain( \'gmet\', false, dirname( \\plugin_basename( __FILE__ ) ) );
    \\add_action(\'admin_enqueue_scripts\', \'\\GMET\\scripts\');
    \\add_filter(\'the_editor\', \'\\GMET\\content\');
  }
  
  function scripts( $page ) {
    if ( $page === \'post.php\' || $page === \'post-new.php\' ) {
      $custom_css = "#content-gmet.active { 
        border-color: #ccc #ccc #f4f4f4; background-color: #f4f4f4; color: #555;
      }";
      wp_add_inline_style( \'colors\', $custom_css );
      \\wp_enqueue_script(\'gmet\', \\plugins_url(\'/gmet.js\', __FILE__ ) );
      \\wp_localize_script( \'gmet\', \'gmetData\', array(
        \'tabTitle\' => __(\'My Custom Tab\', \'gmet\')
      ) );
    }
  }
  
  function content( $content ) {
    preg_match("/<textarea[^>]*id=[\\"\']([^\\"\']+)\\"/", $content, $matches);
    $id = $matches[1];
    // only for main content
    if( $id !== "content" ) return $content;
    ob_start();
    include( \\plugin_dir_path( __FILE__ ) . \'gmet-content.php\' );
    return $content . ob_get_clean();
  }
  

  只有3个功能：第一个设置挂钩，第二个在页面中添加javascript，第三个负责在选项卡页面上添加内容。

  gmet。js公司

  (function($) {
  
    $(document).ready(function() {
      var $bar = $(\'<div></div>\');
      $bar.addClass(\'quicktags-toolbar\');
      $wrap = $(\'#gmet_content_wrap\');
      $wrap.children().css(\'padding\', \'5px 15px\');
      $wrap.prepend($bar);
      $(\'#wp-content-editor-tools #content-html\').before(
        \'<a id="content-gmet" class="wp-switch-editor">\' + gmetData.tabTitle + \'</a>\'
      );
    });
  
    $(document).on(\'click\', \'#content-gmet\', function(e) {
      e.preventDefault();
      var id = \'content\';
      var ed = tinyMCE.get(id);
      var dom = tinymce.DOM;
      $(\'#wp-content-editor-container, #post-status-info\').hide();
      dom.removeClass(\'wp-content-wrap\', \'html-active\');
      dom.removeClass(\'wp-content-wrap\', \'tmce-active\');
      $(this).addClass(\'active\');
      $(\'#gmet_content_wrap\').show();
    });
  
    $(document).on(\'click\', \'#content-tmce, #content-html\', function(e) {
      e.preventDefault();
      $(\'#content-gmet\').removeClass(\'active\');
      $(\'#gmet_content_wrap\').hide();
      $(\'#wp-content-editor-container, #post-status-info\').show();
    });
  
  })(jQuery);
  

  还有3个任务：在document ready上，我设置了一些css，最重要的是，我将选项卡标题标记添加到编辑器中。当用户单击我们的选项卡标题时运行第二个任务：隐藏标准编辑器，并显示我们的内容。到隐藏的标准编辑器，我从中复制并粘贴了som代码wp-admin/js/editor.js. 最后一个任务是最简单的，当单击标准选项卡标题时，我会隐藏选项卡内容并从选项卡标题中删除类“active”。

  gmet含量。php

  <div id="gmet_content_wrap" class="wp-editor-container">
    <!-- Everything you want to output should go inside this div -->
    <h3>Hi there</h3>
    <p>
      <input type="text" class="regular-text" name="gmet_text" placeholder="Example" />
    </p>
    <p>
     <textarea name="gmet_textarea" cols="100" id="gmet_textarea" rows="10"></textarea>
    </p>
  </div>
  

  此文件包含aour选项卡中显示的内容。这只是一个示例，可以根据需要进行自定义，只需记住在包装器div中添加所有内容。

  现在，只需在插件目录中创建一个文件夹，保存其中的所有3个文件，然后转到dasboard并激活插件。

  所有文件都可用作Gisthere.