[_s] customizer.php

customizer画面

customizerとは、管理画面の外観 > カスタマイズから利用できる画面で、WordPressの直感的な変更が可能になります。

この customizerという仕組みがどう動いているのか、以下が一番わかりやすかったです。ただ、処理全体をしっかりと追って理解することはできなかったので、今後の課題とします。

https://developer.wordpress.org/themes/customize-api/

customizer.php

<?php
/**
 * _s Theme Customizer
 *
 * @package _s
 */

/**
 * Add postMessage support for site title and description for the Theme Customizer.
 *
 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
 */
function _s_customize_register( $wp_customize ) {
	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';

	if ( isset( $wp_customize->selective_refresh ) ) {
		$wp_customize->selective_refresh->add_partial( 'blogname', array(
			'selector'        => '.site-title a',
			'render_callback' => '_s_customize_partial_blogname',
		) );
		$wp_customize->selective_refresh->add_partial( 'blogdescription', array(
			'selector'        => '.site-description',
			'render_callback' => '_s_customize_partial_blogdescription',
		) );
	}
}
add_action( 'customize_register', '_s_customize_register' );

/**
 * Render the site title for the selective refresh partial.
 *
 * @return void
 */
function _s_customize_partial_blogname() {
	bloginfo( 'name' );
}

/**
 * Render the site tagline for the selective refresh partial.
 *
 * @return void
 */
function _s_customize_partial_blogdescription() {
	bloginfo( 'description' );
}

/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */
function _s_customize_preview_js() {
	wp_enqueue_script( '_s-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true );
}
add_action( 'customize_preview_init', '_s_customize_preview_js' );

postMessage support

customizerでは、変更適用前から変更適用後のページの変更に、refreshまたはpostMessageという方法を選べます。postMessageとrefreshでどのように違ってくるかは、以下が分かりやすいです。

Using PostMessage For Improved Setting Previewing

$wp_customize->selective_refresh->add_partial

‘selector’で要素を指定、’render_callback’で書き換える関数を指定することで、customizer画面の右側でその要素の選択して変更ができるようになります。

$wp_customize->selective_refresh->add_partial( 'blogname', array(
			'selector'        => '.site-title a',
			'render_callback' => '_s_customize_partial_blogname',
		) );
		$wp_customize->selective_refresh->add_partial( 'blogdescription', array(
			'selector'        => '.site-description',
			'render_callback' => '_s_customize_partial_blogdescription',
		) );

$wp_customize->get_setting( ‘blogname’ )->transport = ‘postMessage’;

対象のtransportを’postMessage’にすることで、非同期に変更するためのjavascriptが適用できるようになります。

	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';

wp_enqueue_script( ‘_s-customizer’, get_template_directory_uri() . ‘/js/customizer.js’, array( ‘customize-preview’ ), ‘20151215’, true );

非同期処理のためのjavascriptを読み込みます。

function _s_customize_preview_js() {
	wp_enqueue_script( '_s-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true );
}
add_action( 'customize_preview_init', '_s_customize_preview_js' );