WordPressプラグインAddQuicktagでコードを簡単挿入

AddQuicktag とは

よく使うコードをあらかじめ登録しておくことで、ボタン一つで簡単にコードを挿入できる便利なWordPresプラグインです。作業の手間が減りスピードUPにつながります。

こういったものも登録しておけば、ボタン一つで表示できます。（これは見本です。）

※上の見本は OPENCAGE（オープンケージ）のテーマでのみ使えるショートコードを登録しています。

AddQuicktagのインストール方法についてはこちらをご覧ください。

こちらの記事では、
①AddQuicktagの設定方法
②任意のコードを登録する方法
③ストークのショートコード登録方法
④登録したAddQuicktagを別のサイトで使う方法
をご紹介します。

AddQuicktagの設定

インストールが終わり有効化にしたら、設定をしていきます。

左メニューの設定→AddQicktagをクリックします。

↓↓↓

クイックタグの追加と削除の画面が表示されれます。

↓↓↓

赤枠カ所は必須入力です。（⑤の終了タグは不要な場合もあります。）その他は入力しなくても差し支えありません。

ボタン名：ボタンの任意の名前
ダッシュアイコン：アイコンを選んで設定することが出来ます。
ラベル名：マウスオーバーした際、下図③(ずっと下の方にある「編集画面の表示」の図です)のように表示されます。
開始タグ：HTMLの開始タグ
終了タグ：HTMLの終了タグ
アクセスキー：ショートカットコード
順番：配置したい順番。
クイックタグを使いたいページにチェック。一番右をクリックで全部にチェックが入ります。

h2タグを追加してみる

h2タグは見出しを選べば簡単に使えるので必要ないですが、登録の流れをみてみます。

↓↓↓

AddQuicktagの設定画面で上記のように入力します。

↓↓↓

追加したh2タグを使ってみます。

h2をクリックすると以下のようになります。

↓↓↓

真っ白ですが右上のボタンからHTMLとして編集をクリックするときちんと表示されています。

↓↓↓

↓↓↓

h2タグの間に文字を入力します。

↓↓↓

WEB上の表示を確認したところ、きちんとh2のタイトル表示になっているのが確認できます。

もしくは、クラシック編集画面を開いたらそのまま文字を入力し、マウスで入力した文字列をドラッグし範囲選択してから、Quicktag→h2とクリックすると、h2で表示されます。

任意のコードを登録する

例えばこのように、文字に下線マーカーを引いてみます

↓↓↓

AddQicktagの設定画面で上記のように入力します。

/* —– 下線（ピンク） —– */

.pink {
background: linear-gradient(transparent 40%, #FAD5DC 40%);
padding-bottom: .2em;
font-weight:bold;
}

↓↓↓

左メニューの外観→カスタマイズ→追加CSSに上記コードをコピペして下さい。貼り付けたら右上の公開ボタンをクリックします。

色を変えるには、#FAD5DCの所を変更するだけです。例えば黄色や青は↓のようになります。

/* —–下線（黄色） —– */ 
.yellow { 
background: linear-gradient(transparent 40%, #ffff8e 40%);
padding-bottom: .2em;
font-weight:bold;
} 
/* —–（青） —– */
.blue { 
background: linear-gradient(transparent 40%, #CBE9F5 40%); 
padding-bottom: .2em; 
font-weight:bold; 
}

黄色、青の時の AddQuicktag 追加画面は↓のようになります。