[WordPress]投稿画面のタグ挿入ボタンを自作！クイックタグ追加で編集を効率化しよう

こんにちは。でんすけ（@notgeek_densuke）です。

今回は「クイックタグ」なるものについて。

案外簡単に作れるので、
ブログ更新の作業効率化にぜひどうぞ。

投稿画面のボタンについて

なんの話かというと、この辺のボタンの話です。

例えば、デフォルトで付いている「b」のボタンを押すと、
<strong>
とタグが追加されます。

もう一回押すと
</strong>
と、閉じタグ追加。

あるいは、範囲選択した状態で押すと、
選択した文字を囲むようにタグが追加されます。

で、このボタン、
名前を「クイックタグ」といいます。

まぁ正直、strongぐらいなら自分でタイプしてもたいした時間かからないのでいいんですが、
もうちょっと複雑なタグが、ボタンワンクリックで書けると便利。

ということで、このボタン、クイックタグを自作しちゃいましょう！

クイックタグの追加

クイックタグの追加は意外と簡単で、
functions.phpに、こんな感じのコードを書けばOK。

function add_qtag() {
	if (wp_script_is('quicktags')){
?>
		<script type="text/javascript">
		/** 書式 : QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ', 'アクセスキー', 'タイトル', プライオリティ); **/
		QTags.addButton('spanred','赤','<span style="color:red;">','</span>','r','文字色赤',1);
		QTags.addButton('spanblue','青','<span style="color:blue;">','</span>','','文字色青',2);
		QTags.addButton('spangreen','緑','<span style="color:green;">','</span>','g','文字色緑',3);
		</script>
<?php
	}
}
add_action('admin_print_footer_scripts','add_qtag');

これで、文字色を赤、青、緑に変えるボタンを作成できます。

クイックタグの動作確認＆説明

実際に、編集画面に行くと、こんな感じになります。

「ボタンのラベル」に書いた文字がボタン上に表示されます。
マウスカーソルを当てておくと、「タイトル」に書いた文字が出てきます。
プライオリティを「1」にしておいたので、1番目にボタンが表示されています。

このボタンのHTMLコードを見てみると

<input type="button" id="qt_content_spanred" class="ed_button button button-small" title="文字色赤" value="赤">

「ID」に指定した「spanred」がidになっています。（「qt_content_」というプレフィックスは付いてますが）

あとは、「ボタンのラベル」が「value」に、「タイトル」が「title」に
それぞれ設定されます。

で、ボタンを押すと、「開始タグ」、「終了タグ」で指定した文字列が編集画面に挿入されます。

「アクセスキー」は、役割がよくわかりませんでした・・・
ショートカットに使われるらしい？

わからない場合、めんどくさい場合は、
「終了タグ」以降を省略できます。
こんな感じでもオッケ。

//終了タグまで
QTags.addButton('spanblue','青','<span style="color:blue;">','</span>');

//開始タグまで
QTags.addButton('br','改行','<br />/n');

「/n」で改行も入れられます。

クイックタグは、関数の実行も可能

ちょっと特殊な使い方として、
「開始タグ」のところに、関数名を指定することができます。

これにより、ボタンを押したときにタグを挿入するのではなく
関数を実行することができます。

ただし。
QTagはPHPのコードではなく、JavaScriptのコードです。
あくまでクライアント側で動作するコードなのでご注意を。

カンタンな例で、役に立つのかわかりませんが、
ボタンを押したら、執筆中の記事の「こんにちは」をすべて「こんばんは」に置き換えるボタンを作ろうとするとこんな感じになります。

function add_qtag2() {
	if (wp_script_is('quicktags')){
?>
		<!-- ここからはJavaScriptのコード -->
		<script type="text/javascript">
		QTags.addButton('testbutton','テスト',testFunc);
		function testFunc(){ 
			jQuery(function($){
				$("#wp-content-editor-container textarea").val( $("#wp-content-editor-container textarea").val().replace("こんにちは","こんばんは") );
				alert('置換しました！');
			});
		}
		</script>
		<!-- JavaScriptのコードここまで -->
<?php
	}
}
add_action('admin_print_footer_scripts','add_qtag2');

はい。
文字を置換して、アラートを出す、というコードです。

応用するともうちょっと複雑なこともできる気がしますが、
例としてはこんな感じです。

クイックタグの欠点

クイックタグ、設置しとくと便利ですが、
クイックタグでの編集内容はctrl + zで元に戻せないのが欠点といえば欠点です。

先ほどの「こんにちは」置換ボタンも、押したら元に戻せなくなるので、
実際に設置する場合はご注意くださいませ。

まとめ

ということで、クイックタグについてでした。

よく使うタグや定型文をボタンにしておくと、
ワンクリックで使えて便利です。

ぜひお使いくださいませ。

それではまたー。