WordPress カテゴリーごとにテキスト色、背景色の設定が行えるように項目を追加する

概要説明

カテゴリーごとに色設定を持たせて表示の際にボタン背景、テキスト色を変更するカスタマイズ。CSSでの制御でも対応は可能ですが管理画面から対応を行えるようにしておくことでカテゴリー追加時にも簡単に設定が行えるようになります。

WordPress カテゴリーごとにテキスト色、背景色の設定が行えるように項目を追加する

管理画面からカラーコードを設定することで色の指定が行えるようになります

カテゴリーページ設定ページにテキスト色、背景色の設定項目を追加

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>';
                }
            }
        }
    }
}
WordPress カテゴリーごとにテキスト色、背景色の設定が行えるように項目を追加する

上記のコードを追加すると下記のようにカテゴリーページに項目が追加されます

ボタン表示用のレイアウト用のstyle定義

style.css

カテゴリー色を有効にした状態のボタンリンクを表示

<?php the_category_color_btn($post->ID); ?>

上記機能のデモページ トップページ

WordPress Developer Resources

関連機能

  1. DBキャッシュ機能を実装 外部データなど任意の情報を一定期間キャッシュさせる

  2. WordPress記事投稿時に選択できるカテゴリーを1件だけに変更する チェックボックスからラジオボタンに変更

  3. ファイル名表示機能風エリアを追加「Enlighter – Customizable Syntax Highlighter」プラグイン

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

いかに鞘から抜かずにおくか
そのために我々は死にものぐるいで
剣を振っとるのだ

バガボンド
by 柳生石舟斎

Profile

PAGE TOP
Amazon プライム対象