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

themecustomizer-control

Trong theme WordPress có một tính năng khá hay mà chắc nhiều người cũng biết đó là tính năng Customizer. Tính năng này tương tự như một Theme Options nhưng với bảng điều khiển hơi khác lạ 1 xíu, hỗ trợ Live Preview và nhất là không cần cài thêm script ở ngoài vào giống như các script tạo Theme Options.

Trong khuôn khổ bài này, mình sẽ hướng dẫn cách tạo thêm các tùy chọn cho tính năng Customizer để tùy chỉnh theme trong WordPress, rất thích hợp cho việc làm website cho khách hàng.

Tổng quan về Customizer

Mặc định bất cứ theme nào khi cài vào cũng có một tính năng tên là Customizer trong khu vực Appearance. Ở khu vực này, bạn có thể thiết lập menu, title của website và chọn trang làm trang chủ, đó là các tùy chọn có sẵn.

themecustomizer-overview

Bạn thấy các phần Site Title & Tagline, Navigation chứ? Đó gọi là Option Section (khu vực tùy chọn) và trong mỗi section nó có nhiều options (tùy chọn), bạn có thể xem các option bằng cách bấm vào tên khu vực nó sẽ xổ ra.

Nếu không có thì bạn thêm đoạn này vào file functions.php


/* Kích hoạt tính năng Customizer */
function example_customizer_menu() {
    add_theme_page( 'Customize', 'Customize', 'edit_theme_options', 'customize.php' );
}
add_action( 'admin_menu', 'example_customizer_menu' );

1. Tạo function cho customizer

Khi tạo các option trong customizer, bạn phải tạo một function với một tham số là $wp_customizer và truyền vào hook customizer_register như sau:


function customizer_a( $wp_customize ) {
    // Code tạo section, settings và control nằm ở đây
}
add_action( 'customizer_register', 'customizer_a' );

Xem thêm: Tìm hiểu action hook và filter hook.

Và các code tạo section, settings và control chúng ta phải viết vào trong function đó.

2. Tạo thêm một section mới

Do mỗi option đều chứa trong các section nên  muốn tạo option thì ta nên tạo section trước cái đã. Hãy đặt đoạn code này vào file functions.php của theme:


   // Tạo section
    $wp_customize->add_section(
        'section_a',
        array(
            'title' => 'Khu vực A',
            'description' => 'Các tùy chọn cho khu vực A',
            'priority' => 25,
        )
    );
add_action( 'customize_register', 'customizer_a' );

Lưu ý: Khi tạo section, nó sẽ không hiển thị ra Customizer nếu nó chưa có option nào cả, phải có ít nhất 1 option trong đó thì nó mới hiển thị ra.

Trong đoạn trên, chúng ta có thể dùng đối tượng $wp_customizer mà đã khai báo trong hàm khởi tạo để thực thi phương thức add_section để tạo một section mới.

Phương thức: add_action( $id, $args );
$id string ID của section, ID này để xác định section khi tạo option.
$args array Các tham số tùy chọn của section.

Như vậy trên đoạn trên, ta thực thi phương thức add_action với tham số đầu tiên là ID bằng section_a.

Còn cái array đằng sau chính là $args, trong biến này ta có các tham số như sau:

$args( title, description, priority );
title string Tên của section
description string (Optional) Mô tả của section
priority interger (Optional) Thứ tự ưu tiên của section

Như vậy ở đoạn trên, ta sẽ có section với title là Khu vực A và description là Các tùy chọn cho khu vực A.

3. Tạo thêm option cho section

Trong phần này chúng ta sẽ có 2 bước để tạo một option, bao gồm:

Bước 1. Tạo một field setting mới

Field này sẽ chứa giá trị của một tùy chọn. Ta có code trong file functions.php như sau:


$section1->add_setting(
    'option1',
    array(
        'default' => 'Giá trị mặc định',
    )
);
add_setting( $id, $args );
$id string ID của option
$args array Các tham số của option

Tức là mình sẽ tạo một option với ID là option1 và có giá trị mặc định là Giá trị mặc định nếu khách không nhập giá trị gì vào đây. Bạn có thể thấy ta sử dụng lại đối tượng $section1 trong bước tạo section ở trên, chức năng của nó là để xác định section mà nó sẽ thêm vào.

Cái biến $args có rất nhiều tham số nhưng ở đây mình chỉ sử dụng tham số default là chính.

Bước 2. Tạo một control để thay đổi giá trị của field setting

Khi có field setting rồi, nó vẫn chưa thể hiển thị ra trong Customizer, muốn nó hiển thị ra thì ta phải tạo cho nó một cái control bằng code sau:


$section1->add_control(
    'control_option1', // ID xác định của control
    array(
        'label' => 'Option 1',
        'section' => 'section_a',
        'type' => 'text',
        'option' => 'option1'
    )
);
add_control( $id, $args );
$id string ID xác định của control
$args array Các tham số của control
$args của add_control
label string Tên hiển thị của Control
section string ID xác định của section cần thêm vào
type string Định dạng của control
option string ID của option cần áp dụng cho control

Đoạn trên nghĩa là ta sẽ tạo cho nó một cái khung mang tên Option 1 nằm trong section_a mà mình đã tạo ở phần 2 của bài này. Type nghĩa là định dạng của option, ở đây mình dùng text nghĩa là option là một cái khung để nhập chữ (mình sẽ nói qua nhiều loại type khác ở phần 2) và tham số cuối cùng là option, tức là ID của option mà chúng ta áp dụng cho cái box này.

Kết quả bây giờ ta sẽ có là như thế này:

themecustomizer-control

Toàn bộ code:


/**
 * Tạo một section mới trong Customizer */

function customizer_a( $wp_customize ) {

	// Tạo section
    $wp_customize->add_section (
        'section_a',
        array(
            'title' => 'Khu vực A',
            'description' => 'Các tùy chọn cho khu vực A',
            'priority' => 25
        )
    );

    // Tạo setting
    $wp_customize->add_setting (
	    'option1',
	    array(
	        'default' => 'Giá trị mặc định'
	    )
	);

	// Tạo coltrol
	$wp_customize->add_control (
	    'control_option1',
	    array(
	        'label' => 'Option 1',
	        'section' => 'section_a',
	        'type' => 'text',
	        'settings' => 'option1'
	    )
	);

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

4. Gọi giá trị của customizer ra ngoài theme

Để gọi giá trị mà chúng ta đã thiết lập ra ngoài theme, chúng ta sẽ dùng hàm get_theme_mod() như sau:

get_theme_mod( $name, $default )
$name string ID của option cần gọi giá trị
$default string (Optional) Giá trị mặc định sẽ sử dụng nếu option không có giá trị

Ví dụ mình cần gọi cái option1 ra thì sử dụng code sau:

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

Quá đơn giản phải không nào.

Lời kết phần 1

Ở phần này mình đã hướng dẫn qua cách tạo một option như thế nào và cách để hiển thị nó ra ngoài. Trước mắt, bạn đã có thể áp dụng các kiến thức bên trên để làm một cái option cơ bản. Hãy nhớ rằng đây là phần quan trọng nhất để bạn có thể nắm vững tính năng Customizer trong WordPress.

Tiếp tục phần 2, mình sẽ giới thiệu qua thêm một vài loại type control khác nữa và cách sử dụng nó để bạn có thể làm một cái customizer chuyên nghiệp hơn.

Nguồn: Hướng dẫn Customizer của WordPress | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
GSA là gì? Hướng dẫn cách xây dựng backlink cơ bản từ A
PBN là gì? và cách tìm kiếm, xây dựng PBN chất lượng
Tác giả

Bình luận

Leave a Message

Registration isn't required.

NguyenLp LarTheme