【ワードプレス】超簡単にショートコード・HTMLを呼び出せるプラグイン【AddQuicktag】

あらかじめ登録しておいたHTML・ショートコードと手軽に挿入できるプラグインです。STORK公式でもおすすめされるレベルの優秀プラグインなので導入しておいた方が良さそうな匂いがします。

 

AddQuicktagをインストールする

AddQuicktag

インストール・有効化したら投稿編集画面にドロップメニューが設置され、ココから任意のHTML・ショートコードを呼び出せます。

 

新規タグ(コード)を登録する

導入直後は『何も登録されていない』のでクリックしても何も起こりません。この登録が少し難しい部分ではありますが、これさえクリアすれば輝かしい未来が待っています。

【左メニュー▼設定▼AddQuicktag】

入力が必要なのは『ボタン名』『開始タグ』『終了タグ』『一番右側のチェックボックス』これ以外は無視です。

試しに1つ『赤い囲み枠』を作ってみましょう(ここからはSTORKのショートコードを例に説明するので、他のテーマの方は同じようにやっても意味がないです)

 

赤い囲み枠
タイトルも、枠内の文字も、自由に編集可能

 

こんな感じで強調したい文章を表現する囲み枠も簡単にできます。ビジュアルエディタの記事は下図の様になってます。

 

 

[ ]で囲まれている部分が『ショートコード』です。

これはワードプレス標準装備のショートコードではなく、STORKに付属しているショートコードなので、STORK以外では使えません。

HTMLで同じ様な物を作ろうと思ったらもっと複雑なコードになります。ショートコードは極限まで単純化されているので、見ればすぐに構造は理解できます。

このコードを【AddQuicktag】に登録します。

 

【開始タグ】に開始コード(赤線部分)を入力
【終了タグ】に終了コードを(青線部分)入力
【赤い囲み枠】という表記だけは編集可能
【ボタン名】は自分が分かりやすい物に
【一番右のチェックボックス】にチェックを入れる
【設定を更新】して終了

 

登録したタグ(コード)を呼び出す

ビジュアルエディタで適当に文章を書いて、その文章全てをマウスで選択した状態のまま右上のウィンドウを開きます。

先ほど登録した【ボタン名】が表示されているのでそれをクリック。

『あなたの書いた文章(黄色線)』『開始タグ(赤線)』『終了タグ(青線)』に囲まれた状態になります。作業はこれだけなので、プレビューでご確認ください。

あとはこの応用で頻度の高いコードを登録しまくれば作業効率化になります。

もし登録工程の『一番右のチェックボックス』を忘れていると、ここにボタン名は表示されません。また、ブラウザの別タブで登録を行った場合も『F5でエディタを更新』しないと表示されません。2つとも行った後に非表示のままならあなたのパソコンがいかれてます

 

個人的なデメリット

これは僕だけが衝突している問題なのかもしれませんが、AddQuicktagでHTMLコードを記事に挿入した場合、目に見えないズレの様な物が発生して、上手く記事に反映できなせん。個人的には『AddQuicktagでHTMLを扱う』という事を推奨いたしません。ショートコードなら問題なく使用できます。