【Quicktags API】WordPress の新規投稿画面にクイックタグのボタンを作成してみた

2014.12.09 （最終更新日）

WordPress関数

エディタ, ソースコードあり

テキストモードに独自のボタンを追加したい

新規投稿画面のテキストモード

わたしは基本的にテキストモード（HTML エディタ）で記事を更新しています。困るのはデフォルトで備わっていない独自に設定したCSS の修飾をしたいときです。

たとえば、当ブログではリンク先の最後に「リンク先」のような小さい画像を付けてみたり、目立たせたい文字列には蛍光マーカーを加えたりします。

こういうのは自分でいちいちHTML属性や要素を書いていかないといけないのでめんどうです。

テキストモードにはプラグイン「AddQuicktag」がよさそう

そう思ってさがしてみたら、どうやら専用のプラグインがあるみたいですね。

WordPress › AddQuicktag « WordPress Plugins

解説は多くのサイトでされていますので調べてみてください。細かい設定やインポートエクスポート機能など便利な機能が付いているようです。

ビジュアルモードに便利なプラグイン

ちなみに、ビジュアルモードで記事投稿をされるのであれば、こちらのプラグインは定番でしょう。

WordPress › TinyMCE Advanced « WordPress Plugins

WordPress › Ultimate TinyMCE « WordPress Plugins

公式「Quicktags API」の解説

「AddQuicktag」プラグインは便利でよさそうなのですが、「なんかこれくらいなら別の方法で簡単にできそうやなあ」とおもったので、さらに調べてみることにしました。こういうときは、やはり公式サイトが役に立ちます。すると、ちゃんとありました。

公式にfunctions.php を編集する方法があった！

Quicktags API « WordPress Codex

残念ながら日本語訳はまだないようです（2014年11月17日）。しかたがないので、以下、意訳しながら説明を書いていきます。

何ができるか

ここには以下のように

The Quicktags API allows you to include additional buttons in the Text (HTML) mode of the WordPress editor.（Quicktags APIを使用すると、WordPress のエディタのテキスト（HTML）モードで追加のボタンを含めることができます。）

と書かれています。

パラメータの種類

WordPress は PHP でできているので、くわしい理解には PHP を勉強するしかありませんが、このようなコードで、クイックタグで使うボタンのパラメータを指定していきます。

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

id: ボタンの id 属性を決めます。
display: 投稿画面のテキストモードに表示させたいボタンの名前です。
arg1: 開始タグを指定します（例：）。
arg2: 閉じタグを指定します（例：）。
access_key: アクセスキーです。
title: ボタンのtitle 属性です。
priority: 優先度を決めます。
instance: インスタンスです。

クイックタグで表示させたいボタンの設定は上記の赤色太字4点です。それ以外のオプションを使えば、もう少し細かい設定もできるのですが、簡単なボタンであればこれだけで十分です。

必要なコード

このようなコードを functions.php に追加します（当ブログの場合）。

// HTMLエディタにクイックタグのボタンを追加
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
　　QTags.addButton('link-tab', '<link-tab>', '<span class="link-tab">', '</span>');
　　QTags.addButton('mark', '<mark>', '<span class="mark">', '</span>');
　　QTags.addButton('hutoji', '<b>', '<b>', '</b>');
　　</script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

// HTMLエディタにクイックタグのボタンを追加

function appthemes_add_quicktags() {

if (wp_script_is('quicktags')){

QTags.addButton('link-tab', '<link-tab>', '', '');

QTags.addButton('mark', '', '', '');

QTags.addButton('hutoji', '', '', '');

</script>

<?php

}

add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

注意書きとして、3行目と11行目を忘れないように、と書かれていました。

if (wp_script_is('quicktags')){
　　………
}

if (wp_script_is('quicktags')){

　　………

}

理由は

Note: to avoid a Reference Error we check to see whether or not the ‘quicktags’ script is in use.（注：’quicktags’スクリプトが使用されているかどうかを確認する参照エラーを避けるため）

だからだそうです。ほかのサイトでは、おそらく古い情報のために、ここの部分が書かれていないことがあります。

当ブログで追加したクイックタグは6-8行目のところになります。上のコードをコピペされる際には、6, 7行目の<link-tab>やは変更してください。ここは当ブログの CSS で独自に指定しているタグなので、コピペしても他のテーマでは反映されません。

「太字」については、デザイン的にはでも代用できますが、あまりに多用すると検索エンジンのクローラーに低い評価を受ける要因になるそうですから、別に作りました。デザイン的な太字にはを使い、強い意味を持たせて強調したいときにはを使う、という分け方にしています。

デフォルトで備わっている Quicktags 一覧

ここに書かれているのは WordPress にデフォルトで備わっているクイックタグの種類です。あたらしく独自に作るときにはこちらを参照して、同じにならないように注意しましょう。

やってみた

投稿画面のテキストモードに、新しくボタンができています。

いつもどおりに選択範囲を決めて、ボタンをクリックすれば、指定した文字列が自動的に挿入されます。

リンク先への画像
蛍光マーカー
太字

めっちゃ簡単になりました。

注意点

functions.php へのコードの追加は、必ず事前にバックアップをとって、エラーが起きたときにすぐに復旧できるようにしておくことが大事です。この程度の変更であればそんなに難しくないので、FTPクライアントソフトがあれば簡単にできます。

また、上記のクイックタグは、たとえばWordPress バージョン3.3 や3.9 になったときに一時的に利用できない時期があったようです。ほかのバージョンでも利用できない短い期間があったのかもしれませんが、未確認です（現在の4.0では使えます）。今後のバージョンアップによって利用できない可能性が出ないとはいえませんので、ご注意を。

さいごに、「Quicktag API」の利用の際には、必ず公式ページにて最新情報を確認したうえで、ご利用ください。上記の方法が難しく感じられるようであれば、プラグインを使うほうが簡単で、便利です。