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. Show
 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 bởi 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à 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 !!!!Let’s Go !!!! Chú ý: Mọi thao tác bên dưới đây đều nằm trong file theme_option.php nhé.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.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 optionTạ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 //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="" 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.phpTô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="" 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.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 3. Vì sao phải tạo Theme Option WordPress để làm gì?
4. Một số plugin cho theme optionsNế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é. |
