注目キーワード

LION MEDIAのカテゴリーユーザー定義カラーを追加する

LION MEDIAのカテゴリーユーザー定義カラーを追加する
  1. HOME
  2. WordPress
  3. WordPressテーマ
  4. LION MEDIAのカテゴリーユーザー定義カラーを追加する

LION MEDIAにはカテゴリーを分類するときにカテゴリーのカラーも設定することができます。

「ユーザー定義カラー」という設定があり、LION MEDIAのカスタマイズ設定の「デザインスキン設定」でユーザー定義カラーを5カラー使用できます。

このときのユーザー定義カラーは「5カラー」までなのです。

LION MEDIAのテーマを使用して一年。自由にカテゴリーカラー変更できるのが「5カラー」では足りなくなってきたので、どうにかユーザー定義カラーを追加できないか試してみました。

 

目次

LION MEDIAのカテゴリーカラーが使われる場所

 

LION MEDIAでカテゴリーを使用してブログ運営してる場合、ユーザー定義カラーはLION MEDIAのテーマ内のどの場所に使われているのか確認が必要だと思ったので使用場所の確認作業からです。

 

LION MEDIAのアーカイブにカラーが使われる

 

  • TOPピックアップ記事
  • ランキングボックス
  • カテゴリーボックス
  • TOPページアーカイブ
  • タグアーカイブ
  • カテゴリーアーカイブ

 

そしてカテゴリーアーカイブのヘッダーの説明文の背景カラーも含まれる場所です。

ほとんどがLION MEDIAのアーカイブ関連の場所で、それぞれのカテゴリーに属したページが「ユーザー定義カラー」を使用するとカテゴリーカラー分けされて使われています。

 

Advertisement

 

ユーザー定義カラー追加の設定関連の場所

 

LION MEDIAにユーザー定義カラーの追加をしたいので設定する関連場所を把握して、使用されてるPHPコードがどのくらいあるのか大まかな場所を知っておきます。

LION MEDIAのカスタマイズ設定の「デザインスキン設定」の中で「カテゴリー用ユーザー定義カラーを選択」の設定場所がまず１つ目。

WordPressの「新規カテゴリー追加」の下のほうにあるボックス「カテゴリーのイメージカラーを指定」の設定が２つ目の場所。

そして3つめ「カテゴリー編集画面」にもユーザー定義カラーの設定できる場所があります。

場所を見た感じだとユーザー定義カラー追加するためには、スタイルやHTMLの他に関数でフックさせたり5箇所くらいのコードを書いてある場所がありそうだなぁと思います。

 

LION MEDIAのカテゴリーカラーを追加する

 

LION MEDIAのカテゴリーカラーを設定できるユーザー定義カラーの追加は、LION MEDIAのテーマが機能するための動作をまとめている「functions.php」で追加していきます。

 

  • カテゴリー用ユーザー定義カラー　セッティング
  • カテゴリー用ユーザー定義カラー　コントロール
  • wp_headにオリジナル項目追加　2箇所
  • 新規登録画面の入力部分　2箇所
  • 編集画面の入力部分　2箇所

 

上記の計8箇所がLION MEDIAのユーザー定義カラーを追加するために必要な部分です。

だけど新しくテーマカスタマイザーを作成するのではなく、LION MEDIAのテーマがユーザー定義カラーをフックしてるcustomize_registerにコピペで新しく追加するユーザー定義カラーを加えるだけです。

本当はLION MEDIAの子テーマのfunctions.phpでユーザー定義カラーの追加をしたかったのですが、追加ユーザー定義カラーの保存がうまく動作してくれなかったので、親テーマで追加することにしました。

テーマアップデートがきたら追加したユーザー定義カラーが動作しなくなってしまうのかもしれませんが妥協しました。

 

Advertisement

 

デザインスキン設定にカテゴリーカラー追加

 

functions.phpのデザインスキン設定画面の項目「2392行目」あたりから始まる「カテゴリー用定義カラー05 セッティング」と「カテゴリー用ユーザー定義カラー05 コントロール」のコメント文があります。

 

// カテゴリ用ユーザー定義カラー06 セッティング
	$wp_customize->add_setting( 'fit_skin_category-user06', array(
		'default' => '#000',
		'type' => 'theme_mod',
		'sanitize_callback' => 'sanitize_hex_color',
	));
	// カテゴリ用ユーザー定義カラー06 コントロール
	$wp_customize->add_control( new WP_Customize_color_Control( $wp_customize, 'fit_skin_category-user06', array(
		'section' => 'fit_skin_section',
		'settings' =>'fit_skin_category-user06',
		'description' => 'ユーザー定義カラー06',		
	)));

 

おそらく「カテゴリー用ユーザー定義カラー05 コントロール」のコメント文は「03」になってるかもしれませんが問題ないです。

カテゴリー用ユーザー定義カラーのセッティングとコントロールはセットなので05の下にコピペしてユーザー定義カラー06を追加します。

05はカテゴリーのユーザー定義カラーの設定画面の項目やセットに使用する番号なので6個目追加なので、追加するコードの番号部分は06に統一して変更します。

 

 

コピペで追加するとLION MEDIAのカスタマイズ設定の「デザインスキン設定」の「カテゴリー用ユーザー定義カラーを選択」の項目がcustomize_registerにフックされて、追加した「ユーザー定義カラー06」が表示されます。

 

追加したユーザー定義カラーをwp_headにフック

 

追加したユーザー定義カラーをfunctions.phpの「2489行目」付近のコメント文「wp_headにオリジナル項目追加」から少しスクロールした2658行目あたりのカテゴリー05のif文をコピペして05部分は全て06変更します。

 

 

if(get_theme_mod('fit_skin_category-user06')) {
		$user06 = get_theme_mod('fit_skin_category-user06' );
	}else{
		$user06 = '#000';
	}

 

このコードが何をやってるコードなのか完全理解できてませんが、get_theme_modが使われてるのでget_theme_mod関数で設定値を取得して、その値で以下のカラーのためのスタイルに使用するためなのかなと思ってます。

 

.c-user06 {color:'.$user06.' !important}
.bgc-user06 {background:'.$user06.' !important}
.hc-user06:hover {color:'.$user06.' !important}'."\n";

 

そして「2660行目」付近のechoの下にある「.c-user05」「.bgc-user05」「.hc-user05:hover」がセットなので、まとめてコピペしたら05を06にして追加します。

 

 

もともとのLION MEDIAのユーザー定義カラーが5つまでなので、5つめのユーザー定義カラーのコードには「”\n”」で改行があったので追加する06の最後に「”\n”」を記述しておきます。

 

Advertisement

 

カテゴリー新規登録画面に項目を追加する

 

LION MEDIAのカスタマイズ設定とは別のWordPressのカテゴリー設定にある新規登録画面の入力部分にユーザーカテゴリーを追加します。

 

$user06 = get_theme_mod('fit_skin_category-user06'); //ユーザー定義カラー06

 

functions.phpの「4343行目」付近に上記のコードと同じコードがあるので「05」の下に「06」にしてコピペして項目を追加します。

 

<option style="color:<?php echo $user06;?>" value="-user06">■ ユーザー定義カラー06</option>

 

そして「4383行目」のユーザー定義カラーのoption要素も05の下にコピペして06に変更してイメージカラーの項目追加をします。

 

 

コピペで追加してファイル更新すると、カテゴリー新規登録画面に「ユーザー定義カラー06」が選択できるようになります。

 

カテゴリーの編集画面に項目を追加する

 

次にカテゴリーの「編集画面」でも新しく追加するユーザー定義カラーが設定できるように項目を追加します。

 

$user06 = get_theme_mod('fit_skin_category-user06'); //ユーザー定義カラー06

 

functions.phpの「4442行目」あたりのユーザー定義カラー部分の上記のコードがあります。

何番目のユーザー定義カラーのコードでもいいので、ユーザー定義カラー05の下にコピペして06に変更して追加します。

 

<option style="color:<?php echo $user06;?>" value="-user06" <?php if($cat_meta[$t_id] == '-user06'){ echo "selected";} ?>>■ ユーザー定義カラー06</option>

 

そしたら少し下にスクロールした「4483行目」のoption要素をユーザー定義05の下にコピペ追加します。

 

 

カテゴリー新規登録画面に追加したときと同じく、$user06がechoで出力されてユーザー定義カラー06が編集画面の時に追加可能になります。

 

LION MEDIAに追加したユーザー定義カラーを表示

 

LION MEDIAに追加したカテゴリーで使用するユーザー定義カラーの表示が問題なく追加されてるか確認しておきます。

 

 

LION MEDIAのテーマのアーカイブで表示されるサムネイル画像右上のカテゴリーカラーも問題なく追加。

 

 

カテゴリーの説明文の背景カラーにも追加したユーザー定義カラーが表示できてます。

LION MEDIAの他のユーザー定義カラーとの干渉もないようなので問題なく追加使用できるかと思います。

 

ただLIOM MEDIAのテーマのアップデートが入ったときには親テーマでユーザー定義カラーを追加してるので、もう一度追加し直す必要があるかもしれません。

LION MEDIAは一年使用してますがテーマアップデートされてる気配はないんですけどね。

 

WordPressテーマカテゴリの最新記事