カスタムフィールドを使って管理画面からカテゴリー別色分けを設定し反映する

Advertisement

ワードプレスの管理画面からカテゴリーの表示色をカスタマイズ・設定する方法を紹介します。

例えば、CSSの知識がない方が要素の色を変えたりするのは簡単なようで大変だと思いますが、ワードプレスの管理画面上でカラーピッカー等を使っての更新であれば、楽に変更できるのではないでしょうか。

プラグインを使ってカスタムフィールドを使う

まずはカスタムフィールドを準備します。
今回はACFこと「Advanced Custom Fields」を使います。

Advanced Custom Fields
Customize WordPress with powerful, professional and intuitive fields.

投稿のカテゴリーの編集に関してカスタムフィールドを使うなら、やっぱりプラグインが手っ取り早いですし、Advanced Custom Fieldsならカラーピッカー等の設定も簡単ですし使いやすいですね。

超有名なプラグインゆえ、使い方はたくさん紹介されていますね。

Advanced Custom Fieldsの使い方
WordPressのカスタムフィールド系プラグイン『Advanced Custom Fields』の使い方を片っ端から解説していきます。

フィールドラベル、フィールド名はもちろん任意です。
背景色の項目と背景によってはテキストカラーを変えないと視認性やアクセシビリティも悪いのでテキストカラーの項目2つ作ります。

ここでは、「back」と「text_color」と設定しています。

カテゴリーの編集画面に表示されるよう、ルールを追加して保存してください。

カテゴリー一覧

ループ外で使うカテゴリー一覧等で表示させる方法です。

php
<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
<?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に記述すれば、カテゴリーに対してカラーピッカー付きでカスタムフィールド入力項目が追加されます。

WordPressのカテゴリー編集画面にカラーピッカーをつける
先日ローンチしたサイトのこぼれ話として「カテゴリーが増えても色の設定をカテゴリーの編集画面からできるようにした…

本当にありがたいソースです!
ですが、そのままではカテゴリーの編集画面にカラーピッカーが表示されません。。

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なんで、扱いは自己責任でお願いします!

カテゴリー一覧

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
<?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の部分ではありますが、使う人によっては簡単ではないはずです。
フロントエンドとして、利用する人がどう使い安いかを考えカスタマイズする、永遠のテーマですね。。。

Advertisement
WordPress
東田ダダーンをフォローする
このブログを購読する
当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可をしてください。 東田ダダーンが更新された際、更新した旨、通知されます。
東田ダダーン

コメント