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

スポンサーサイト

ダウンロード

コードは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等のループ内で)

 

仕上がりイメージ
仕上がりイメージ

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

以下余談

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

  • カテゴリーが増える可能性がある
  • カテゴリーを増やしたときに、カテゴリー名の背景色などをダッシュボードから簡単に行えるようにしたい
    • 画像にすると自分たちで追加したり・修正できない
    • CSSのクラスで色をつけるとカテゴリーが増える度に.cssファイルを修正しないといけない

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

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

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

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

カラーピッカーをつける

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

  • 入力する人が必ずしも16進数のカラー値が分かるとは限らない
  • デフォルトテーマなどにカラーピッカーが付いているのだから、それを利用すれば分かりやすい

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

今後の課題

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

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

WordPressのカテゴリー編集画面にカラーピッカーをつける」への3件のフィードバック

  1. 痒いところに手が届く、非常にありがたいプラグインでありがとうございます。
    ただ、マルチサイトに使うとエラーがでます(僕の環境だけでしょうか。win+xamppです)
    対応していただけると助かります。

  2. すみません、先ほどのマルチサイトで動作しないコメントは間違いで自分のミスでした。
    webOpixelのコードもつかっていたので関数名が重複していました。

Comments are closed.