AddQuicktag設定方法と使い方|記事執筆効率を格段にアップさせるプラグイン

AddQuicktag

WordPress の管理画面から記事を書く場合、エディタに標準装備されているボタンを使って見出しの設定や文字の装飾ができますよね。

しかし、なかにはまったく使わないボタンもあるんじゃないでしょうか。逆に、オリジナルの CSS があるときは専用ボタンがほしくなると思います。

そこでプラグイン「AddQuicktag」を使ってボタンを自分好みに変えてしまいましょう。記事を書くスピードが格段に上がりますよ!

それでは、設定方法と使い方を解説していきます。

AddQuicktagインストールと有効化

インストールは公式サイトからプラグインファイルをダウンロードするか、管理画面の「プラグイン」から検索して行います。

AddQuicktag インストール

インストールが終わったら、そのまま有効化しておきましょう。

有効化後、管理画面の「設定」に「AddQuicktag」が追加されるので、ここから設定画面に入ります。

AddQuicktag 設定

AddQuicktag設定画面解説

設定画面は、大きく 4 つの項目に分かれています。

AddQuicktag 設定画面
項目内容
クイックタグの追加と削除ここでタグを登録しておくと、投稿編集画面のエディターにボタンが表示されます。どのエディターに表示するか選択できます。
デフォルトのクイックタグを非表示にするエディターに標準で表示されている各ボタンの表示・非表示を制御できます。
拡張コードクイックタグボタンエディターに「pre」「htmlentities」ボタンを追加できます。カスタマイズ記事などで重宝します。
エクスポート・インポートAddQuicktag の設定をエクスポート・インポートできます。ブログを複数運営していたり、テーマ開発者が利用者に配布するときに便利です。

「クイックタグの追加と削除」の操作方法だけ覚えておけば問題ありません。

以下、登録方法と使い方を解説します。

クイックタグ登録方法

各項目概要

「クイックタグの追加と削除」の各項目は以下のとおりです。

項目内容
ボタンラベルエディターに表示するボタンの名前
ダッシュアイコンボタン左にアイコンを表示する(ビジュアルモードのみ)
ラベル名ボタンにカーソルを乗せたときに表示するテキスト
開始タグ開始タグ 例)<strong>
終了タグ終了タグ 例)</strong>
アクセスキーショートカットキーの設定
並び順ボタンの並び順
右側チェック項目ボタンを表示するエディター選択
右端のチェックマークで全選択

タグ登録時に最低限必要なのは「ボタン名」「開始タグ」「右側チェック項目」です。

実際にタグを登録しながら解説していきます。以下の記事でご紹介している、「.sample01」を登録してみましょう。

最終的に以下のようになります。

AddQuicktag 登録済みのタグ

STEP1
ボタンラベルをつける(必須)

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

「ボタンラベル」は、エディターに表示するボタンの名前です。自分のわかりやすい名前にしておきましょう。ここでは「強調赤線」としました。

STEP2
ダッシュアイコンを設定する(任意)

「ダッシュアイコン」部分に表示されているアイコンをクリックすると検索ウィンドウが表示されます。

WordPress 5.6 + PHP7.4 では検索できなかったので、アイコンを表示したい場合は「Developer Resources: Dashicons」からアイコンを検索してください。

任意のアイコン選択後、「HTML をコピーする」をクリックし、class 名をコピペすれば反映されます。

WordPressダッシュアイコン

STEP3
ラベル名を付ける(任意)

「ラベル名」は、ビジュアルモードでクイックタグ上にカーソルを乗せたとき、ツールチップとして表示される説明文です。

自分だけで使うならとくに設定しなくてもよいでしょう。

ボタンラベル・ダッシュアイコン・ラベル名を設定すると、投稿編集画面では以下のような表示となります(テキストモードではダッシュアイコンが表示されません)。

クイックタグ表示サンプル

ブロックエディターでは、「クラシック」ブロックでのみクイックタグが使えます。

STEP4
開始タグと終了タグを設定する(必須)

開始タグ・終了タグ

「開始タグ」「終了タグ」は以下のように入力します。

開始タグ<strong class="sample01">
終了タグ</strong>

HTML タグだけではなく、ショートコードや定型文を登録することもできます。その場合はすべて「開始タグ」に入れておけば OK です。

STEP5
アクセスキーと並び順を設定する(任意)

アクセスキーと並び順

「アクセスキー」はショートカットキーのことですが、WordPress 5.6 + PHP7.4 では動作しませんでした。ここは空欄のままにしておきます。

「並び順」は任意で、設定しない場合は登録順にボタンが並びます。よく使うタグに若い番号を振っておくと使いやすいでしょう。

STEP6
ボタンを表示する場所にチェックを入れる(必須)

クイックタグ表示場所

最後に、ボタンを表示する場所にチェックを入れます。

ここでチェックを入れ忘れると、タグが登録されていてもエディターにボタンが表示されません。

名称場所
ビジュアルエディタービジュアルモード
post投稿
page固定ページ
attachment添付ファイルのページ
wp_blockブロックエディター(クラシックブロック)
acf-field-groupプラグイン「Advanced Custom Fields」入力欄
※プラグインインストール時に表示
commentコメント入力欄
edit-comments管理画面コメント入力欄
widgetsウィジェット(テキストウィジェット)

上記例のほか、カスタム投稿タイプを設定している場合は、投稿タイプ名が表示されます。

右端にチェックを入れると全選択となりますので、とくに指定がなければ全てチェックしておきましょう。

STEP7
最終確認

最後に入力漏れがないか確認して完了です。

AddQuicktag 登録サンプル

サンプルとして定型文も登録してみました。ボタンラベル・開始タグ・並び順・表示位置を設定してあります。

AddQuicktagの使い方

それでは、投稿編集画面で AddQuicktag を使ってみましょう。

クラシックエディター(ビジュアルモード)の場合

クラシックエディター(ビジュアルモード)は、登録したタグが「Quicktags」に入っています。

表示されていない場合は、「ツールバー切り替え」ボタンをクリックしてください。

クラシックエディタ―(ビジュアルモード)のQuicktags

タグを適用したい場合は、先に文字列を選択し、登録したタグをクリックします。

クラシックエディタ―(ビジュアルモード)でタグを適用

定型文を登録してある場合は、タグをクリックするだけでカーソル位置に定型文が挿入されます。

クラシックエディタ―(ビジュアルモード)で定型文を挿入

クラシックエディター(テキストモード)の場合

クラシックエディター(テキストモード)では、登録したボタンがエディター上部に並んでいます。

ビジュアルモードと同じく、タグを適用する場合はテキストを選択してボタンをクリック。定型文を挿入する場合は、ボタンをクリックするだけで OK です。

クラッシックエディター(テキストモード)でタグを挿入

ブロックエディターの場合

ブロックエディターは、クラシックブロックを使います。操作方法は、クラシックエディター(ビジュアルモード)と同じです。

ブロックエディターでクイックタグを挿入

ブロックエディターは、クラシックエディターより多彩な表現ができるため、今後使う機会は少なくなっていくかもしれませんね。

当サイトではブロックエディターに完全移行したのをきっかけに、AddQuicktag の使用もやめました。

AddQuicktagに関するよくある質問

Q
登録したタグ(ボタン)が表示されません
A

設定画面でボタンを表示したい位置にチェックが入っているか確認してください。設定に問題がない場合、テーマや他のプラグインと干渉している可能性があります。

Q
定型文を登録できますか?
A

コードだけではなく通常のテキストを定型文として登録しておくことができます。その場合は「開始タグ」に定型文を入力してください。

Q
ブロックエディター(Gutenberg)で使えますか?
A

「クラシック」ブロックで使えます。登録したタグが表示されない場合は、いったん「HTML として編集」をクリックしてから再度「ビジュアル編集」に戻してみてください。今後の仕様変更で使えなくなる可能性もあります。

まとめ

装飾は標準装備のボタンで十分! という場合でも、定型文やショートコードを登録しておけば執筆がかなり楽になります。

ちなみに「開始タグ」に登録できる文字数に制限はありません。Google AdSense のコードを丸ごと登録しておく、なんていうことも可能です。

ぜひ AddQuicktag でオリジナルボタンを作ってみてください。

それでは、また。

Naifix Limited

Naifix Limited

Naifix Limited に無料登録すると、会員限定コンテンツ「ブログのアクセス数を最大限に増やす SEO 施策」ほか、ライブ配信やメールマガジンでブログ運営に役立つ最新情報を入手できます。

WordPressトラブルでお困りですか?
「ブログの保険」に加入すると、いつでも気軽にブログ運営に関する相談ができます。

ブログの保険 Essential Bloggers Care
Essential Bloggers Care