HoBoFoTo

Hobo everyday foto.

「外観」「カスタマイズ」に独自の項目を追加する方法(後編)

前回に引き続き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を変更することができました。

 

よかったらクリックしてください。
にほんブログ村 IT技術ブログ WordPressへ

コメントを残す

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