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

WordPressのクラシックエディターのテキストモードの便利な機能、クイックタグを使いこなしていますか?
『このタグは使わないから邪魔だなぁ』という不要なクイックタグのボタンを非表示にし、『このタグのボタンがあればいいのになぁ』という必要なクイックタグのボタンを追加したい。
今日は、クイックタグをもっともっと便利にする方法を紹介します。
2022/5/31 追記: WordPress6.0に更新したところ、クラシックエディターのオリジナルクイックタグが表示されなくなりました。
表示させるための対策を追記しました。
も く じ
クイックタグとは?
クイックタグとは、クラシックエディターのテキストモードについている機能です。
本文入力フォームの上部に、ズラッと並んでいるボタンです。ボタンをクリックするだけで、各種タグを簡単に入力する事が出来ます。
元々デフォルトで表示されているボタンの中には、不要なものがあったり不足なものがあったりします。
クラシックエディターには、テキストモードとビジュアルモードがあります。テキストモードは、自分でタグを打ち込んで文章を作成するモードです。 ビジュアルモードは、画像や文字の装飾など、実際の見た感じに近い状態を見ながら編集していきます。
筆者は、ビジュアルモードは使いにくいと感じるので、テキストモードを使用しています。 クラシックエディターのテキストモードを愛用者にとっては、クイックタグは必須機能かと思います。
デフォルトクイックタグ

このようにズラッとボタンが並んでいます。
赤い枠で囲ったものがデフォルトクイックタグです。
青い枠で囲った『問い合わせフォーム』ボタンは謎でしたが、Jetpackの機能でした。非表示にする方法はこの後の項目で紹介します。
他に、プラグインやテーマオリジナルのクイックタグもデフォルトクイックタグの後ろに追加されます。 現在、プラグインは最小限使用、テーマは自作テーマを使用しているので余計なクイックタグはあまり表示されていませんが、使用するプラグインやテーマによってはたくさん表示されます。使わないクイックタグが並んでいると、必要なものを探しづらいのが難点です。
そこで、『使わないボタンは消してしまえないのかなぁ。』
反対に、『よく使うタグのボタンを追加出来ないのかなぁ。』と思い、調べました。
デフォルトクイックタグ一覧
- ID
- Display
- Arg1
- Arg2
- link
- link
- <a href="' + URL + '">
- </a>
- strong
- b
- <strong>
- </strong>
- code
- code
- <code>
- </code>
- del
- del
- <del datetime="' + _datetime + '">
- </del>
- em
- i
- <em>
- </em>
- li
- li
- \t<li>
- </li>\n
- img
- img
- <img src="' + src + '" alt="' + alt + '">
- -
- ol
- ol
- <ol>\n
- </ol>\n\n
- block
- b-quote
- \n\n<blockquote>
- </blockquote>\n\n
- ins
- ins
- <ins datetime="' + _datetime + '">
- </ins>
- more
- more
- <!--more-->\n\n
- -
- ul
- ul
- <ul>\n
- </ul>\n\n
- close
- close
- -
- -
- dfw
- dfw()
- ?
- -
デフォルトクイックタグの中の、不要なボタンを非表示にします。
デフォルトで登録されていいるクイックタグは、『B(strong)』、『i(em)』、『LINK』、『b-quote(blockquote)』、『del』、『ins』、『img』、『ul』、『ol』、『li』、『code』、『more』、『タグを閉じる(close)』の13個と、『(集中執筆モード)』です。
デフォルトクイックタグの必要なボタンのみを選択して表示させる
/wp-content/themes/子テーマファイル/function.php
//デフォルトクイックタグの必要タグのみ表示
function default_quicktags($qt_init) {
$qt_init["buttons"] = "more,close,ul,li";//ここに必要なクイックタグのIDを記述
return $qt_init;
}
add_filter( 'quicktags_settings', 'default_quicktags' );
デフォルトクイックタグの必要なものだけをピックアップして記述します。
上記のコードを、function.phpに追記します。
その際、3行目の部分に、必要なクイックタグのIDを記述します。
そうすることで、記述したデフォルトクイックタグ以外は非表示になります。
クイックタグのIDは、『デフォルトクイックタグ一覧』を参照してください。
必要なもの以外を非表示にする方法と新しく追加する方法は、下記サイトを参照しました。
デフォルトクイックタグの不要なボタンを選択して非表示にする
/wp-content/themes/子テーマファイル/function.php
//デフォルトクイックタグの不要タグのみ非表示
function default_quicktags( $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', 'default_quicktags');
上記コードは、必要なクイックタグをピックアップして記述する方法とは違い、不要なクイックタグをピックアップして記述します。 非表示にしたいクイックタグが少ない場合は、こちらのやり方が早いです。
デフォルトクイックタグを全て非表示にする

/wp-content/themes/子テーマファイル/function.php
//デフォルトクイックタグ全て非表示
function remove_html_editor_buttons( $qt_init) {
$qt_init["buttons"] = ",";
return $qt_init;
}
add_filter( 'quicktags_settings', 'remove_html_editor_buttons' );
上記コードはどれも不要な場合に、デフォルトのクイックタグ全てを非表示にする方法です。
上記画像は、全て非表示にした状態です。すっきりしました。
お問い合わせフォームボタンを非表示にする

『お問い合わせフォーム』と『お問い合わせ』ボタンは、Jetpackの設定で非表示に出来ます。

Jetpack設定画面を開く

下部にある『モジュール』を開く

『コンタクトフォーム』の項目が有効化になっている場合、『無効化』と表示されているので、『無効化』をクリックする。

コンタクトフォームが無効化になる。

『お問い合わせフォームを追加』と『お問い合わせ』ボタンが非表示になる。
必要ない場合はこれでスッキリです。使用されている場合は、もちろんの事ですが有効化にしておかなければなりません。
校正ボタンを非表示にする

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

Jetpack→設定です。 『スペルと文法』を停止にします。これで、校正ボタンは非表示になります。
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オリジナルのクイックタグが非表示になりました。
オリジナルクイックタグを追加

function.phpへの記述の仕方が変わりました。WordPress6.0更新後は、以前のコードではオリジナルクイックタグが表示されません。function.phpのコードの記述変更と、外部jsファイル作成が必要です。
WordPress6.0以降に初めて記述する方は、下記をご参照ください。
function.php
// オリジナルクイックタグ追加
function add_quicktags() {
if( wp_script_is('quicktags')) {
wp_enqueue_script( 'my_quicktags', get_stylesheet_directory_uri(). '/js/my_quicktags.js', array(), 'v1.0.0', true );
}
}
add_action( 'admin_print_footer_scripts', 'add_quicktags' );
外部jsファイル追加
// QTags.addButton( id, ボタン表示名, 開始タグ, 終了タグ );
QTags.addButton( 'mystrong', 'strong', '<strong>', '</strong>' );
QTags.addButton( 'p', 'p', '<p>', '</p>' );
QTags.addButton( 'br', 'br', '<br>', '' );
QTags.addButton( 'h3', 'h3', '<h3>', '</h3>' );
QTags.addButton( 'h4', 'h4', '<h4>', '</h4>' );
QTags.addButton( 'g_marker', 'g_marker', '<span class=\"g_marker\">', '</span>' );
クラス名前後の『"』の前には『\"』が必要です。 タグとタグの間等に改行を入れる場合は、『\n』です。
WordPress6.0更新前までは、このjsファイルに記述する内容も全て、function.phpに記述していました。下記のようなコードでした。
function.php 変更前
// クイックタグ追加
function add_quicktags() {
if( wp_script_is('quicktags') ) {
?>
<script type="text/javascript">
// QTags.addButton( id, ボタン表示名, 開始タグ, 終了タグ );
QTags.addButton( 'mystrong', 'strong', '<strong>', '</strong>' );
QTags.addButton( 'p', 'p', '<p>', '</p>' );
QTags.addButton( 'br', 'br', '<br>', '' );
QTags.addButton( 'h3', 'h3', '<h3>', '</h3>' );
QTags.addButton( 'h4', 'h4', '<h4>', '</h4>' );
.addButton( 'g_marker', 'g_marker', '<span class="g_marker">', '</span>' ); </script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'add_quicktags' );
クイックタグ追加について詳しく
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/子テーマ/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』ボタンの並び替えが出来ました。
便利なクイックタグをカスタマイズすることで、更に便利に快適に編集が出来るようになります。 ぜひお試しくださいね。
投稿日: 2016/05/29 最終更新日: 2022/09/10
投稿日: 2016/05/29
最終更新日: 2022/09/10