wordpressの投稿編集画面でテキストエディタを使っている場合、入力補助ボタン(quicktag：クイックタグ)をうまく使うと作業効率が大幅UPします。ボタンの追加や削除で投稿画面をカスタマイズする手順をまとめました。

htmlタグを効率的に入力できるクイックタグ

文章を論理的で読みやすいものにするためには、htmlタグをうまく使わないといけません。

htmlタグは開始タグが<××>、終了タグが</××>という形なのですが、WordPressの投稿画面で手打ちするのはとても面倒です。何とか楽に入力したいですよね。

Htmlタグの入力を楽にするために、まず取り組みたいのがMarkDown記法の導入です。

[img-link url=”https://webshufu.com/markdown-on-save-improved/” title=”【Wordpress】ライティングを爆速化！Markdown導入プラグイン2つ＆記法を簡単に紹介”]

しかし、Markdownではごく簡単なHTMLしか書けません。

そこで活用したいのが投稿画面の入力補助ボタン(クイックタグ)。

classやidの付いたやや複雑なhtmlタグも楽に入力できます。

クイックタグの使い方

ボタンをクリックすると、あらかじめ登録されたテキストを、あっという間に入力してくれます。

ある部分を選択して押すボタン

編集中の記事の一部を選択してボタンを押すと、あらかじめ登録された開始タグと終了タグが、選択した部分の前後に挿入されます。入力作業を大幅に効率化してくれます。

たとえば、

クイックタグの基本的な使い方

を選択してliボタンを押すと、あらかじめ登録された開始タグ<li>と終了タグ</li>が前後に入力されて

<li>クイックタグの基本的な使い方</li>

となります。

テキストを選択せずに使うボタン

テキストを選択せずに使うボタンもあります。

例えば「more」ボタンは、何も選択せずに使うと、

<!--more-->

を入力してくれます。

ヘタにテキストを選択すると、選択した部分が消えます。

デフォルトの入力補助ボタン（クイックタグ）一覧

デフォルトでは、編集画面の上にこんな感じでボタンが並んでいます。

bボタン・iボタン

エディタ上のテキストを選択してbボタンを押すと、選択した部分の前後に<strong>と</strong>が付きます。

選択部分を文脈の上で強調し、閲覧時の見た目を太字にします。

エディタ上のテキストを選択してbボタンを押すと、選択した部分の前後に<em>と</em>が付きます。

選択部分を文脈の上で強調し、閲覧時の見た目を斜字にします。

linkボタン

リンクを設定したいテキストを選択してlinkボタンを押すと以下のようなwindowが立ち上がります。

外部のサイトにリンクするならURLを入力し、自ブログのページにリンクするなら「既存のコンテンツにリンク」ボタンを押して、リンクしたいページを選び、「リンクを追加」をクリックします。

b-quoteボタン

テキストを選択して、b-quoteボタンを押すと選択した部分の前後に<blockquote>と</blockquote>が付きます。

<blockquote>~</blockquote>は、他サイトなどから引用した部分を表します。

閲覧時の見た目はTwenty twelveテーマでは斜体文字になります。

delボタン・insボタン

delボタンは選択した部分を<del>～</del>で囲み、削除されたことを表します。

TwentyTwelveテーマを使っている場合、閲覧時の見た目は、文字の上に抹消線が引かれた状態になります。

insボタンは選択した部分を～で囲み、後から追加されたことを表します。

TwentyTwelveテーマを使っている場合、閲覧時の見た目は黄色のハイライト表示になります。

ul,ol,liボタン

ul,ol,liボタンは、リスト（箇条書き）を作るためのボタンです。どのように作るかというと…

まず箇条書きの各項目を入力して、1項目ごとに改行します。そして、最初の項目を選択して、liボタンを押します。

すると、項目が<li>と</li>で囲まれます。残りの項目も一つ一つ選択してliボタンを押すと以下のようになります。

ここで項目全体を選択してolを押すと

全体が<ol>と</ol>で囲まれ、

閲覧時には番号付きリストとして表示されます。

olの代わりにulを使うと番号なしリストが出来ます。

AddQuicktagプラグインで欲しいボタンをドンドン追加

AddQuicktagはその名の通りクイックタグをドンドン増やせるプラグインです。

インストールと有効化

管理画面の左側のメニューバー、「プラグイン」⇒「新規追加」で「AddQuicktag」で検索して

「今すぐインストール」をクリック

「OK]をクリック

プラグインを有効化をクリック

これで「AddQuicktag」プラグインは有効化されました。

ボタン追加設定のやり方

「AddQuicktag」プラグインが有効化されると、プラグインページの「AddQuicktag」のところに「設定」が現れるのでクリック。

するとAddQuicktagの設定画面に飛びます。ここでクイックタグをどんどん登録して増やすことが出来ます。

例えば、選択した部分の前に「<h2>」後に「</h2>」を入力するようなクイックタグを作りたいならば、以下のように赤枠内を入力して「変更を保存」ボタンを押します。

管理画面の行が増えてます。

管理画面左サイドバーで「投稿」⇒「新規追加」と進んでみると、h2ボタンが現れてますね。テキストを選択してh2ボタンを押すと、

選択した部分の前に「<h2>」後に「</h2>」が入力されます。

この要領でどんどんボタンを追加していきます。

「終了タグ」の入力を省けば、moreボタンのようにテキストを選択せずに「開始タグ」定めたフレーズのみ入力してくれるボタンを作ることが出来ます。

デフォルトのボタンで不要なものを削除（非表示化）する方法

「AddQuicktag」で追加した入力補助ボタン（クイックタグ）を削除するには、削除したいクイックタグの全ての項目を削除すればOKです。

しかし、デフォルトで付いているボタンを非表示にするには、function.phpを操作する必要があります。

以下のような書き込みをして、デフォルトのボタンのうち編集画面に表示するものを指定します。

function default_quicktags($qtInit) {
  $qtInit['buttons'] = 'em,link,img,more,close';//表示するボタンのIDを羅列
  return $qtInit;
}
add_filter('quicktags_settings', 'default_quicktags', 10, 1);

em,link,img,more,closeはデフォルトボタンのうち編集画面に表示させるボタンのIDです。ボタンの表示名ではないので注意してください。指定から外れた、b,b-quote,del,ins,ul,ol,li,codeの各ボタンは見事に消えました。

プラグインなしでボタンを追加する方法

ボタンの追加は、実は「AddQuicktag」プラグイン無しでも可能です。

function.phpに以下のような記述をして設定します。

function add_my_quicktag() { 
?>
  <script type="text/javascript">
//QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');
  QTags.addButton('ul1','ul','<ul>\n','\n</ul>\n');
  QTags.addButton('ol1','ol','<ol>\n','\n</ol>\n');
  QTags.addButton('li1','li','<li>','</li>\n');
  QTags.addButton('h2','h2','<h2>','</h2>\n');
  QTags.addButton('h3','h3','<h3>','</h3>\n');
  QTags.addButton('red','赤','<span style="color:red;font-weight:bold;">','</span>');
  QTags.addButton('blue','青','<span style="color:blue;font-weight:bold;">','</span>');
  QTags.addButton('green','緑','<span style="color:green;font-weight:bold;">','</span>');
  QTags.addButton('bold','太','<span style="font-weight:bold;">','</span>');
  </script>
<?php
}
add_action('admin_print_footer_scripts','add_my_quicktag');

編集画面のボタンはこうなりました。

慣れたらプラグインは卒業しましょう

編集画面の上にあるボタン（クイックタグ）を追加したり削除したりするには、最初はAddQuicktagなどのプラグインを使うほうが便利に思えるかも知れません。

でも、ボタンの削除や追加は、function.phpにちょっと書き込むだけで出来ます。

慣れたらプラグインは卒業しましょうね。