
WordPressのテキストモードの便利な機能、クイックタグを使いこなしていますか? 『このタグ使ってないから邪魔だなぁ』という不要なクイックタグのボタンを非表示にし、『このタグのボタンがあればいいのになぁ』という必要なクイックタグのボタンを追加したい。 今日は、クイックタグをもっともっと便利にする方法を紹介します。
WordPressの投稿編集画面には、テキストモードと、ビジュアルモードがあります。 テキストモードは、自分でタグを打ち込んで文章を作成するモードです。 ビジュアルモードは、画像や文字の装飾など、実際の見た感じに近い状態を見ながら編集していきます。
筆者は、ビジュアルモードは使いにくいと感じるので、テキストモードを使用しています。 今回紹介するクイックタグは、テキストモードについてです。 テキストモードには、本文入力フォームの真上に、クイックタグのボタンが並んでいます。
元の状態のクイックタグ

このように、ずらーっとボタンが並んでいます。ほとんどが使わないタグのボタンばかりでした。
『使わないボタンは消してしまえないのかなぁ。』
『反対に、よく使うタグを追加出来ないのかなぁ。』
と思い、調べてみました。
デフォルトのクイックタグ

上の画像の、赤枠内は、WordPressのデフォルトで登録されているクイックタグです。 赤枠以外の部分は、校正ボタンを除いて、Stinger7オリジナルのクイックタグです。 校正ボタンは、Jetpackです。 今は表示されていませんが、これらのボタンプラス、インストールしているプラグインの『Quick Adsense』のクイックダグも表示されていました。 Quick Adsenseの場合は、設定画面で表示しないように出来ます。
Quick Adsenseのクイックタグを非表示にする

メニュー→設定→Quick Adsenseで、設定画面を表示させます。 赤枠の中の一番上以外のチェックボックスを全てチェック入れます。 赤枠の一番上の、『Show Quicktag Buttons On The HTML Edit Post SubPanel』のチェックボックスはチェックを入れていない状態にします。
Stinger7オリジナルクイックタグを非表示にする
/wp-content/themes/stinger7child/function.php
//Stinger7オリジナルクイックタグ非表示
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');
Stinger7の親テーマの方の、function.phpの中に、上記のような記述があります。 親テーマの方は、6行目のところに、クイックタグを追加するコードがずらっと記述されています。 子テーマには、その空っぽバージョンを追加します。 そうすることで、親テーマの方のクイックタグの追加が無効になります。これで、Stinger7オリジナルのクイックタグが非表示になりました。
校正ボタンを非表示にする

英語のスペルなどをチェックしてくれるボタンです。これも非表示にします。 これは、Jetpackの機能なので、Jetpackの設定画面を表示させます。
※この段階で、すでに非表示になってしまっているボタンがあります。 右端上部にあった、集中執筆モードボタン(フルスクリーン)です。 画像を撮影するタイミングがおかしかったようです。本来は、この段階では表示されていますので、御了承下さい。 集中執筆モードボタンを非表示する方法は、のちほどお伝えします。

Jetpack→設定です。 『スペルと文法』を停止にします。これで、校正ボタンは非表示になります。
デフォルトのクイックタグの不要なボタンを非表示にする

デフォルトのクイックタグの中でも、使わないものを非表示にします。
デフォルトで登録されていいるクイックタグは、『B(strong)』、『i(em)』、『LINK』、『b-quote(blockquote)』、『del』、『ins』、『img』、『ul』、『ol』、『li』、『code』、『more』、『タグを閉じる(close)』、『(集中執筆モード)』の14個です。
themes/stinger7child/function.php
//デフォルトクイックタグ必要タグのみ表示
function default_quicktags($qtInit) {
$qtInit['buttons'] = 'link,del,ins,more,close';//ここに必要なクイックタグのIDを記述
return $qtInit;
}
add_filter('quicktags_settings', 'default_quicktags', 10, 1);
上記のクイックタグの中で、不要なものを除き、必要なものだけをピックアップします。 上記のコードを、function.phpに追加します。 その際、3行目の部分に、必要なクイックタグのIDを記述します。 そうすることで、記述したデフォルトクイックタグ以外は非表示になります。 クイックタグのIDは、このページ内の『デフォルトクイックタグ一覧』を参照してください。
指定の以外クイックタグを非表示にする方法と、新しく追加する方法は、下記サイトを参照しました。
/wp-content/themes/stinger7child/function.php
//デフォルトクイックタグ不要タグのみ非表示
function remove_html_editor_buttons( $qt_init) {
$remove = array('strong','em','b-quote','img','ul','ol','li','code','dfw'); //ここに非表示にしたいクイックタグのIDを記述
$qt_init['buttons'] = implode(',', array_diff(explode(',', $qt_init['buttons']), $remove));
return $qt_init;
}
add_filter( 'quicktags_settings', 'remove_html_editor_buttons' );
一部を除いて全て非表示という方法を紹介しましたが、 上記のように、不要なクイックタグのみを記述する方法もあります。 非表示にしたいクイックタグの種類が少ない場合は、こちらのやり方の方が早いです。
デフォルトクイックタグ一覧
ID | Display | Arg1 | Arg2 |
---|---|---|---|
strong | b | <strong> | </strong> |
em | i | <em> | </em> |
link | link | <a href=”‘ + URL + ‘”> | </a> |
block | b-quote | \n\n<blockquote> | </blockquote>\n\n |
del | del | <del datetime=”‘ + _datetime + ‘”> | </del> |
ins | ins | <ins datetime=”‘ + _datetime + ‘”> | </ins> |
img | img | <img src=”‘ + src + ‘” alt=”‘ + alt + ‘” /> | - |
ul | ul | <ul>\n | </ul>\n\n |
ol | ol | <ol>\n | </ol>\n\n |
li | li | \t<li> | </li>\n |
code | code | <code> | </code> |
more | more | <!–more–>\n\n | - |
close | close | - | - |
dfw | dfw() | ? | - |
不要なクイックタグを全て非表示にした状態

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

上記のように、使いたいクイックタグを追加してみました。
/wp-content/themes/stinger7child/function.php
//クイックタグ追加
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]', '[/code]');
</script>
<?php
}
add_action('admin_print_footer_scripts','add_my_quicktag');
上記のコードを、function.phpに追加します。 5~11行目の部分に、追加したいタグ等を記述します。
QTags.addButton('『id』','『dispray』','『arg1』','『arg2』');
QTags.addButton('p','P','<p>','</p>');
『id』は、そのクイックタグごとに決めます。『display』は、ボタンに表示される名前です。『arg1』は、開始タグです。『arg2』は、終了タグです。
タグにCLASS名
をつけることも出来ます。
[code][/code]
のような、ショートコードの追加も出来ます。
<tr><th></th><th></th><th></th></tr>
という風に、開始タグの部分に、いつくかのタグをまとめることも可能です。
<img /><br />のように、終了タグが存在しないものや、開始タグの部分にいくつかのタグをまとめてしまう場合は、
QTags.addButton('br','br','<br />','ここは空白');
最後の部分は空白にしておきます。
QTags.addButton('br','改行','<br />','ここは空白');
このように、Displayは、分かりやすく日本語にすることも可能です。
QTags.addButton('site_name','サイト名','Heeee Huuum','');
このように、サイト名やURL、よく使う文章を登録しておくのもオススメです。
ボタンの並び順を指定する

クイックタグの並び順を指定することも可能です。
/wp-content/themes/stinger7child/function.php
//クイックタグ追加
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]', '[/code]','','', 7 );
</script>
<?php
}
add_action('admin_print_footer_scripts','add_my_quicktag');
先程追加したクイックタグを先頭に移動させたい場合は、
QTags.addButton('id','dispray','arg1','arg2','access_key','title','priority');
QTags.addButton('p','P','<p>','</p>'.'','' 2 );
access_keyとtitleについては、今回は使わないので省略します。 その次のpriorityが、並び順です。 上記の場合なら、2番目に表示されます。 並び順を指定したい場合は、arg2の後ろ、access_keyとtitleは、’空白’にしておき、その後ろに、順番の数字を記述します。
デフォルトクイックタグの並び順を変更する

追加したクイックタグは、先程のように並び順を指定出来ますが、デフォルトクイックタグも並び順を変えたい場合があると思います。 その場合は、quicktags.jsとquicktags.min.jsの記述を変更します。
例えば、『link』ボタンを、『タグを閉じる』ボタンの直前に、『more』ボタンを、『[CODE]』ボタンの直後に並び替えたいとします。
【変更前】/wp-includes/js/quicktags.js // 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();
})();
デフォルトのクイックタグについては、このように記述されています。[10]や[130]がボタンの並び順です。 追加したクイックタグの並び順は、1~7なので、[10]の『b』ボタンより前にくるようになっています。 『b』ボタンは、非表示にしているので、[30]の『link』ボタンの前にきています。
あと、デフォルトのクイックタグは、タグの前後に改行などが入っています。タグの前後についている『¥n(\n)』は改行です。『¥t(\t)』はタブです。 筆者の場合は、このような改行などが入るのがイヤなので、非表示にして、新たに追加しています。その際は、idをデフォルトと被らないように、『li』なら、『li2』など違うものにします。
この、jsファイルの該当箇所の改行を削除して変更してしまうことも可能ですが、アップデートなど消えてしまった場合、また変更しなおしになるので、極力function.phpで変更の記述をするようにしています。
【変更後】/wp-includes/js/quicktags.js // 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();
})();
『more』は、[10]へ変更。 これで、1~7の追加したクイックタグの後ろにきます。 『link』は、[200]、『close(タグを閉じる)』は、[210]に変更しました。 今後追加するタグの順番は、111~199に指定します。
『more』『del』『ins』
この間に追加したクイックタグを表示
『link』『close』
という風な並び順で表示が可能になります。
筆者の場合は、このような並び順で使用しています。 よく使用するボタンは、下にくるようにしています。あまり使用しないものほど、上にくるようにしています。

理由は、スマホから記事を作成することも多く、その際、追加したクイックタグが増えてくると、本文入力フォームから遠い上の方のボタンが押しづらいためです。 スマホでも快適に編集したいので、よく使用するものほど下の方にくるようにしています。
次は、quicktags.min.jsを開きます。
【変更前】/wp-includes/js/quicktags.min.js
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}();
開いてみると、先程のquicktags.jsと似た内容ですが、改行なしでギッシリ記述されていて見づらいです。 こちらにも同じような記述がされているので、該当の箇所を変更をします。
【変更後】/wp-includes/js/quicktags.min.js
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}();
このjsファイルは、function.phpなどの場合と違って、記述を変更しただけでは反映されません。 ブラウザのキャッシュ等を削除して表示しなおします。
クイックタグ並び替え完了

『more』ボタンと『link』ボタンの並び替えが出来ました。
便利なクイックタグをカスタマイズすることで、更に便利に快適に編集が出来るようになります。 ぜひお試しくださいね。
[…] その時の対処法はこの記事に詳しく書いてありました。 […]