ニケッチャニッキ

はてなブログ・WordPressカスタマイズ・Androidプログラミング

WordPressプラグインなしでテキストエディタにクイックタグ(ボタン)を追加する方法

よく使うタグはテキストエディタにクイックタグとして登録しておくと便利です。

プラグインを使う方法もありますが、今回はfunction.phpを修正する方法を紹介します。

クイックタグの追加方法

修正するのはfunction.phpで、次のように記述します。

// add more buttons to the html editor
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'ed_code', 'コード', '<pre><code>', '</code></pre>' );
    QTags.addButton('ed_marker', 'マーカー', '<span class="marker">', '</span>');
    QTags.addButton('ed_ads', 'アドセンス', '[[adsense]]', '');
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );は管理画面にJavaScriptコードを埋め込むための処理です。

<script type="text/javascript">~ </script>までのスクリプトが埋め込まれることになります。

QTags.addButtonの書き方

QTags.addButtonに渡す引数の説明です。

基本形:QTags.addButton( id, display, arg1, arg2 );
応用形:QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
  • id
  • (必須)HTMLでButtonのIDになる値です。一意になる必要があるので、デフォルトで使われているIDや自分で追加したIDの中で重複がないようにします。

  • display
  • (必須)ボタンに表示される文字です。日本語でも大丈夫なので、自分がわかりやすい名前を付けてください。

  • arg1
  • (必須)ボタンをクリックしたときに挿入したい開始タグを書きます。<pre><code>など複数のタグを組み合わせることもできます。

  • arg2
  • (オプション)終了タグを書きます。終了タグが必要ない場合やショートコードを追加する場合は空欄にします。

  • access_key
  • (オプション)ショートカットキーで入力できるようにしたい場合は指定します。IDと同じように一意である必要があります。

  • title
  • (オプション)HTMLでButtonのタイトルになる値です。

  • priority
  • (オプション)ツールバーに表示される順番を指定できます。

  • instance
  • (オプション)公式ガイドの説明では「Quicktagsの特定のインスタンスにあるボタンを制限し、 存在しない場合はすべてのインスタンスに追加します」となってますが、ちょっとよくわかりませんごめんなさい(;^ω^)あまり使うことはないと思います。

ここまでできたら下記の画像のようにテキストエディターにボタンが追加されているか確認してみてください。

参照元:WordPress Codex

デフォルトのボタンの削除方法

デフォルトで表示されるボタンの中に使わないボタンがある場合、削除することもできます。こちらの記事で紹介しているので、参考にしてみてください。