サイトアイコン Gatespace's Blog

WordPressのカテゴリー編集画面にカラーピッカーをつける

カテゴリー編集画面にカラーピッカーを追加

カテゴリー編集画面にカラーピッカーを追加

この記事をシェアする

先日ローンチしたサイトのこぼれ話として「カテゴリーが増えても色の設定をカテゴリーの編集画面からできるようにした」という話をしたところ、受けが良かったのでもうちょっと使いやすくしてみました。

ダウンロード

コードはgithubにあります。
使う場合はダウンロード後、プラグインディレクトリにアップロードし、有効化してください。
形式上プラグインになっていますが、ソースをコピーしてテーマのfunctions.phpに追記しても大丈夫だと思います。

ダッシュボードでの使い方

文字色、背景色のフィールドとカラーピッカー

プラグインを有効化するとカテゴリーの新規登録及び編集画面に「文字色」と「背景色」のテキストフィールドとカラーピッカーが追加されます。
各フィールドには直接数値を入力することもできます。その際、16進数で使われる記号や文字以外は弾くようになっています(デフォルトテーマで使われているカラーピッカーと同じ処理です)。
またフィールドをクリック後、カラーピッカーで色を選択するとフィールドに反映されます。

同時にピッカー横のサンプルで配色を確認することもできます。

テンプレートでの使い方

入力された値はwp_optionテーブルに、option_name が term_{カテゴリーID} でシリアライズされた配列として保存されています。
テンプレートファイル内でこれを取り出すには
$term_data = get_option('term_'.カテゴリーID); // 事前にIDを取得しておく
とすると、文字色は $term_data['textcolor']、背景色は $term_data['bgcolor'] で取り出せます。

サンプルコード(index.php等のループ内で)

$cats = get_the_category();
if ( $cats && ! is_wp_error( $cats ) ) : // 取得できたら
	foreach ( $cats as $cat ) { // 配列で戻ってきているのでループを回す
		$term_data = get_option('term_'.intval($cat->term_id));
		$term_bgcolor = ( empty( $term_data['bgcolor'] ) ) ? '#666' : $term_data['bgcolor'];
		$term_txcolor = ( empty( $term_data['textcolor'] ) ) ? '#fff' : $term_data['textcolor'];
		echo '<a style="background-color: '.esc_attr($term_bgcolor).'; color: '.esc_attr($term_txcolor).';" href="/".get_term_link( $cat ).'">'.$cat->name."</a> ";
	}
endif;

 

仕上がりイメージ

簡単な色分けであれば、毎回スタイルシートを変更しなくても良くなります。

以下余談

カテゴリーにカスタムフィールドをつけたい理由

という理由でした。
カテゴリー自体は簡単に増やせるのに体裁をあわせようとすると、途端に画像作成やCSSの知識が必要になったり、いちいち制作会社に発注したりするのは、結果的に「簡単」ではないです。

カテゴリーにカスタムフィールドを付け加える

カテゴリー(タクソノミー)にも投稿と同じようにカスタムフィールドをつける事が可能です。
実装にあたってはこちらのブログを参考にさせてもらいました。

こちらのブログではカテゴリー編集画面にテキストフィールドと画像アップローダを加えています。

カラーピッカーをつける

単純なテキストフィールドでも良かったのですが、

という理由からカラーピッカーを使う事にし、ついでに配色もサンプルで確認できるようにしてみました。

今後の課題

今のところカテゴリーのみですが、アクションフックを書き換えればタグやカスタム分類(タクソノミー)でも利用可能です。
需要があれば、ソースコードを書き換えなくても自動で対応するようにしたいですね。
(というかgithubのコードをフォークして書き換えまくってもOKですよ)

ということで識者の方のツッコミが怖いところでもあります・・・(汗

この記事をシェアする