[WordPress]投稿画面にクイックタグを追加する方法[プラグインなし]

WordPressの投稿画面に並んでいる、こちら。

押すだけで、簡単に特定のタグを挿入できるクイックタグ。
WordPressでたくさん記事を書いていけば行くほど、
自身が記事を書く際に頻繁に使うhtmlタグや、入力項目がわかってくるかと思います。

それを、1クリックで簡単に入力できたら便利ですよね。
この記事では、そんなクイックタグをプラグインに依存せず、自身で追加する方法について書きたいと思います。

クイックタグAPIを使ってボタンを追加する

早速ですが、WordPressにはデフォルトでクイックタグAPI というものが用意されています。

こちらを呼び出すためのコードを functions.php 内に追記することで、クイックタグの追加が可能になります。
functions.php 内に追記するコードは以下になります。

function add_quicktag_sample() {
  if (wp_script_is('quicktags')) :
    $qtag = '<script>';
    $qtag .= 'QTags.addButton( "sampleID", "h2", "<h2>", "</h2>", "", "h2タグ（見出し用）", 1, "", { ariaLabel: "h2タグ（見出し用）" } );';
    $qtag .= '</script>';
    echo $qtag;
   endif;
}
add_action( 'admin_print_footer_scripts', 'add_quicktag_sample' );

解説など

上記の例では、サンプルとしてh2タグを入力できるボタンを投稿画面に追加しています。
WordPress Codex の該当ページにある通り、

if (wp_script_is('quicktags')) :

この部分で、APIを呼び出すための条件を記述。
末尾の

endif;

までが、呼び出すボタンの内容になります。

重要なのが以下の部分です。

$qtag .= 'QTags.addButton( "sampleID", "h2", "<h2>", "</h2>", "", "h2タグ（見出し用）", 1, "", { ariaLabel: "h2タグ（見出し用）" } );';

QTags.addButton() には9つの引数を指定できます。
第一引数から順に、

id…出力されるボタンのhtmlのidに入る値。
display…出力されるボタンのhtmlのvalueに入る値。
arg1…ボタンを押すと出力される開始タグ。
arg2…ボタンを押すと出力される閉じタグ（必要なければ空欄にする）。
access_key…対応するキーボードを指定（必要なければ空欄にする）。
title…出力されるボタンのhtmlのtitleに入る値。
priority…ボタンの並び順。任意の数字で指定する。
instance…特定のインスタンスだけにボタンを追加する（必要なければ空欄にする）。
object Optional…その他オプション項目。現時点では ariaLabel と ariaLabelClose がサポートされている。

そして、

add_action( 'admin_print_footer_scripts', 'add_quicktag_sample' );

としてアクションフックを記述すれば、以下のように投稿画面にクイックタグボタンが追加できます。

プラグインの場合

以上で、記事投稿画面に任意のクイックタグを追加することが可能なのですが、
もしプラグインで実装したい場合は有名な AddQuicktag があります。

私が経験した案件での場合は、クイックタグの追加のためだけにプラグインをインストールするよりも、クイックタグAPIを使って実装した方が柔軟だったため冒頭の方法をご紹介しましたが、もちろん、扱うWebサイトによってはそれぞれ優先すべきメリットがあるかと思いますので、この AddQuicktag プラグインを使うのも選択肢のひとつかと思います。

JAMstack、ヘッドレスCMSとWordPress

昨今、JAMstack、ヘッドレスCMSといった新しい概念が徐々にWeb制作の現場でもささやかれる場面が増えてきました。
もちろん素晴らしい概念で、普及すれば我々制作者にとっては新しい制作体験、ユーザーにとってもより良いパフォーマンスでのWebサイト体験をもたらす概念だと思います。
ただ現状では、（既存のWebサイト改修案件などでは特に）まだまだWordPressのシェアもじゅうぶん大きく、実際に現場で感じる感覚として需要もあるため、WordPressについてのスキルを習得していくことは無駄にはならないと個人的には感じています。（どのみちWordPressが優れたCMSであることに変わりはないため。）

当サイトでも最近は Vue.js や Firebase の記事など、WordPressとは別のジャンルを更新する機会が増えていますが、WordPressについての記事も引き続き随時、更新を行っていく予定です。

この記事をシェアする：