WordPressのQuickTags APIを使って文章の先頭と末尾のテンプレート(+α)を作成する。

はじめに

本サイトでは時々$\LaTeX$関連の記事を書いていますが、$\LaTeX$にはスタイルファイルというものがあり、そこに文章中でよく使う言い回し等を出力するためのマクロ等を定義しておくと、$\LaTeX$の文章中でそのマクロを書くだけで一撃で記述することができます。

なお、LaTeXについてはこちらの本がお勧めです↓

<br />

本サイトの管理人たるpandaも(少し前の版ですが)持っていますが、わかりやすいです。

閑話休題。

WordPressでもLaTeXのマクロと似たようなことができないかと思って調べてみると、QuickTags APIというのがあることがわかったので、これを使って文章の先頭と末尾のテンプレートを作ってみることにしました。

ついでに、複数のタグをまとめて挿入する方法もその2として書きます。

追加例(その1): top-bottomタグの追加

まず、記事の全体的な構成を維持するためのタグを挿入するためのボタン(top-bottomボタン)を追加します。

関数の追加

QuickTags APIを実行するための関数を以下の手順で追加します。

以下のコードをfunction.phpの末尾に追加します。これによりアクションフック”admin_print_footer_scripts”にadd_quicktags_to_text_editor関数を追加できます。
<?php
if (!function_exists(‘add_quicktags_to_text_editor’)):
function add_quicktags_to_text_editor() {
  if (wp_script_is(‘quicktags’)) {?>
  <script>
  QTags.addButton(‘top-bottom’,’top-bottom’,'<h2>はじめに</h2>\n\n<h2></h2>\n\n’,'<h2>まとめ</h2>\n\nこの記事は以上です。’);
  </script>
  <?php
  }
}
endif;
add_action(‘admin_print_footer_scripts’,’add_quicktags_to_text_editor’);
?>
手順1のコードを追加したfunction.phpを保存します。
WordPressの管理画面から「投稿の編集」画面を読み込んで、テキストエディタを表示させてみて、その上部にtop-bottomボタンが追加されていることを確認します。

使用法

前節で追加したtop-bottomボタンをClass Editorで記事の作成を開始する際に押すと…

というように、書き出しの部分のテンプレートを追加できます。また、top-bottomボタンのラベルが”/top-bottom”ボタンのように変化しているのが確認できると思います。

さらに、記事の末尾でtop-bottomボタンを押すと…

のように記事のまとめのテンプレート部分を追加することができます。

追加例(その2): youtubeタグの追加

本サイトの記事の中にはYouTubeの説明用動画が埋め込まれているものがあります。この埋め込み用のタグが少々長いのですが、途中に動画のIDを入れなくてはなりません。IDを書き込むのはやむを得ないにしても、他の部分はテンプレートにしておけば、入力の手間が省けます。そこで、YouTubeの説明用動画の埋め込み作業を簡単するためのテンプレートを追加してみます。

関数の追加

以下のようにfunction.phpに書くと、作成することができます。QTags.addButton関数の第4引数に空文字列を指定するのがポイントです。第4引数に空文字列を指定すると、ボタンを押しても文字列が切り替わらなくなるので、繰り返し押すことでテンプレートを押した回数分だけ挿入できます。

<?php
if (!function_exists(‘add_quicktags_to_text_editor’)):
function add_quicktags_to_text_editor() {
  if (wp_script_is(‘quicktags’)) {?>
  <script>
  QTags.addButton(‘youtube’,’youtube’,'<div class=”youtube”><iframe src=”//www.youtube.com/embed/?rel=0&loop=0&autoplay=0″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>’,”);
  </script>
  <?php
  }
}
endif;
add_action(‘admin_print_footer_scripts’,’add_quicktags_to_text_editor’);
?>

function.phpを保存して、WordPressの管理画面から「投稿の編集」画面を読み込んで、テキストエディタを表示させてみると、その上部に…