WordPressプラグインAddQuicktagの使い方と設定！初心者向けに説明❦

WordPressの記事で装飾よく使うコードをAddQuicktag（アドクイックタグ）で登録しておくとビジュアル・テキスト画面からタグを選んで装飾できるので、かなり便利です。

太字、蛍光下線、リンク・参考・引用バッジ、アドセンスの広告タグ、ショートコード、定型文、ふきだしのコードなども登録できます。※当ブログで導入しているタグはリンク済み。

LINKWordPress記事中に広告を追加する2つの方法・アドセンスポリシーに準じたCSS付き

LINKol番号付きリストのカスタマイズ！リストの数字を任意の番号3から始めたい時のCSS

プラグインは競合してエラーの原因になるのであまり使いませんが、AddQuicktagは記事を書くのが はかどるため、導入済み！便利に使える設定方法をチェックしてください❦

アドクイックタグのインストール方法

ダッシュボードより、「プラグイン」「新規追加」とクリック。プラグインの検索より「AddQuicktag」を入力。「今すぐインストール」をクリック。

インストール完了後、「有効化」をクリック。

アドクイックタグの設定方法

『 停止 | 編集 | 設定 』設定ボタンをクリック（プラグインよりAddQuicktag欄）。

• またはダッシュボードの「設定」→「AddQuicktag」でも可❦
  

このような画面から設定を行うので、順番にチェックしていきましょう＾＾

• ボタン名
  • ビジュアルエディタのQuicktags欄を開くと表示される名前

投稿画面の左上部のに「Quicktags」が出て、ボタン名が表示されるので、分かりやすい名前を付けます。

• ダッシュアイコン

ビジュアルエディタに付くアイコン：マークのこと。矢印を付けた場所から選べますよ＾＾

ビジュアル画面で画像のようなアイコンがつくけど、使っている内にマークやポイントとしてあると便利なとき置くと良いですよ。

ビジュアルエディタなどに表示させる、表示させない設定

設定画面の右側ビジュアルエディター・post・comment・widgetsなど書いてる場所にチェックを入れてないと表示されません。

初めてのばあい、すべてチェックを入れて、使っていて不要だと思う所でチェックを外すと更に便利に使えます。

ビジュアルエディタの項目を減らす：テキストでしか編集できないタグについて

ビジュアルでは使わないタグなども出てきます。ol番号リストの数字を3から始めたい時タグ・CSSとか、HTMLタグ内に入れたい属性などはテキスト画面でしか使いません。

ビジュアルエディタで非表示にするようチェックを外してください。下記画像は私の設定で、ルビ・セルの融合もビジュアルでは使わないので非表示にしてスッキリさせて使ってます。

画面をみると、アクセスキーに色んな数字が表示されてるのがわかりますよね。

アドクイックタグのアクセスキーの順番の使い方

装飾は１ページに頻繁に使うもの、１回しか使わないタグ、５記事に１度しか使わないタグなども出てきます。初めての設定で、どんな順番にすれば便利かをチェックしてください＾＾

アクセスキーに何も入力しなければ、すべて0番で文字列順に並ぶので使いにくいです。画像のように20・50などと大雑把（ざっぱ）に数字を入れると、慣れたころに順番の変更がしやすいです。

• 1記事に頻繁に使うものを１

• 1記事に1度しか使わないものを10や20

Quicktagsのスクロールすれば表示される

• テキストエディタでしか使わないタグは50

• 滅多に使わないタグは30番

真ん中～下のあたりに表示。ちょっと探しにくい。

など、指定すれば使いやすいです。

開始タグと終了タグを設定する

開始タグは『HTMLタグで囲むテキストの前に付いたタグ』、終了タグは『テキストの後ろに付いたタグ』です。

<span class="bold">ココのテキストを太くしたい</span>

ココのテキストを太くしたい　こんな感じで装飾ができたり＾＾

• 開始タグ

<span class="bold">

• 終了タグ

</span>

• CSS（使用中テーマのstyle.cssに追記）

.bold {
	font-weight: bold;
}

このように設定すると、ダッシュボードの投稿画面で装飾でき便利です。

開始タグと終了タグを分けると、ビジュアル画面から青く反転させた状態でも使えるものもあります。テキスト画面でしか使えないものもあるので後述します。

定型文を作る方法：Twitterのリンク

Twitter定型文なら開始タグに全てのコードを入れてもOK！

私が使ってる定型文『それでは、かうたっくでした』そのコードを下記のように張り付けるだけです。この場合は終了タグなしでOK！

それでは、<a href="https://twitter.com/kautakku" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i>かうたっく</a>でした

<a href="Twitterのアドレス" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i>Twitter名</a>

これで、このようになります。『かうたっく』

LINKWordPress・CMSでFont Awesomeアイコンフォントを導入！最新アイコンが表示しないとき、バージョンアップ方法付き

 

アドクイックタグのスタイルをビジュアルエディタに反映させる

追加したスタイルは、ビジュアルエディタに反映させることができます。スタイルシートに追加したスタイルは訪問されたユーザーさんが見るサイトに反映します。

テーマにビジュアルエディターのスタイルシート (editor-style.css)が標準で付いているテーマでしたら、style.cssに追加した独自のスタイルを追加してください。

.bold {
	font-weight: bold;
}

元々テーマに追加されているスタイルの場合は

• .entry-content h2この場合はh2と指定。
• .article ulなどの場合はulに
• #entry_body aの場合はaに

前についているものは、サイト閲覧者用のhtmlを指定したスタイルなので、ビジュアルエディタでは反映しません。シンプルな指定にしてください。

ビジュアルエディタでどうしても反映しない場合は以下のように指定すれば大抵反映しますよ。

• #tinymce aなどと#tinymceと半角スペースを入れて指定

ビジュアル画面のみ、クイックタグのボタンが表示されない

上記でビジュアルでもボタンを表示する設定にしたのに、ビジュアルエディタでボタンが表示されないとき。

ビジュアルエディタのボタン、『ツールバーの切り替え』をクリックしてください。

切り替えボタンで『アドクイックタグの選択ボタン』が表示・非表示と変更できます。

投稿画面での使い方

まず、投稿画面はビジュアルとテキストがありますよねっ。

• テキストは、HTMLでコードが書かれた状態で見られる画面
• ビジュアルは、ブログで見る画面に近い状態

その両方の画像を見てもらった方が分かりやすいので、見て行きましょう！

テキスト画面での使い方

画像の通り『テキスト』画面の上部から、使いたいタグを選択。

• 「開始タグ」に記入したものが反映され出てきます。

• 装飾したいモノの後ろに、カーソルを置き再度クリック

これで<span class=”font5″>ほげほげ<span>とタグが出来上がり。もの凄くキチンとした使い方です。

• 文字を選択して青く反転
• 上部のタグをクリック
• 文字の前後に自動的にタグが入る

やりやすい方法でどうぞ。HTMLを付けたら、CSSで装飾してくださいね＾＾

ビジュアル画面でQuicktagsから選ぶとき

ビジュアル画面からタグを選ぶやり方が、一番簡単で面倒が省けます。

Quicktags欄がない場合、ツールバーの切り替えで表示してください。

1. 文字を選択し青く反転
2. Quicktagsをクリック
3. 出てきたタグをクリック

ムチャクチャ簡単に反映するのでオススメ！ビジュアル画面でも装飾を当てているので、どのように反映したか、確認もでき便利です。

LINKAddQuicktagの装飾！WordPressビジュアルエディタにCSSを反映させよう

さいごに、プレビュー画面でキチンと表示されているか、確認したら安心ですね。

※カスタマイズで、アドクイックタグと別にスタイルを使用し、更に便利に使えてます＾＾

使わないタグは削除する

使ったは良いけど、やっぱり不要なタグも出てきます。要らないタグを消し必要なタグだけ残せば見やすいです。

ダッシュボードの『設定』より『AddQuicktag』を選択。

• ボタン名
• 開始タグ
• 終了タグ
• ✓チェックなど全て削除

さいごに変更を保存をクリック！

エラーが出た時の対処法

• ✓チェックが反映されない時
• 403ページが表示される時の対処

この2つで困ることがあるので、書いておきますねっ。

✓チェックが反映されない時がある！

✓チェックを1つ1つ つけるの面倒なので、右端の□四角に✓チェックを付けて全部✓チェック入れます♪

更新すると、✓チェック全て外れてる時があります。その時は、ビジュアル画面、テキスト画面など、どこにもタグが見当たりません。。またAddQuicktag設定に戻って更新、✓チェックが入ってるか確認してください。

403 Forbiddenが出たときの対処方法（ロリポップ・さくら・ヘテムル）

AddQuicktagを1つ入力したあと、更新すると『403ページ』がドンッっと出ると時があります。403ページでたら、サーバーのファイアーウォールWAFを疑ってください。

セキュリティーWAFは、『外部から攻撃された』と勘違いし『403 Forbidden』をだします。下記を参考に、レンタルサーバーのWAFを一時的に解除しください。

LINK403エラーの原因はWAF！対処し解決する方法！：ロリポップ、さくら、ヘテムルのサーバー

書き出し：タグのエクスポート

管理画面の設定より、AddQuicktagを選択して下へスクロールします。書き出し現在は『エクスポート』と言う項目があるので、『書き出しエクスポートファイルをダウンロードする』をクリック。

アドクイックタグのバックアップを任意の場所にしてください。

• 『addquicktag.-08-18-2017.json』と日付の入ったJSONファイル
• PC上の好きな場所にエクスポート『保存』して完了。

ファイルをエクスポートして、PC上に一旦保存してテストブログなどにインポートもできますよね。

アドクイックタグのバックアップからのインポート

PC上に保存したaddquicktag-11-10-2016.jsonファイルをインポートするには、『設定』より『AddQuicktag』一番下にスクロールした『インポート』より復元できます。

1. 『ファイルを選択』して、下記のように、Jsonファイルを選択します。

『ファイルとインポートをアップロード』をクリックしたら、

1. 『ファイルのアップロード・インポート』をクリックして、保存を完了。

さいごに

AddQuicktagは、かなり便利です。

ユーザーさんが見やすいページを作る為にもコードは必要だけど、コードをコピペする手間を除いてくださいね。

LINKリンク前、ボタンバッジ！行頭を揃えた、おしゃれなカスタマイズ

LINKol番号付きリストのカスタマイズ！デザインをきれいに変更する方法。リストの数字を任意の番号3から始めたい時のCSS

LINKWordPress記事中に広告を追加する2つの方法：アドクイックタグ・ショートコード

LINKAddQuicktagの装飾！WordPressビジュアルエディタにCSSを反映させよう

ではでは、かうたっくでした！