WordPress のテーマ Cocoon でタブボックスを任意に定義して使用する方法

はじめに

　WordPress のテーマ Cocoon ではタブボックスという装飾が装備されている。
　タブボックスとは次のように要素を囲ってタブを付けた物になる。

　タブボックスにはプリセットとして上記のタブのように「CHECK」と表示される物などいくつか存在するが、任意の文字列を表示させたい場合もあるかとおもう。
　この記事ではその方法を簡単に紹介出来ればなと。

　CSS の記述が必須な事と WordPress のエディタは Classic Editor で尚かつテキスト編集を想定した物となるので予めご了承を。

CSS を追加する

　任意のタブボックスを作成するにはスタイルシートを追記する。その為に子テーマ内の style.css を編集し、サンプルとして次の様な追記をおこなう。当ブログで良く使うタブボックスをサンプルとした。

.bb-changelog .bb-label::after {
    content: "記事更新履歴";
}

　これだけでタブに「記事更新履歴」と表示されるようになる。
　定義しているクラス .bb-changelog の changelog という部分は任意の文字列で構わない。

　更に Font Awesome の絵文字を頭に付け加えたい場合は更に次の様な定義をしておく。

.bb-changelog .fa::before {
    content: "\f021";
}

　定義するクラスの名前はタブ名を定義している物に合わせる事。
　content には表示したい絵文字のコードを入力する。

自分で定義したタブボックスを使用する

　定義した CSS を使ってタブボックスを表示させる場合、次のように div タグで囲って上げる。

<div class="blank-box bb-tab bb-changelog bb-blue">
　自分で定義したタブボックス
</div>

　ちょいちょい弄って見た感じだと class で指定する blank-box bb-tab は固定し、更に自分で定義した bb-changelog と続いて bb-blue の部分で色指定を行う。
　色指定に関しては親テーマ側の style.css 内 2904 行目あたりからずらっと定義されているので、そこを参考にするのも良い。
　bb-red, bb-pink, bb-purple, bb-blue, bb-green, bb-orange 等々結構数があるので欲しい色は使えるかなと思う。

おわりに

　個人的にタブボックスのような表示形式は結構好みなので、定形化して繰り返し使うような物は CSS に予め定義して置いてあげると使いやすくて良い。
　実際に使用するときのコードは AddQuickTag に登録しておけばワンポチなのでたいした苦労も無く簡単に扱えるのでオススメ。