ワードプレスの管理画面からカテゴリーの表示色をカスタマイズ・設定する方法を紹介します。
例えば、CSSの知識がない方が要素の色を変えたりするのは簡単なようで大変だと思いますが、ワードプレスの管理画面上でカラーピッカー等を使っての更新であれば、楽に変更できるのではないでしょうか。
プラグインを使ってカスタムフィールドを使う
まずはカスタムフィールドを準備します。
今回はACFこと「Advanced Custom Fields」を使います。
投稿のカテゴリーの編集に関してカスタムフィールドを使うなら、やっぱりプラグインが手っ取り早いですし、Advanced Custom Fieldsならカラーピッカー等の設定も簡単ですし使いやすいですね。
超有名なプラグインゆえ、使い方はたくさん紹介されていますね。
フィールドラベル、フィールド名はもちろん任意です。
背景色の項目と背景によってはテキストカラーを変えないと視認性やアクセシビリティも悪いのでテキストカラーの項目2つ作ります。
ここでは、「back」と「text_color」と設定しています。
カテゴリーの編集画面に表示されるよう、ルールを追加して保存してください。
カテゴリー一覧
ループ外で使うカテゴリー一覧等で表示させる方法です。
<ul>
<?php
$categories = get_categories('parent=0');
foreach($categories as $val){
$cat_link = get_category_link($val->cat_ID);
$cat_color = 'category_' . $val -> cat_ID;
$back_color=get_field('back',$cat_color);
$text_color=get_field('text_color',$cat_color);
echo '<li>';
echo '<a href="' . $cat_link . '" style="background:' . $back_color . '; color:' . $text_color . ';">' . $val -> name . '</a>';
echo '</li>';
}
?>
</ul>ループ内
ループ内で使う方法です。
<?php
$cat = get_the_category();
$catname = $cat[0]->cat_name;
$cat_id = $cat[0]->cat_ID;
$link = get_category_link($cat_id);
$cat_color = 'category_'.$cat_id;
$back_color = get_field('back',$cat_color);
$text_color = get_field('text_color',$cat_color);
?>
<a href="<?php echo $link; ?>" class="cate" style="background:<?php echo $back_color; ?>; color:<?php echo $text_color; ?>;"><?php echo $catname; ?></a>カスタムフィールドを自作する場合
自作する場合に関しても、紹介します。
下記のページでgithubよりプラグインを公開されているんですが、記事にも書かれてるように、そのプラグインのソースをfunctions.phpに記述すれば、カテゴリーに対してカラーピッカー付きでカスタムフィールド入力項目が追加されます。
本当にありがたいソースです！
ですが、そのままではカテゴリーの編集画面にカラーピッカーが表示されません。。
add_action('admin_print_styles-term.php', 'sample_load_color_picker_style');
add_action('admin_print_scripts-term.php', 'my_admin_print_scripts');
add_action("admin_head-term.php", 'my_admin_print_scriptshoge');上記を追記する必要があります。
内容としてはカテゴリー編集画面（term.php）にJSやCSS読み込んでねという内容です。
functions.phpなんで、扱いは自己責任でお願いします！
カテゴリー一覧
<ul>
<?php
$categories = get_categories('parent=0');
foreach($categories as $val){
$cat_link = get_category_link($val->cat_ID);
$term_data = get_option('term_'. $val -> cat_ID);
$back_color = $term_data['bgcolor'];
$text_color = $term_data['textcolor'];
echo '<li>';
echo '<a href="' . $cat_link . '" style="background:' . $back_color . '; color:' . $text_color . ';">' . $val -> name . '</a>';
echo '</li>';
}
?>
</ul>ループ内
<?php
$cat = get_the_category();
$catname = $cat[0]->cat_name;
$cat_id = $cat[0]->cat_ID;
$link = get_category_link($cat_id);
$term_data = get_option('term_'.$cat_id);
$back_color = $term_data['bgcolor'];
$text_color = $term_data['textcolor'];
?>
<a href="<?php echo $link; ?>" class="cate" style="background:<?php echo $back_color; ?>; color:<?php echo $text_color; ? >;"><?php echo $catname; ?></a>まとめ
初心者でも、少しコーディングを覚えれば簡単なCSSの部分ではありますが、使う人によっては簡単ではないはずです。
フロントエンドとして、利用する人がどう使い安いかを考えカスタマイズする、永遠のテーマですね。。。
コメント