ChatGPTCHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%
1. Theme Option WordPress là gì?
Bạn hãy hình dung Website chúng ta là tổng hợp nhiều thông số được cấu hình hiển thị trên trang chủ hay bất cứ đâu đó trên Web như Logo, Điện thoại, Email, Địa chỉ, Google Map, Facebook Messenger….Với trang Theme Option admin sẽ giúp chúng ta hoặc Khách hàng hay các quản trị viên Website dễ dàng thay đổi chỉnh sửa các thông số đó một cách nhanh chóng thay vì bạn tự thay đổi dữ liệu đó bằng các dòng code.
🌱 Nếu thấy bài viết hữu ích, bạn có thể ủng hộ tác giả bằng cách nhấn vào quảng cáo bên dưới — như một donate miễn phí. Bạn không mất gì nhưng chúng tôi sẽ có thêm chi phí để duy trì và vận hành website. Cảm ơn bạn! 🙏
Chức năng Theme Option thường sẽ bị bỏ qua bởi các bạn mới tìm hiểu WordPress thấy nó hơi phức tạp. Đa phần các bạn sẽ sử dụng chức năng tạo Sidebar rồi tạo Widget kéo vào. Cách này không sai nhưng có một hạn chế là sẽ sinh ra nhiều Sidebar dẫn tới rối rắm.
Nhưng khi bạn đã thành thạo WP rồi, đến lúc này bạn sẽ cần nó hơn bao giờ hết.
Có rất nhiều cách tạo ra theme option trong WordPress như Cài plugin, hay Acf theme options nhưng cách bên dưới đây là cách tương đối đơn giản mà WordPress hỗ trợ chúng ta.
2. Cách tạo Theme Option WordPress như thế nào?
Để tạo được trang theme option chứa các cấu hình cơ bản của Website như Logo, số hotline, email, địa chỉ….
Trước tiên bạn hãy tạo cho tôi 1 file có tên là theme_option.php tại thư mục gốc của theme đang dùng. Cụ thể của tôi như sau:
Tiếp theo hãy nhúng require chúng vào theme chúng ta. Mở file functions.php và chép đoạn code sau vào bất kì vị trí nào.
require_once get_parent_theme_file_path( '/theme_option.php' );
Thật đơn giản phải không? Mọi bước chuẩn bị đã sẵn sàng, Let’s Go !!!!
Chú ý: Mọi thao tác bên dưới đây đều nằm trong file theme_option.php nhé.
2.1 Đăng ký menu trang Theme Option
//1. Tạo trang cấu hình Theme Option
add_action("admin_menu", 'wpshare247_create_theme_option_page');
function wpshare247_create_theme_option_page(){
$page_title = 'Theme Options'; // Đổi tên Menu theo ý bạn muốn
$menu_title = $page_title;
$capability = 'manage_options'; // Phân Quyền, ai có quyền sử dụng trang này
$menu_slug = 'wpshare247-theme-options';
$function_callback = 'wpshare247_the_content_option_fields';
$icon_url = '';
$position = 1;
add_menu_page($page_title, $menu_title, $capability, $menu_slug , $function_callback, $icon_url, $position);
}
function wpshare247_the_content_option_fields(){
?>
<div id="poststuff" class="w366-options-area">
<div class="postbox-container">
<div class="meta-box-sortables ui-sortable">
<div class="postbox ">
<h2 class="hndle ui-sortable-handle">Theme Option - Cấu hình Website Wpshare247.com</h2>
<div class="wle-tab-content">
<!-- Form khai báo các Options tại đây -->
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
<?php
}
Bằng cách sử dụng action admin_menu sẽ giúp ta khai báo được menu admin như hình bên dưới.
2.2 Đăng ký các field cho Theme Option
//2. Đăng ký các field cho Theme Option
add_action('admin_init', 'wpshare247_register_option_fields' );
function wpshare247_register_option_fields(){
//Khai báo các trường dữ liệu cho theme option tại đây
register_setting( WS247_GE_FIELDS_GROUP, 'wpshare247_hotline');
register_setting( WS247_GE_FIELDS_GROUP, 'wpshare247_email');
register_setting( WS247_GE_FIELDS_GROUP, 'wpshare247_address');
//Copy: register_setting( WS247_GE_FIELDS_GROUP, 'wpshare247_ten_field_moi_cua_ban');
}
2.3 Khai báo các field cho theme option
Tại mục 2.2 chúng ta khai báo 3 field là: wpshare247_hotline, wpshare247_email, wpshare247_address. Tại bước này chúng ta sẽ hiển thị các field này vào form <form method="post" action="options.php">, bạn có thể xem lại tại đoạn code <!-- Form khai báo các Options tại đây --> ở bước 2.1 hoặc thay thế đoạn code 2.1 bằng đoạn code bên dưới đây.
//1. Tạo trang cấu hình Theme Option
add_action("admin_menu", 'wpshare247_create_theme_option_page');
function wpshare247_create_theme_option_page(){
$page_title = 'Theme Options';
$menu_title = $page_title;
$capability = 'manage_options'; // Phân Quyền, ai có quyền sử dụng trang này
$menu_slug = 'wpshare247-theme-options';
$function_callback = 'wpshare247_the_content_option_fields';
$icon_url = '';
$position = 1;
add_menu_page($page_title, $menu_title, $capability, $menu_slug , $function_callback, $icon_url, $position);
}
function wpshare247_the_content_option_fields(){
?>
<div id="poststuff" class="w366-options-area">
<div class="postbox-container">
<div class="meta-box-sortables ui-sortable">
<div class="postbox ">
<h2 class="hndle ui-sortable-handle">Theme Option - Cấu hình Website Wpshare247.com</h2>
<div class="wle-tab-content">
<!-- Form khai báo các Options tại đây -->
<form method="post" action="options.php">
<?php settings_fields( WS247_GE_FIELDS_GROUP ); ?>
<?php do_settings_sections( WS247_GE_FIELDS_GROUP ); ?>
<!--Khai báo các fields tại đây: xem hàm 'wpshare247_register_option_fields' bên dưới-->
<div class="wpshare247-option-fields">
<table class="form-table">
<!-- Mỗi 1 tr là 1 field -->
<!-- wpshare247_hotline -->
<tr valign="top">
<td><strong><?php esc_html_e("Hotline", 'wpshare247.com'); ?></strong></td>
<td>
<?php $wpshare247_hotline = get_option('wpshare247_hotline');?>
<input style="width:100%" placeholder="0852.080383" type="text" id="<?php echo esc_html('wpshare247_hotline'); ?>" name="<?php echo esc_html('wpshare247_hotline'); ?>" value="<?php echo esc_attr($wpshare247_hotline); ?>" />
</td>
</tr>
<!-- wpshare247_email -->
<tr valign="top">
<td><strong><?php esc_html_e("Email", 'wpshare247.com'); ?></strong></td>
<td>
<?php $wpshare247_email = get_option('wpshare247_email');?>
<input style="width:100%" placeholder="hotro@tbay.vn" type="text" id="<?php echo esc_html('wpshare247_email'); ?>" name="<?php echo esc_html('wpshare247_email'); ?>" value="<?php echo esc_attr($wpshare247_email); ?>" />
</td>
</tr>
<!-- wpshare247_address -->
<tr valign="top">
<td><strong><?php esc_html_e("Địa chỉ", 'wpshare247.com'); ?></strong></td>
<td>
<?php $wpshare247_address = get_option('wpshare247_address');?>
<input style="width:100%" placeholder="303/41 Tân Sơn Nhì, Tân Phú, Hồ Chí Minh" type="text" id="<?php echo esc_html('wpshare247_address'); ?>" name="<?php echo esc_html('wpshare247_address'); ?>" value="<?php echo esc_attr($wpshare247_address); ?>" />
</td>
</tr>
<!-- Khai báo thêm các trường tiếp theo tại đây 'wpshare247_ten_field_moi_cua_ban' -->
<tr valign="top">
<td colspan="2"><?php submit_button(); ?></td>
</tr>
</table>
</div>
</form>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
<?php
}
Sau khi khai báo đoạn code trên chúng ta sẽ có 3 fields như bên dưới. Tại bước này bạn đã có thể nhấp lưu lại được rồi đấy.
2.4 Lấy dữ liệu từ các field đã khai báo để dùng
//3. Lấy dữ liệu từ các theme option
//Lấy trường theo key, ví dụ:
$wpshare247_hotline = get_option('wpshare247_hotline');
echo 'Điện thoại: ' .$wpshare247_hotline;
$wpshare247_email = get_option('wpshare247_email');
echo 'Email: ' .$wpshare247_hotline;
$wpshare247_address = get_option('wpshare247_address');
echo 'Địa chỉ: ' .$wpshare247_hotline;
Bạn có thể gọi bất kì dữ liệu trên tại đâu trong theme WordPress như header.php, footer.php…..
2.5 Tổng hợp lại nội dung file theme_option.php
Tôi sẽ tổng hợp lại toàn bộ các dòng code vào 1 file để các bạn dễ dàng copy nhé.
<?php
//WPSHARE247.COM Theme Option
define( 'WS247_GE_FIELDS_GROUP', 'Ws247_ge_pfs-fields-group' );
//1. Tạo trang cấu hình Theme Option
add_action("admin_menu", 'wpshare247_create_theme_option_page');
function wpshare247_create_theme_option_page(){
$page_title = 'Theme Options';
$menu_title = $page_title;
$capability = 'manage_options'; // Phân Quyền, ai có quyền sử dụng trang này
$menu_slug = 'wpshare247-theme-options';
$function_callback = 'wpshare247_the_content_option_fields';
$icon_url = '';
$position = 1;
add_menu_page($page_title, $menu_title, $capability, $menu_slug , $function_callback, $icon_url, $position);
}
function wpshare247_the_content_option_fields(){
?>
<div id="poststuff" class="w366-options-area">
<div class="postbox-container">
<div class="meta-box-sortables ui-sortable">
<div class="postbox ">
<h2 class="hndle ui-sortable-handle">Theme Option - Cấu hình Website Wpshare247.com</h2>
<div class="wle-tab-content">
<!-- Form khai báo các Options tại đây -->
<form method="post" action="options.php">
<?php settings_fields( WS247_GE_FIELDS_GROUP ); ?>
<?php do_settings_sections( WS247_GE_FIELDS_GROUP ); ?>
<!--Khai báo các fields tại đây: xem hàm 'wpshare247_register_option_fields' bên dưới-->
<div class="wpshare247-option-fields">
<table class="form-table">
<!-- Mỗi 1 tr là 1 field -->
<!-- wpshare247_hotline -->
<tr valign="top">
<td><strong><?php esc_html_e("Hotline", 'wpshare247.com'); ?></strong></td>
<td>
<?php $wpshare247_hotline = get_option('wpshare247_hotline');?>
<input style="width:100%" placeholder="0852.080383" type="text" id="<?php echo esc_html('wpshare247_hotline'); ?>" name="<?php echo esc_html('wpshare247_hotline'); ?>" value="<?php echo esc_attr($wpshare247_hotline); ?>" />
</td>
</tr>
<!-- wpshare247_email -->
<tr valign="top">
<td><strong><?php esc_html_e("Email", 'wpshare247.com'); ?></strong></td>
<td>
<?php $wpshare247_email = get_option('wpshare247_email');?>
<input style="width:100%" placeholder="hotro@tbay.vn" type="text" id="<?php echo esc_html('wpshare247_email'); ?>" name="<?php echo esc_html('wpshare247_email'); ?>" value="<?php echo esc_attr($wpshare247_email); ?>" />
</td>
</tr>
<!-- wpshare247_address -->
<tr valign="top">
<td><strong><?php esc_html_e("Địa chỉ", 'wpshare247.com'); ?></strong></td>
<td>
<?php $wpshare247_address = get_option('wpshare247_address');?>
<input style="width:100%" placeholder="303/41 Tân Sơn Nhì, Tân Phú, Hồ Chí Minh" type="text" id="<?php echo esc_html('wpshare247_address'); ?>" name="<?php echo esc_html('wpshare247_address'); ?>" value="<?php echo esc_attr($wpshare247_address); ?>" />
</td>
</tr>
<!-- Khai báo thêm các trường tiếp theo tại đây 'wpshare247_ten_field_moi_cua_ban' -->
<tr valign="top">
<td colspan="2"><?php submit_button(); ?></td>
</tr>
</table>
</div>
</form>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
<?php
}
//2. Đăng ký các field cho Theme Option
add_action('admin_init', 'wpshare247_register_option_fields' );
function wpshare247_register_option_fields(){
//Khai báo các trường dữ liệu cho theme option tại đây
register_setting( WS247_GE_FIELDS_GROUP, 'wpshare247_hotline');
register_setting( WS247_GE_FIELDS_GROUP, 'wpshare247_email');
register_setting( WS247_GE_FIELDS_GROUP, 'wpshare247_address');
//Copy: register_setting( WS247_GE_FIELDS_GROUP, 'wpshare247_ten_field_moi_cua_ban');
}
//3. Lấy dữ liệu từ các theme option
//Lấy trường theo key, ví dụ:
$wpshare247_hotline = get_option('wpshare247_hotline');
echo 'Điện thoại: ' .$wpshare247_hotline;
$wpshare247_email = get_option('wpshare247_email');
echo 'Email: ' .$wpshare247_hotline;
$wpshare247_address = get_option('wpshare247_address');
echo 'Địa chỉ: ' .$wpshare247_hotline;
Tin Vui Cho Bạn:
Nếu như bạn muốn tiết kiệm thời gian cũng như sử dụng nhiều loại Field Option hơn, Hãy sử dụng Bộ Source chuẩn tạo Theme Option cho WordPress cực kì tiện ích với đầy đủ bộ Field: textbox, dropdown, media, editor, color picker, textarea, checkbox, multiple checkbox, radio, slider.
Hãy xem bài này nhé: https://wpshare247.com/source-chuan-theme-option-cho-wordpress-de-hieu-voi-day-du-cac-truong-field
Video hướng dẫn chi tiết tạo theme option trong WordPress
3. Vì sao phải tạo Theme Option WordPress để làm gì?
- Dễ dàng quản lí cấu hình Website tại một chỗ.
- Tự tùy chỉnh, custom theo ý mình.
- Dễ dàng export, import khi chuyển đổi từ site này sang site khác.
4. Một số plugin cho theme options
Nếu bạn quá khó khăn khi phải tiếp cận đến các đoạn code trên. Bạn cũng có thể cài một số plugin WordPress hỗ trợ theme option như sau:
Tuy nhiên bạn cẩn thận khi sử dụng các plugin theme option bởi tính tương thích các phiên bản WP rất thấp và hay xảy ra lỗi WordPress.
Hi vọng bài chia sẻ này giúp ích được cho các bạn rất nhiều trong lúc học WordPress nhé.
CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%
