テキストエディタにボタンを追加する

概要

WordPress管理画面のビジュアルエディタではなく、テキストエディタにクイックタグのボタンを追加する方法です。
クイックタグを追加する事で、よく使うタグを簡単に引き出せるようになります。

クイックタグの追加

クイックタグの追加はとても簡単で、WordPressの管理画面に以下のようなJavaScriptを追加するだけで実装する事が出来ます。

QTags.addButton( 'test-button', 'ボタンの名前', '<span>', '</span>' );

上記のコードを利用すると、WordPress投稿編集画面のテキストエディタに <span> タグを追加出来るボタンを追加する事が出来ます。
挿入するコードは、上記のコードの3,4番目のパラメータを使用して変更する事が可能です。
例えば、<span>タグではなく、<strong>タグを挿入したい場合は以下のように変更します。

QTags.addButton( 'test-button', 'ボタンの名前', '<strong>', '</strong>' );

また、タグと閉じタグを同時に入力してしまいたい場合は、以下のように記述する事で可能になります。

QTags.addButton( 'test-button', 'ボタンの名前', '<strong></strong>', '' );

ボタンをアクセスキーを利用してすぐに入力出来るようにしたい場合は、
5番目のパラメータにキーを設定する事で可能になります。
以下の設定ですと Shift+Alt+k でショートカットが可能になります。(何故か私の環境ですと出来たり出来なかったりします)

QTags.addButton( 'test-button', 'ボタンの名前', '<strong></strong>', '', 'k' );

6番目のパラメータはボタンのtitle属性を設定するのに利用されます。
これはボタンをマウスオーバーした時に、どのような説明を表示するのかを設定する事が出来ます。

QTags.addButton( 'test-button', 'ボタンの名前', '<strong></strong>', '', 'k', 'ボタンの説明' );

7番目のパラメータはボタンの優先度を設定します。
ここに設定した数値が大きい程、ボタンが左側に表示されるようになります。

QTags.addButton( 'test-button', 'ボタンの名前', '<strong></strong>', '', 'k', 'ボタンの説明', 10 );

上記で紹介したパラメータの他にも１つパラメータが存在しますが、用途が上手く掴めない為に割愛させていただきます。
また、手っ取り早くボタンの追加をテストしたい方は、以下のコードをご利用のテーマファイルのfunctions.phpの中に記述してみて下さい。
テキストエディタに <span> のタグを挿入するボタンが追加されます。

// 管理画面にスクリプトを追加
function wpx_add_admin_header_script() {
    echo "<script>jQuery(document).ready(function(){QTags.addButton( 'test-button', 'ボタンのテスト', '<span>', '</span>' );});</script>" . "\n";
}
add_action( 'admin_head', 'wpx_add_admin_header_script' );