テーマカスタマイザーでカラー設定を追加

無料のワードプレステーマ GEMSTONE

WordPressでオリジナルのテーマファイルを作っている&作りたい人は
管理画面からテキストやリンクの色設定をしてみたい人も沢山いるのではないでしょうか?
この投稿では、テーマカスタマイザーを使った各種カラー変更設定を追加するためのチュートリアルを書いていきます。
この仕様は、GEMSTONEバージョン1.0.6に組込済です。

1 functions.php に設定する

細かいことはゴッソリ飛ばします!
まず、functions.php に以下のコードを貼付してください。

今回、追加した色設定は

  • リンク色(通常&訪問後)
  • リンク色(ホバー)
  • 見出しタイトル色
  • テキスト色
  • サブテキスト色

の5つになります。
BODYの背景色のみ、add_theme_support を使って設定しています。
他にもコンテンツの背景色(初期設定はホワイト)やヘッダーフッターの背景色(初期設定は紺色)等も追加したかったのですが
細かい設定はテーマを使用する制作者も面倒でしょうから、今回は5つに限定しました。

functions.php

/* Color Customizer additions setting */
//管理画面のカスタマイズにテーマカラーの設定セクションを追加
function gemstone_customize_register($wp_customize) {
 $wp_customize->add_setting( 'gemstone_link_color', array( 'default' => '#199ece','sanitize_callback' => 'sanitize_text_field', ) );
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'gemstone_link_color', array(
 'label' => __( 'リンク色(normal & visited)', 'gemstone' ),
 'section' => 'colors',
 'settings' => 'gemstone_link_color',
 ) ) );
 $wp_customize->add_setting( 'gemstone_hover_color', array( 'default' => '#94daf3','sanitize_callback' => 'sanitize_text_field', ) );
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'gemstone_hover_color', array(
 'label' => __( 'リンク色(hover)', 'gemstone' ),
 'section' => 'colors',
 'settings' => 'gemstone_hover_color',
 ) ) );
 $wp_customize->add_setting( 'gemstone_title_color', array( 'default' => '#293248','sanitize_callback' => 'sanitize_text_field', ) );
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'gemstone_title_color', array(
 'label' => __( 'タイトル色', 'gemstone' ),
 'section' => 'colors',
 'settings' => 'gemstone_title_color',
 ) ) );
 $wp_customize->add_setting( 'gemstone_text_color', array( 'default' => '#3e465a','sanitize_callback' => 'sanitize_text_field', ) );
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'gemstone_text_color', array(
 'label' => __( 'テキスト色', 'gemstone' ),
 'section' => 'colors',
 'settings' => 'gemstone_text_color',
 ) ) );
 $wp_customize->add_setting( 'gemstone_subtext_color', array( 'default' => '#717992','sanitize_callback' => 'sanitize_text_field', ) );
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'gemstone_subtext_color', array(
 'label' => __( 'サブテキスト色', 'gemstone' ),
 'section' => 'colors',
 'settings' => 'gemstone_subtext_color',
 ) ) );
}
add_action('customize_register', 'gemstone_customize_register');

大まかな説明としては
add_setting で設定要素に対するデフォルトカラーの値を指定。WP_Customize_Color_Control 関数を使用して設定項目として表示するラベル名、表示するセクション名、設定値の識別名を登録。最後に sanitize_callback 関数でデータベースから取得した文字列を無害化します。sanitize_callback の意味。じつはよくわかってません。。。でもこれを書かないとTheme Check プラグインでエラーが出てしまうので、ひとまず書いておきましょう。

2 header.php に設定する

functions.php にコードを貼付したら

外観▶︎カスタマイズ▶︎色

の項目に情報が入っているか確認してください。

201609015-1

画像のように各色の表示と、カラーパレットの変更はできるようになりましたでしょうか?
ここの変更ができるようになったら続けてヘッダーの設定をしていきます。

header.php にインラインでCSSを直接書いていきます。
wp_head 関数の下に後述のCSSコードをコピペしてください。
じつは頑張れば、wp_head 関数に格納することもできるのですが、ややこしくなってしまうので直接記述する方法をとっています。
ソースは汚くなりますが、確実かつ簡単に反映させることができます。

header.php

<style>
a , .box-nav-content ul li a:before {color:<?php echo get_theme_mod('gemstone_link_color'); ?>;}
a:hover , .nav-foot li a:hover , .nav-foot-horizontal li a:hover{color:<?php echo get_theme_mod('gemstone_hover_color'); ?>;}
.box-post-content a.readmore , .nav-pagination a:hover ,
.box-nav-content h1 a, .box-nav-content h2 a, .box-nav-content h3 a, .box-nav-content h4 a, .box-nav-content h5 a, .box-nav-content h6 a, .box-nav-content dt a, .entry-content .box-nav-content h1 a, .entry-content .box-nav-content h2 a, .entry-content .box-nav-content h3 a, .entry-content .box-nav-content h4 a, .entry-content .box-nav-content h5 a, .entry-content .box-nav-content h6 a, .entry-content .box-nav-content dt a , .box-nav-content ol li a:before , a.btn , .tagcloud a , .go-top a , .widget_search input[type="submit"] , input[type="confirm"], input[type="submit"], input[type="button"] , [type="checkbox"]:checked + span:after, [type="checkbox"]:not(:checked) + span:after, [type="radio"]:checked + span:after, [type="radio"]:not(:checked) + span:after , .nav-global li a:hover , a.banner {
 background-color:<?php echo get_theme_mod('gemstone_link_color'); ?>;color:#fff;}
.box-post-content a.readmore:hover , a.btn:hover , a.banner:hover ,.tagcloud a:hover , .nav-global li.current-menu-item a:hover {
 background-color:<?php echo get_theme_mod('gemstone_hover_color'); ?>;color:#fff;}
.entry-content h1 , .entry-content h2 , .entry-content h3 ,.entry-content h4 ,
.entry-content h5 , .entry-content h6 {color:<?php echo get_theme_mod('gemstone_title_color'); ?>;}
body , .entry-content p {color:<?php echo get_theme_mod('gemstone_text_color'); ?>;}
.entry-content blockquote , .entry-content blockquote p {color:<?php echo get_theme_mod('gemstone_subtext_color'); ?>;}
.entry-content span.title-number, .title-number {background-color:<?php echo get_theme_mod('gemstone_subtext_color'); ?>;}
</style>

改行などを入れていないので、わかりにくいですが、このコードを書けば完成までもう少し。

確認のため、もう一度

外観▶︎カスタマイズ▶︎色

で色設定をしてみましょう。
カラーパレットの色を変えたら、右側のプレビュー画面で色変更が反映されるか確認してください。
色が変わるようになったら、保存して公開ボタンを押したら完成です。
簡単ですね!

3 ここからは設定時のポイント〜

でも、これだけを自作テーマに書いてもうまく設定できない人は多いと思います。
コピペする前にいくつかチェックしたい項目があるので、確認してみてください。

  • BODYの背景色は add_theme_support を使って設定します。今回の投稿とは仕様が異なります。
  • get_theme_mod 関数を使って設定した色を取得しましょう。
  • ここだけ設定してもウェブサイトは何も変わりません。HTMLとCSSの細かな調整を重ねましょう。

これらを注意すれば、簡単にカラー設定を導入することが可能になります。
ぜひお試しください!

この記事のタグ

デフォルト画像GEMSTONEバージョ... 前の記事

次の記事 カラーカスタマイザー更に...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です