Hướng dẫn tạo Theme Options cho wordpress

Khi bạn muốn thay đổi Logo, màu sắc, background hay một thông tin gì đó trên website cần tới sự hỗ trợ của Theme Options. Nó là một Custom Admin Page (Trang admin tùy chỉnh) nó có dùng để sửa đổi các tập tin trong WordPress. Nó rất tiện lợi cho việc quản trị website chính vì vậy trong bài viết này bạn sẽ được hướng dẫn tạo Theme Options cho WordPress.

Các bước hướng dẫn tạo Theme Options cho wordpress

Trước tiên bạn cần mở file functions.php

Để làm cho WordPress nhận ra rằng bạn muốn có một trang cài đặt, trước tiên bạn sẽ phải đăng ký trang đó. Hàm my_admin_menu thông báo cho WordPress rằng trang cài đặt đã được đăng ký.

function my_admin_menu() {
add_menu_page(
__( 'Options Page', 'slug' ),
__( 'Theme Panel', 'slug' ),
'manage_options',
'page-options',
'content_page',
'dashicons-schedule',
3
);
}

add_action( 'admin_menu', 'my_admin_menu' );

Tạo ra một khu vực hiển thị Theme Options

function content_page() {
?>
<h1> <?php esc_html_e( 'Welcome to Theme Panel', 'my-plugin-textdomain' ); ?> </h1>
<form method="POST" action="options.php">
<?php
settings_fields( 'page-options' );
do_settings_sections( 'page-options' );
submit_button();
?>
</form>
<?php
}

Đăng ký cài đặt tùy chỉnh và lưu giá trị

add_action( 'admin_init', 'settings_init' );

function settings_init() {
add_settings_section(
'setting_section',
__( 'Tùy Chỉnh', 'slug' ),
'setting_section_callback_function',
'page-options'
);

add_settings_field(
'setting_field',
__( 'Tùy chỉnh Setting Field', 'slug' ),
'setting_markup',
'page-options',
'setting_section'
);

register_setting( 'page-options', 'setting_field' );

}

function setting_section_callback_function() {
//echo '<p>Intro text for our settings section</p>';
}

function setting_markup() {
?>
<input type="text" id="setting_field" name="setting_field" value="<?php echo get_option( 'setting_field' ); ?>">
<?php
}

Cấu trúc bao gồm:

• add_settings_section
• add_settings_field
• register_setting

In giá trị nhập vào ra ngoài Theme sử dụng hàm get_option (Đặt ở file index.php, header.php, footer.php đều được)

<?php echo get_option( 'setting_field' ); ?>

Kết quả cuối cùng sẽ như thế này

Ví dụ thay đổi Logo

Thêm đoạn mã này vào trong function settings_init() { // Mã ở đây}

add_settings_section(
'setting_section_custom_logo',
__( 'Tùy chỉnh Logo', 'slug' ),
'setting_section_custom_logo_callback_function',
'page-options'
);

add_settings_field(
'setting_field_custom_logo',
__( 'Setting Field', 'slug' ),
'setting_markup_custom_logo',
'page-options',
'setting_section_custom_logo'
);

register_setting( 'page-options', 'setting_field_custom_logo' );

Mở file header.php tìm tới đoạn custom logo thay thế bằng đoạn mã này
<img src="<?php echo get_option( 'setting_field_custom_logo' ); ?>"/>
Trên đây mình đã hướng dẫn bạn tạo ra một Custom Theme Options trong WordPress. Tại đây bạn sẽ thêm các Module để tùy chỉnh trang web dễ dàng hơn.