AddQuicktagの使い方と設定を解説|タグ不要で装飾を最適化するには?

WordPressでブログを書いていると、こんなことありませんか?

「文字装飾する時に毎回コードを書くのが面倒」

「よく使うタグや文字装飾を自分でカスタマイズして使いたい」

そういった悩みを解決するプラグインがAddQuicktag(アドクイックタグ)です。

AddQuicktagを使用すれば、ボタン一つで文字の装飾や定型文が簡単に作れます。

今回は、AddQuicktagのインストール方法から、タグの設定まで詳しく解説。

りん
記事執筆が捗る方法を、webディレクターの私りんが教えます。

この記事を書いた人
りん
りんメディアディレクター

㈱Wooのメディアディレクター。BLOGUSを専任しています。 元副業ライター、現副業ディレクターです。 BLOGUSでは主にビジネス・恋愛・ブログに使える行動心理学について発信しています。本業は児童館の先生です。

この記事の監修者
ドム(工藤逸世)SEOコンサル&WPテーマ開発

㈱Woo代表。WordPressを魔改造してSEO戦争する人です。 WordPressプラグイン・テーマ「unify」開発者。 中央大学卒。元WEB系エンジニアでCMSやECサイト開発等をしてました。 2018年10月頃にブログ運営を開始。2020年独立し、2021年法人化。

AddQuicktagの機能

AddQuicktagとは

よく使う装飾のコードなどをあらかじめ登録しておくことで、記事の執筆が格段に早くなるプラグイン。

AddQuicktagを使えば、毎回装飾コードをコピペしていた面倒が解消されます。

長いコードでも、AddQuicktagに登録されたものならボタン1つで引き出し可能。

しかし、WordPressの有料テーマでは、文字装飾や定型文を簡単にする機能が最初から備わっていることも。

また、テーマによってはAddQuicktagが使えない場合もあります。

りん
まずは利用しているテーマを確認してみましょう。

AddQuicktagのインストールと有効化

プラグインからAddQuicktagをインストールし、有効化まで設定していきます。

  1. 「プラグイン」をクリック
  2. 「新規追加」をクリック
  3. 「AddQuicktag」と入力し検索
  4. 「今すぐインストール」をクリック
  5. 有効化する

プラグインより新規追加をし、“AddQuicktag”を検索後インストールを開始します。

インストール後は有効化で設定完了です。

AddQuicktagの設定項目

AddQuicktagの設定項目は全部で5つです。

  • クイックタグの追加と削除
  • デフォルトのクイックタグを非表示にする
  • 拡張コードのクイックタグを追加する
  • エクスポート
  • インポート

「クイックタグの設定と削除」項目の登録だけでも、クイックボタンが追加されます。

普段から使うコードをストックしておくといいでしょう。

りん
それぞれの機能を説明しますね。

クイックタグの追加と削除

クイックボタンの追加は以下の通り。

クイックタグの設定

①ボタンのラベル・ダッシュアイコン・ラベル名

自分が分かる名前なら、英語表記でも日本語でもOK。

ダッシュアイコンとラベル名は特に記載しなくても登録できます。

②開始タグと終了タグ

タグの設定では、htmlコードを使用。

開始タグ、終了タグには必ず以下を付けます。

  • 開始タグ:< >
  • 終了タグ:</ >

例えば赤文字にするQuicktagを作りたければ、以下を開始タグ終了タグに入れていきます。

赤文字のコード

<span style=”color: #ff0000;”>赤文字</span>

開始タグに文字数制限はありません。

Google AdSenseなどの長いコードも登録しておくと、ワンクリックで操作できるのでオススメです。

③アクセスキーと並び順

「alt+アクセスキー」でショートカットキーが登録できます。

良く使うクイックタグを「0」から順に設定すると上から配置される仕組みです。

④チェックボタン(AddQuicktagの使える場所の指定)

Quicktagを表示させたい投稿にチェックを入れるとタブに表示されます。

全てに有効化させたい場合は、右端のチェックボタンで全選択可能です。

それぞれのチェックボタンの指定場所はこちら。

ビジュアルエディター 投稿画面・固定ページのビジュアルモード
page 投稿画面のテキストモード
post 固定ページのテキストモード
attachment メディア編集ページ
wp_block ブロックエディタの投稿画面
advanced_ads Adbanced Adsの編集ページ(プラグイン利用している方のみ)
comment 管理画面のコメント返信
edit-comments 管理画面のコメント編集
widgets ウィジェット

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

表示されているタグの表示・非表示が可能です。

たくさんタグがある中でも、あまり使わないタグは非表示にできます。

特に画像挿入のimgタグや終了タグのcloseタグは非表示でもいいでしょう。

クイックタグの非表示

拡張コードのクイックタグを追加する

<pre>タグ

htmlやcssのコードをサンプルコードとして紹介するときに便利です。

改行や半角スペースをそのまま表示させることが可能。

<pre>タグ隣にドロップダウンメニューも追加され、codeボタンと一緒に使います。

preタグ

codeボタンで挿入されるコードは以下です。

<code class=”language-○○○”> </code>

※○○○に各言語名

言語名は7種類から選択できます。

HTML Entities

「HTML Entities」もhtmlをそのまま表示します。

< を &lt; にしたり、「”」を「&quot;」に変換したりする処理が可能に。

りん
不要であればどちらも登録なしでOKです。

エクスポート

登録しておいたタグを他のWordPressでも使えるようになります。

りん
特に複数ブログを運営している方には便利な機能です。

  1. エクスポート内の「エクスポート内のダウンロード」をクリック
  2. json形式のファイルをダウンロード
  3. addquicktag.◯◯◯◯◯◯.jsonのファイルが確認できたらエクスポート完了。
AddQuicktagのエクスポート

インポート

外部からのjsonファイルを取り込むことが可能です。

  1. インポート内の「ファイル選択」から取り込むjsonファイルを選択
  2. 「ファイルのアップロード・インポート」で読み込み完了
AddQuicktagのインポート

インポート処理すると、以前登録していたQuicktagが削除されてしまいます。

必要なタグはメモ帳などにコピーしておき、インポート後に再度登録しましょう。

AddQuicktagの使い方

設定が完了したら、実際に使用してみましょう。

今回は太字・赤文字にするためのコードを例に、使い方を解説します。

ブロックエディタで使用する

コードエディタでは使用できませんが、クラシックブロックを選択すると、Quicktagsを利用できます。

Quicktagsを表示させるには、投稿画面よりブロックを追加し、クラシックブロックを選択。

するとクラシックブロック内にツールバーが表示されます。

Quicktagsはツールバーに隠れていることがあるので、切り替えをしましょう。

AddQuicktagの使い方1
注意

WordPressでは、AddQuicktagのプラグインの互換性に問題があるため表示されない場合があります。

古いWordPressならバージョンアップしましょう。

最新のWordPressならバージョンを5.5.3に下げると問題なく動作します。

クラシックエディタ(ビジュアルモード)で使用する

装飾したいテキストを選択した状態で、Quicktagsを選択し実行します。

ここでは、太字にするタグを例にご紹介。

  1. ビジュアルモードを選択
  2. 装飾したいテキストを選択した状態にする
  3. Quicktagsのプルダウンメニューから「太字」を選択
Addquicktagの使い方2

以下の画像のように変換できます。

Addquicktagの使い方3

クラシックエディタ(テキストモード)で使用する

テキストモードでは、ボタンを2回クリックすることで、開始タグ(1回目クリック)と終了タグ(2回目クリック)が挿入されます。

  1. 開始タグ(1回目クリック)を挿入
  2. テキストを入力
  3. 終了タグ(2回目クリック)を挿入
Addquicktagの使い方4

AddQuicktagが表示されない時の対処法

AddQuicktagが表示されない場合、以下のような原因が考えられます。

  • プラグインが有効化されていない
  • AddQuicktagの設定ミス
  • 編集ページ内のツールバーに隠れている
  • WordPressのバージョンの不具合
りん
それぞれの対処法について見ていきましょう。

プラグインが有効化されていない

プラグインから「AddQuicktag」が有効化されているか確認しましょう。

AddQuicktagの設定ミス

チェックボタン(投稿場所の指定)が外れている、もしくは変更保存されていないかもしれません。

設定箇所を今一度確認しましょう。

編集ページ内のツールバーに隠れている

投稿管理画面のツール内にある「ツールバーの切り替え」タブをクリックしてみましょう。

隠れているツールを展開すると「Quicktags」のプルダウンが出てきます。

④WordPressのバージョンの不具合

WordPress5.6以降のクラシックエディタを使用すると、アップデートする際に不具合が生じることも。

プラグイン「WP Downgrade」をインストールしWordPressのバージョンを下げることで解決できます。

まとめ

この記事のまとめ

  • AddQuicktagは、ボタン1つでコードや定型文を引き出せるプラグイン。
  • AddQuicktagの設定は「クイックタグの追加と削除」だけでも十分機能する。
  • 複数ブログ運営している人はエクスポート・インポートで登録タグを移管できる。
  • AddQuicktagが表示されない場合は、設定を確認するか、プラグイン「WP Downgrade」でバージョンを下げてみる。

AddQuicktagに普段使うコードを登録しておけば、サクサク記事が書けます。

文字装飾はもちろん、定型文やボックス(吹き出しなど)も登録可能です。

特にクラシックエディタを使用されている方は、とても効率よく記事執筆ができます。

りん
時短できるところは、どんどん時短していきましょう!