タグ付けが3倍速!WordPressのプラグイン「AddQuickTag」の使い方・設定方法

Sponsored Link


WordPressのタグ付けの作業が便利になる「AddQuickTag」の使い方

どうも、Linです。ピーマン、リピートしてます。

 

WordPressで記事作成をする際に発生する作業として、

特定タグ付け

というものがありますよね?

 

例えば、「あかいぜ」という文字をクラス名「red」のdiv要素で囲いたい場合は、

投稿の編集画面を「テキストモード」に変更し、

と手打ちでかかねばなりません。

 

https://gyazo.com/9f8482e6c0f672b5c8fabdee7bbf27ef

 

divとか打つのめんどくさいですし、いちいち半角に切り替えないといけませんから厄介です。

 

このような記事中の文字にある特定のタグをつけたい時に便利なのが、

AddQuickTag

というプラグイン。

今日はこのWordPressのプラグインの設定方法、使い方をわかりやすくまとめました。

なお、執筆にあたりこちらの神記事を参考にさせていただきました。

 

=目次=

  1. AddQuickTagの設定方法
  2. AddQuickTagの使い方
  3. AddQuickTagの使い道

 

 

3分でできちゃう!AddQuickTagの設定方法

まずはAddQuickTagの設定方法ですね。

 

Step1. プラグインインストール、有効化

AddQuickTagというプラグインをインストールして追加しましょう。

プラグイン>新規追加

と進んで「AddQuickTag」というプラグインを検索しましょう。

 

https://gyazo.com/0dacc224b097cc758e6dd69ae74e3541

 

無事に見つかったらインストールして有効化してやります。

 

Step2. AddQuickTagの設定へ

続いてAddQuickTagの設定ですね。WordPressの管理画面から、

設定>AddQuickTag

と進んでみてください。
https://gyazo.com/38a00c9e13b854be1dc8440d22a20566
すると、次のようなAddQuickTagの設定画面が出現するはず。

addquicktag 使い方 設定方法

 

Step2.Tagの名前を決定

登録するタグの名前を決めます。

「ラベル名」という欄に識別できる名前をつけてあげましょう。

addquicktag 使い方 設定方法

ぼくはinformationというクラス名がついたdiv要素を登録したかったので「information」と名付けてみました。

https://gyazo.com/038ddb23c26321727ea350f9a9ecfb18

 

Step3. タグの中身を決める

お次は、定型文のタグの中身を決めて行きます。

開始タグと終了

という欄に開始タグと締めタグを記載。

addquicktag 使い方 設定方法

今回は、

というタグを定型文としてAddQuickTagで挿入したかったのでこんな感じになりますね↓

 

https://gyazo.com/d970cc7abbf497338ee2e67d492f227c

 

Step4. タグを使う場所を決める

タグをどこで使用するのかを決めて行きます。

場所を決めるのは右側の欄にあるチェックマークですね。

addquicktag 使い方 設定方法

AddQuickTagでは、

ビジュアルエディター 投稿画面・固定ページのビジュアルモード
post 投稿画面のテキストモード
page 固定ページのテキストモード
attachment メディア編集ページ
comment 管理画面のコメント返信
edit-comments 管理画面のコメント編集
widgets ウィジェット

という7つの箇所で登録したタグを使えるようです。

 

ぼくは個人的に、投稿ページの「ビジュアルエディタ」と「テキストエディタ」のみで使えればよかったので、

  • ビジュアルエディター
  • post

の2つにチェックマークを入れてみました。
https://gyazo.com/702a70b02303a1e813deb8a7713cf54b

 

 

タグを3秒で追加!AddQuickTagの使い方

ここまででAddQuickTagの設定方法は終わり。

ってことで、実際に使ってみましょう。

 

Step1. 文字を書く

タグ内に入れたい文字をビジュアルモード書きます。

今回は、

AddQuickTag最高!

という文を「information」というdiv要素に入れていきますよ。

 

https://gyazo.com/85ffbbdddffc939b8a76fb49a901d1f3

Step2. 文字をハイライトする

先ほど記載した文字をハイライトします。

マウスでドラッグして選択した状態にしてやりましょう。

 

https://gyazo.com/2440d2842dfdeb750b429f624d78e491

Step3. タグを選ぶ

あとは文字につけたいタグを選ぶだけ。

設定時点で「ビジュアルエディタ」をAddQuickTagを使う場所として選んで入れば、AddQuickTagのタブが出現しているはずです。

Quicktagsというプルダウンですね。

 

こちらをクリックし、先ほど登録したタグ名を選択。

https://gyazo.com/82356c3cbe5b84b07aa4f9c0176d4432

すると、

というタグが挿入できることになります。
https://gyazo.com/169434637215b664b3ba9074f50e9328

 

 

テキストエディタの場合は?

ここまではビジュアルエディタでの使い方でしたが、テキストエディットモードでも使い方は一緒。

タグのボタンが出現しているはずなので、こいつをクリックしやればいいいです。

今回はinformationというタグを登録したので、informationボタンが出現しているはず↓

https://gyazo.com/1714df4d97d27a5c5473eb29823ff8f4

うん。

タグが挿入できますね。

こんな感じで、ビジュアルでもテキストでもお好みの方法でタグを追加してみてくださいね。

 

 

AddQuickTagを使うと何が便利になるの??

とここまでがAddQuickTagの使い方や設定方法でした。

あとは、

どんなシチュエーションでAddQuickTagが使えるのか??

ということにも触れておきましょう。

 

これはぼく個人の場合ですが、

特定のクラス名を持つdiv要素を記事内にぶちこむ

という場合で活躍しています。

特に、前記事で紹介した補足情報の枠を記事内で挿入する方法なんかと相性が良さそうです。

 

たとえば、style.cssを編集して

「information」というクラス名のブロックに、背景が薄黄色で「iマーク」をつける

としたしましょう。

このデザインを使うには文章中に<div class=”information”>を書いて、さらに</div>で閉じるという作業が発生しますが、AddQuickTagならば、

ドラッグして事前に登録したタグを選ぶだけ。

 

https://gyazo.com/82356c3cbe5b84b07aa4f9c0176d4432

これだけでいとも簡単に背景のことなるちょっとしたおしゃれなコラム欄のような箇所を記事内に設けることができます↓

そのほかにもタグの代わりにショートコードを登録することもできるでしょう

 

「なんかタグ挿入できないぜ?」

と憤っている方にはエンジニア専門のQAサイト「teratail」がおすすめです。質問にも答えてくれる方はプロのエンジニアの方ばかり。

WordPressに関する質問もOKなので、問題を解決できるかもしれません。

 

それでは!

Lin

飯橋凛(Ihashi Lin)

新卒で入ったネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いしている


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる