★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

AddQuicktagを使ってWordPressにタグボタンを追加する手順を解説

WordPressで記事を書くときはただ文章を書くだけでなく、タグを使い分けて構造化することが大事だということは次の記事でも書きました。

HTMLタグを使って文章を適切に構造化すると読者が読みやすくなり、SEO的にも評価の高いページになります。そこでここではWordPressで重要な7つのHTMLタグの役割と挿入方法を解説していきます。

このタグは1つ1つ手打ちすることもできますが、編集画面上に表示されている「クイックタグ」と呼ばれるボタンを使えばワンクリックで挿入できて楽です。

ただこのクイックタグにはWordPressやテーマで決まったものしか用意されていないので、独自のタグを追加するには「AddQuicktag」というプラグインを使うのが便利です、

ここではこのAddQuicktagプラグインの導入・使い方について解説していきます。

クイックタグとは

クイックタグとは冒頭でも書いたように編集画面上に表示されるタグをワンクリックで挿入できるボタンのことです。

例えば編集画面でビジュアルエディタを開くと次の画像でオレンジ色で囲った部分にたくさんのボタンがありますよね?

これがクイックタグと呼ばれるタグの挿入ボタンです。

そして標準のクイックタグは次のような役割を持っています。

  • 文字を装飾する(太字・下線・斜体...)
  • リストを作る
  • 文章を引用する
  • テキストの位置を整える
  • 他のページへのリンクを張る

などなど・・・ボタンの数だけ役割があります。

このクイックタグには自分専用のタグを追加することもできますが、自力でやろうとするとプログラミングの知識も必要なので少し難しいです。

そこでクイックタグの追加処理に便利なのが「AddQuicktag」というプラグイン

では、その導入方法と使い方について見ていきましょう。

プラグインの導入

最初に AddQuicktag を使うためにインストール・有効化します。

その手順は次の通り

ではまずメニューから「プラグイン」ー>「新規追加」を開きましょう。

そして新規追加画面でプラグインの検索欄に「AddQuicktag」というキーワードを入力

しばらくすると検索結果の上あたりに次のプラグインが表示されるので「今すぐインストール」ボタンを押してインストールします。

ちなみに手動インストールする場合は次ページからzipがダウンロード可能

https://ja.wordpress.org/plugins/addquicktag/

インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるので、必ずそれを押して有効化してください。

これでプラグインが使用可能な状態になりました。

クイックタグの追加方法

ではプラグインを有効化したので次にクイックタグを追加してみましょう。

どのようなタグでもいいですが、ここでは例として選択した文字を太字+イタリック(斜体)にするクイックタグを追加してみようと思います。

スタイルの用意

まずクイックタグを追加する前にタグ用のスタイル(CSS)を作成します。

スタイルを追加するのに一番手っ取り早いのは今使っているテーマの「style.css」にCSSコードを追加することです。

WordPress内でそのファイルを編集するならメニューから「外観」ー>「テーマの編集」を選ぶとテーマ内にあるファイルを編集できる画面が表示されます。

では編集画面で「style.css」を開いたら文字を太字+斜体にするための次のようなスタイルを追加します。

.my_bold_under{
  font-weight: bold;
  text-decoration: underline;
}

このスタイルを追加したらファイルを保存しましょう。

これで次のようなタグで文章を囲むことで太字+下線を引くことができるようになります。

<span class="my_bold_under">太字&下線になる文章</span>

ただしこの時点ではタグを手打ちしなければならないので、これをクイックタグとして登録していきます。

クイックタグを登録

では次に今作った独自のタグをAddQuicktagを使ってワンクリックで記事内に挿入できるように設定しましょう。

クイックタグの設定を行うにはメニューから「設定」ー>「AddQuicktag」を開きます。

開くとAddQuicktagの設定画面が表示されますが、一番上に次のようなクイックタグ追加エリアが表示されていると思います。

このエリアには設定項目が数多くありますが、独自のクイックタグを作るのに設定しておいた方がいい項目は次の通りです。

ボタンラベルの設定

クイックタグを作るにはボタンに表示されるラベルを必ず設定しなければなりません。

ボタンラベルは次の画像のオレンジ色の枠で囲った「ボタン名」と書かれたテキスト欄に入力することで設定できます。

ボタン名は好きな名前をつければいいですが、この場合でいえば「太字+下線」などのタグを挿入するときに分かりやすいボタン名をつけるようにしましょう。

開始タグと終了タグの設定

次にクイックタグを押したときにどのようなタグが挿入されるかを設定します。

設定するには「開始タグ」と書かれたエリアに自作したタグの開始タグを入力するだけ

例えばここで作成した太字+下線にするタグの場合、次の画像のように開始タグに「<span class="my_bold_under">」と入力します。

下の方に「終了タグ」と表示されたテキスト欄もありますが、開始タグさえ入力しておけば自動的に終了タグも補完されるのでそこは入力する必要はありません。

クイックタグの有効範囲

最後に自作したクイックタグをどのような画面で有効にするかを設定しましょう。

クイックタグを有効にする画面は下の画像のようにチェックボックスが表示されたエリアから複数選択可能です。

ちょっと表示が見にくいですが、ここでは次のように「ビジュアルエディター」「post」「page」の下にあるチェックボックスにチェックを入れておけば間違いありません。

設定が終わったら

これでクイックタグの設定は完了です。

ここまでの設定が終わったら必ず「変更を保存」ボタンを押して変更を保存しましょう。

これで編集画面上に今作成したクイックタグが追加されたはずです。

自作したクイックタグの挿入方法

今作ったクイックタグを編集画面のビジュアルエディタから挿入する方法は次の通りです。

まずビジュアルエディタの中にツールバー切り替えボタンがあるのでクリックしてツールバーを一覧表示します。

そして表示されたツールバーの中に「Quicktags」と書かれたセレクトボックスがあるのでその中から作成したクイックタグを選ぶことでタグを挿入することができます。

実際にテキストを選択してクイックタグを押してみると次のようにテキストがタグで囲まれていることが確認できます。

このように標準のクイックタグと同じ感覚でテキストを装飾できようになります。

まとめ

もしWordPressやテーマで用意されていないクイックタグを作りたいなら、「AddQuicktag」を使うと面倒な設定をしなくていいのでおススメです。

またタグをわざわざ手打ちする必要もないので時間の節約にもなり、記事そのものに集中できるようにもなるので導入してみる価値があると思います。

以上ここでは自分で定義したタグをクイックタグにするのに便利な「AddQuicktag」の導入・使い方について解説しました。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press