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

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

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

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

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

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

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

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

WordPress › AddQuicktag « WordPress Plugins

WordPress › AddQuicktag « WordPress Plugins

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

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

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

WordPress › TinyMCE Advanced « WordPress Plugins

WordPress › Ultimate TinyMCE « WordPress Plugins

公式「Quicktags API」の解説

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

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

Quicktags API « WordPress Codex の公式ページ

Quicktags API « WordPress Codex

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

何ができるか

Quicktags API « WordPress CodexのDescription

ここには以下のように

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

と書かれています。

パラメータの種類

Quicktags API « WordPress Codexのパラメータの種類

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

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

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

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

必要なコード

Quicktags API « WordPress Codexのコードの例

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

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

理由は

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>や<mark>は変更してください。ここは当ブログの CSS で独自に指定しているタグなので、コピペしても他のテーマでは反映されません。

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

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

Quicktags API « WordPress Codexのデフォルトのタグ一覧

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

やってみた

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

新しくできたクイックタグ

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

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

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

注意点

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

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

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

 

関連記事

WordPress に設置した jQuery プラグインが動かない!Google にホスティングされている最新のバージョンに置き換えてライブラリ同士のコンフリクト(衝突)を回避する方法

WordPressにはデフォルトで本体内にjQueryが含まれています。基本的にはこれを使用すればいいのですが、たまに不具合が発生して動かなくなる場合があります。 たとえば、WordPressのjQueryプラグインとして配布されているもの…

【add_editor_style】ビジュアルエディターのスタイルシートを追加して投稿画面の本文デザインを調整する方法

編集画面のデザインが使いにくい! 自分でスタイルシートを編集して、サイトの表示デザインを変更することは比較的初心者の頃でもできますが、そのときに困るのが編集画面と投稿後の表示との差です。 もちろん、「プレビュー」をクリックしてみれば一発でわ…

WordPress の条件分岐でパソコンには表示させてもスマートフォンに表示させない方法

テーマ編集などでコンテンツを追加してくると、スマホとパソコンで表示を変えたくなってきますね。 「パソコンの大きな画面になら表示してもいいんだけど、スマホに表示させると画面からはみ出しちゃうな・・・」とか「スマの表示のこの場所に広告は出したく…