AddQuicktagの設定方法と使い方｜ショートコードを簡単登録

WordPressを使って記事を書いているのならTinyMCE Advancedと並んで記事作成効率化のために絶対に入れたいのがAddQuicktagというプラグイン。

このプラグインを使いこなすことができれば記事を書くスピードが飛躍的に上昇するだけでなく、自分が作ったショートコードを追加できるので記事の見栄えやデザインのクオリティもグッとあげることができます。

「入れないとかなり時間損してるよ！」ってくらい超便利なプラグインですので、ぜひ今回の記事を参考にAddQuicktagをインストールしてみて下さい。

AddQuicktagとは？

“AddQuicktag”とはこちらの上の画像のように、WordPressの記事投稿画面でテキストモードを表示した時に出てくるバーをカスタマイズできるプラグインです。

プラグインのTinyMCE Advancedを使って、ビジュアルエディタをカスタマイズしている方はかなりいらっしゃるでしょう。

これはこれで非常に便利で使いやすいのですが、TinyMCE Advancedでは、例えば以下のように自分で作ったオリジナルのコードを登録することができません。

これをテキストモードで表示するとこんな感じ↓

<div class="bg-border-box">灰色のボックス</div>

この灰色のボックスを使うのに、いちいちテキストモードにして上のコードを貼り付けて…とやっていたらすごく面倒くさいんですよね。

そこで、今回ご紹介するAddQuicktagを使えばこのようなショートコードを自分で自由に登録できて超簡単に好きな場所で使えます。

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

まずはAddQuicktagをインストールします。

WordPressのメニューから「プラグイン」⇒「新規追加」でAddQuicktagをインストールして有効化しましょう。

プラグインのインストール方法が分からない方は下の記事を参考にしてみてください。

⇒　WordPressにプラグインをインストールする方法と注意点

AddQuicktagの設定方法

クイックタグの追加

インストールできたらWordPressメニューの「設定」から「AddQuicktag」を選択します。

そうすると次のような画面になります。

こちらの画像に沿って、情報を入れてみて下さい。

• ①ボタン名
• ②開始タグ
• ③終了タグ
• ④プルダウンメニューで表示される順番

右側のチェックを入れる項目に関しては、固定ページ編集画面で使えるようにするのか、個別投稿ページで使えるようにするのかなどそのショートコードを使えるようにする場所を決めます。

基本的には一番右のチェックボックスを押して、全部にチェックを入れるのがオススメです。

例えば、先程の灰色のボックスを登録したいのであればこんな感じで入れます。

• ①ボタン名：灰色のボックス（例）
• ②開始タグ：<div class=”bg-border-box”>
• ④終了タグ：</div>
• ④プルダウンメニューで表示される順番：１

設定したら「変更を保存」を押すのをお忘れなく。

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

上のようにタグを追加できることはもちろんですが、「デフォルトのクイックタグを非表示にする」というところからテキストモードのバーに始めから入っているタグを非表示にできます。

こうするとかなりスッキリしていい感じです。

<strong>、<em>といったものは「Ctrl + B」や「Ctrl + I」といったキーボードのショートカットキーで使えますし、<blockquote>はビジュアルエディタの側から使えるので、こういうのは非表示にして見やすくさせちゃいましょう。

AddQuicktagの使い方

上の設定が終わったら、今度は記事の投稿画面から実際にAddQuicktagを使ってみます。

AddQuicktagをインストールして有効化するとビジュアルエディタのバーのところに”Quicktags“という項目が追加されています。（ない場合は「ツールバーの切り替え」を押して下さい）

いつも文字色を変更したり、引用を使っているように、テキストを選択してビジュアルエディタの”Quicktags”から自分が作ったタグを選んでクリックしましょう。

これで見てみると、

こんな感じでできあがりました。

また、もちろんテキストモードに変えてもバーに作ったコードが追加されています。

ビジュアルエディタからだとうまくいかない場合は多少面倒ですが、こちらから使っていきましょう。

好きなショートコードを作る

いろんなブログを見ていて、「この枠自分も使いたいなあ」と思う時ありますよね。

そんな時は失礼して、そのブログのCSSをGoogle Chromeを使って見てしまいましょう。

Google Chromeを使っていればこのように「右クリック」⇒「要素を検証」からそのページのCSSを全部見ることができます。

あとはここから該当するコードを見つけ出して、AddQuicktagに登録すれば自分も使えるようになります。

まとめ：ショートコードを簡単登録して作業効率と記事のクオリティを上げよう

ということで今回は記事作成に超便利なプラグイン・AddQuicktagの設定方法と使い方について解説してみました。

WordPressは使っているテーマによって最初からショートコードがたくさん入っていたり、いなかったりします。

実は僕が今使っているこのテーマもショートコードは最初は全然入っていなかったので、先程の灰色のボックスのように自分で追加をして使っています。

これをすることによって記事が見やすくなってクオリティが上がるし、記事執筆時間の短縮にもなるので、ぜひ設定をしていきましょう！

Related Posts