Hướng dẫn tạo Customizer trong WordPress

Đối với những nhà phát triển web thì việc chỉnh sửa Theme tương đối dễ dàng. Nhưng với những người không biết gì về code thì làm sao để Theme đẹp theo ý của mình. Chính vì vậy WordPress Customizer được ra đời phục vụ cho mục đích như vậy. Hiện nay các mẫu giao diện WordPress mới đều có Customizer giúp cho người dùng dễ dàng tùy biến hơn. Nổi tiếng là Theme Flatsome.

Customizer nằm ở đâu?

Rê chuột vào Apperance => Nhấp vào Customize

Customizer

Tại đây sẽ có những chức năng như chỉnh sửa màu nền, thay đổi logo, menu, breadcrum, widget…

Customizer-1

Cách tạo Customizer trong WordPress

Đăng ký một Customizer:

function customize_register( $wp_customize ) {
// Mã function
};
add_action( 'customize_register', 'customize_register' );

Một Customizer sẽ là một đoạn mã function với cấu trúc:

  • Section
  • Setting
  • Control

Để thực hiện hành động nó dùng Action Hook

add_action( ‘customize_register‘, ‘footer_options‘ );

  • Dòng chữ customize_register là đoạn mã đăng ký customize
  • Dòng chữ footer_options dùng để móc vào function footer_options( $wp_customize )
function footer_options( $wp_customize ) {
// Section
$wp_customize->add_section ('section_footer_1',
array(
'title' => 'Text Footer',
'description' => 'Nhập chữ để thay đổi',
'priority' => 30
)
);

// Setting
$wp_customize->add_setting ('option_footer_1',
array(
'default' => 'Thay đổi text ở đây'
)
);

// Control
$wp_customize->add_control ('control_option1',
array(
'label' => 'Tùy chỉnh 1',
'section' => 'section_footer_1',
'type' => 'text',
'settings' => 'option_footer_1'
)
);

}
add_action( 'customize_register', 'footer_options' );

Tại khu vực //Control có sẽ có các kiểu điều khiển cơ bản như:

  • text
  • checkbox
  • radio
  • select
  • dropdown-pages

Ở ví dụ trên là chọn kiểu ‘type’ => ‘text’,

Sau khi thêm vào file functions.php bạn load lại Customizer

Customizer-2

Lúc này đã có xuất hiện một Customizer rồi. Nhưng phải làm sao để nó thực hiện hành động chẳng hạn như thay đổi đoạn văn bản nào đó.

Các hành động sẽ nằm tại khu vực

// Setting
$wp_customize->add_setting ('option_homepage_1',
array(
'default' => 'Thay đổi text ở đây'
)
);

Bước cuối cùng cần phải gọi giá trị của Customizer ra bên ngoài Theme

Chèn nó ở bất kỳ file trong WordPress, có thể là index.php, footer.php, header.php

Cấu trúc:

get_theme_mod( 'setting_id', 'default_value' );

Sử dụng trong PHP

<?php echo get_theme_mod( 'option_footer_1' ); ?>

Một số Customizer thường sử dụng

Thay đổi Logo


add_theme_support( 'custom-logo' , array(
'height' =>45,
'width' =>45,
'flex-height' =>true,
'flex-width' =>true,
));

Hiển thị bài viết mới

Trong các website tin tức thường có một khu vực hiển thị bài viết mới viết hay còn gọi là Latest post. Hãy thử áp dụng Customizer xem như thế nào nhé!

Thêm đoạn code trong function ở trên

// Section
$wp_customize->add_section ('section_latest',
array(
'title' => 'Bài Viết Mới',
'description' => 'Nhập chữ để thay đổi',
'priority' => 3
)
);

// Setting
$wp_customize->add_setting ('option_latest',
array(
'default' => 'Lựa chọn'
)
);

// Control
$wp_customize->add_control ('control_latest',
array(
'label' => 'Tùy chỉnh 1',
'section' => 'section_latest',
'type' => 'dropdown-pages',
'settings' => 'option_latest',
'capability' => 'edit_theme_options',
)
);

Tiếp theo dùng <?php echo get_theme_mod( 'option_latest' ); ?> để gọi ra ở file header.php

Vào Customizer để lựa chọn page muốn hiển thị ra.

Kết luận: Customizer WordPress khá hữu ích trong việc tùy chỉnh giao diện. Nó phù hợp với những người không am hiểu quả quá nhiều về code. Hi vọng qua bài viết này bạn đã biết cách sử dụng và tạo ra Customizer.

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *