【WordPress】不要なクイックタグを非表示＆必要なクイックタグを追加

ＷｏｒｄＰｒｅｓｓのテキストモードの便利な機能、クイックタグを使いこなしていますか？ 『このタグ使ってないから邪魔だなぁ』という不要なクイックタグのボタンを非表示にし、『このタグのボタンがあればいいのになぁ』という必要なクイックタグのボタンを追加したい。 今日は、クイックタグをもっともっと便利にする方法を紹介します。

ＷｏｒｄＰｒｅｓｓの投稿編集画面には、テキストモードと、ビジュアルモードがあります。 テキストモードは、自分でタグを打ち込んで文章を作成するモードです。 ビジュアルモードは、画像や文字の装飾など、実際の見た感じに近い状態を見ながら編集していきます。

筆者は、ビジュアルモードは使いにくいと感じるので、テキストモードを使用しています。 今回紹介するクイックタグは、テキストモードについてです。 テキストモードには、本文入力フォームの真上に、クイックタグのボタンが並んでいます。

元の状態のクイックタグ

このように、ずらーっとボタンが並んでいます。ほとんどが使わないタグのボタンばかりでした。

『使わないボタンは消してしまえないのかなぁ。』

『反対に、よく使うタグを追加出来ないのかなぁ。』

と思い、調べてみました。

デフォルトのクイックタグ

上の画像の、赤枠内は、ＷｏｒｄＰｒｅｓｓのデフォルトで登録されているクイックタグです。 赤枠以外の部分は、校正ボタンを除いて、Ｓｔｉｎｇｅｒ７オリジナルのクイックタグです。 校正ボタンは、Ｊｅｔｐａｃｋです。 今は表示されていませんが、これらのボタンプラス、インストールしているプラグインの『Ｑｕｉｃｋ　Ａｄｓｅｎｓｅ』のクイックダグも表示されていました。 Ｑｕｉｃｋ　Ａｄｓｅｎｓｅの場合は、設定画面で表示しないように出来ます。

Ｑｕｉｃｋ　Ａｄｓｅｎｓｅのクイックタグを非表示にする

メニュー→設定→Ｑｕｉｃｋ　Ａｄｓｅｎｓｅで、設定画面を表示させます。 赤枠の中の一番上以外のチェックボックスを全てチェック入れます。 赤枠の一番上の、『Ｓｈｏｗ　Ｑｕｉｃｋｔａｇ　Ｂｕｔｔｏｎｓ　Ｏｎ　Ｔｈｅ　ＨＴＭＬ　Ｅｄｉｔ　Ｐｏｓｔ　ＳｕｂＰａｎｅｌ』のチェックボックスはチェックを入れていない状態にします。

Ｓｔｉｎｇｅｒ７オリジナルクイックタグを非表示にする

//Ｓｔｉｎｇｅｒ７オリジナルクイックタグ非表示
if (!function_exists('st_add_orignal_quicktags')) {
	function st_add_orignal_quicktags() {
		if ( wp_script_is( 'quicktags' ) ) { ?>
	<script type="text/javascript">

	</script>
	<?php
		}
	}
}
add_action('admin_print_footer_scripts', 'st_add_orignal_quicktags');

Ｓｔｉｎｇｅｒ７の親テーマの方の、ｆｕｎｃｔｉｏｎ．ｐｈｐの中に、上記のような記述があります。 親テーマの方は、６行目のところに、クイックタグを追加するコードがずらっと記述されています。 子テーマには、その空っぽバージョンを追加します。 そうすることで、親テーマの方のクイックタグの追加が無効になります。これで、Ｓｔｉｎｇｅｒ７オリジナルのクイックタグが非表示になりました。

校正ボタンを非表示にする

英語のスペルなどをチェックしてくれるボタンです。これも非表示にします。 これは、Ｊｅｔｐａｃｋの機能なので、Ｊｅｔｐａｃｋの設定画面を表示させます。

※この段階で、すでに非表示になってしまっているボタンがあります。 右端上部にあった、集中執筆モードボタン（フルスクリーン）です。 画像を撮影するタイミングがおかしかったようです。本来は、この段階では表示されていますので、御了承下さい。 集中執筆モードボタンを非表示する方法は、のちほどお伝えします。

Ｊｅｔｐａｃｋ→設定です。 『スペルと文法』を停止にします。これで、校正ボタンは非表示になります。

デフォルトのクイックタグの不要なボタンを非表示にする

デフォルトのクイックタグの中でも、使わないものを非表示にします。 デフォルトで登録されていいるクイックタグは、『Ｂ（ｓｔｒｏｎｇ）』、『ｉ（ｅｍ）』、『ＬＩＮＫ』、『ｂ－ｑｕｏｔｅ（ｂｌｏｃｋｑｕｏｔｅ）』、『ｄｅｌ』、『ｉｎｓ』、『ｉｍｇ』、『ｕｌ』、『ｏｌ』、『ｌｉ』、『ｃｏｄｅ』、『ｍｏｒｅ』、『タグを閉じる（ｃｌｏｓｅ）』、『（集中執筆モード）』の１４個です。

//デフォルトクイックタグ必要タグのみ表示
function default_quicktags($qtInit) {
	$qtInit['buttons'] = 'link,del,ins,more,close';//ここに必要なクイックタグのＩＤを記述
	return $qtInit;
}
add_filter('quicktags_settings', 'default_quicktags', 10, 1);

上記のクイックタグの中で、不要なものを除き、必要なものだけをピックアップします。 上記のコードを、ｆｕｎｃｔｉｏｎ．ｐｈｐに追加します。 その際、３行目の部分に、必要なクイックタグのＩＤを記述します。 そうすることで、記述したデフォルトクイックタグ以外は非表示になります。 クイックタグのＩＤは、このページ内の『デフォルトクイックタグ一覧』を参照してください。

指定の以外クイックタグを非表示にする方法と、新しく追加する方法は、下記サイトを参照しました。

//デフォルトクイックタグ不要タグのみ非表示
function remove_html_editor_buttons( $qt_init) {
	$remove = array('strong','em','b-quote','img','ul','ol','li','code','dfw'); //ここに非表示にしたいクイックタグのＩＤを記述
	$qt_init['buttons'] = implode(',', array_diff(explode(',', $qt_init['buttons']), $remove));
	return $qt_init;
}
add_filter( 'quicktags_settings', 'remove_html_editor_buttons' );

一部を除いて全て非表示という方法を紹介しましたが、 上記のように、不要なクイックタグのみを記述する方法もあります。 非表示にしたいクイックタグの種類が少ない場合は、こちらのやり方の方が早いです。

デフォルトクイックタグ一覧

不要なクイックタグを全て非表示にした状態

きれいさっぱりしました。 あとは、必要なクイックタグを追加していきます。

クイックタグを追加する

上記のように、使いたいクイックタグを追加してみました。

//クイックタグ追加
function add_my_quicktag(){ 
?>
	<script type="text/javascript">
		QTags.addButton('br','BR','<br />','');
		QTags.addButton('p','P','<p>','</p>');
		QTags.addButton('blackbox','blackbox','<div class="blackbox">','</div>');
		QTags.addButton('table','table','<table><tbody>','</tbody></table>');
		QTags.addButton('tr-th','tr-th','<tr><th></th><th></th><th></th></tr>','');
		QTags.addButton('tr-td','tr-td','<tr><th></th><td></td><td></td></tr>','');
		QTags.addButton('code2', '[CODE]', '[code]&#039;, &#039;[/code]');
	</script>
<?php
}
add_action('admin_print_footer_scripts','add_my_quicktag');

上記のコードを、ｆｕｎｃｔｉｏｎ．ｐｈｐに追加します。 ５～１１行目の部分に、追加したいタグ等を記述します。

QTags.addButton('『ｉｄ』','『ｄｉｓｐｒａｙ』','『ａｒｇ１』','『ａｒｇ２』');
QTags.addButton('p','P','<p>','</p>');

『ｉｄ』は、そのクイックタグごとに決めます。『ｄｉｓｐｌａｙ』は、ボタンに表示される名前です。『ａｒｇ１』は、開始タグです。『ａｒｇ２』は、終了タグです。

をつけることも出来ます。

のような、ショートコードの追加も出来ます。

という風に、開始タグの部分に、いつくかのタグをまとめることも可能です。

＜img /＞＜br /＞のように、終了タグが存在しないものや、開始タグの部分にいくつかのタグをまとめてしまう場合は、

QTags.addButton('br','br','<br />','ここは空白');

最後の部分は空白にしておきます。

QTags.addButton('br','改行','<br />','ここは空白');

このように、Ｄｉｓｐｌａｙは、分かりやすく日本語にすることも可能です。

QTags.addButton('site_name','サイト名','Ｈｅｅｅｅ　Ｈｕｕｕｍ','');

このように、サイト名やＵＲＬ、よく使う文章を登録しておくのもオススメです。

ボタンの並び順を指定する

クイックタグの並び順を指定することも可能です。

//クイックタグ追加
function add_my_quicktag(){ 
?>
	<script type="text/javascript">
		QTags.addButton('br','BR','<br />','','','', 1 );
		QTags.addButton('p','P','<p>','</p>','','', 2 );
		QTags.addButton('blackbox','blackbox','<div class="blackbox">','</div>','','', 3 );
		QTags.addButton('table','table','<table><tbody>','</tbody></table>','','', 4 );
		QTags.addButton('tr1','TR2','<tr><th></th><th></th><th></th></tr>','','','', 5 );
		QTags.addButton('tr2','TR2','<tr><th></th><td></td><td></td></tr>','','','', 6 );
		QTags.addButton('code2', '[CODE]', '[code]&#039;, &#039;[/code]','','', 7 );
	</script>
<?php
}
add_action('admin_print_footer_scripts','add_my_quicktag');

先程追加したクイックタグを先頭に移動させたい場合は、

QTags.addButton('ｉｄ','ｄｉｓｐｒａｙ','ａｒｇ１','ａｒｇ２','ａｃｃｅｓｓ＿ｋｅｙ','ｔｉｔｌｅ','ｐｒｉｏｒｉｔｙ');
QTags.addButton('p','P','<p>','</p>'.'','' 2 );

ａｃｃｅｓｓ＿ｋｅｙとｔｉｔｌｅについては、今回は使わないので省略します。 その次のｐｒｉｏｒｉｔｙが、並び順です。 上記の場合なら、２番目に表示されます。 並び順を指定したい場合は、ａｒｇ２の後ろ、ａｃｃｅｓｓ＿ｋｅｙとｔｉｔｌｅは、’空白’にしておき、その後ろに、順番の数字を記述します。

デフォルトクイックタグの並び順を変更する

追加したクイックタグは、先程のように並び順を指定出来ますが、デフォルトクイックタグも並び順を変えたい場合があると思います。 その場合は、ｑｕｉｃｋｔａｇｓ．ｊｓとｑｕｉｃｋｔａｇｓ．ｍｉｎ．ｊｓの記述を変更します。

例えば、『ｌｉｎｋ』ボタンを、『タグを閉じる』ボタンの直前に、『ｍｏｒｅ』ボタンを、『［ＣＯＤＥ］』ボタンの直後に並び替えたいとします。

	// ensure backward compatibility
	edButtons[10]  = new qt.TagButton( 'strong', 'b', '<strong>', '</strong>', '', '', '', { ariaLabel: quicktagsL10n.strong, ariaLabelClose: quicktagsL10n.strongClose } );
	edButtons[20]  = new qt.TagButton( 'em', 'i', '<em>', '</em>', '', '', '', { ariaLabel: quicktagsL10n.em, ariaLabelClose: quicktagsL10n.emClose } );
	edButtons[30]  = new qt.LinkButton(); // special case
	edButtons[40]  = new qt.TagButton( 'block', 'b-quote', '\n\n<blockquote>', '</blockquote>\n\n', '', '', '', { ariaLabel: quicktagsL10n.blockquote, ariaLabelClose: quicktagsL10n.blockquoteClose } );
	edButtons[50]  = new qt.TagButton( 'del', 'del', '<del datetime="' + _datetime + '">', '</del>', '', '', '', { ariaLabel: quicktagsL10n.del, ariaLabelClose: quicktagsL10n.delClose } );
	edButtons[60]  = new qt.TagButton( 'ins', 'ins', '<ins datetime="' + _datetime + '">', '</ins>', '', '', '', { ariaLabel: quicktagsL10n.ins, ariaLabelClose: quicktagsL10n.insClose } );
	edButtons[70]  = new qt.ImgButton(); // special case
	edButtons[80]  = new qt.TagButton( 'ul', 'ul', '<ul>\n', '</ul>\n\n', '', '', '', { ariaLabel: quicktagsL10n.ul, ariaLabelClose: quicktagsL10n.ulClose } );
	edButtons[90]  = new qt.TagButton( 'ol', 'ol', '<ol>\n', '</ol>\n\n', '', '', '', { ariaLabel: quicktagsL10n.ol, ariaLabelClose: quicktagsL10n.olClose } );
	edButtons[100] = new qt.TagButton( 'li', 'li', '\t<li>', '</li>\n', '', '', '', { ariaLabel: quicktagsL10n.li, ariaLabelClose: quicktagsL10n.liClose } );
	edButtons[110] = new qt.TagButton( 'code', 'code', '<code>', '</code>', '', '', '', { ariaLabel: quicktagsL10n.code, ariaLabelClose: quicktagsL10n.codeClose } );
	edButtons[120] = new qt.TagButton( 'more', 'more', '<!--more-->\n\n', '', '', '', '', { ariaLabel: quicktagsL10n.more } );
	edButtons[130] = new qt.CloseButton();

})();

デフォルトのクイックタグについては、このように記述されています。［１０］や［１３０］がボタンの並び順です。 追加したクイックタグの並び順は、１～７なので、［１０］の『ｂ』ボタンより前にくるようになっています。 『ｂ』ボタンは、非表示にしているので、［３０］の『ｌｉｎｋ』ボタンの前にきています。

あと、デフォルトのクイックタグは、タグの前後に改行などが入っています。タグの前後についている『￥ｎ（\ｎ）』は改行です。『￥ｔ（\ｔ）』はタブです。 筆者の場合は、このような改行などが入るのがイヤなので、非表示にして、新たに追加しています。その際は、ｉｄをデフォルトと被らないように、『ｌｉ』なら、『ｌｉ２』など違うものにします。

この、ｊｓファイルの該当箇所の改行を削除して変更してしまうことも可能ですが、アップデートなど消えてしまった場合、また変更しなおしになるので、極力ｆｕｎｃｔｉｏｎ．ｐｈｐで変更の記述をするようにしています。

	// ensure backward compatibility
	edButtons[10] = new qt.TagButton( 'more', 'more', '<!--more-->\n\n', '', '', '', '', { ariaLabel: quicktagsL10n.more } );

	edButtons[20]  = new qt.TagButton( 'del', 'del', '<del datetime="' + _datetime + '">', '</del>', '', '', '', { ariaLabel: quicktagsL10n.del, ariaLabelClose: quicktagsL10n.delClose } );
	edButtons[30]  = new qt.TagButton( 'ins', 'ins', '<ins datetime="' + _datetime + '">', '</ins>', '', '', '', { ariaLabel: quicktagsL10n.ins, ariaLabelClose: quicktagsL10n.insClose } );
	edButtons[40]  = new qt.TagButton( 'strong', 'b', '<strong>', '</strong>', '', '', '', { ariaLabel: quicktagsL10n.strong, ariaLabelClose: quicktagsL10n.strongClose } );
	edButtons[50]  = new qt.TagButton( 'em', 'i', '<em>', '</em>', '', '', '', { ariaLabel: quicktagsL10n.em, ariaLabelClose: quicktagsL10n.emClose } );
	edButtons[60]  = new qt.TagButton( 'block', 'b-quote', '\n\n<blockquote>', '</blockquote>\n\n', '', '', '', { ariaLabel: quicktagsL10n.blockquote, ariaLabelClose: quicktagsL10n.blockquoteClose } );

	edButtons[70]  = new qt.ImgButton(); // special case
	edButtons[80]  = new qt.TagButton( 'ul', 'ul', '<ul>\n', '</ul>\n\n', '', '', '', { ariaLabel: quicktagsL10n.ul, ariaLabelClose: quicktagsL10n.ulClose } );
	edButtons[90]  = new qt.TagButton( 'ol', 'ol', '<ol>\n', '</ol>\n\n', '', '', '', { ariaLabel: quicktagsL10n.ol, ariaLabelClose: quicktagsL10n.olClose } );
	edButtons[100] = new qt.TagButton( 'li', 'li', '\t<li>', '</li>\n', '', '', '', { ariaLabel: quicktagsL10n.li, ariaLabelClose: quicktagsL10n.liClose } );
	edButtons[110] = new qt.TagButton( 'code', 'code', '<code>', '</code>', '', '', '', { ariaLabel: quicktagsL10n.code, ariaLabelClose: quicktagsL10n.codeClose } );
	edButtons[200]  = new qt.LinkButton(); // special case
	edButtons[210] = new qt.CloseButton();

})();

『ｍｏｒｅ』は、［１０］へ変更。 これで、１～７の追加したクイックタグの後ろにきます。 『ｌｉｎｋ』は、［２００］、『ｃｌｏｓｅ（タグを閉じる）』は、［２１０］に変更しました。 今後追加するタグの順番は、１１１～１９９に指定します。

という風な並び順で表示が可能になります。

筆者の場合は、このような並び順で使用しています。 よく使用するボタンは、下にくるようにしています。あまり使用しないものほど、上にくるようにしています。

理由は、スマホから記事を作成することも多く、その際、追加したクイックタグが増えてくると、本文入力フォームから遠い上の方のボタンが押しづらいためです。 スマホでも快適に編集したいので、よく使用するものほど下の方にくるようにしています。

次は、ｑｕｉｃｋｔａｇｓ．ｍｉｎ．ｊｓを開きます。

edButtons[10]=new b.TagButton("strong","b","<strong>","</strong>","","","",{ariaLabel:quicktagsL10n.strong,ariaLabelClose:quicktagsL10n.strongClose}),edButtons[20]=new b.TagButton("em","i","<em>","</em>","","","",{ariaLabel:quicktagsL10n.em,ariaLabelClose:quicktagsL10n.emClose}),edButtons[30]=new b.LinkButton,edButtons[40]=new b.TagButton("block","b-quote","\n\n<blockquote>","</blockquote>\n\n","","","",{ariaLabel:quicktagsL10n.blockquote,ariaLabelClose:quicktagsL10n.blockquoteClose}),edButtons[50]=new b.TagButton("del","del",'<del datetime="'+d+'">',"</del>","","","",{ariaLabel:quicktagsL10n.del,ariaLabelClose:quicktagsL10n.delClose}),edButtons[60]=new b.TagButton("ins","ins",'<ins datetime="'+d+'">',"</ins>","","","",{ariaLabel:quicktagsL10n.ins,ariaLabelClose:quicktagsL10n.insClose}),edButtons[70]=new b.ImgButton,edButtons[80]=new b.TagButton("ul","ul","<ul>\n","</ul>\n\n","","","",{ariaLabel:quicktagsL10n.ul,ariaLabelClose:quicktagsL10n.ulClose}),edButtons[90]=new b.TagButton("ol","ol","<ol>\n","</ol>\n\n","","","",{ariaLabel:quicktagsL10n.ol,ariaLabelClose:quicktagsL10n.olClose}),edButtons[100]=new b.TagButton("li","li","	<li>","</li>\n","","","",{ariaLabel:quicktagsL10n.li,ariaLabelClose:quicktagsL10n.liClose}),edButtons[110]=new b.TagButton("code","code","<code>","</code>","","","",{ariaLabel:quicktagsL10n.code,ariaLabelClose:quicktagsL10n.codeClose}),edButtons[120]=new b.TagButton("more","more","<!--more-->\n\n","","","","",{ariaLabel:quicktagsL10n.more}),edButtons[130]=new b.CloseButton}();

開いてみると、先程のｑｕｉｃｋｔａｇｓ．ｊｓと似た内容ですが、改行なしでギッシリ記述されていて見づらいです。 こちらにも同じような記述がされているので、該当の箇所を変更をします。

edButtons[10]=new b.TagButton("more","more","<!--more-->\n\n","","","","",{ariaLabel:quicktagsL10n.more}),edButtons[20]=new b.TagButton("del","del",'<del datetime="'+d+'">',"</del>","","","",{ariaLabel:quicktagsL10n.del,ariaLabelClose:quicktagsL10n.delClose}),edButtons[30]=new b.TagButton("ins","ins",'<ins datetime="'+d+'">',"</ins>","","","",{ariaLabel:quicktagsL10n.ins,ariaLabelClose:quicktagsL10n.insClose}),edButtons[40]=new b.TagButton("strong","b","<strong>","</strong>","","","",{ariaLabel:quicktagsL10n.strong,ariaLabelClose:quicktagsL10n.strongClose}),edButtons[50]=new b.TagButton("em","i","<em>","</em>","","","",{ariaLabel:quicktagsL10n.em,ariaLabelClose:quicktagsL10n.emClose}),edButtons[60]=new b.TagButton("block","b-quote","\n\n<blockquote>","</blockquote>\n\n","","","",{ariaLabel:quicktagsL10n.blockquote,ariaLabelClose:quicktagsL10n.blockquoteClose}),edButtons[70]=new b.ImgButton,edButtons[80]=new b.TagButton("ul","ul","<ul>\n","</ul>\n\n","","","",{ariaLabel:quicktagsL10n.ul,ariaLabelClose:quicktagsL10n.ulClose}),edButtons[90]=new b.TagButton("ol","ol","<ol>\n","</ol>\n\n","","","",{ariaLabel:quicktagsL10n.ol,ariaLabelClose:quicktagsL10n.olClose}),edButtons[100]=new b.TagButton("li","li","	<li>","</li>\n","","","",{ariaLabel:quicktagsL10n.li,ariaLabelClose:quicktagsL10n.liClose}),edButtons[110]=new b.TagButton("code","code","<code>","</code>","","","",{ariaLabel:quicktagsL10n.code,ariaLabelClose:quicktagsL10n.codeClose}),edButtons[200]=new b.LinkButton,edButtons[210]=new b.CloseButton}();

このｊｓファイルは、ｆｕｎｃｔｉｏｎ．ｐｈｐなどの場合と違って、記述を変更しただけでは反映されません。 ブラウザのキャッシュ等を削除して表示しなおします。

クイックタグ並び替え完了

『ｍｏｒｅ』ボタンと『ｌｉｎｋ』ボタンの並び替えが出来ました。

便利なクイックタグをカスタマイズすることで、更に便利に快適に編集が出来るようになります。 ぜひお試しくださいね。