Cocoon 内部関数の仕様変更に伴い、 ダウンロードファイル及び記事の一部を変更しております。
当サイトへ足を運んでくださる方の多くは Cocoon ユーザーの方々が大半と思われます。 中でも、
- カテゴリータグの表示を増やしたい。
- サムネイルのラベルを複数にしたい。
- ウィジェットにもラベルを表示したい。
といった要望が多い様に見受けられます。
そこで、 よりカンタンにご期待に応えるべく、 プラグインにしてみました。
メニュー画面や設定画面もない、 プラグインと呼ぶには烏滸がましいシンプルなシロモノですが、 シンプル故に処理速度などへの負担も小さいと思います。
まぁ、 キチンとしたメニューとかを作る力量が無いだけなんですけどね ；；
そんな稚拙なプラグインですが、 興味がありましたらお試しください。
- カスタマイズは自己責任でお願いします。
- wp-cocoon.comサイトのサポート対象外となります。
ダウンロード
インストール
管理画面 → プラグインから 「新規追加」 をクリックします。
「プラグインを追加」 画面に移りますので、 「プラグインのアップロード」 をクリックします。
アップロードのダイアログ画面が表示されます。
ファイルをドラッグ＆ドロップで完了です。
このプラグインの仕様
フォルダ構成
- thx-multi-label-on-cocoon.php
- thx-multi-label-on-cocoon.css
- dest
- thx-multi-label-bg-color.css
プラグイン本体である thx-multi-label-on-cocoon.php と、 スタイルシートの thx-multi-label-on-cocoon.css で構成されています。
dest フォルダ内の thx-multi-label-bg-color.css はラベル背景色の不透明度を設定する際に自動で作成されます。
このプラグインで出来ること （してしまうこと）
エントリーカードのカテゴリラベルを複数表示する
前回の説明とかぶってしまいますが、 親テーマでラベル表示の指定がなされているところを複数表示する様にオーバーライドしています。
ですので、 サイドバーの新着記事など、 ラベル表示の指定がなされていながら、 且つ、 css で非表示にしてある箇所もラベルが表示され （てしまい） ます。
表示したくない箇所は css で非表示にするのが宜しいかと思います。
例えば、 このプラグインの css では人気記事では非表示にする様に、
/* 人気記事では表示しない */
.popular-entry-cards .thx-category-space {
display: none;
} と指定してあります。
複数表示されるカテゴリラベルを並び替える
表示するラベルをカテゴリ ID 順に並び替えます。
前回では usort() 関数を使用していましたが、 現在では推奨されていない関数らしいので、 wp_list_sort() 関数で記述し直しています。
amp 出力に対応
jQuery の使用を取り止めたので、 amp ページでもカテゴリラベルの複数表示が可能です。
カスタマイズ
シンプルな作り故に、 カスタマイズを行うには一手間必要になります。
ラベルの形状
プラグイン内の thx-multi-label-on-cocoon.css にてスタイル指定をしています。
変更する際は子テーマなどでスタイルの上書きを行うか、 thx-multi-label-on-cocoon.css を直接変更する必要があります。
ラベルの不透明度
ラベル背景色の不透明度のみ php で処理をしています。 理由としては下記の通りになります。
- cssでopacity指定をするとラベル文字にも効いてしまう
- jQueryでの処理がカンタンなのですが、ampに対応できない
というワケで不透明度を変更したい場合はプラグイン内の php を直接変更する必要があります。 と言っても一箇所だけですけどね。
プラグイン内、 thx-multi-label-on-cocoon.php の 147 行目、
// ラベル背景色の不透明度
$op = 0.75;
の数値を変更するだけです。
「0」 が完全に透明、 「1」 で不透明になります。
Cocoon をバージョンアップした事によりエラーが発生する方はこちらを参照下さい。
まとめ
ラベルの不透明度など、 カスタマイズを施すには面倒な部分もあります。 そんな面倒な部分をプラグインのメニュー画面などから設定できたらもっと便利ですね。 精進します。
まぁそんな先の話は置いといて、 お手軽にカテゴリーラベルを複数表示できるのは便利ではないでしょうか。
コメント