AddQuicktag完全ガイド!初期設定、使い方、エラー&トラブル対応など徹底解説!

AddQuicktag

「記事を書くたびに毎回同じHTMLタグを手打ちしていて時間がかかる……」
「ビジュアルエディターとテキストエディターで操作が違いすぎて混乱する…‍…」
「追加したボタンが突然消えてしまい、再設定が面倒……」

こんな悩みを抱えていませんか?

WordPressで定型タグやショートコードを多用するほど、手入力の手間やミスが増え、執筆の効率が落ちてしまいます。

そこで活躍するのが AddQuicktag

ワンクリックでよく使うタグを呼び出し、作業スピードを格段にアップさせるプラグインです。

本記事では、初期設定からクイックタグの登録・活用方法、エラー対応まで、完全ガイドとして丁寧に解説します。

目次

プラグインの全体像解説

AddQuicktagの特徴とメリット

AddQuicktagは、WordPressの投稿画面にカスタムボタンを追加して、よく使うHTMLタグショートコードをワンクリックで挿入できるプラグインです。

初心者から上級者まで幅広く利用でき、以下のようなメリットがあります。

  • 作業効率アップ
    ボタンひとつで定型タグを呼び出せるため、HTMLの手打ちやコピー&ペーストの手間が激減します。
  • ミス削減 🛡️
    タグの閉じ忘れやタイプミスを防止し、記事の崩れや表示エラーを未然に防ぎます。
  • 柔軟なカスタマイズ性 🔧
    ボタンのラベル、アイコン、並び順、アクセスキーなどを細かく設定可能。自分好みの編集環境が作れます。
  • 環境をまたいで設定を共有 🔄
    設定をエクスポート/インポートできるので、複数サイトやチームで同じクイックタグを使い回せます。
  • プラグイン軽量・高互換性 🌐
    多くのエディター(クラシックエディター/Gutenberg)に対応し、動作も軽快です。

できること一覧

以下の表は、AddQuicktagで実現できる主な機能とその説明です。

スクロールできます
機能説明
カスタムクイックタグの追加ボタンラベル・開始/終了タグ・アイコン・アクセスキーを自由に設定可能
デフォルトタグの非表示設定標準のQuicktagボタンを必要に応じてON/OFF切り替え
タグの編集・削除登録済みのクイックタグをいつでも修正・削除できる
一括エクスポート/インポート設定ファイルを出力して他サイトへ適用、またはチーム間で共有可能
クラシックエディター対応ビジュアル・テキスト両モードでボタンを利用可能
Gutenberg(ブロック)対応クラシックブロック経由でGutenberg内でも同様にボタンを利用可能
アクセスキーによるショートカットキーボードショートカットで即座にタグを挿入
定型文・ショートコード登録HTMLタグだけでなく、ショートコードや定型文章も登録・呼び出し可能

💡 ポイント

  • 初期設定後は「使いたい場所」にチェックを入れるだけで一覧に表示されます。
  • ボタン数が多くなっても、並び順やアクセスキーで優先度をコントロールできます。

以上がAddQuicktagの全体像です。次のステップでは、具体的なインストール・設定手順をご紹介します!

インストール&初期設定

プラグインのインストール/有効化手順

  1. WordPress管理画面にログイン
  2. 左メニューから「プラグイン」→「新規追加」をクリック
  3. 検索ボックスに AddQuicktag と入力
  4. 該当プラグインの「今すぐインストール」を押下 ⭐
  5. インストール完了後、「有効化」をクリック ✅
  6. 有効化すると、左メニューの「設定」内に “AddQuicktag” が追加されます

💡 プラグイン名が表示されない場合は、ブラウザのキャッシュをクリアして再読み込みしてください。

初期設定画面の見方と基本項目

AddQuicktagの設定画面は、主に以下のエリアに分かれています。

スクロールできます
項目説明
ボタンラベルエディター上に表示される名前。短く分かりやすい文字列を指定しましょう。
ダッシュアイコンボタン横に表示するアイコンを選択。視覚的にタグの種類を識別しやすくなります 🎨
開始タグ/終了タグ挿入したいHTMLやショートコードを設定。必ず両方を正しくペアで入力してください ⚙️
アクセスキーキーボードショートカット(例:Alt+Qなど)を割り当て。素早く呼び出せます ⌨️
表示場所のチェックボックスクラシックエディター or Gutenberg(クラシックブロック)のどちらで有効化するか選択
並び順複数ボタンを登録した際の並び順を数字で指定。0番が先頭に表示されます 🔢

🔍 Tip: 各項目右上の「?」アイコンにマウスを合わせると、より詳しいヘルプが表示されます。

クイックタグの登録操作

新規ボタンの作成方法

  1. 設定画面の「クイックタグ追加」フォームを開く
  2. 以下の項目を順に入力していきます

ボタン名・アイコンの指定

  • ボタン名:エディター上に表示されるテキスト。
    • 短くわかりやすい文字列を心がける
  • アイコン:Dashiconsから選択可能
    • 視覚的にタグの種類を識別 ✅

開始/終了タグの入力

スクロールできます
項目内容
開始タグ挿入したいHTMLやショートコードの前半部分例:<div class="box">
終了タグ対応する終端タグ例:</div>

💡 タグをペアで正しく入力しないと、記事のレイアウトが崩れることがあります

キー割り当てと並び順の設定

  • アクセスキー:Alt+任意の1文字で呼び出し
    • 例:Alt+Q など⌨️
  • 並び順:数値で指定(0 が一番左)
    • 登録が多い場合は優先度コントロールに便利 🔢

既存タグの編集・削除

  1. 設定画面下部の「登録済みクイックタグ一覧」から該当ボタンを探す
  2. 編集アイコン✏️をクリックし、各項目を更新
  3. 削除アイコン🗑️で不要なボタンを即座に消去

⚠️ 削除すると元に戻せないので、必要ならエクスポートでバックアップを!

デフォルトボタンの非表示切り替え

  • 設定画面の「表示場所」セクションにある
    • クラシックエディター/Gutenbergごとにチェックボックスが並ぶ
  • 標準タグ(太字、リンクなど)をオフにしたいときは
    1. 対象のタグのチェックを外す
    2. 画面下部の「変更を保存」をクリック ✅

🎯 Tip:よく使うカスタムタグだけを残すと、ツールバーがすっきりします!

タグの一括入出力

登録データのエクスポート手順

  1. 設定画面にアクセス
    左メニューの「設定」→「AddQuicktag」を開きます
  2. エクスポートタブを選択
    画面上部の「インポート/エクスポート」タブをクリック
  3. エクスポート内容を確認
    • 登録したクイックタグ一覧がテキスト形式で表示されます
    • 必要に応じて不要なセクションを削除してもOK 🔍
  4. データをコピー or ダウンロード
    • テキストエリアの内容を全選択してコピー
    • または「ファイルとして保存」ボタンを押して .txt ファイルを取得 💾
  5. バックアップを保管
    • チームで共有する場合はクラウドストレージへ
    • 自分用にはローカルフォルダに保管しておくと安心です 📂

インポートで設定を引き継ぐ方法

  1. インポートタブを開く
    同じく「インポート/エクスポート」タブを選択
  2. ファイルまたはテキストを準備
スクロールできます
方法手順
テキスト貼付コピーした設定データをテキストエリアに貼り付け
ファイル選択「ファイルを選択」ボタンから .txt を指定
  1. 上書き or 追加を選択
    • 上書き:既存タグをすべて置き換える
    • 追加:新規タグだけを追加し、既存設定は維持 🆕
  2. インポート実行
    「インポート」ボタンをクリックして処理を開始
  3. 動作確認
    • エディターを開き、タグ一覧に正しく反映されているかチェック ✅
    • 問題があればすぐに再エクスポートして修正しましょう 🔄

💡 ポイントまとめ

  • エクスポートは定期的に実施し、バージョン管理すると安心
  • インポートは「追加」モードを活用すると既存環境を壊さず安全

各エディター別の利用手順

クラシックエディターでの操作

ビジュアルモードで挿入する流れ

  1. 投稿画面を「ビジュアル」タブで開く
  2. ツールバーに表示されたクイックタグボタンをクリック
  3. カーソル位置にタグが自動挿入される
  4. 必要に応じてテキストを選択 → ボタンを再度クリックで囲み装飾
  5. 完了後はプレビューで見た目を確認

💡 画像やリンクなど複雑なショートコードも、ビジュアルモードで扱えます。

テキストモードでの使い方

  1. 「テキスト」タブに切り替え
  2. クイックタグボタンを押すと、開始/終了タグが挿入
  3. タグ内に直接コードや文章を入力
  4. 手動で位置調整したい場合は、タグ部分をドラッグ&ドロップで移動可能
  5. 完了後、「ビジュアル」に戻してレイアウトを確認

🔍 Tip: テキストモードでは改行やスペースがそのまま出力されるため、タグ間の余白をチェックしましょう。

Gutenberg(ブロックエディター)での使い方

クラシックブロック経由で利用する方法

  1. 投稿画面で「+」ボタンをクリック
  2. ブロック検索に「Classic」と入力 → クラシックブロックを選択
  3. クラシックエディター領域が表示されたら、いつものクイックタグ操作が可能
  4. タグを挿入後、他のブロックと組み合わせてレイアウトを調整
  5. 必要に応じてビジュアル/テキスト切り替えもOK
スクロールできます
手順ポイント
クラシック選択“Classic” と検索して素早くブロックを追加
ボタン押下従来のボタンが動作するため使い慣れた操作感
ブロック調整他のブロックとの間隔や並びをドラッグで調整可能

🎯 ワンポイント:Gutenbergの段落ブロックで使いたい場合は、予めクラシックブロックを複製して活用すると効率的です。

エラー&トラブル対応

ボタンが表示されない場合の確認ポイント

  1. プラグインの有効化状態
    • 管理画面 → プラグイン一覧で「AddQuicktag」が有効化済みになっているか確認 ✅
  2. 表示場所の設定
    • 設定画面の「表示場所」でクラシック/Gutenbergどちらか適切にチェックが入っているか確認
  3. キャッシュクリア
    • キャッシュ系プラグインやブラウザをリロードして、古いデータが残っていないかチェック 🔄
  4. ユーザー権限
    • 投稿権限の低いユーザーではツールバーが制限されることがあるため、管理者権限でテスト

「Forbidden access」エラーの対処法

  • 原因:サーバー側のセキュリティ設定やファイル権限により、設定画面やエクスポート機能がブロックされる
  • 対応手順
    1. .htaccessの設定確認
      • RewriteRuleDeny from の項目がないかチェック
    2. ファイル/フォルダー権限
      • /wp-content/plugins/addquicktag/ 以下が755(フォルダ)・644(ファイル)になっているか確認 🔒
    3. セキュリティプラグインの一時停止
      • Wordfence・iThemes Securityなどをオフにして再度アクセス
    4. サーバーログ確認
      • エラーコード(403など)が残っている場合、ホスティング会社へ相談

バージョン互換性やプラグイン競合の解決手順

スクロールできます
チェック項目対策例
WordPressバージョン最新版または動作推奨バージョンへのアップデート🔄
PHPバージョン7.4以上推奨。ホスティングでPHPバージョンを切り替えて確認
他のエディタ系プラグインGutenberg拡張やTinyMCE系が影響する場合、一時的に無効化する
テーマとの相性デフォルトテーマ(Twentyシリーズ)に切り替えて確認
プラグインの順序プラグインロード順が影響することも。AddQuicktagを先頭に設定
  1. プラグインの無効化テスト
    • すべてのプラグインをOFF → AddQuicktagだけON → 問題が解消されるか確認
  2. テーマの切り替え
    • 標準テーマに変更して動作チェック
  3. ログ出力で原因特定
    • WordPressの wp-config.phpdefine('WP_DEBUG', true); を追加し、表示されるエラーを元に対応

💡 ワンポイント

  • 本番環境では 必ずバックアップを取得 してから作業しましょう!
  • 変更後はキャッシュやCDNもリフレッシュするのをお忘れなく。

活用テクニック・応用例

CSSと組み合わせた装飾強化

HTMLタグだけでなく、CSSクラスを組み合わせた装飾をクイックタグで呼び出すと、よりリッチなデザインが瞬時に実現できます。

  • 例:ボックスタイトル風装飾
    1. <h2 class="custom-title">タイトル</h2> を開始/終了タグに登録
    2. CSS(テーマの追加CSSなど)に以下を追記
    .custom-title { border-left: 4px solid #007acc; padding-left: 8px; color: #007acc; }
    1. ボタンクリックで⏩スタイリッシュな見出しが挿入
  • アイコン付きボタンデザイン
    • 開始タグ:<a href="#" class="btn-primary">
    • 終了タグ:</a>
    • CSS例:
      css .btn-primary { display: inline-block; background: #28a745; color: #fff; padding: 6px 12px; border-radius: 4px; text-decoration: none; }
    • ポイント: カラーや余白はテーマに合わせて微調整可能

開始タグのみ登録して定型文化

定型文やよく使うテンプレートを「開始タグだけ」で登録し、カーソル位置から自由に続きを入力できるようにする手法です。

スクロールできます
用途開始タグ例説明
FAQブロック<div class="faq"><p class="question">回答部分は手動で追加。流用性が高い!
注意書きボックス<div class="alert alert-warning">終了タグは手動でもOK。緊急性を強調
引用枠<blockquote class="quote">続きに引用文をペーストして使用

🎯 使い方

  1. 開始タグ挿入
  2. テキストを入力
  3. 手動で対応する終了タグを追加

ショートコード登録で機能拡張

WordPressのショートコードを直接クイックタグ化すると、プラグイン導入なしで高度な機能を呼び出せます。

  • 例:ボタンショートコード
    • 開始タグ:[button url="https://example.com" style="primary"]
    • 終了タグ:[/button]
    • 📋 使い方: ボタンラベルをタグ内に入力して完了
  • 例:タブ切り替えショートコード
    [tabgroup] [tab title="Tab1"]…[/tab] [tab title="Tab2"]…[/tab] [/tabgroup]
  • 上記全体を一つのボタンに登録すれば、タブUIが即座に作成可能 ✨
  • ギャラリーショートコード
  • を登録
  • サムネイルギャラリーを数クリックで呼び出し 📷

💡 Tip: 複雑なショートコードはテキストエディタで微調整しやすいように、一度登録してからパラメータだけ変更する運用がおすすめです。

よくある質問Q&A

  • 登録したタグが反映されないとき
    • プラグインが有効化されているか、表示場所のチェックが入っているかをまず確認してください ✅
    • キャッシュやブラウザのリロードで古い状態が残っている場合があるので、クリアして再度読み込みを行いましょう 🔄
  • 定型文やショートコードの登録可否
    • AddQuicktagはHTMLタグだけでなく、任意のテキストショートコードもそのまま登録可能です 💬
    • 複雑なコードは「開始/終了タグ」に丸ごと貼り付け、後からパラメータだけ書き換える運用がおすすめです ✨
  • マルチサイト/カスタム投稿タイプ対応
    • マルチサイト環境では、各サイトごとに設定が独立しています。サイトAで設定したタグはサイトBには反映されません 🔐
    • カスタム投稿タイプで使う場合は、設定画面の「表示場所」で該当の投稿タイプにチェックを入れてください 📑

まとめ

本記事では、AddQuicktagの導入から各エディターでの使い方、トラブルシュートまでをひととおりご紹介しました。

  • 初期設定で画面構成を把握し
  • クイックタグ登録で定型作業を自動化し
  • エラー対応で突然の問題にも慌てず対処

これらをマスターすれば、記事執筆のストレスは大幅に軽減され、コンテンツ制作に集中できます。

さあ、今日からAddQuicktagを活用して、より快適で効率的なブログライフを手に入れましょう!🚀

目次