先日ローンチしたサイトのこぼれ話として「カテゴリーが増えても色の設定をカテゴリーの編集画面からできるようにした」という話をしたところ、受けが良かったのでもうちょっと使いやすくしてみました。
目次
ダウンロード
コードはgithubにあります。
使う場合はダウンロード後、プラグインディレクトリにアップロードし、有効化してください。
形式上プラグインになっていますが、ソースをコピーしてテーマのfunctions.phpに追記しても大丈夫だと思います。
- gatespace / gs-add-extra-fields-for-category
ダッシュボードでの使い方
プラグインを有効化するとカテゴリーの新規登録及び編集画面に「文字色」と「背景色」のテキストフィールドとカラーピッカーが追加されます。
各フィールドには直接数値を入力することもできます。その際、16進数で使われる記号や文字以外は弾くようになっています（デフォルトテーマで使われているカラーピッカーと同じ処理です）。
またフィールドをクリック後、カラーピッカーで色を選択するとフィールドに反映されます。
同時にピッカー横のサンプルで配色を確認することもできます。
テンプレートでの使い方
入力された値はwp_optionテーブルに、option_name が term_{カテゴリーID} でシリアライズされた配列として保存されています。
テンプレートファイル内でこれを取り出すには
$term_data = get_option('term_'.カテゴリーID); // 事前にIDを取得しておく
とすると、文字色は $term_data['textcolor']、背景色は $term_data['bgcolor'] で取り出せます。
サンプルコード（index.php等のループ内で）
$cats = get_the_category();
if ( $cats && ! is_wp_error( $cats ) ) : // 取得できたら
foreach ( $cats as $cat ) { // 配列で戻ってきているのでループを回す
$term_data = get_option('term_'.intval($cat->term_id));
$term_bgcolor = ( empty( $term_data['bgcolor'] ) ) ? '#666' : $term_data['bgcolor'];
$term_txcolor = ( empty( $term_data['textcolor'] ) ) ? '#fff' : $term_data['textcolor'];
echo '<a style="background-color: '.esc_attr($term_bgcolor).'; color: '.esc_attr($term_txcolor).';" href="/".get_term_link( $cat ).'">'.$cat->name."</a> ";
}
endif;
簡単な色分けであれば、毎回スタイルシートを変更しなくても良くなります。
以下余談
カテゴリーにカスタムフィールドをつけたい理由
- カテゴリーが増える可能性がある
- カテゴリーを増やしたときに、カテゴリー名の背景色などをダッシュボードから簡単に行えるようにしたい
- 画像にすると自分たちで追加したり・修正できない
- CSSのクラスで色をつけるとカテゴリーが増える度に.cssファイルを修正しないといけない
という理由でした。
カテゴリー自体は簡単に増やせるのに体裁をあわせようとすると、途端に画像作成やCSSの知識が必要になったり、いちいち制作会社に発注したりするのは、結果的に「簡単」ではないです。
カテゴリーにカスタムフィールドを付け加える
カテゴリー（タクソノミー）にも投稿と同じようにカスタムフィールドをつける事が可能です。
実装にあたってはこちらのブログを参考にさせてもらいました。
こちらのブログではカテゴリー編集画面にテキストフィールドと画像アップローダを加えています。
カラーピッカーをつける
単純なテキストフィールドでも良かったのですが、
- 入力する人が必ずしも16進数のカラー値が分かるとは限らない
- デフォルトテーマなどにカラーピッカーが付いているのだから、それを利用すれば分かりやすい
という理由からカラーピッカーを使う事にし、ついでに配色もサンプルで確認できるようにしてみました。
今後の課題
今のところカテゴリーのみですが、アクションフックを書き換えればタグやカスタム分類（タクソノミー）でも利用可能です。
需要があれば、ソースコードを書き換えなくても自動で対応するようにしたいですね。
（というかgithubのコードをフォークして書き換えまくってもOKですよ）
ということで識者の方のツッコミが怖いところでもあります・・・（汗