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. WordPress お問合せフォームの郵便番号に入力したら住所を自動で入力する機能を追加 ( Contact Form 7 )

  2. ダッシュボードに自由に使えるメモ用エリアを追加

  3. カテゴリー編集ページに任意の項目を追加

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

魔法は探し求めている時が
一番楽しいんだよ

葬送のフリーレン
by フリーレン

Profile

PAGE TOP
Amazon プライム対象