プラグイン AddQuicktagの設定と使い方

スポンサーリンク
Pocket

 

AddQuicktagとは、事前に登録したタグをボタン1つで記事に挿入できるプラグインです。設定方法およびおすすめの使い方などについて紹介します。

 事前にAddQuicktagに、利用するタグを登録しておけば、あとは投稿画面でQuicktagsのプルダウンメニューから選ぶだけ・・・・。

 (ビジュアル)

投稿画面でのaddquicktagの使い方

AddQuicktagのインストールおよび有効化まずは、AddQuicktagのインストールおよび有効化についてご説明します。

「メニュー」⇒「プラグイン」⇒「新規追加」と進みます。

wordpress_plugin_new

プラグインの追加メニューで、「AddQuicktag」と検索した後、インストールおよびプラグインの有効化をします。

wordpress_plugin_addquicktag

AddQuicktagの設定方法

インストール済みプラグインから設定画面を開きます。

プラグイン内「AddQuicktag」に設定があります。

wordpress_addquicktag_setting

設定画面では、以下4つの項目に分かれています。各項目について

  1. クイックタグの追加と削除
  2. デフォルトのクイックタグの非表示
  3. 拡張コードクイックタグボタンの表示
  4. AddQuicktag設定の書き出し/インポート

1、、クイックタグの追加と削除

この項目は、記事の投稿画面でよく利用するタグをボタン1つで入力するために、クイックタグとして登録します。

各項目の意味について図と表にまとめました。

addquicktag_originaltag

設定項目 説明
①ボタン名 ボタンに表示される名前です。
②ラベル名
(入力不要)
入力不要です。
(「①ボタン名」を説明する項目です。)
③開始タグ タグの始まりです。
④終了タグ タグの終了です。もし、開始タグと終了タグの間に何も文字を入力しない場合は開始タグに終了タグも含めて入力することもできます。
⑤アクセスキー
(入力不要)
入力不要です。
(IEのブラウザ限定の機能です)
⑥順番 プルダウンメニューで表示される順番です。よく使うタグほど上位に表示させるのが良いです。

クイックタグの追加例

例とえば、ハートのWebアイコンをボタン1つで入れてみます。

➀ AddQuicktag設定画面の開始タグに以下のタグを入力し、全てのチェックをつけてから「変更を保存」ボタンをクリックします。(終了タグへの記載は不要です。)

<i class=”fa fa-heart”></i>

button_label_heart

➁ ビジュアルエディターのQuicktagsのプルダウンメニューにハートが表示されるようになります。

pulldown_menu_heart

③ テキストエディタに「ハート」のボタンが表示されます。

button_heart

➃ 記事の任意の場所で、ハートアイコンを挿入すればOKです。

毎回ハートアイコン用のタグを入力しなくて済むため、記事作成の効率化が図れるというわけです。

こちらのWebアイコンはAwesomeフォントを利用しています。そちらのフォントが使えない方は表示されませんので、ご注意ください。

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

WordPressのデフォルトで用意されているクイックタグを非表示にする項目です。「デフォルトのクイックタグの非表示」の項目では、非表示にしたいボタンにチェックをつけると、投稿画面で非表示となります。

デフォルトのクイックタグを非表示にする方法

不要なボタンを非表示にすれば、見た目がすっきりし作業もしやすいと思います。このボタンって使ったことないなと思ったら、非表示に・・・・

デフォルトのクイックタグを非表示にする

例とえば、「i」(emタグ)を非表示にする手順です。

default_tag_delete

AddQuicktagの設定画面の真ん中に「デフォルトのクリックタグを非表示にする」という項目があります。

「デフォルトのクリックタグを非表示にする」の項目で「i」(em)の右端のチェックボックスを選択して、保存ボタンを押します。

default_tag_delete_em

「デフォルトのクリックタグを非表示にする」で選択されたボタンは記事投稿画面で非表示となりますので、「i」(emタグ)が非表示になれば成功です。

default_tag_delete_em_after

4、拡張コードクイックタグボタン

拡張コードクイックタグボタンの項目では、「preボタン」と「htmlentitiesボタン」の表示/非表示の設定ができます。

preボタンとhtmlentriesボタンの表示/非表示設定画面

preボタンとは

preボタンとは、空白や改行をそのまま表示するものです。ソースコードなどをそのまま載せたいという時に使います。

htmlentitiesボタンとは

htmlentitiesボタンとは、htmlのページにて半角カッコ < などの文字をそのまま表示するためにHTMLのエンコーディング(およびデコーディング)を行うボタンです。

例えば、ある文字を太い赤文字にしたいとき、

「<span style=”color: #ff0000;”><b>と</b></span>で囲む」

という文章を書きます。

しかし、この文章はWordPressの投稿画面にそのまま入力すると、

で囲みます」

上記のように、”と”の部分が太い赤文字となってしまいます。そのまま表示したい場合はHTMLのエンコーディングが必要です。

このHTMLのエンコーディング作業をhtmlentitiesボタンを使えば、HTMLエンコーディングが簡単にできます。

HTMLentitiesを用いてエンコーディングを実施した結果

※「HTML Entities」と「Decode HTML」のボタンも、テキストエディタにだけ表示されます。(ビジュアルエディタには表示されません。)

AddQuicktagの情報はエクスポート/インポートができます。

設定ファイルのダウンロード

設定ファイルのインポート

これにより、複数運営しているサイト間で設定の移行ができたり、バックアップとしても使うことができます。

設定が終わったらバックアップのために書き出して、ファイルを保存して・・・・。

「AddQuicktagでタグを設定したけど・・・・反映されない!」そんな時に確認したいこと。

投稿画面に表示するためのチェックが入っているか?投稿画面に表示させるためには、ボタン名や開始タグの入力に加えて、postにチェックを付ける必要があります。

投稿画面にボタンを表示するためにpostにチェックをつける

★ビジュアルエディタに表示されない・・・・

・「post」「リッチテキスト」の両方にチェックがありますか

「変更と保存」ボタンを押し忘れていないですか

 

 

設定が完了後は変更と保存ボタンを押下

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です