プラグインを減らしたい！
モノがごちゃごちゃするのがとにかく嫌いな性分(スマホのホームもドックにアイコン4つのみ、パソコンのデスクトップもゴミ箱のみ)な私にとってプラグイン15個は既に多い領域。
整理してある程度は減らせたのですが、なかなか手放せなかったのが「AddQuicktag」。
ようやくお別れを告げることができたので、それに至る経緯を書き留めてみました。
ここではSimplicity2を前提として、「AddQuicktag」がある場合とない場合それぞれでのクイックタグをスッキリさせる方法をまとめています。
自信の無い方は無難にプラグインを使ってくださいね。
| ▼もくじ |
|---|
デフォルトクイックタグが多すぎる
Simplicity2にはデフォルトクイックタグが非常に多いです。加えてWordPressのデフォルトクイックタグもあります。
何もいじっていないと投稿画面には両方のデフォルトクイックタグであふれ、使い勝手がよくありません。
パソコン画面なら数行くらいですし、そもそも画面が広いので大した影響はないかもしれませんが、これがスマホ画面だと10行近くにもなります。
「メディアを追加」のボタンがクイックタグの上にあるため、記事を書きつつメディアを追加するたびに長いクイックタグの行をスクロールしなければなりません。
これが地味にストレス……。
狭いスマホ画面において使わないクイックタグで場所を取られるのは邪魔でしかありません。
AddQuicktagの導入
オリジナルクイックタグを追加したいのもあって、「AddQuicktag」を導入しました。
「AddQuicktag」には、クイックタグの追加のほかに、設定画面でWordPressのデフォルトクイックタグを個別に非表示にできる機能があります。
それによりスッキリさせることができました。
が、まだたくさんのクイックタグが残っている！
なんでだ？ と思っていたら、Simplicity2のデフォルトクイックタグが残っていたのです。
Simplicity2のデフォルトクイックタグを非表示にする
Simplicity2のデフォルトクイックタグは、lib/qtags.phpにあります。
「外観」→「テーマの編集」と進み、編集するテーマで「Simplicity2」を選択します。
※子テーマではなく親テーマです。
テーマファイルのなかに黒字で
lib▶
というのがあります。それを開くと、中に
qtags.php
というのがあり、そこにクイックタグが収納されています。
qtags.php内を見てみると、
QTags.addButton('qt-pre','pre','<pre>','</pre>')
上記のようなQTags.addButton〜というのが複数あります。これがクイックタグです。
これをコピーするのですが、QTags.addButton〜部分だけではなく、下に該当する部分をまるっとコピーします。
//テキストエディタにクイックタグボタンを追加
if ( !function_exists( 'add_quicktags_to_text_editor' ) ):
function add_quicktags_to_text_editor() {
//スクリプトキューにquicktagsが保存されているかチェック
if (wp_script_is('quicktags')){?>
<script>
QTags.addButton('qt-pre','pre','<pre>','</pre>')
</script>
<?php
}
}
endif;
※preタグ以外のクイックタグは省略しています。
自分のqtags.phpからコピーしてください。
──ここまで親テーマでの作業──
──ここから子テーマでの作業──
コピーしたものを、子テーマのfunction.phpに貼り付けます。
親テーマがバージョンアップした際にカスタマイズはすべてリセットされてしまうためです。
カスタマイズが維持される子テーマに複製して編集したほうが安心安全です。
非表示にさせるのは至って簡単。
QTags.addButton〜の前に「//」を付け加えてコメントアウトするだけです。
//QTags.addButton('qt-pre','pre','<pre>','</pre>')
非表示にさせたいクイックタグすべてに「//」をつけましょう。
Simplicity2ではデフォルトで、
太字、赤字、太い赤字、赤アンダーライン、黄色マーカー、黄色アンダーラインマーカー、打ち消し線、バッジ、キーボード、補足情報(i)、補足情報(?)、補足情報(!)、primary、success、info、warning、danger
こんなにもクイックタグが表示されるので、不要なものをコメントアウトするだけでだいぶスッキリさせられます。
「AddQuicktag」を使っているなら、ここで完成です。投稿画面には必要なクイックタグしか表示されていないはずです。
クイックタグ名を編集してもっとスッキリさせたい場合は、
に飛んでください。
脱！ 「AddQuicktag」
私の場合、この「AddQuicktag」＋Simplicity2のデフォルトクイックタグをコメントアウトという形でしばらくは落ち着いていました。
しかしながら、いかんせん「AddQuicktag」の設定画面はスマホでの操作が不便！
たまにしか触らないからと大目に見ていたんですが、オリジナルクイックタグが増えれば増えるほどスクロール地獄です。もちろん探すのに手間取ります。
ほかにもクイックタグひとつずつに表示の優先順位を割り振るんですが、新しいクイックタグを増やすたびに番号の振り直しをするのも非常に面倒……。
パソコンでは容易なことも、狭いスマホ画面だと苦労することが多いものです。
そこで、「脱！ AddQuicktag」することにしました。
function.phpでクイックタグを追加する
親テーマにあるlib/qtags.phpから、クイックタグ関連の部分を子テーマのfunction.phpにコピペしてあるのを前提とします。
コピペのやり方はこちら。
→Simplicity2のデフォルトクイックタグを非表示にする
クイックタグの追加にはコピペした子テーマのfunction.phpを使います。
QTags.addButton〜というのがクイックタグなので、これを自分流に作ります。
QTags.addButton('ID', 'ボタン名', '開始タグ', '終了タグ');
IDとボタン名と開始タグは必須です。
IDは被りNG！ デフォルトクイックタグとも被らないようにしてください。
ボタン名は記事編集画面に表示される名前です。自分の見やすいものに変えてください。
QTags.addButton('h2','H2','<h2>','</h2>')
だいたいこんな感じ。
この形だと、文字を選択してからボタンを押すと文字をタグで挟んでくれるので便利です。
ただ、たまに終了タグがいらないってパターンもありますよね。そういうときは、
QTags.addButton('h2','H2','<h2></h2>')
こんな感じに。
終了タグの部分は省略しても空白にしておいてもどちらでも構いません。
また、これを応用してテーブルタグなどのテンプレをワンタッチで呼び出すなんてことも出来ます。
しかしそのまま入れてしまうと、ボタンを押したときにタグがすべて1行に並んで出て来てしまいます。
<table><tbody><tr><td></td></tr></tbody></table>
うわぁ……ってなりません？ｗ
平気な方はそのままテンプレをすべて開始タグに入れ込めばできあがり。
しかし私のように、
<table> <tbody> <tr> <td></td> </tr> </tbody> </table>
と、表記したい方はちょっぴり手間をかけましょう。
まず改行させるには、改行するところにひとつひとつ「\n」と記述する必要があります。
<table>\n <tbody>\n <tr>\n <td></td>\n </tr>\n </tbody>\n </table>\n
全角スペースだと記事編集画面でのタグの表示自体に問題はなくとも、ページのほうで謎の空白が出来てしまいます。
あとは実際の改行を無くし、1行にしてから開始タグに入れ込むだけ。
QTags.addButton('table','テーブル','<table>\n <tbody>\n <tr>\n <td></td>\n </tr>\n </tbody>\n</table>\n')
これで半角スペース・改行込みの形成されたテーブルをワンタッチで呼び出すことができます。
出来上がったオリジナルクイックタグを<script>〜</script>の間に記述します。
//テキストエディタにクイックタグボタンを追加
if ( !function_exists( 'add_quicktags_to_text_editor' ) ):
function add_quicktags_to_text_editor() {
//スクリプトキューにquicktagsが保存されているかチェック
if (wp_script_is('quicktags')){?>
<script>
QTags.addButton('qt-pre','pre','<pre>','</pre>')
QTags.addButton('h2','H2','<h2>','</h2>')
QTags.addButton('table','テーブル','<table>\n <tbody>\n <tr>\n <td></td>\n </tr>\n </tbody>\n</table>\n')
</script>
<?php
}
}
endif;
これで完成！
以降は、QTags.addButton〜を新しく追加するなり削除するなりするだけなので、超カンタン！
上から並べた順に、記事編集画面では左上から右下に向かって並べられていくので好きなように並び替えてください。
AddQuicktagの無効化
「AddQuicktag」に保存していたクイックタグすべてを子テーマのfunction.phpに移し終えたら、いよいよお別れの時。
「AddQuicktag」を無効化します。
……が、まだお別れするには早かったようです。
「AddQuicktag」を無効にした途端、デフォルトクイックタグが再び出て来てしまいました。
デフォルトクイックタグ「久しぶり！」
私「え、あ……うん……」
それもそのはず。
WordPressのデフォルトクイックタグは「AddQuicktag」の機能で非表示にしていたためです。
すっかり忘れていて戸惑ったよｺﾝﾆｬﾛ-！
WordPressのデフォルトクイックタグを非表示にする
こっちはかなり簡単です。
子テーマのfunctions.phpに、
//デフォルトクイックタグの削除
add_filter('quicktags_settings', function ($qtInit) {
$qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,fullscreen';
return $qtInit;
} );
これを記述します。
個別に変える必要があるのは赤字の部分。
必要なクイックタグだけを残し、不要なものは削除してください。
ちょっと勘違いしやすいのですが、非表示にしたいものを記述するのではなく表示したいものを記述するのでお間違えなく。
例えば、strongとimgを残しておきたいのであれば、
//デフォルトクイックタグの削除
add_filter('quicktags_settings', function ($qtInit) {
$qtInit['buttons'] = 'strong,img';
return $qtInit;
} );
と記述すれば、strongとimg以外のクイックタグは非表示になります。
いっそのこと全部を非表示にして、必要なものはすべて自分でfunction.phpに記述するというやり方でもいいでしょうね。
スッキリしたクイックタグ！
こちらが究極のスッキリを追求したスマホ画面で見るMyクイックタグたちです。まだ改善の余地があります。
なるべく行数を減らすために半角にこだわった結果、まるで暗号のようになりました。
おそらく半角1文字オンリーなら1行あたり最大8ボタンは設置できそうですが、さすがに文字被りが多くてきつい。
個人的には7ボタンいければ合格です。
26ものボタンが4行で済んでいますからね、めちゃくちゃ見やすく使いやすい画面になりました。
文字入力の部分と「メディアを追加」ボタンが容易に1画面に収まる感動。
無駄なスクロールも無くなりましたし、本当に快適です！
まとめ
必要なクイックタグはすべて子テーマのfunction.phpに移し終えましたし、不要なデフォルトクイックタグもすべて非表示に出来ました。
これが本当のお別れ。
今までありがとう「AddQuicktag」。
そしてさようなら「AddQuicktag」。
私はfunction.phpと共に生きる。
そんなわけで、デフォルトクイックタグの解決策は2つ。
デフォルトクイックタグを消したいけど、あんまりfunction.phpを触りたくない場合
→「AddQuicktag」の機能で、WordPressのデフォルトクイックタグを非表示にする
→Simplicity2のデフォルトクイックタグを非表示にする
のダブルコンボを。
function.php上等の場合
→Simplicity2のデフォルトクイックタグを非表示にする
→WordPressのデフォルトクイックタグを非表示にする
→function.phpでクイックタグを追加する
のトリプルコンボを。
ただしfunction.phpは本当に用心に用心を重ねて、億万長者の家にある壺のごとく慎重に取り扱ってください。でないと死んでしまいます。