[無料WordPressテーマ] STINGER PLUS2にオリジナルのカラーセットを追加しよう！

2018/01/16WordPressテーマ

STINGER PLUS2のオリジナルテーマカスタマイザーは、あらかじめ用意された7種類のカラーセットの中からベースとなる色を選択する事で、テーマ全体のカラースキームを変更出来るのがなかなか便利で気に入っています。

そこで、当エントリーではその中に自分の作成したオリジナルのカラーセットを追加する方法について書いてみたいと思います。

コンテンツ

1. STINGER PLUS2のデフォルトカラーセット
2. カスタマイザーの簡単設定との違い
3. STINGER+2 管理の修正
- 3.1. st-kanri.phpの編集
4. カラーセットの配色を編集
- 4.1. st-theme-customization.phpの編集
- 4.2. 親テーマが更新されたら？
5. サンプルはこちら
- 5.1. カスタマイザーのサイト全体の設定
- 5.2. 実際の画面表示
6. 自分だけのステキなカラーセットを作りましょう

STINGER PLUS2のデフォルトカラーセット

テーマに用意されたカラーセットは以下の7種類になります。

デフォルト（カラー未設定）
赤（エレガント）
青（ビジネス）
緑（ナチュラル）
オレンジ（元気）
ピンク（可愛い）
グレー（ダーク）

それなりにバリエーションはあるので、どれか1つくらいは気に入ったカラーが見つかるかもしれませんが、どうせなら自分だけのオリジナルカラーにしたいと思う方も中にはいるんじゃないでしょうか？

私とか（自分かよ）

だったらそんなものはCSSで好きなようにすればいい話ではありますが、せっかくSTINGER PLUS2に便利な機能がある事ですし、ここはひとつその機能にちょいと手を加えればいいじゃない？という事でやってみました。

カスタマイザーの簡単設定との違い

そんな面倒な事しなくてもカスタマイザーの簡単設定で出来るんじゃね？という疑問はごもっともです。でもそこから設定すると何か微妙に違うんですよね…たぶん大した事では無いんでしょうけどコレジャナイ感が。

そこでカスタマイザーのカラーセットを使用した場合、簡単設定とどこが違うのかをさらっと確認してみました。ここに挙がっていない項目もあるかもしれませんが、とりあえず気がついた部分だけという事で。

フリーボックスにも適用される
お知らせの日付（あまり使ってる人いなさそうだけど）
見出しの装飾がちょっと違う
カラーネームやrgba形式で設定出来る（私としては結構重要）

こんなところでしょうか、下の画像は左側が簡単設定を使用した例で、右側がカスタマイザーからカラーセットを指定した例になります。

そんな感じなので、わざわざ親テーマからファイルをコピってきてカスタマイズするほどの事でも無いと思えばやるほどの事でもありませんが、テーマのスキンのように気分によって気軽に変更する事は可能になるなので、オリジナルのカラーセットを数パターン作成しておくといいかもしれません。

STINGER+2 管理の修正

例によって親テーマのファイルをイジる事になりますが…君はSTINGER PLUS2の親テーマを直接編集してもいいし、しなくてもいい（セカキュー風）もちろん子テーマにコピってきて編集してもいいので、その辺はお好きなようにという事でお願いしたい。

まぁ普通に子テーマにコピってきて修正するのが無難だと思いますけどね？

出来るだけ面倒な作業はしたくないなら「STINGER+2 管理」の画面上はそのままで、設定される色だけを変更する事も可能です。その場合はこの作業はスキップして次へ進んでOKです。

え？意味がわからない…？（スローンとマクヘール風）

要はデフォルト（カラー未設定）～グレー（ダーク）までの7つのカラーの内、使わない色があれば管理画面上のラジオボタンはそのまま利用して、その設定内容だけを上書きして使うと言えばいいでしょうか…つまりそんな感じです。

st-kanri.phpの編集

まずst-kanri.phpを開いて「オリジナルテーマカスタマイザーを使用する」で検索するか、行番号がわかるエディタで開いている場合は362行目付近まで移動します。

するとその少し下にこんな感じの行が見つかると思います。

STINGER+2 管理 > サイト全体の設定 > 赤（エレガント）の部分

<input type="radio" name="st-data68" value="red" <?php if ( $GLOBALS["stdata68"] === 'red' ) {
	echo 'checked';
} ?>>
赤（エレガント）

カラーセットを追加する場合はこの部分をまるまるコピペで増やしていく事になります。

変更する部分はこの中の

value="red“
=== 'red'
赤（エレガント）

の3箇所ですが、カラー名の部分は「STINGER+2 管理」上に表示されるだけなので、自分さえわかればどんな適当な名前でもノープロブレムです。

それではサンプルとして当サイトのイメージカラー的なTealでいっちょやってみたいと思います。

緑系（ティール）を追加

<input type="radio" name="st-data68" value="teal" <?php if ( $GLOBALS["stdata68"] === 'teal' ) {
	echo 'checked';
} ?>>
緑系（ティール）

こんな感じですかね。

ついでに赤（クリムゾン）と銀色（シルバー）というのも入れてみました。挿入する位置はデフォルトの次、つまりデフォルト（カラー未設定）～赤（エレガント）の間にします。

デフォルト（カラー未設定）～赤（エレガント）の間にオリジナルカラーセットを挿入

<div id="colorchice">
	<p>
		<input type="radio" name="st-data68" value="" <?php if ( $GLOBALS["stdata68"] === '' ) {
			echo 'checked';
		} ?>>
		デフォルト（カラー未設定）
		<input type="radio" name="st-data68" value="teal" <?php if ( $GLOBALS["stdata68"] === 'teal' ) {
			echo 'checked';
		} ?>>
		緑系（ティール）
		<input type="radio" name="st-data68" value="crimson" <?php if ( $GLOBALS["stdata68"] === 'crimson' ) {
			echo 'checked';
		} ?>>
		赤（クリムゾン）
		<input type="radio" name="st-data68" value="silver" <?php if ( $GLOBALS["stdata68"] === 'silver' ) {
			echo 'checked';
		} ?>>
		銀色（シルバー）
		<input type="radio" name="st-data68" value="red" <?php if ( $GLOBALS["stdata68"] === 'red' ) {
			echo 'checked';
		} ?>>
		赤（エレガント）

カラーセットの配色を編集

続いてカラーセットに対応する色を設定しているファイルを編集します。こちらも元は親テーマ側のファイルになるので先ほど編集したst-kanri.phpと同様の方法で編集しましょう。

st-theme-customization.phpの編集

st-theme-customization.phpを開いたら1ページ分くらいスクロールした辺り、32行目くらいからカスタマイザーのカラーセットを設定している部分になります。

赤（エレガント）のカラーセット内容

// 赤 (エレガント)
case ( $preset_name === 'red' ):
	$basecolor   = '#a61919';  //一番濃い色
	$maincolor   = '#c81e1e';  //少し薄い色
	$subcolor    = '#fce9e9';  //とても薄い色
	$accentcolor = $basecolor; //アクセント
	$textcolor   = '#ffffff';  //テキスト

	break;

オリジナルのカラーセットを追加した場合はこの部分をまるっとコピペして増やしていきますが、使わないカラーを再利用する場合はその部分を上書きします。

コピーして変更する部分は

赤 (エレガント)
case ( $preset_name === 'red' )
それぞれの色

カラー名はコメントなのでそのままでも実害はありませんが、紛らわしいのでちゃんと変更しておきましょう。redの部分は先ほどst-kanri.phpで設定した名前と揃える必要があります。ここを間違えるとせっかく作ったカラーセットが反映されないので注意して下さい。

次は色の設定ですが、どの色がどこに適用されているかはざっとこんな感じです。

一番濃い色: グラデーションの濃い側; フリーボックス見出しの背景色; 見出しのテキスト・ボーダーなど
少し薄い色: グラデーションの薄い側; お知らせ表示の日付など
とても薄い色: 見出し・メタ情報・フリーボックス本文の背景色
アクセント: おすすめ記事の見出しと数字部分の背景色
テキスト: グラデーション部分のテキスト; フリーボックス・おすすめ記事の見出しテキストなど

アクセントの部分が$basecolorとなっているのは、一番濃い色にセットした内容と同じものをここでもセットしているという事です。

カラーネームで指定する場合は#を外す事をお忘れなく、rgba形式でも設定出来る事がわかったので今回は早速それでいってみました。rgba形式を使うとひとつの色を濃淡で使い分けられるので、何色も考えなくて済むのが楽なんですよね、元は同じ色なので当然と言えば当然ですが統一感も出ますし。

緑系 (ティール)のカラーセットを追加

// 緑系 (ティール)
case ( $preset_name === 'teal' ):
	$basecolor   = 'teal';  //一番濃い色
	$maincolor   = 'rgba(0, 128, 128 , .5)';  //少し薄い色
	$subcolor    = 'rgba(0, 128, 128 , .1)';  //とても薄い色
	$accentcolor = $basecolor; //アクセント
	$textcolor   = '#ffffff';     //テキスト

	break;

こんな感じでしょうか、残りの2色も追加したのがこちら。

赤 (エレガント)の前に新規カラーセットの配色を追加

if ( !function_exists( 'st_get_preset_colors' ) ) {
	function st_get_preset_colors( $preset_name = null ) {
		switch ( true ) {
			// 緑系 (ティール)
			case ( $preset_name === 'teal' ):
				$basecolor   = 'teal';  //一番濃い色
				$maincolor   = 'rgba(0, 128, 128, .5)';  //少し薄い色
				$subcolor    = 'rgba(0, 128, 128, .1)';  //とても薄い色
				$accentcolor = $basecolor; //アクセント
				$textcolor   = '#ffffff';     //テキスト

				break;

			// 赤 (クリムゾン)
			case ( $preset_name === 'crimson' ):
				$basecolor   = 'crimson';  //一番濃い色
				$maincolor   = 'rgba(220, 20, 60, .5)';  //少し薄い色
				$subcolor    = 'rgba(220, 20, 60, .1)';  //とても薄い色
				$accentcolor = $basecolor; //アクセント
				$textcolor   = '#ffffff';     //テキスト

				break;

			// 銀色 (シルバー)
			case ( $preset_name === 'silver' ):
				$basecolor   = 'silver';  //一番濃い色
				$maincolor   = 'rgba(192, 192, 192, .5)';  //少し薄い色
				$subcolor    = 'rgba(192, 192, 192, .1)';  //とても薄い色
				$accentcolor = $basecolor; //アクセント
				$textcolor   = 'black';     //テキスト

				break;

			// 赤 (エレガント)
			case ( $preset_name === 'red' ):
				$basecolor   = '#a61919';  //一番濃い色
				$maincolor   = '#c81e1e';  //少し薄い色
				$subcolor    = '#fce9e9';  //とても薄い色
				$accentcolor = $basecolor; //アクセント
				$textcolor   = '#ffffff';     //テキスト

				break;