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

Contents

1 JavaScriptで変更する
2 JavaScript設置の準備
3 JavaScriptの設定
4 まとめ

前回、前々回と２回に分けてテーマカスタマイザを使い、[外観][カスタマイズ]に項目を付ける方法を書きました。

しかし、前回のではテーマカスタマイザで値を変えるたびに再読み込みをしてしまいます。これでは、レスポンスに問題がある気がします。

そこで、今回はそれを解消できるよう動的に変化させる方法を書こうと思います。

JavaScriptで変更する

前回で項目を追加した時のことを思い出してください。

$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_settingの’transport’です。

前回はここを’refresh’にしたので、カスタマイザで変更するたびに再読み込みしていました。
今回はここを’postMessage’に変えてみようと思います。postMessageにすると、JavaScriptを使って動的に変更されるようになります。

$wp_customize->add_setting(
    'four_leaf_clover_text_color_value',
     array(
        'default'           =>  '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
        //ここのrefreshをpostMessageに変更
        'transport'         =>'postMessage',
    )
);
$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,
        )
    ) 
);

JavaScript設置の準備

それではJavaScriptで変更するための準備をしましょう。

function four_leaf_clover_customizer_live_preview()
{
    wp_enqueue_script(
          'four_leaf_clover-themecustomizer',
          get_template_directory_uri().'/javascript/theme-customize.js',
          array('jquery'),
          '',
          true
    );
}
add_action( 'customize_preview_init', 'four_leaf_clover_customizer_live_preview' );

上のコードでは、まず’customize_preview_init‘に自分で作った関数 ‘four_leaf_clover_customizer_live_preview’の機能をつけたしています。

それでは追加した機能の中身を見ていきましょう。ここにはwp_enqueue_script()があります。ここで動的に変更させるためのJavaScriptのファイルをWordPressの中に追加します。

ではwp_enqueue_script()の中身は、どうでしょう。

スクリプトのハンドル名として’four-leaf-clover-themecustomizer’としました。

追加するファイルをget_template_directory_uri()を使ってテーマのあるフォルダを選択し、[javascript]というフォルダをその中に作って[theme-customize.js]という名前で置くことにします。

今回の変更はjQueryを使って行いますのでarray(‘jquery’)としています。

最後にtrueとしているのは、この追加を<body>の後ろにするためです。

JavaScriptの設定

さていよいよJavaScriptを書いていきます。まず先ほど指定したフォルダ[javascript]とファイル[theme-customize.js]を作成します。そしてこのファイルの中に

( function( $ ) {
    wp.customize( 'four_leaf_clover_text_color_value', function( value ) {
        value.bind( function( newval ) {
            if(!newval){
                newval='#000000';
            }
            $( 'body' ).css( 'color',newval );
        } );
    } );
} )( jQuery );

とかきます。

初めに関数を設定します。WordPessについているjQueryを使うときには、そのままでは$ショートカットが使えないので、最初に function($) 、最後に )(jQuery); と記入します。

２行目で、今回読み込みたい項目を設置をしたときに決めたadd_settingのID名’four_leaf_clover_text_color_value’を記入し、3行目でnewvalにその値を読み込みます。

if文は値が全く入っていないときに初期値を指定をしています。

最後に7行目で<body>タグにスタイルシートのcolorに今回の値を当てはめています。この辺はjQueryの書き方になっているので、そっちを調べて見てください。

まとめ

これで、JavaScriptを使って動的に変化させる方法ができました。最後にすべてのコードをのせておきます。

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',
                    //ここのrefreshをpostMessageに変更
                    'transport'         =>'postMessage'
                )
            );
            $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');

theme-customize.jsの中身

( function( $ ) {
    wp.customize( 'four_leaf_clover_text_color_value', function( value ) {
        value.bind( function( newval ) {
            if(!newval){
                newval='#000000';
            }
            $( 'body' ).css( 'color',newval );
        } );
    } );
} )( jQuery );

よかったらクリックしてください。
$にほんブログ村 IT技術ブログ WordPressへ$ $\text{[math]}$

HoBoFoTo