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

By | 2017年6月19日 , Last update: 2018年11月24日

はじめに

本サイトを訪問していただいた方や自分が後から読み直すときに、ある程度体裁が整っていないと、ユーザエクスペリエンス(UX)的にはあまり良くないと思います。また、本サイトでは時々LaTeX関連の記事を書いていますが、LaTeXではスタイルファイルというものがあり、そこに適当なマクロを定義しておくと、文章中でよく使う言い回しをマクロを書くだけで一撃で記述出来たりします。

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

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

閑話休題。

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

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

スポンサーリンク

作り方(その1)

QuickTags APIを実行するための関数をアクションフック”admin_print_footer_scripts”にフックすることにより追加します。

以下のコードをfunction.phpの末尾に追加します。

<?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’);
?>

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

上記のようにtop-bottomボタンが追加されているのが確認できます。

このボタンを記事の作成を開始する際に押すと…


スポンサーリンク

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

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

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

作り方(その2)

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

上記のテンプレートは以下のように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の管理画面から「投稿の編集」画面を読み込んで、テキストエディタを表示させてみると、その上部に…

YouTubeボタン(黒矢印)が表示されます。このボタンを動画を挿入したいところで押すと…

YouTube動画の表示用のタグ(黒矢印)が挿入されます。挿入されたタグの’/'(スラッシュ)と’?’の部分の間にYouTube動画のIDを追加するとYouTubeにアップロードされた動画が表示されます。

また、ボタンのラベルの文字列も切り替わらないことも確認できます。

スポンサーリンク

まとめ

この記事では、WordPressで記事を書く際のテンプレート的なものの挿入のためのコードの書き方について書きました。プラグインを使用せずにPHPのコードを書く方法なので、敷居が少々高いかもしれませんが、一度設定しておくと便利だと思いますので、参考にしていただければと思います。

この記事は以上です。