Customizer của WordPress

Kelvin Khanh
Customizer của WordPressCustomizer là công cụ trong WordPress giúp người dùng xem trước và thay đổi các cài đặt của theme mà không cần tải lại trang. Ta code đoạn code sau : 
/**
 * template Theme Customizer
 *
 * @package template
 */

/**
 * Add postMessage support for site title and description for the Theme Customizer.
 *
 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
 */
function template_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' => 'template_customize_partial_blogname',
            )
        );
        $wp_customize->selective_refresh->add_partial(
            'blogdescription',
            array(
                'selector' => '.site-description',
                'render_callback' => 'template_customize_partial_blogdescription',
            )
        );
    }
}
add_action('customize_register', 'template_customize_register');

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

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

/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */
function template_customize_preview_js()
{
    wp_enqueue_script('template-customizer', get_template_directory_uri() . '/js/customizer.js', array('customize-preview'), _S_VERSION, true);
}
add_action('customize_preview_init', 'template_customize_preview_js');
Hãy phân tích từng phần của mã:

1. Khai báo hàm template_customize_register#

function template_customize_register( $wp_customize ) { ... }
Hàm này nhận tham số $wp_customize, là một đối tượng WP_Customize_Manager. Tham số này cho phép bạn truy cập và điều chỉnh các tùy chỉnh có sẵn trong WordPress Customizer.

2. Thiết lập thuộc tính transport cho các cài đặt có sẵn#

$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
  • blogname, blogdescription, và header_textcolor là các cài đặt mặc định của WordPress.
  • transport = 'postMessage' giúp cập nhật thay đổi trực tiếp trong Customizer mà không cần tải lại toàn bộ trang. Thay vào đó, JavaScript sẽ cập nhật ngay các thay đổi này khi người dùng chỉnh sửa.

3. Kiểm tra và thêm tính năng selective_refresh#

if ( isset( $wp_customize->selective_refresh ) ) { ... }
  • selective_refresh là một tính năng cho phép cập nhật từng phần cụ thể của trang mà không cần tải lại toàn bộ trang. Nếu selective_refresh khả dụng, đoạn mã sẽ tạo các "partials" để cập nhật tức thì blogname và blogdescription.

4. Thêm partial cho blogname và blogdescription#

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

$wp_customize->selective_refresh->add_partial(
    'blogdescription',
    array(
        'selector'        => '.site-description',
        'render_callback' => 'template_customize_partial_blogdescription',
    )
);
  • add_partial: Tạo ra các phần tùy chỉnh mà Customizer có thể cập nhật độc lập.
    • blogname sẽ được cập nhật tại vị trí .site-title a, sử dụng hàm template_customize_partial_blogname để lấy dữ liệu mới.
    • blogdescription sẽ được cập nhật tại .site-description, với hàm template_customize_partial_blogdescription.
  • render_callback: Đây là hàm PHP được gọi để lấy nội dung mới khi cập nhật. Hàm này cần được định nghĩa ở nơi khác trong mã của bạn.

5. Gắn hàm vào customize_register#

add_action( 'customize_register', 'template_customize_register' );
Dòng này sử dụng add_action để thêm hàm template_customize_register vào hook customize_register, giúp WordPress chạy hàm này khi Customizer khởi động.

Tóm tắt#

  • Đoạn mã cho phép chỉnh sửa tiêu đề trang (blogname), mô tả (blogdescription), và màu tiêu đề (header_textcolor) trong Customizer với tính năng xem trước tức thì.
  • selective_refresh giúp cập nhật chỉ một phần của trang mà không cần tải lại toàn bộ trang, làm trải nghiệm Customizer mượt mà hơn.

Bài viết liên quan