Tạo trang settings page cho các option của Customizer

Hôm nay mình sẽ hướng dẫn các bạn sử dụng extension MB Settings Page của plugin Meta Box để tạo một trang settings page, đưa các option từ Customizer vào trang này để người dùng có thể chỉnh sửa được mà không cần vào Customizer.

Ví dụ như mình đang sử dụng theme Memory, trong phần Footer SettingsCustomizer có các lựa chọn như sau:

Các option trong phần Footer Settings ở Customizer của theme Memory.

Mình sẽ đưa 3 lựa chọn là Show Logo, Site Title, và Site Description vào một trang settings khác trong admin như dưới đây:

Đưa 3 option của theme Memory vào một trang settings page mới.

Cùng xem cách làm nhé.

Đầu tiên, bạn cần chắc chắn rằng bạn đã cài và kích hoạt plugin Meta Box (miễn phí) và extension MB Settings Page (trả phí) của nó nhé.\

Bước 1: Tạo một trang cài đặt (settings page) trong admin

Bạn chèn đoạn code sau vào file functions.php của theme:

function memory_filter_settings( $settings_pages ) {
    $settings_pages[] = array(
        'id'                   => 'customizer',
        'option_name' => 'theme_mods_memory-1',
        'menu_title'     => 'Theme Options',
        'tabs'               => array(
            'general'      => 'General Settings',
            'footer'        => 'Footer Settings',
        ),
    );
    return $settings_pages;
}
add_filter( 'mb_settings_pages', 'memory_filter_settings' );

Trong đó:

  • 'mb_settings_pages': là hook để tạo 1 trang settings trong admin;
  • 'id' => 'customizer': là ID của trang settings này. Chúng ta sẽ cần dùng đến ID này ở bước sau nhé;
  • 'tabs': bên trong trang settings page, chúng ta tạo 2 tab có tên là General SettingsFooter Settings. ID của 2 tab này cũng sẽ được sử dụng tới ở bước sau;
  • 'option_name' => 'theme_mods_memory-1': bạn đặc biệt lưu ý tham số này nhé. option_name phải được đặt theo đúng cú pháp là 'theme_mods_$themeslug' thì mới đồng bộ được các custom field ở trang settings này với các option có trong Customizer của theme. Để lấy $themeslug, bạn xem tên folder của theme mà bạn đang dùng, tên folder chính là $themeslug cần lấy. Ví dụ như folder của theme của mình là memory-1 nên option_name của mình sẽ là theme_mods_memory-1.
Tạo settings page bằng cách thêm code vào thư mục của theme Memory.

Bạn có thể xem thêm các option cho hook này ở đây nhé.

Bây giờ, quay lại admin dashboard, bạn sẽ thấy một menu mới xuất hiện với nội dung bên trong như sau:

Trang theme options mới được hiển thị trên admin dashboard.

Đây chính là trang settings chúng ta vừa tạo nhé.

Bước 2: Tạo custom field cho trang settings

Để tạo custom field, bạn có các lựa chọn sau:

  1. Tự code (thêm code vào file functions.php);
  2. Sử dụng công cụ Online Generator (miễn phí) của Meta Box để tạo custom field rồi copy đoạn code được tạo ra vào file functions.php;
  3. Sử dụng Meta Box Builder để có giao diện tạo custom field trực quan ngay trong admin.

Dù bạn làm theo cách nào, thì cuối cùng kết quả cũng sẽ là bạn có 1 đoạn code như dưới đây trong file functions.php.

function memory_register_settings( $meta_boxes ) {
    $meta_boxes[] = array(
        'id'             => 'header',
        'title'          => esc_html__( 'General', 'memory' ),
        'settings_pages' => 'customizer',
        'tab'            => 'general',
        'fields'         => array(
            array(
                'id'   => 'custom_logo',
                'name' => esc_html__( 'Custom Logo', 'memory' ),
                'type' => 'single_image',
            ),
        ),
    );
    $meta_boxes[] = array(
        'id'             => 'footer',
        'title'          => esc_html__( 'Footer', 'memory' ),
        'settings_pages' => 'customizer',
        'tab'            => 'footer',
        'fields'         => array(
            array(
                'id'      => 'ft_show_logo',
                'name'    => esc_html__( 'Show Logo', 'memory' ),
                'type'    => 'checkbox',
            ),
            array(
                'id'      => 'ft_site_title',
                'name'    => esc_html__( 'Site Title', 'memory' ),
                'type'    => 'checkbox',
            ),
            array(
                'id'      => 'ft_site_description',
                'name'    => esc_html__( 'Site Description', 'memory' ),
                'type'    => 'checkbox',
            ),
        ),
    );
    return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'memory_register_settings' );

Trong đó:

  • 'rwmb_meta_boxes': là hook để tạo custom fields;
  • 'settings_pages' => 'customizer': dùng để gán các custom fields được tạo vào trang settings page có ID là 'customizer';
  • 'tab' => 'general': gán fields đang tạo cho tab có ID là 'general' đã tạo ở bước 1; tương tự với 'tab' => 'footer' là gán field cho tab có ID là 'footer';
  • 'id' => 'ft_show_logo': ft_show_logo là ID của option có tên là Show Logo trong phần Customizer của theme. Để xem được ID này, bạn có thể kiểm tra trong phần code của theme.
Tìm ID của option muốn thêm vào settings page trong phần code của theme.
Xem code của theme trong folder inc
Xem nhanh code của theme trên trình duyệt sau đó tìm option cần thêm vào settings page.
Xem code của theme bằng cách xem nhanh trên trình duyệt (nhấn F12)

Bây giờ, bạn vào lại trang settings đã tạo, bạn sẽ thấy các field hiển thị lên như sau:

Các custom field đã được hiển thị ra settings page.

Lời cuối

Tương tự với các field khác, bạn chỉ cần nhớ gán custom field lên trang settings là được. Việc người dùng cài đặt các lựa chọn trên trang settings này sẽ tương đương với việc vào Customizer để cài đặt. Trong trường hợp Customizer của bạn có quá nhiều lựa chọn, và bạn chỉ muốn người dùng tập trung vào một số cài đặt nhất định thì nên dùng cách này nhé. Chúc các bạn thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *