プラグイン不要！WordPressのテキストエディタにタグ挿入クイックタグボタンを追加する方法

WordPressの、テキストエディターには、デフォルトで以下のようなクイックタグ（タグ挿入）ボタンがあります。

今回は、プラグインを使わずに、この独自のクイックタグボタンを追加して以下のようにしたいと思います。

主な手順

以下は、クイックタグを追加する主な手順です。

1. CSSスタイルを作成する
2. functions.phpにコードを貼り付ける

カスタマイズは、自分が想像していた以上に、簡単でした。

CSSスタイルを作成する

まずは、クイックタグで利用するHTML要素を装飾するスタイルを書きます。

style.css等に以下のように書いてください。

/*太字*/
.bold{
  font-weight:bold;
}

/*赤色*/
.red{
  color:#E50202;
}

functions.phpにコードを貼り付ける

次に、functions.phpに以下のコードを貼り付けます。

//テキストがエディタにクイックタグボタン追加
//http://webtukuru.com/web/wordpress-quicktag/
//https://wpdocs.osdn.jp/%E3%82%AF%E3%82%A4%E3%83%83%E3%82%AF%E3%82%BF%E3%82%B0API
if ( !function_exists( 'add_quicktags_to_text_editor' ) ):
function add_quicktags_to_text_editor() {
  //スクリプトキューにquicktagsが保存されているかチェック
  if (wp_script_is('quicktags')){?>
    <script>
      QTags.addButton('qt-bold','太字','<span class="bold">','</span>');
      QTags.addButton('qt-red','赤字','<span class="red">','</span>');
    </script>
  <?php
  }
}
endif;
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor' );

この中で重要なのは、以下の一文です。

QTags.addButton('qt-bold','太字','<span class="bold">','</span>');

QTags.addButtonは、テキストエディタにクイックタグを追加するコードです。

自分の利用状況に合わせてクイックタグを設定する

QTags.addButtonは、以下のようにして使います。

QTags.addButton(ID, ラベル, 開始タグ, 終了タグ);

終了タグが不要なHTMLを除けば、最低限これだけあれば動作します。

QTags.addButtonの機能を最大限利用すれば、これだけの引数が利用できます。

QTags.addButton(ID, ラベル, 開始タグ, 終了タグ, アクセスキー, タイトル, プロパティ, インスタンス);

それぞれは以下のような役割があります。

• ID：ボタンのID（必須）
• ラベル：ボタンに表示される名前（必須）
• 開始タグ：ボタンを押したときに最初に挿入するタグ
• 終了タグ：開始タグ挿入後にタグを投じるために挿入されるタグ
• アクセスキー：ボタンのショートカットアクセスキー
• タイトル：マウスオーバー時のツールチップ
• プロパティー：ツールバーのボタンの希望する順番を表す数値
• インスタンス：Quicktagsの特定のインスタンスにあるボタンを制限し、 存在しない場合はすべてのインスタンスに追加（あまり利用することはないかも）

詳しい仕様は以下を参照してください。

参考 クイックタグAPI – WordPress Codex 日本語版

参考 WordPressの投稿画面にプラグインを使わずに自作のクイックタグを追加する方法

まとめ

あとは、自分の環境に合ったスタイルを書いてQTags.addButton関数を利用して、必要なだけボタンを追加していけばOKです。

このカスタマイズは、CSSとfunctions.phpを変更するだけなので、比較的簡単に実装することができます。そして、テキストエディタで編集することで、好きなだけボタンを自由に追加していくことができます。

プラグインも利用する必要がないので、余分なプラグインも管理する手間も省けて、「記事作成時の利便性」やら、「管理面楽さ、設定の保守性」から見ても、便利なカスタマイズだと思います。

というわけで、「毎回記事を書くたびにテキストエディタで利用するHTMLタグをクイックタグボタンから手軽に使えるようにしたい」なんて場合はおすすめです。

追記：ビジュアルエディターでも同様の機能を実装したい場合は以下を参照してください。

WordPressのビジュアルエディター（TinyMCE）に独自タグ挿入用のスタイル選択ボックスを追加するカスタマイズ

前回、Wordpressのテキストエディターにタグ挿入ボタンを追加する方法を書きました。今回は、ビジュアルエディター...

nelog.jp

2016-04-14 17:35