Hướng dẫn viết Customizer của WordPress

Customizer là tính năng khá hay trong WordPress. Nó giống như Theme Option nhưng có chức năng xem live preview và đã có sẵn các options như text, textarea, checkbox, radio, upload, color … Nếu bạn muốn code theme một cách chuyên nghiệp không nên bỏ qua tính năng thú vị này. Trong bài viết này chúng ta cùng tìm hiểu và viết Customizer của WordPress.

Mình sẽ ví dụ cụ thể là thay đổi màu nền, màu chữ, thay logo và text ở footer để các bạn có cái nhìn trực quan dễ hiểu hơn. Dưới đây là ảnh kết quả sau khi đã hoàn thành:

1. Customizer như thế nào?

Để vào customizer của theme bạn vào Appearance -> Customizer

WordPress sẽ có sẵn 4 mục Site Indentity, Menu, Widget và Static Front Page.

2. Sơ lược qua về Customizer

Customizer chia làm 4 loại chính: Panel, Section, Setting và Control. Setting để cài đặt hiển thị và liên kết với Control tương tác với người dùng. Section và cùng chứa các options. Panel chứa nhiểu nhóm Section…

Để thêm, xóa và chỉnh sửa các object chúng ta sẽ sử dụng customize_register hook.

function themeslug_customize_register( $wp_customize) 

{

// Do stuff with $wp_customize, the WP_Customize_Manager object. }

add_action( 'customize_register', 'themeslug_customize_register'); ]

Customizer cung cấp 3 phương thức add_ , get_ và remove_ cho từng đối tượng

add_action('customize_register','my_customize_register');

function my_customize_register( $wp_customize) { $wp_customize->add_panel();

$wp_customize->get_panel();

$wp_customize->remove_panel();

$wp_customize->add_section();

$wp_customize->get_section();

$wp_customize->remove_section();

$wp_customize->add_setting();

$wp_customize->get_setting();

$wp_customize->remove_setting();

$wp_customize->add_control();

$wp_customize->get_control();

$wp_customize->remove_control(); 

}

Ví dụ thực tế. Tạo 1 Section tên là Footer

3. Tạo Section tên Footer

Chú ý: có thể viết trực tiếp vào file functions.php hoặc tạo ra 1 file riêng rồi include vào. Trong bài này mình sẽ tạo ra 1 file riêng với tên customizer.php trong folder theme_customize để sau này dễ quản lý

Trong func

function codethue_customize_register($wp_customize) 

{ //Footer

$wp_customize->add_section("footer", array('title'=> __("Footer", "https://teamcoder.work/"),'priority'=> 130,'description'=> __( 'Description Custom footer here'),));

}

add_action("customize_register","codethue_customize_register");

Chúng ta sẽ được Section như sau (Xem lưu ý ở dưới):

4. Thêm text vào Section

Thêm đoạn code sau vào trong function codethue_customize_register phía trên.

//Footer text
$wp_customize->add_setting("footer_text", array(
'default' => '',
'transport' => 'postMessage',
));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,"footer_text",array(
'label' => __("Footer text here", "devvn"),
'section' => 'footer',
'settings' => 'footer_text',
'type' => 'textarea',
)));

Tùy chỉnh màu background

//Footer background color
$wp_customize->add_setting("footer_bg_color", array(
'default' => '#ccc',
'transport' => 'postMessage',
));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'footer_bg_color', array(
'label' => 'Footer Background Color',
'section' => 'footer',
'settings' => 'footer_bg_color',

)));

//Footer text color
$wp_customize->add_setting("footer_text_color", array(
'default' => '#000',
'transport' => 'postMessage',
));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'footer_text_color', array(
'label' => __('Footer Text Color', 'devvn'),
'section' => 'footer',
'settings' => 'footer_text_color',

)));

Thêm phần Upload ảnh

//Footer logo
$wp_customize->add_setting("footer_logo", array(
'transport' => 'postMessage',
));
$wp_customize->add_control(new WP_Customize_Upload_Control($wp_customize,'footer_logo',array(
'label' => __('Footer Logo', 'devvn'),
'section' => 'footer',
'settings' => 'footer_logo',
)));

Sau khi thêm code đến bước này chúng ta sẽ được như sau:

Để hiển thị các biến ta dùng hàm get_theme_mod(‘TÊN ID’,’GIÁ TRỊ MẶC ĐỊNH’) ví dụ để gọi ô text ở trên ta viết

<?php echoget_theme_mod('footer_text');?>

Để áp dụng màu thì ta phải thêm css vào wp_head hoặc css inline. Chúng ta dùng hàm sau để thêm màu background và màu text vào wp_head.

function get_custom_style() {
$options = get_theme_mods();
}
add_action( 'wp_head', 'get_custom_style' );
Chức năng này là chức năng hay nhất của customizer. Để người dùng có cái nhìn trực quan và ngay lập tức khi thay đổi các giá trị. Thực ra đến bước 7 là đã sử dụng được rồi, khi lưu thay đổi là đã thay đổi trong sql rồi nhưng để khai thác hết các chức năng hay trong WordPress nên chúng ta sẽ làm thêm bước Live Preview này nữa nhé.

Thêm PHP code:

function devvn_customizer_live_preview(){
wp_enqueue_script("devvn-themecustomizer", get_template_directory_uri() . "/theme_customize/theme-customizer.js", array("jquery", "customize-preview"), '', true);
}
add_action("customize_preview_init", "devvn_customizer_live_preview");

function devvn_customize_control_js() {
wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/theme_customize/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '', true );
}
add_action( 'customize_controls_enqueue_scripts', 'devvn_customize_control_js' );

function devvn_get_color_scheme_css( $colors ) {
$colors = wp_parse_args( $colors, array(
'footer_bg_color' => '',
'footer_text_color' => ''
) );

return <<<CSS
footer.footer { background: {$colors['footer_bg_color']}; color: {$colors['footer_text_color']};}

CSS;
}

function devvn_color_scheme_css_template() {
$colors = array(
'footer_bg_color' => '{{ data.footer_bg_color }}',
'footer_text_color' => '{{ data.footer_text_color }}',
);
?>
 

<?php
}
add_action( 'customize_controls_print_footer_scripts', 'devvn_color_scheme_css_template' );

Thêm file theme-customizer.js

(function($){
var style = $( '#devvn-color-scheme-css' ),
api = wp.customize;

if ( ! style.length ) {
style = $( 'head' ).append( '

Thêm file color-scheme-control.js

( function( api ) {
var cssTemplate = wp.template( 'devvn-color-scheme' ),
colorSchemeKeys = [
'footer_bg_color',
'footer_text_color',
],
colorSettings = [
'footer_bg_color',
'footer_text_color',
];
// Generate the CSS for the current Color Scheme.
function updateCSS() {
var scheme = api( 'footer_bg_color' )(),
css,
colors = _.object( colorSchemeKeys, '' );

// Merge in color scheme overrides.
_.each( colorSettings, function( setting ) {
colors[ setting ] = api( setting )();
} );

css = cssTemplate( colors );

api.previewer.send( 'update-color-scheme-css', css );
}

// Update the CSS whenever a color setting is changed.
_.each( colorSettings, function( setting ) {
api( setting, function( setting ) {
setting.bind( updateCSS );
} );
} );
} )( wp.customize );

Để hoàn thành 1 customizer chúng ta cần tìm hiểu khá nhiều thứ liên quan. Trên đây mới là 1 ví dụ thực tế nhỏ và đơn giản mong rằng giúp ích phần nào cho các bạn!

Dowload code đầy đủ tại đây