WordPressの編集画面では、本文入力欄の上に用意されているツールバーで、リンクや強調など代表的なHTMLタグを素早く入力できる。しかし、サイトの設計によっては「<div class="answer">」のような独特のタグの方が使用頻度が高いこともある。
このようなタグを、いちいちキーボードでタイプして入力するのは面倒臭すぎる。
ブラウザ上で快適に編集を行いたければ、ツールバーをカスタマイズして、よく使うタグの入力ボタンを追加してやろう。プラグインを使わなくても、テーマディレクトリの「functions.php」にちょっとしたスクリプトを記述するだけでカスタマイズ可能だ。
方法は「ビジュアル」と「テキスト」の編集モードごとに異なるので、普段使っているモードに対応した方法を試してみよう。

・Quicktags API ≪ WordPress Codex

・TinyMCE Custom Buttons ≪ WordPress Codex

function my_quicktags_js(){
	?><script>
	QTags.addButton('answer','ans','<div class="answer">','</div>','a','QA記事の回答',1);
	
	QTags.addButton('divclass','div class','<div class="">','</div>','a','div class',2);
	edButtons[2].callback=function(a,b,c){
		if(false===this.isOpen(c)){
			this.tagStart='<div class="'+prompt('class="','')+'">';
		}
		this.tagEnd='</div>';
		QTags.TagButton.prototype.callback.apply(this,arguments)
	};
	</script><?php
}
add_action('admin_footer-post-new.php','my_quicktags_js');
add_action('admin_footer-post.php','my_quicktags_js');

HTMLのコードを直接編集する「テキスト」モードの編集欄にタグ入力ボタンを追加するには、上記のようなコードをfunctions.phpに追加すればいい。
「add_action」で登録された関数によって、編集画面上にJavaScriptが挿入される。JavaScript上では「QTags.addButton」を呼び出すことでボタンを追加している。addButtonのパラメーターには、識別名、表示名、開始タグ、終了タグ、アクセスキー、ツールチップテキスト、表示位置を順に指定する。

2つ目の例のようにすれば、ボタンが押されたときにJavaScript関数を実行してタグを生成することも可能だ。「edButtons[2]」の[]内には、QTags.addButtonで指定した表示位置を指定。this.tagStart=の部分で、「prompt」で表示した入力ダイアログへの入力内容を元に開始タグを生成しているぞ。

また、JavaScriptに「delete(edButtons[20])」のような処理を記述すれば、既存のボタンを削除することも可能だ。[]の中の数字は表示位置を指定。標準のボタンは、「10」が「b」、「20」が「i」のように、10の倍数の表示位置に登録されている。

このように、入力欄の上のツールバーにボタンが追加され、クリックすることで素早くタグを入力できるようになるぞ。

function my_editorbuttons_js(){
	?><script>
	tinymce.PluginManager.add('myplugin', function(ed,url){
		ed.addButton('mybutton',{
			text:'D',
			tooltip:'div class',
			onclick:function(){
				ed.selection.setContent('<div class="'
					+prompt('class','')+'">'
					+ed.selection.getContent({format : 'html'})
					+'</div>');
			}
		});
	});
	</script><?php
}
add_action('wp_tiny_mce_init','my_editorbuttons_js');

function my_mce_plugins($plugins){
	$plugins[]='-myplugin';
	return($plugins);
}
add_filter('tiny_mce_plugins','my_mce_plugins');

function my_mce_buttons($buttons){
	return(array(
		'mybutton',
		'bold','italic','strikethrough',
		'bullist','numlist','blockquote','hr',
		'alignleft','aligncenter','alignright',
		'link','unlink','wp_more','wp_adv',
	));
}
add_filter('mce_buttons','my_mce_buttons');

function my_mce_buttons2($buttons){
	return(array(
		'formatselect','underline','alignjustify',
		'forecolor','pastetext','removeformat',
		'outdent','indent','charmap','undo','redo','wp_help',
	));
}
add_filter('mce_buttons_2','my_mce_buttons2');

/***** 標準で未設置の実装済みボタン *****
	'subscript','superscript','wp_code','alignnone','styleselect',
	'fontselect','fontsizeselect','backcolor','dfw','media',
	'cut','copy','paste','remove','selectall','newdocument','fullscreen',
*/

実際のブラウザの表示に近い見栄えで編集できる「ビジュアル」モードの編集欄へのボタンの追加は、少々大がかりだ。
一つ目の「wp_tiny_mce_init」フィルタでは、エディタに拡張機能を登録するJavaScriptを編集画面に埋め込む。「ed.addButton」の部分が、ボタンの定義を追加する処理だ。ボタンを押したときの処理では、「ed.selection.getContent({format : 'html'})」で選択範囲のHTMLを取得し、「ed.selection.setContent」で選択範囲を上書きすることで、タグの挿入を実現している。

2つめの「tiny_mce_plugins」フィルタでは、定義したプラグインを初期化対象に加えている。
さらに、「mce_buttons」や「mce_buttons_2」フィルタでツールバーに実際に表示するボタンのリストを指定する。追加したボタンを表示させるには、ed.addButtonの第1パラメーターで指定した識別名を記述しよう。

ビジュアルモードの標準ボタンにはアイコンが存在するが、今回の例で追加したボタンは、アイコンの代わりに「text」で指定したテキストが表示される。