AddQuicktagプラグインを使うと、編集画面にオリジナルのボタンを作成することができます。主な用途は毎回入力するのが面倒なタグをボタン化することで、クリックするとコードが挿入される仕組みです。アイデア次第で作業を効率的できるでしょう。

AddQuicktagプラグインを使って追加したオリジナルボタン

以下、画像に枠線を付ける「画像枠線」ボタンを例にAddQuicktagプラグインの使い方を説明します。

次のような結果になりますが、アイデアがあれば自由にオリジナルボタンを作成してください。

画像に枠線が付く

画像に枠線が付く

スポンサーリンク

AddQuicktagを使ったオリジナルボタンの作成

AddQuicktagプラグインをインストールして、「設定」‐「AddQuicktag」メニューを開きます。

AddQuicktagの設定メニュー

AddQuicktagの設定メニュー

エディタに表示するボタンのラベル名(1)や開始タグ(2)、終了タグ(3)を入力して、このボタンを有効にするタイミング(エディタや投稿・固定ページなど)をチェック(4)します。有効にするタイミングがピンとこなければ右端のレ点をチェックしておきましょう。

それぞれの入力内容は次のとおりです。

  • ラベル名 --- 画像枠線
  • 開始タグ --- <div class="image-waku">
  • 終了タグ --- </div>

設定の完了後、「変更を保存」ボタン(5)をクリックします。

投稿や固定ページの編集画面を開くとテキストエディタのボタン群に「画像枠線」ボタンが追加されているはずです。

「画像枠線」ボタンが追加される

「画像枠線」ボタンが追加される

ボタンを削除するには「設定」‐「AddQuicktag」メニューで全ての項目を空にしてください。

テキストエディタで「画像枠線」ボタンを使う

「画像枠線」のスタイルを適用するには、テキストエディタで画像のimgタグ全体を選択して「画像枠線」ボタンをクリックします。

imgタグを選択して「画像枠線」ボタンをクリック

imgタグを選択して「画像枠線」ボタンをクリック

画像が「class="image-waku"」のdivタグで囲まれます。

「class="image-waku"」のdivタグで囲まれる

「class="image-waku"」のdivタグで囲まれる

これでstyle.cssに定義した「画像に枠線を付ける」のスタイルが適用されます。

style.cssに入力したスタイルが適用される

style.cssに入力したスタイルが適用される

あとは、style.cssに定義したCSSを自由に微調整してください。

ビジュアルエディタで「画像枠線」ボタンを使う

ビジュアルエディタでは、「画像枠線」ボタンがありません。その代わりに画像(1)をクリックして「Quicktags」メニューから「画像枠線」(2)を選択します。

ビジュアルエディタでは「Quicktags」メニューを使う

ビジュアルエディタでは「Quicktags」メニューを使う

メニューを選択してもビジュアルエディタの画像には枠線が付きませんが心配は不要です。

ビジュアルエディタには枠線が反映されない

ビジュアルエディタには枠線が反映されない

実際の画像にはスタイルが適用されているので、保存またはプレビューしてページを見ると画像に枠線が付いています。

実際のページにはスタイルが反映されている

実際のページにはスタイルが反映されている

まとめ

以上、AddQuicktagプラグインを使ってオリジナルのボタンを作成する方法を紹介しました。「画像枠線」ボタン以外にも使えます。いろいろと試行錯誤してみてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPressの使い方・カスタマイズ・トラブル対応など、ご相談ください。
お問い合わせはこちらから
【対応料金の見積もりは無料です】
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク