Simplicity2 クイックタグのカスタマイズ~ボタン色の変更

カテゴリー別今日の人気ランキング

クイックタグとは

クイックタグとは、テキスト(HTML)エディターの入力エリアの上部にあるボタンをクリックすると、そのボタンに応じたタグが挿入されるという機能です。

WordPressで原稿を作成する時に、テキストエディターに記事内でよく使う見出しなどのタグをボタン(クイックタグ)として登録しておけば、作業の効率もあがります。

ボタンを追加するには「functions.php」にコードを追加していきます。コードの記述形式は、追加したいボタン1つに対して次の1行を記述します。

  • ID:ボタンの識別記号です。ダブらないようにIDをつけます。
  • ボタンのラベル:ボタンに表示される名前です。
  • 開始タグ:開始タグを記述します。定型文を作る時はここに記述します。
  • 終了タグ:終了タグを記述します。終了タグのないタグは「’ ‘」にします。タグの後ろのバックスラッシュn は改行です。

クイックタグボタンの色を変える方法

クイックタグ関数に<style>~</style>タグを追加し、その中にスタイルを書けば、クイックタグボタンの背景色や文字色を変えることが可能です。
赤色にするタグは赤色に、黄色マーカーにするタグは黄色になどと、背景を設定しておくことで、直感的に分かるようになると思います。

クイックタグのセレクタ

クイックタグのセレクタ(スタイル識別子)は、クイックタグを定義する QTags.addButton の第一パラメーターの “ボタンID” の頭に “qt_content_” をつけた、以下の形式になります。

クイックタグのセレクタ:qt_content_ボタンID

ボタンIDの調べ方

それぞれのボタンIDは、下記から調べられます。

  • 「WordPressデフォルトのタグ」のボタンIDは、下の仕様「デフォルトのクイックタグ」にあります。
    仕様 クイックタグAPI|WordPress Codex 日本語版
  • 「Simplicity2標準装備のタグ」のボタンIDは、下記ページの「新たなクイックタグを追加したいときは」→「Simplicity2 の qtags.php に追加する方法」のコード中のIDから得られます。
    Simplicity2 HTMLエディター文章装飾スタイルのクイックタグ活用法
    Simplicity の文章装飾スタイル WordPressで投稿記事を作成する時に、HTMLエディターに記事内でよく使う文字装飾用のタグ...

ボタンの色を変える方法

Simplicity2 の子テーマを使います。親テーマのバージョンアップなどの影響を受けずに管理ができ、便利です。
子テーマの「functions.php」に、スタイル定義を行うクイックタグ関数を作成し、スタイルを追加します。

記述ミスや文法ミスを犯すと最悪の場合、WordPressが動かなくなることもありますので、「functions.php」を修正する場合は必ず事前にファイルのバックアップを取り(別名で保存)、不具合が発生したら元に戻せるようにしてください。

下のコードは、WordPressデフォルトのタグとSimplicity2標準装備のタグのボタン色を変更するコードです。このコードをコピー&貼り付けで子テーマの「functions.php」に貼り付けます。

参考 子テーマの「functions.php」への貼り付けは、こちらを参考にしてください

子テーマを利用してHTMLエディターにタグや定型文のボタンを追加する方法
クイックタグとは WordPressで原稿を作成する時に、HTMLエディターに記事内でよく使う見出しなどのタグをボタン(クイックタグ)とし...
上記方法で、すでにテキストエディターに独自タグを追加している方は、クイックタグ関数が作成されていますので、</script>と<?phpの間に、<style>~</style>のスタイルを追加します。

 (注)CSS中の「#」は<div id=””>と id 名をセレクタにするときに使います。

カスタマイズ結果

1行目は、WordPressデフォルトのタグ、2行目以降は、Simplicity2標準装備のタグです。それぞれ下記のようにカスタマイズ(ボタン背景色の変更)されました。

クイックタグのボタン色

スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!

シェアする

フォローする

スポンサーリンク