Lập trình WordPress nâng cao: Theme Customizer

Theme Options / Customizer trong WordPress – đây là phần cực kỳ hay giúp bạn hoặc khách hàng tùy chỉnh giao diện (logo, màu sắc, text, banner…) trực tiếp trong admin mà không cần đụng vào code.

Theme Customizer là gì?

Theme Customizer là giao diện “Xem trước – Thay đổi – Lưu lại” nằm ở Giao diện → Tùy biến, giúp bạn cấu hình theme một cách linh hoạt.

Bạn có thể:

• Tải logo
• Thay đổi màu nền
• Nhập slogan
• Chọn ảnh banner
• Chỉnh font chữ, padding, v.v.

Mục tiêu:

• Thêm khu vực tùy chỉnh trong Customizer
• Hiển thị logo, text, ảnh banner từ tùy chọn đó
• Giao diện trực quan, không cần chỉnh code lại mỗi lần

1. Thêm khu vực tùy chỉnh vào Customizer

Thêm đoạn này vào functions.php:

📋 Copyfunction gfon_theme_customizer($wp_customize) {
    // Thêm phần riêng
    $wp_customize->add_section('gfon_site_options', array(
        'title'    => __('Cài đặt giao diện', 'gfon'),
        'priority' => 30,
    ));

    // Thêm trường text
    $wp_customize->add_setting('gfon_slogan', array(
        'default'   => 'Slogan mặc định của bạn',
        'transport' => 'refresh',
    ));
    $wp_customize->add_control('gfon_slogan', array(
        'label'    => __('Slogan của trang web', 'gfon'),
        'section'  => 'gfon_site_options',
        'type'     => 'text',
    ));

    // Thêm trường chọn ảnh (logo/banner)
    $wp_customize->add_setting('gfon_banner');
    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            'gfon_banner',
            array(
                'label'    => __('Banner trang chủ', 'gfon'),
                'section'  => 'gfon_site_options',
                'settings' => 'gfon_banner',
            )
        )
    );
}
add_action('customize_register', 'gfon_theme_customizer');

2. Kiểm tra giao diện tùy biến

• Vào Giao diện → Tùy biến
• Bạn sẽ thấy mục mới tên: “Cài đặt giao diện”
• Có thể:
  • Nhập slogan
  • Tải ảnh banner

3. Hiển thị dữ liệu Customizer ra ngoài giao diện

Chèn đoạn sau vào file bạn muốn, ví dụ: header.php, front-page.php, hoặc home.php:

📋 Copy<?php if ( get_theme_mod('gfon_slogan') ) : ?>
    <p class="slogan"><?php echo get_theme_mod('gfon_slogan'); ?></p>
<?php endif; ?>

<?php if ( get_theme_mod('gfon_banner') ) : ?>
    <img src="<?php echo esc_url(get_theme_mod('gfon_banner')); ?>" alt="Banner" />
<?php endif; ?>

4. Ví dụ nâng cao: màu sắc, checkbox, radio

📋 Copy// Checkbox
$wp_customize->add_setting('gfon_show_social', array('default' => true));
$wp_customize->add_control('gfon_show_social', array(
    'label' => 'Hiện mạng xã hội?',
    'section' => 'gfon_site_options',
    'type' => 'checkbox',
));

Sau đó hiển thị:

📋 Copy<?php if ( get_theme_mod('gfon_show_social') ) : ?>
    <div class="social-icons">...</div>
<?php endif; ?>

Tổng kết

Ứng dụng thực tế