Dùng MB Settings Page để thay đổi thông tin hiển thị trong theme

Có đôi khi bạn sẽ cần cho phép người dùng thay đổi một số thông tin hiển thị mặc định trong theme của bạn. Lúc này, MB Settings Page của Meta Box có thể giúp bạn bằng một vài thao tác đơn giản.

Ở bài này, mình sẽ lấy một ví dụ nho nhỏ là dùng MB Settings Page để tạo một option mới trong Customizer, cho phép người dùng chỉnh sửa dòng footer được hiển thị với nội dung mặc định của theme.

Chuẩn bị

Bạn cần cài các plugin sau đây:

1. Meta Box plugin: plugin này có bản miễn phí trên wordpress.org, bạn có thể tải trực tiếp nhé.
2. MB Settings Page: đây là một extension của Meta Box và có trả phí.

Ngoài ra, trong ví dụ này, mình sử dụng theme Justread (miễn phí) nhé các bạn. Bạn có thể cài theme này trực tiếp từ wordpress.org nhé.

Bước 1: Tạo panel và field trong Customizer

Tạo panel trong Customizer

Do theme Justread không có phần chỉnh sửa footer ở trong Customizer, nên đầu tiên chúng ta cần tạo thêm 1 mục mới trong Customizer để làm việc đó.

Bạn thêm đoạn code sau vào file functions.php:

function justread_filter_settings( $settings_pages ) {
    $settings_pages[] = array(
        'id'                         => 'customizer',
        'option_name'       => 'theme_mods_justread',
        'menu_title'           => 'Theme Options',
        'parent'                 => 'themes.php',
        'customizer'          => true,
        'customizer_only' => true,
    );
    return $settings_pages;
}
add_filter( 'mb_settings_pages', 'justread_filter_settings' );

Đoạn code trên là nhằm tạo thêm một menu mới có tên là Theme Options trong Customizer. Trong đó:

• 'mb_settings_pages': là hook để tạo thêm các options trong customizer;
• 'option_name': ở bước sau, mình sẽ cần lấy giá trị của thuộc tính này, nên mình sử dụng hàm theme_mods với cấu trúc là 'theme_mods_$themeslug';

Bạn có thể xem thêm một số option khác của hook 'mb_settings_pages' ở đây nhé.

Kết quả, bạn sẽ thấy một menu mới có tên là Theme Options xuất hiện trong Customizer như sau:

Tạo fields trong Customizer

Để thay đổi nội dung của Footer, mình tạo thêm một custom field trong mục Theme Options vừa tạo trong Customizer bằng cách thêm đoạn code sau vào file functions.php.

function justread_register_settings( $meta_boxes ) {
    // Footer section
    $meta_boxes[] = array(
        'id'                       => 'footer',
        'title'                    => esc_html__( 'Footer', justread),
        'settings_pages' => 'customizer',
        'fields'                 => array(
            array(
                'id'              => 'footer_text',
                'name'        => esc_html__( 'Footer text', justread),
                'type'          => 'textarea',
            ),
        ),
    );
    return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'justread_register_settings' );

Trong đó:

• 'rwmb_meta_boxes': là hook để tạo một meta box mới;
• 'settings_pages' => 'customizer': dùng để gán meta box vừa tạo vào settings_page có ID là 'customizer';
• 'footer_text': là ID của custom field mà chúng ta vừa tạo. ID này sẽ cần dùng tới ở bước sau.

Như vậy, bằng đoạn code trên, ta đã tạo một custom field có tên là Footer text, nằm bên trong mục Theme Options > Footer của Customizer.

Bước 2: Lấy giá trị của custom field hiển thị ra frontend

Ở bước này, ta sẽ cần dùng cú pháp sau để lấy giá trị của custom field tạo trong settings page và cho hiển thị ra frontend:

$value = rwmb_meta( $field_id, ['object_type' => 'setting'], $option_name );
echo $value;

Trong đó:

• $field_id: bạn cần thay vào đây ID của custom field mà bạn đã tạo ở bước 1. Trong ví dụ của mình, thì ID sẽ là 'footer_text'.
• $option_name: bạn cần thay vào đây tên của thuộc tính 'option_name' mà bạn đã đặt ở bước 1, tên này có dạng là 'theme_mods_$themeslug'. Trong ví dụ này của mình, $option_name là 'theme_mods_justread'.

Trong ví dụ của bài này, mình cần sửa thông tin ở footer, nên sẽ vào file footer.php và sửa đoạn code sau:

Ban đầu, đoạn code trên là:

<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'justread' ) ); ?>">
    <?php
    /* translators: %s: CMS name, i.e. WordPress. */
    printf( esc_html__( 'Proudly powered by %s', 'justread' ), 'WordPress' );
    ?>
</a>
<span class="sep"> | </span>
<?php
    /* translators: 1: Theme name, 2: Theme author. */
    printf( esc_html__( 'Theme: %1$s by %2$s.', 'justread' ), 'Justread', '<a href="https://gretathemes.com">GretaThemes</a>' );
?>

Bạn cần sửa nó thành:

<?php
$footer = rwmb_meta( 'footer_text', ['object_type' => 'setting'], 'theme_mods_justread' );
if ( $footer ) :
    echo $footer; 
else : ?>
    <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'justread' ) ); ?>">
        <?php
        /* translators: %s: CMS name, i.e. WordPress. */
        printf( esc_html__( 'Proudly powered by %s', 'justread' ), 'WordPress' );
        ?>
    </a>
    <span class="sep"> | </span>
    <?php
        /* translators: 1: Theme name, 2: Theme author. */
        printf( esc_html__( 'Theme: %1$s by %2$s.', 'justread' ), 'Justread', '<a href="https://gretathemes.com">GretaThemes</a>' );
    ?>
<?php endif; ?>

Đoạn code trên sẽ lấy giá trị của custom fields Footer text để thay thế cho nội dung footer mặc định của theme. Trường hợp Footer text có giá trị rỗng thì nội dung footer mặc định sẽ được hiển thị để thay thế.

Và bây giờ, bạn có thể điền thử một nội dung bất kỳ vào field Footer text để xem kết quả nhé.

Lời cuối

Rất hy vọng với bài viết này, bạn có thêm một tip để có thể chỉnh sửa một số thông tin mặc định trong theme một cách dễ dàng hơn. Ở bài sau, mình sẽ đi sâu hơn vào việc sử dụng MB Settings Page để chỉnh sửa một số thông tin trong Customizer, bạn nhớ theo dõi nha.