「外観」「 カスタマイズ 」に独自の項目を追加する方法(後編)
前回に引き続きWordPressの[外観][カスタマイズ]をやっていきます。
前回はテーマカスタマイザを設置しました。
今回はそれを実際のWordPressに反映していきましょう。
ヘッダーにCSSを追加
まずは追加する関数を作成します。
function four_leaf_clover_css_modes() {
//ここの間に設定していきます。
}
add_action( 'wp_head', 'four_leaf_clover_css_modes');
add_actionで自分で作った関数 ‘four_leaf_clover_css_modes’ を ‘wp_head‘に設定します。
カスタマイザからデータの取得
カスタマイザで入力したデータを取得するためにはget_theme_mod()を使って、
$text_color=get_theme_mod( 'four_leaf_clover_text_color_value','#000000' );
if(!$text_color){
$text_color='#000000';
}
と書きます。変数$text_colorにカスタマイザからの値を取得しています。if文は$text_colorに何も入力されていないときの値を設定しています。
<head>タグ内にcssを入力
ここまで来ればあと一息です。cssとして設定した値を記入します。
print <<<END
<style type="text/css">
body{
color:$text_color;
}
</style>
END;
print文を使ってスタイルシートを書きだしています。$text_colorのところで値を出力しています。
まとめ
今までのものをまとめると以下のようになります。
- function.phpの中身
//前回の部分ここから
function four_leaf_clover_customize_register( $wp_customize ) {
//この間に設定していきます。
//パネルの追加
$wp_customize->add_panel( 'four_leaf_clover_colors_panel', array(
'priority' => 35,
'title' => __( 'Colors','four-leaf-clover' ),
) );
//セクションの追加
$wp_customize->add_section( 'four_leaf_clover_body_colors', array(
'title' => __( 'Body Color','four-leaf-clover' ),
'panel' => 'four_leaf_clover_colors_panel',
'priority' => 1,
) );
//項目の追加
$wp_customize->add_setting(
'four_leaf_clover_text_color_value',
array(
'default' => '#000000',
'sanitize_callback' => 'sanitize_hex_color',
'transport' =>'refresh',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'four_leaf_clover_text_color_value_c',
array(
'label' => __( 'Font Color','four-leaf-clover' ),
'section' => 'four_leaf_clover_body_colors',
'settings' => 'four_leaf_clover_text_color_value',
'priority' => 1,
)
)
);
}
add_action( 'customize_register', 'four_leaf_clover_customize_register' );
//前回の部分ここまで
//今回の部分ここから
function four_leaf_clover_css_modes() {
//ここの間に設定していきます。
//カスタマイザからデータの取得
$text_color=get_theme_mod( 'four_leaf_clover_text_color_value','#000000' );
if(!$text_color){
$text_color='#000000';
}
//<head>タグ内にcssを入力
print <<<END
<style type="text/css">
body{
color:$text_color;
}
</style>
END;
}
add_action( 'wp_head', 'four_leaf_clover_css_modes');
//今回の部分ここまで
これでテーマカスタマイザを使ってWordPressを変更することができました。