web-dev-qa-db-ja.com

ページエディタに新しいタブを追加する方法

誰もがこれを達成する方法を知っていますか？

enter image description here

メタボックスとは関係がありますが、適切な構文を理解することはできません。

postspagesmetabox
5
Tony Bogdanov

私がこれをしたら、昨日私はどこで見つけたが、そのコードは... badであることを思い出しました。それで今日私は少しそれを改良しました、そして、私は共有するつもりです。私がしていることを説明したいと思う前に。

まず第一に、やるべきことが3つあります。

  1. 標準の横にタブのタイトルを追加する2
  2. タブの内容に何かを追加する
  3. タブタイトルをクリックしたときにコンテンツを表示し、標準タブタイトルをクリックしたときにコンテンツを非表示にする

ほとんどのものはjsを必要とするので、jsを正しいページ（post.phpとpost-new.php）にエンキューする必要もあります。

第一に できません これらのボタンのマークアップはwp_editor関数から直接エコーされるため、PHPで処理することはできません。だから唯一のチャンスはJavaScriptでそれらを追加することです。

第二に、the_editorフィルタをフックする関数を使用して、PHP経由で簡単に行うことができます。

3点目は、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つの機能しかありません：最初のセットアップはフック、2番目はページにJavaScriptを追加、3番目はタブページにコンテンツを追加する責任があります。

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つのタスク：ドキュメントの準備ができたら、CSSをいくつか設定します。そして最も重要なのは、タブのタイトルマークアップをエディタに追加することです。ユーザーがタブのタイトルをクリックすると、2番目のタスクが実行されます。標準エディタが非表示になり、コンテンツが表示されます。隠された標準エディタに私はwp-admin/js/editor.jsからsomコードをコピーして貼り付けました。最後の作業は最も簡単です。標準のタブタイトルをクリックすると、タブのコンテンツが非表示になり、タブタイトルからそのクラスの「アクティブ」が削除されます。

gmet-content.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の横にあるものすべてを追加することを忘れないでください。

では、pluginsディレクトリ内にフォルダを作成し、その中に3つのファイルをすべて保存してから、ダッシュボードに移動してプラグインを有効にします。

すべてのファイルはGist ここ として利用可能です。

5
gmazzap

これは簡単なことではありません。これはコアにハードコードされており、メタボックスとは関係ありません。

これらのタブのHTMLを調べると、wp-switch-editor switch-html and switch-tmceのようなクラスがいくつかあります。これらのクラスのコアコードを検索すると、これらのタブがどこで作成されているかがわかります。

最も難しい部分は、実際にそれを切り替えるJavaScriptを詳細に調べて、新しいタブのサポートを追加することです。

0
Michael Lewis