吹き出しや補足も簡単に！？AddQuicktagでWordPressを見やすくする

皆さんはワードプレスで記事を作成するとき、「タグ」を使っていますか？
と言うより、「タグ」を使えていますか？

ワードプレスには色んな便利タグがデフォルトで用意されています、「見出し」や「文字色」「太字」などはよく使っていると思います。ただ全く使っていないタグもいっぱいあるのでは？
よく使う文言や、よく使う画像、よく使う補足項目や、よく使う吹き出しなどはワンクリックで設定出来たら便利ですよね。

この「AddQuicktag」は自分流にボタンをカスタマイズできる便利なプラグインです。
今回は、吹き出しや補足表示も簡単にできてしまう「AddQuicktag」を使って、記事作成の効率を劇的にアップさせる方法をクリップタイムしていきます。

ってかさー、タグってなに？いちいち面倒くさいこと覚えたくないんだけど。

タグっていうのは、太字にしたり文字色を変えたりするときに、その変えたい文字を囲む記号のようなモノなんだけどー、詳しくはこれ読んで。

タグってなに？

タグは、<タグの名前>で囲まれた半角英数字の記号のことで、このタグで文章や画像などを囲むことによって、その文章などが表示されるときの指示命令を与えることができる便利なモノです。

例えば

この文章は大事だから太字で表現したい。

上記の文章を太字に設定するときは、編集画面で赤枠の「B」のボタンを押して太字にしますよね。

太字になりました。

この文章は大事だから太字で表現したい。

普段ビジアルエディタで編集作業をしている人は、上記のように視覚的に表示されるのであまり馴染みのないモノですが、今の作業をテキストエディタで見てみると・・・。
青枠と赤枠を見比べてみると、赤枠の文章にはなにやら英記号が追加されていますね。

ここで追加されているのは

太字にする場合、したい文字をで囲むことで、「お前らは太字になって表示するんだぞ！」と命令を与えていることになります。

これが「タグ」です。

ビジュアルエディタではボタン一つで表現できるのでこのタグは表示されませんが、実はこんな指示が裏では行われています。

また、当サイトでは基本的にビジュアルエディタでの編集を推奨しています。
テキストエディタでもビジュアルエディタでも同じ作業ができますので、せっかく簡単に操作できる環境が用意されているのなら、それを使って快適に記事編集をして、余った時間は他のことに使う方がよっぽど効率的です。

なんとなく「タグ」の理解は深まったでしょうか、太字や見出し、下線や文字色など、色んなボタンが用意されているように、このタグにもそれに比例して色んなタグ（英記号）が存在します。

いままで何気なく使っていたボタンを、テキストエディタで確認してみると、色んな発見があるかもしれないですね。

今回クリップする「AddQuicktag」は、そんなタグを自分流にカスタマイズして追加や設定ができる便利なプラグインです。

早速インストールしてみましょう。

AddQuicktagをインストール

管理画面の「プラグイン」→「新規追加」から検索窓でAddQuicktagを検索。
赤枠のプラグインを「今すぐインストール」。完了したら「有効化」します。

管理画面「設定」のなかに「AddQuicktag」が追加されていますので、早速クリック。

AddQuicktagの設定方法

基本設定

この画面になりますが、赤枠で囲まれた部分が、ひとつのタグに対しての設定項目部分です。
①から⑥まで記入欄があります。ひとつひとつ解説していきましょう。

ボタンの名前
ここに入力する名前が、実際ワンクリックボタン機能を使う時に表示される名前です。
編集画面に、このようにプルダウン表示されます。（ピンク枠の部分）
自分で変わりやすければどんな名前でもOK！
ボタンの説明
ここは特に記入しなくても大丈夫です。自分用のメモ欄ですね。
よく使うタグの最初
先ほどのの場合は最初のの部分を入力します。
よく使うタグの最後
先ほどのの場合は最初のの部分を入力します。
IEのみ対応
ここは、PCのショートカットキーのように、「Alt」+「〇〇〇」みたいなショートカットを作れますが、インターネットエクスプローラ（IE）のみの対応になるので、使用頻度は少ないですね。
表示する順番
名の通り表示する順番を指定できます。プルダウン表示される順番を指定できます。数字で入力。

今回はこのように設定してみました。
当サイト、クリップタイムでは、

俺や！

私が！

会話を繰り広げるエンターテイメントサイトだから、僕らの顔の画像をよく使うんだよね。

なので、この「AddQuicktag」にあらかじめ、この3人の顔の種類をそれぞれ登録しています。

もちろんこの吹き出しのタグも、あらかじめ登録してあるから、2秒で設定出来ちゃうよー。

ちなみに、よく使う言葉だったり、画像だったりを設定したいときは、開始タグの部分に、画像のURLや言葉を入力するだけで、終了タグは未記入でOKです。

ボタン名、開始タグと終了タグの入力が終わったら、一番右側のチェックボックスにチェックします。そうすると全てにチェックが入ります。
最後に忘れずに「変更を保存」をクリックしたら、タグの登録完了です。

タグを使ってみる

実際にさっき登録したモノを使ってみましょう。
編集画面にいくと、赤枠の「Ouicktags」のボタンが追加されています。

その中から、先ほど登録したうつけの画像を読みだしてみます。
【うつけ】ガーンをクリックします。

https://cliptime.jp/wp-content/uploads/2017/01/utsuke06.png

↑このように、登録した画像のURLがパパッと出てきました！

これが、「AddQuicktag」の最大の良いところ。
よく使う画像があるのに、その度にメディアのライブラリから画像を探してURLをコピーしてなんてやってたら時間がもったいないどころの話じゃなくなりますよね。

あれ、でもこれ俺の画像が表示されてないじゃん。

そうです、この画像と吹き出しを表示させるには、↓このショートコードを同じように登録して、

↓このように入力するだけで、

復活っ！

いつもの感じで表現することができます。

デフォルト表示のタグを非表示に

編集画面にはデフォルトで表示されているタグもいっぱいあります。使わないモノは非表示にすることもできます。
赤枠のチェックボックスにチェックすると、編集画面からそのタグが消えますので、普段使わないものは非表示にしておくと画面がスッキリして編集に集中できますね。

拡張コードクイックボタン

ここでは、「pre」ボタンと、「htmlentities」ボタンを表示or非表示の設定ができます。

「pre」ボタン
空白と改行をそのまま表示する機能です。
コピー＆ペーストで、ソースコードをそのまま記入したいときなどに使います。
「htmlentities」ボタン
htmlのページで、半角の「 [ 」や「<」などのそのまま表示させることができる機能です。

例えば

この文章を赤く表示したい。

↑実際に赤くするには、

この文章を赤く表示したい。

と入力すると思います。(ビジュアルエディタでボタン操作しても、テキストエディタにはこう記載されています)

でも、これをそのまま編集画面で入力すると、

この文章を赤く表示したい。

と実際に変換されて表示されてしまします。
やり方を伝えたいのに、これでは意味がありません。

そんな時に、この「HTML Entities」ボタンで、

この文章を赤く表示したい。

を囲むことによって、コードをそのまま表示させることができます。

やり方は簡単、
上図のように、そのまま表示させたい対象の部分を選択して、「HTML Entities」ボタンをクリック。見知らぬ英記号で囲まれたら完了です。
プレビューで確認してみましょう。

この「HTML Entities」タグは、テキストエディタだけに表示されます。使用するときはテキストエディタで作業を行ってください。