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

Customizer là 1 tính năng khá hay trong WordPress. Nó giống như Theme Option nhưng có chức năng Live preview và đã có sẵn các options như text, textarea, checkbox, radio, upload, color … với những options như vậy chúng ta đã tạo được 1 theme Option tuyệt vời rồi 😀

Trong bài này mình sẽ làm 1 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 ở đâu?

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

Mặc định WordPress sẽ có sẵn 4 mục Site Indentity, Menu, Widget và Static Front Page. Hôm nay chúng ta sẽ đi thêm 1 mục tùy chỉnh để customizer theme.

Kho plugin của tôi

DevVN Woocommerce Reviews

Plugin mua hàng nhanh cho woocommerce – Woocommerce Quick buy

Plugin kết nối giao hàng tiết kiệm với Woocommerce – GHTK vs Woocommerce

Plugin Kết nối Zalo OA với WordPress

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();
}

Để hiểu rõ hơn chúng ta sẽ đi làm 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ý 😀

Chúng ta bắt đầu với action customize_register

Mẫu website nổi bật của tôi

Dự án website bán laptop surface

Mẫu website bán thiết bị nhà bếp, nhà tắm, thiết bị vệ sinh tuyệt đẹp

Mẫu website bán hàng giống shopee

Mẫu website bán đồ gỗ, đồ thờ, đồ phòng thủy

function devvn_customize_register($wp_customize) 
{
 //Footer
 $wp_customize->add_section("footer", array(
 'title' => __("Footer", "devvn"),
 'priority' => 130,
 'description' => __( 'Description Custom footer here' ),
 ));

}
add_action("customize_register","devvn_customize_register");

Sau khi thêm đoạn code trên chúng ta sẽ được Section như sau (Xem lưu ý ở dưới):

Lưu ý: Khi thêm như trên Section Footer chưa hiển thị ra vì phải có setting và control bên trong thì mới hiện lên Section.

4. Thêm text vào Section

Thêm đoạn code sau vào trong function devvn_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',
 )));

5. Thêm 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',

 )));

6. 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

7. Hiển thị

Để 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 echo get_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();
 ?>
 <style type="text/css">
 footer.footer { 
   background: <?php echo $options['footer_bg_color']; ?>; 
   color: <?php echo $options['footer_text_color']; ?>;
 }
 </style>
 <?php
}
add_action( 'wp_head', 'get_custom_style' );

8. Chức năng Live Preview

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 }}', 
 );
 ?>
 <script type="text/html" id="tmpl-devvn-color-scheme">
 <?php echo devvn_get_color_scheme_css( $colors ); ?>
 </script>
 <?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( '<style type="text/css" id="devvn-color-scheme-css" />' )
 .find( '#devvn-color-scheme-css' );
 }
 api("footer_text", function(value) {
 value.bind(function(newval) {
 $(".footer_text").html(newval);
 });
 });
 api("footer_logo", function(value) {
 value.bind(function(newval) {
 $(".footer_logo img").attr('src',newval);
 });
 });
 // Color Scheme CSS.
 api.bind( 'preview-ready', function() {
 api.preview.bind( 'update-color-scheme-css', function( css ) {
 style.html( css );
 } );
 } );
})(jQuery);

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 );

9. Kết luận

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

File code đầy đủ của bài viết này tại đây

Chúc các bạn thành công ^^