ダッシュボード【WordPress】カテゴリーの色分けを管理画面で管理して変更できるようにするHOMEWordPress【WordPress】カテゴリーの色分けを管理画面で管理して変更できるようにする投稿一覧(外観的に言うと新着情報一覧)とかのページでよく見るレイアウト↓こういうのこの画像の場合「NEWS」は青色で「プレスリリース」は赤色で表示が切り替わっている。あるやり方だと、カテゴリーごとにスラッグ名をclassにつけてCSSで色の表示を切り替える。WordPressのthe_categoryでカテゴリごとにスラッグ名をclassに給与するけど、このやり方だと納品した後にカテゴリーを増やした場合、CSSをいじれる人がいないと色の切り替えができません。それならいっその事、WordPressの管理画面で色を切り替える事ができたら、納品時に喜んでもらえる場合があるかも...って事でやってみました。Fields」をインストールして有効化。このプラグインのいいところは、投稿だけでなく、フィールドを設置する場所を投稿だけでなく、個別の固定ページやカテゴリーの項目にまで表示させれるトコロです。カテゴリーのカラーが編集できるように「カラーピッカー」のフィールドを追加します。薄い帯などを使う場合も見越して、テキストの色も変えれるように「カラーピッカー」のフィールドを2つ用意しておきます。※ラベルと名前は任意で好きな物をつけてOKです。設置場所をカテゴリーしたので投稿→カテゴリー→カテゴリーを編集の「説明」の下に行くとカスタムフィールドが追加されているのがわかります。あとは、色を設定すればOKです。※見た目、白色(#f00)が設定されているように見えますが、初期値は何の色も設定されていないので、テキストカラーの部分も一度カラーピッカーを開いて、色を選択しておく必要があります。【3】functions.phpにカテゴリ抽出用のコードを追加フィールドに設定したカラーを表示側に呼び出すための準備をします。Fields」で作成した名前を入れます。最後は表示させたいところに、下記のコードを追加すればOK。?>まとめ最初から、カテゴリーが決まっているブログってあんまりないと思うんですよね。デザイナーのエゴな部分もあるかもしれませんけど、かゆいところに手が届くCMSの構築をしたいですよね。【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。