【WordPressプラグイン】AddQuicktagの設定と使い方

プラグイン「AddQuicktag」はよく使うタグやショートコードを登録してボタン一つで挿入することができます。長いコードを毎回書くのは面倒ですよね。それだけで記事を書くスピードが落ちてしまいます。そんな悩みを解消してくれるのが「AddQuicktag」です。

この記事では「AddQuicktag」のインストールから設定方法まで紹介します。

AddQuicktagをインストール

管理画面からプラグイン >> 新規追加 >> AddQuicktagを検索 >> 今すぐインストール >> 有効化

インストールが終わったら管理画面 >> 設定 >> AddQuicktag

またはプラグイン >> インストール済みプラグイン >> 設定

設定画面が開くので設定をしていきます。

AddQuicktagの設定

登録したいタグを入力していきます。主に使うのは3つ。

  1. ボタン名:H2(大見出し)など分かりやすい名前で入力
  2. 開始タグ:大見出しの場合は<h2>と入力
  3. 終了タグ:</h2>と入力

あとは表示させたいエディターを選ぶだけです。

各項目を詳しく解説します。
その後、実際に登録していきましょう。

項目 内容
ボタンのラベル 記事投稿画面のビジュアルエディター、テキストエディターで表示される名前
ダッシュアイコン ボタンのラベルの横に表示するアイコン。クリックすると↓の画面が表示されます。

名前があればいいので基本的には不要
ラベル名 ボタン名の説明文です。カーソルを乗せた時に表示されます
開始タグ よく使うタグやショートコードを入力します。太字なら<b>
終了タグ 太字なら</b>
アクセスキー Windows IEで登録できるショーカットキーです
順番 0から指定するとその順番で表示/追加されます。指定しない時は登録順

見出しを登録する

テーマによって用意されていたりしますが、H2(大見出し)を登録してみます。
<h2></h2>

H3(小見出し)も登録します。
<h3></h3>

次に表示させたいエディターを選びます。

詳しい内容は↓

項目 内容
ビジュアルエディター 記事投稿画面のビジュアルエディターで表示させます。
Post テキストエディターで表示させます。
Page 固定ページで表示させます。
Attachment メディアの編集で表示させます。
Comment コメントの編集で表示させます。
Edit-comments コメント一覧のクイック編集で表示させます。
Widgets ウィジェットエリアで表示させます。
WP Editor Wigetというプラグインが必要
全部を選択/解除できます。

ビジュアルエディター、テキストエディター、固定ページでいいと思いますが、一括選択が楽なので全部チェックしてもOKです。

一旦、変更を保存して確認します。

クイックタグの表示を確認

新規追加で投稿画面を開きます。

一見何も変わってないように見えますが・・・

このマークを押すと

出ました!

早速、先ほど追加した「H2」と「H3」を使ってみましょう。

まず、見出しにする文章を書きます。次に文章全体を選択してQuicktagsのプルダウンリストからH2を選びます。

ビジュアルエディターだと分かりづらいですが、できてます。

H3も同じように文章を書く >> 文章を選択 >> H3を選択

できました。

右上のプレビューボタンを押して、ブラウザでどう表示されてるか見てみましょう。

テーマによって色など違うかと思いますが、H2はカスタマイズ済みで、H3がデフォルトです。

デザインについては、このブログのテーマsangoの製作者様のサイトがおススメ。
コピペで使えるCSSデザインサンプル集(Web用コード250個以上まとめ)

テキストエディターで表示確認

今度はテキストエディターで確認します。

右側にH2とH3ボタンが追加されています。

ここで一つ注意するポイントがあります。

注意
テキストエディターはボタンを押すと「開始タグ」。もう一度押すと「終了タグ」になります。ビジュアルエディターと同じように、文章を選択してからボタンを押すと一度で済みます。先に「開始タグ」「終了タグ」を挿入してから、間に文章を書くとタグの閉じ忘れを防げます。

最初に文章を書きます。そして文章全体を選択して「H2」ボタンを押します。

一度にタグが挿入されました。

これから新しいタグを追加していくと、使わないタグが邪魔になったり記事の入力画面が狭くなったりします。

あまり使わないタグは、エディターで表示させないようにチェックを外します。(内容を消さない限り残る)

デフォルトで入っているタグも非表示に設定することができます。

AddQuicktagの設定画面に戻って設定します。

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

管理画面 >> 設定 >> AddQuicktag で設定画面を開きます。

初めから用意されているタグが必要ない場合はチェックを入れます。

詳しい内容は↓

  • b:<strong>テキストを強く強調</strong>
  • i:<em>TEXTを強調。IEなどのブラウザではイタリック体で表示</em>
  • link:<a href=”リンク先URL(基本プラグイン8個)“></a>
    この画面が表示される
  • b-quote:<blockquote>

    テキストを引用します

    </blockquote>

  • del:<del datetime=”2018-09-08T06:51:09+00:00″>テキストに打消し線を入れます。修正した時間もわかる</del>
  • ins:<ins datetime=”2018-09-08T06:51:09+00:00″>テキストを追加。追加日時もわかる</ins>
  • img:<img src=”画像のURL” alt=”画像の名前” />
    この画面が表示される
  • ul:
    • これはリスト
    • これはリスト
  • ol:
    1. これは番号付きリスト
    2. これは番号付きリスト
  • li:リストの中身
    <ul>
    <li>これはリスト</li>
    <li>これはリスト</li>
    </ul>
  • code:<code>コードを表示</code>
  • more:<!–more–> 続きを読む を表示
  • close:複数の開始タグに終了タグをつけられるようですが、効かないので未確認
  • fullscreen:集中執筆モード

    このマークを押すと両サイドのメニューが隠れます

これは任意で非表示にするか決めてください。

✔にチェックを入れると簡単に非表示にできます。

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

ソースコードをよく使う人以外は、飛ばしても構いません。

両方チェックを入れて、変更を保存します。

記事投稿画面で解説します。

テキストエディターを開くと「code」ボタンの前に「pre」ボタンが追加されています。

横にあるプルダウンを押すと使用できる言語が表示されます。

htmlを選択して「pre」ボタンをクリック。次に「code」ボタンを2回クリック。

リストを表示させてみます。

  1. 最初の行
  2. 2番目の行
  • 最初の行
  • 2番目の行

コードが表示されません。そんな時に「HTML Entities」を使います。

これはブラウザで表示できるように「特殊文字」に変換してくれます。例えばこんな感じ↓

コードを全選択して「HTML Entities」で変換するとブラウザで表示できます。

そしてこの「特殊文字」に変換したコードを元に戻してくれるのが「Decode HTML」です。

コードを全選択 >> 「Decode HTML」をクリック

元に戻りました。

この2つのボタンはコードを書く上で本当に便利です。この記事でもたくさん使っています。

コードをよく使う方にはプラグイン「Crayon syntax highlighter」もおススメです。
様々な言語に対応していて、デザインも豊富に揃っています。

エクスポートとインポート

最後に、複数のサイトを持ってる人に便利な機能があります。

エクスポートファイルのダウンロードをクリックします。

するとパソコンにjsonファイルが保存されます。

ファイルを他のサイトにインポートします。

他サイトのAddQuicktag設定画面を開き、ファイルを選択、「ファイルのアップロード・インポート」ボタンをクリックすると、登録したタグや設定をそのまま引き継げます。

以上で設定は終わりです。