こんにちは、久川和人です。

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 ] と入力すると以下のようになります。
■タグは、<>で囲まれたもの。
 例えば、太字にしたいとき、 <b>太字</b> と入力すると以下のようになります。
太字

AddQuicktagのインストール方法

それでは、AddQuicktagのインストールを行います。

WordPress管理画面からプラグインの新規追加

まずは、WordPress管理画面にアクセスし、管理画面の左メニューの【プラグイン】⇒【新規追加】をクリックします。
プラグイン導入

AddQuicktagのインストール

①右上のキーワードに【addquicktag】と入力し、
②AddQuicktagの【今すぐインストール】をクリックします。
AddQuickTagインストール

AddQuicktagの有効化

有効化】をクリックします。
AddQuickTag有効化

プラグイン一覧画面に切り替わり、「プラグインを有効化しました。」と表示されます。
プラグイン有効化

これで、AddQuicktagがインストールされ、有効化されました。

AddQuicktagの設定方法

次に、AddQuicktagに、登録したい文字やショートコード、タグを設定します。

AddQuicktagの設定画面を開く

WordPress管理画面の左メニューの【設定】⇒【AddQuicktag】をクリックします。
AddQuicktag

AddQuicktagの設定画面が表示されます。

クイックタグの追加

クイックタグの追加するには、下図の①~⑤を設定します。
AddQuicktag追加

①ボタン名:
ビジュアルエディターやテキストエディターで表示される名前

②開始タグ:
HTMLの開始タグを入力します。例えば文字を太字にしたい場合、<b>太字</b>と記述しますが、この場合の開始タグは、太字にしたい文字の前にある<b>のことです。

③終了タグ:
HTMLの終了タグを入力します。開始タグの例えにあった<b>太字</b>の場合、終了タグは、太字にしたい文字の後にある</b>のことです。

④順番(任意):
クイックタグが複数ある場合、順番が小さいものから表示されます。入力しないと、追加したタグは一番最後に追加されます。

⑤チェックボックス:
ここにチェックを入れるとすべてのエディターでボタン名が表示されます。チェックしないと、タグを保存しても表示されません。

設定が終わったら、【変更を保存】をクリックして保存させます。先ほどの太字の例だと下図のように入力します。
AddQuicktag追加

これをビジュアルエディタで下図のように、
ビジュアルエディタで表示

テキストエディタで見ると下図のように表示されます。
テキストエディタで表示

 なお、AddQuicktagで設定した内容が、ビジュアルエディターでは反映されない場合があります。その場合は、正しく設定されているかプレビューで確認してみてください。

・「囲み枠」を設定した例
ビジュアルエディタとテキストエディタ

プレビュー表示

 

クイックタグの削除

クイックタグを削除したい場合は、開始タグと終了タグを削除して保存します。その他の項目は入力したままでも削除されます。
クイックタグの削除

AddQuicktagの使い方

AddQuicktagはビジュアルエディタとテキストエディタのどちらでも使用することができます。

ここでは、先ほど登録した「太字」を使って説明いたします。

ビジュアルエディタの場合

ビジュアルエディタを開くと、「Quicktags」というプルダウンメニューが表示されます。
ビジュアルエディタのQuicktags

ここでは、「太文字にする」という文字を太字にしてみます。
①「太文字にする」と入力し、文字を選択し、
②「Quicktags」プルダウンにある「太字」をクリック
太文字にする

③太文字になります。
※タグによってはビジュアルエディタ上では反映されないものもあります。その場合はプレビューで確認してみてください。
太文字

テキストエディタの場合

テキストエディタで開くと、AddQuicktagで登録したタグがボタンとして表示されます。ここでは「太字」となっています。
テキストエディタの表示

テキストエディタでは2つの使用方法があります。

・文字を書いた後に、タグボタンをクリック

①「太文字にする」と入力し、文字を選択し、
②「太字」ボタンをクリックします。
太文字にする

③「太文字にする」の前後にタグが挿入されます。
タグ挿入

・タグボタンをクリックした後に、文字を入力

①「太字」ボタンをクリック、
②タグが挿入されます。
タグ挿入

③「大文字にする」と入力し、
④「/太字」ボタンをクリックします。
文字を入力

⑤タグが挿入されます。
タグを挿入

その他の機能

AddQuicktagの設定画面では、その他につぎのようなことができます。

  • デフォルトのクイックタグを非表示
  • 拡張コードのクイックボタンの追加
  • 設定内容のインポートおよびエクスポート

デフォルトのクイックタグを非表示

画面を下にスクロールさせると、「デフォルトのクイックタグを非表示にする」とあります。チェックボックスにチェックを入れることで非表示にさせることができます。
デフォルトのクイックタグを非表示

拡張コードのクイックボタンを追加

画面を一番下までスクロールさせると、「拡張コードクイックタグボタン」とあります。チェックボックスにチェックを入れることで表示させることができます。
拡張コードのクイックボタン

「pre」ボタン:コードを記述することができます。例えば、以下のように入力すると、
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の例)
AddQuicktag入力例

WordPressテーマによっては、見出しとして「h2」・「h3」・「h4」、文字の表示位置として「右寄せ」・「中央」は最初から表示されているものもあります。その場合は不要です。

「マーカー(黄色)」と「囲み枠(点線)」は以下のようになります。

マーカー(黄色)

囲み枠(点線)

 

これ以外にも、CSSと組み合わせると以下のような「吹き出し」や「囲み枠」なども簡単にAddQuicktagで利用できるようになります。

吹き出し(下向き)
吹き出し(左向き)
囲み枠
囲み枠の例
CSSを利用する方法は別の記事で紹介しています。

おわりに

今回はAddQuicktagの設定方法と使い方についてお話いたしました。

最初は設定するのは面倒だと思いますが、一度設定してしまえばタグをクリックするだけで使うことができ、効率よくブログを書くことができます。

最近はWordPressテーマにあらかじめタグが付いているものもあります。それ以外のタグを割り当てたい場合などにAddQuicktagを利用してみてくださいね。

 

プレゼント付き!メルマガ登録はこちら♪

メルマガ登録

久川和人のうつ病克服への日記を別のブログで書いています。読んでもいいよって方は、以下をクリックしてみてくださいね♪
日記
好きなことを仕事にできるブログライティングが身に付く教科書”ドリームライティング”
ドリームライティング

趣味ブログから始めて、
あなたの好きな場所で、好きな時間に、好きなことを仕事にできるブログライティングを身に付けてみませんか?
そんな夢が叶う教科書が”ドリームライティング”です。
今なら僕の特典も付いています。

Twitterでフォローしよう

おすすめの記事