WordPress・プラグインを使わずHTMLエディタへクイックタグ追加

本稿の公開は2011年です。内容・仕様が、現在と異なる場合があります。ご了承ください。

WordPress 3.3 のベータ版を試用して、気付いた点があります。

プラグインで追加した HTML エディタのクイックタグが、表示されないのです。関係する、/wp-includes/js フォルダの quicktags.dev.js と quicktags.js が改変されたことによります。

これまで、AddQuicktag プラグインを愛用してきました。3.3 に対応したバージョンがリリースされない限り、プラグインを用いる方法は使えません。

プラグインを使わず、クイックタグを追加したい。

WordPress 3.3のHTMLエディターにクイックタグを追加するに、functions.php を使った方法が書いてあります。本稿は、3.2.x でも利用できる別の方法を書きます。eigene Quicktags auch WP 3.3 sicher を参考にしました。

functions.php

functions.php に、次のコードを記述します。


    <?php
  		function my_custom_quicktags() {
  			wp_enqueue_script(
  				'my_custom_quicktags',
  				get_template_directory_uri() . '/js/custom-quicktags.js',
  				array( 'quicktags' )
  			);
  		}
  		add_action( 'admin_print_scripts', 'my_custom_quicktags' );
    ?>
    

function 名・js ファイル名と、テーマディレクトリ以下のフォルダは任意です。続いて、クイックタグを表示する js ファイルを作成します。

jsファイル(クイックタグ)

以下の形式で記述します。


    edButtons[edButtons.length] = new edButton( '段落', 'p', '<p>', '</p>', '' );
    edButtons[edButtons.length] = new edButton( '小見出し', 'h3', '<h3>', '</h3>', '' );
    

カッコ内は、タイトル(title属性)・タグの名前・開始タグ・終了タグ・アクセスキーの順です。アクセスキーは空欄でも差し支えないでしょう。終了タグがない場合は空欄にします。

必要な数のタグを作成後、functions.php で指定したフォルダへアップするだけです。

作成したファイルは、3.2.x・3.3 の両方に対応します。タグの削除や追加も容易で、プラグインを減らす効果もあります。

不要なデフォルトボタンを消す

クイックタグをカスタマイズすると、不要なデフォルトのボタンが出てきます。3.3 の場合は WordPress 3.3 の HTML エディターにクイックタグを追加するで書いてある、フィルターフック「quicktags_settings」が使えます。実装されていない3.2.x以下では、quicktags.dev.js と quicktags.js を直接書き換えます。

quicktags.dev.js ファイルの場合、/* ~ */ や // でコメントアウトします。対象は次の箇所です。


    edButtons[edButtons.length] =
  	new edButton('ed_タイトル'
  		,'タグの名前'
  		,'開始タグ'
  		,'終了タグ'
  		,'アクセスキー'
  	);

    t.Buttons[t.Buttons.length] = new edButton(name+'_タイトル','タグの名前','開始タグ','終了タグ','アクセスキー')
    

quicktags.js は、1行で構成されています。消したいタグで改行してコメントアウトし、表示したいタグで再度改行するといいでしょう。対象は次の箇所です。


    edButtons[edButtons.length]=new edButton("ed_タイトル","タグの名前","開始タグ","終了タグ","アクセスキー");
    j.Buttons[j.Buttons.length]=new edButton(a+"_タイトル","タグの名前","開始タグ","終了タグ","アクセスキー");