こんにちは、久川和人です。
WordPressで記事を書くときに、エディタにあるボタンを使って文字装飾や画像を挿入したりしていますか。ボタンとは下の図の赤枠部分。
WordPressプラグインのAddQuicktagを使うと、よく使うコードや文章、標準にはない文字装飾などをボタンに割り当てることができます。
今回は、このAddQuicktagの設定方法と使い方、記事作成を効率化するタグを説明していきます。
最近のWordPressテーマにはあらかじめ便利なボタンが登録されているものがあります。でも、登録されているボタンでは足りないなんてことも。そんなときは、AddQuicktagを使うことで記事を書く際に面倒だった作業がボタン一つでできるので、効率よく記事を書くことができるようになります。
この記事の目次
AddQuicktagでできること
AddQuicktagのインストール、設定を行う前に、まずは、AddQuicktagでどんなことができるのか説明いたします。
例えば、以下のような吹き出し。
これをコードで入力すると、僕の利用してるWordPressテーマの場合は表示させたい場所に、
<div class="voice clearfix left n_up"><div class="icon"><img src="/kuma.png" /><div class="name">くまさん</div></div><div class="text sc_balloon left blue">クイックタグって何ですか？</div></div>
と書く必要があります。とっても大変ですよね。
このコードをボタンに割り当てておけば、ボタンを押すだけで吹き出しが簡単に挿入できます。ボタンに割り当てるとこんな感じ。
ビジュアルエディタでもプルダウンで選択できます。
その他にも、ショートコードやタグを登録しておけば、記事を書くときに非常に便利です。
[ btn ]ボタン[ /btn ] と入力すると以下のようになります。AddQuicktagのインストール方法
それでは、AddQuicktagのインストールを行います。
WordPress管理画面からプラグインの新規追加
まずは、WordPress管理画面にアクセスし、管理画面の左メニューの【プラグイン】⇒【新規追加】をクリックします。
AddQuicktagのインストール
①右上のキーワードに【addquicktag】と入力し、
②AddQuicktagの【今すぐインストール】をクリックします。
AddQuicktagの有効化
【有効化】をクリックします。
プラグイン一覧画面に切り替わり、「プラグインを有効化しました。」と表示されます。
これで、AddQuicktagがインストールされ、有効化されました。
AddQuicktagの設定方法
次に、AddQuicktagに、登録したい文字やショートコード、タグを設定します。
AddQuicktagの設定画面を開く
WordPress管理画面の左メニューの【設定】⇒【AddQuicktag】をクリックします。
AddQuicktagの設定画面が表示されます。
クイックタグの追加
クイックタグの追加するには、下図の①～⑤を設定します。
①ボタン名：
ビジュアルエディターやテキストエディターで表示される名前
②開始タグ：
HTMLの開始タグを入力します。例えば文字を太字にしたい場合、<b>太字</b>と記述しますが、この場合の開始タグは、太字にしたい文字の前にある<b>のことです。
③終了タグ：
HTMLの終了タグを入力します。開始タグの例えにあった<b>太字</b>の場合、終了タグは、太字にしたい文字の後にある</b>のことです。
④順番（任意）：
クイックタグが複数ある場合、順番が小さいものから表示されます。入力しないと、追加したタグは一番最後に追加されます。
⑤チェックボックス：
ここにチェックを入れるとすべてのエディターでボタン名が表示されます。チェックしないと、タグを保存しても表示されません。
設定が終わったら、【変更を保存】をクリックして保存させます。先ほどの太字の例だと下図のように入力します。
これをビジュアルエディタで下図のように、
テキストエディタで見ると下図のように表示されます。
・「囲み枠」を設定した例
クイックタグの削除
クイックタグを削除したい場合は、開始タグと終了タグを削除して保存します。その他の項目は入力したままでも削除されます。
AddQuicktagの使い方
AddQuicktagはビジュアルエディタとテキストエディタのどちらでも使用することができます。
ここでは、先ほど登録した「太字」を使って説明いたします。
ビジュアルエディタの場合
ビジュアルエディタを開くと、「Quicktags」というプルダウンメニューが表示されます。
ここでは、「太文字にする」という文字を太字にしてみます。
①「太文字にする」と入力し、文字を選択し、
②「Quicktags」プルダウンにある「太字」をクリック
③太文字になります。
※タグによってはビジュアルエディタ上では反映されないものもあります。その場合はプレビューで確認してみてください。
テキストエディタの場合
テキストエディタで開くと、AddQuicktagで登録したタグがボタンとして表示されます。ここでは「太字」となっています。
テキストエディタでは2つの使用方法があります。
・文字を書いた後に、タグボタンをクリック
①「太文字にする」と入力し、文字を選択し、
②「太字」ボタンをクリックします。
③「太文字にする」の前後にタグが挿入されます。
・タグボタンをクリックした後に、文字を入力
①「太字」ボタンをクリック、
②タグが挿入されます。
③「大文字にする」と入力し、
④「/太字」ボタンをクリックします。
⑤タグが挿入されます。
その他の機能
AddQuicktagの設定画面では、その他につぎのようなことができます。
- デフォルトのクイックタグを非表示
- 拡張コードのクイックボタンの追加
- 設定内容のインポートおよびエクスポート
デフォルトのクイックタグを非表示
画面を下にスクロールさせると、「デフォルトのクイックタグを非表示にする」とあります。チェックボックスにチェックを入れることで非表示にさせることができます。
拡張コードのクイックボタンを追加
画面を一番下までスクロールさせると、「拡張コードクイックタグボタン」とあります。チェックボックスにチェックを入れることで表示させることができます。
「pre」ボタン：コードを記述することができます。例えば、以下のように入力すると、
ブラウザでは、以下のように出力されます。
.language-css{ color:#ff0000; font-size:25px; background:#000; position: relative; top:-21px; left:-25px; }
htmletitiesボタン：HTMLの構文を直接表示させることができます。例えば、<b>太字</b>のように、HTMLコードを表示させます。
設定内容のインポートおよびエクスポート
AddQuicktagで登録した内容をエクスポート（出力）したり、エクスポートした内容をインポート（取り込む）ことができます。
エクスポートすることで、AddQuicktagの設定内容をバックアップしたり、別のサイトに反映させることもできます。
エクスポートは、【エクスポートファイルのダウンロード】をクリックして、ファイルを保存します。
AddQuicktagに割り当てたいタグ一覧
記事作成を効率化させるタグを紹介します。
| 項目名 | 開始タグ | 終了タグ |
|---|---|---|
| h2 | <h2> |
</h2> |
| h3 | <h3> |
</h3> |
| h4 | <h4> |
</h4> |
| 右寄せ | <p style="text-align: right;"> |
</p> |
| 中央 | <p style="text-align: center;"> |
</p> |
| マーカー（黄色） | <span style="background-color: yellow;"> |
</span> |
| 囲み枠（点線） | <div style="padding: 20px; border: 1px dotted #333333;"> |
</div> |
AddQuicktagにはつぎのように入力します。
（h2の例）
WordPressテーマによっては、見出しとして「h2」・「h3」・「h4」、文字の表示位置として「右寄せ」・「中央」は最初から表示されているものもあります。その場合は不要です。
「マーカー（黄色）」と「囲み枠（点線）」は以下のようになります。
マーカー（黄色）
これ以外にも、CSSと組み合わせると以下のような「吹き出し」や「囲み枠」なども簡単にAddQuicktagで利用できるようになります。
おわりに
今回はAddQuicktagの設定方法と使い方についてお話いたしました。
最初は設定するのは面倒だと思いますが、一度設定してしまえばタグをクリックするだけで使うことができ、効率よくブログを書くことができます。
最近はWordPressテーマにあらかじめタグが付いているものもあります。それ以外のタグを割り当てたい場合などにAddQuicktagを利用してみてくださいね。
