概要説明
カテゴリーごとに色設定を持たせて表示の際にボタン背景、テキスト色を変更するカスタマイズ。CSSでの制御でも対応は可能ですが管理画面から対応を行えるようにしておくことでカテゴリー追加時にも簡単に設定が行えるようになります。
～ 目次 ～
カテゴリーごとに色を変えたい場合に活用
管理画面からカラーコードを設定することで色の指定が行えるようになります
カテゴリーページ設定ページにテキスト色、背景色の設定項目を追加
functions.php
/*----------------------------------------------------
カテゴリー編集ページに色用(背景、テキスト)の項目を追加
----------------------------------------------------*/
if ( !function_exists( 'add_category_color_field' ) ){
// 新規登録ページ
function add_category_color_field( $tag ) {
echo '<div class="form-field term-exclusion-wrap">';
echo ' <label for="cat_color_bg">カテゴリー背景色</label>';
echo ' <input type="text" name="cat_color_bg" id="cat_color_bg" value="">';
echo '</div>';
echo '<div class="form-field term-exclusion-wrap">';
echo ' <label for="cat_color_txt">カテゴリー文字色</label>';
echo ' <input type="text" name="cat_color_txt" id="cat_color_txt" value="">';
echo '</div>';
}
add_action ( 'category_add_form_fields', 'add_category_color_field');
// 編集ページ
function edit_category_color_field( $tag ) {
$id = $tag->term_id;
$meta = get_option( 'cat_' . $id );
echo '<tr class="form-field term-exclusion-wrap">';
echo ' <th><label for="cat_color_bg">カテゴリー背景色</label></th>';
echo ' <td><input type="text" name="cat_color_bg" id="cat_color_bg" value="'.$meta['cat_color_bg'].'"></td>';
echo '</tr>';
echo '<tr class="form-field term-exclusion-wrap">';
echo ' <th><label for="cat_color_txt">カテゴリー文字色</label></th>';
echo ' <td><input type="text" name="cat_color_txt" id="cat_color_txt" value="'.$meta['cat_color_txt'].'"></td>';
echo '</tr>';
}
add_action ( 'category_edit_form_fields', 'edit_category_color_field');
// 保存処理
function save_category_color_field( $term_id ) {
$post_key = 'cat_color_bg';
$meta = get_option( 'cat_' . $term_id );
if ( isset( $_POST[$post_key] ) ) {
$meta[$post_key] = $_POST[$post_key];
} else {
$meta[$post_key] = '';
}
update_option( 'cat_' . $term_id, $meta );
$post_key = 'cat_color_txt';
$meta = get_option( 'cat_' . $term_id );
if ( isset( $_POST[$post_key] ) ) {
$meta[$post_key] = $_POST[$post_key];
} else {
$meta[$post_key] = '';
}
update_option( 'cat_' . $term_id, $meta );
}
add_action ( 'create_term', 'save_category_color_field' ); // 新規登録時
add_action ( 'edited_term', 'save_category_color_field' ); // 編集時
// 背景色、テキスト色を反映したカテゴリーボタン表示
function the_category_color_btn( $post_id ){
$categories = get_the_category($post_id);
if ($categories) {
foreach($categories as $individual_category) {
$meta = get_option( 'cat_' . $individual_category->term_id );
// カテゴリーページのパーマリンクに合わせ要調整
$link = home_url().'/archives/category/'.$individual_category->slug;
if ( isset($meta['cat_color_bg']) ) {
echo '<a class="cat_btn" style="background:'.$meta['cat_color_bg'].';color:'.$meta['cat_color_txt'].';" href="'.$link.'" >'.$individual_category->name.'</a>';
} else {
// 色指定がない場合
echo '<a class="cat_btn" href="'.$link.'" >'.$individual_category->name . '</a>';
}
}
}
}
}
上記のコードを追加すると下記のようにカテゴリーページに項目が追加されます
ボタン表示用のレイアウト用のstyle定義
style.css
カテゴリー色を有効にした状態のボタンリンクを表示
<?php the_category_color_btn($post->ID); ?>
上記機能のデモページ トップページ
