Chức năng Theme Options WordPress gần như là một chức năng bắt buộc tất cả các nhà phát triển phải bắt tay vào xây dựng. Nó cho phép quản trị viên admin cấu hình số hotline, logo, slide ảnh,… rất nhiều thứ khác trên trang web.
Tạo Theme Options trong WordPress có nhiều cách và phương pháp sử dụng Redux Framework là một cách tiếp cận phổ biến, được sử dụng bởi cộng đồng đông đảo lập trình viên. Quản trị viên sẽ có một trang để tùy chỉnh giao diện của theme rất chuyên nghiệp mà không cần sửa mã nguồn trực tiếp.
1. Tích hợp Redux Framework
Để tích hợp Redux Framework tạo Theme Options WordPress, bạn cần cài đặt nó trong kho plugins hoặc tích hợp nó vào thư mục gốc của theme bạn đang xây dựng.
1.1 Các phương án cài đặt
Cách 1 – cài plugins: Phương án này, sẽ dễ dàng cho việc cập nhật mỗi khi Redux Framework có phiên bản mới. Tuy nhiên, bạn cần phải code thêm chức năng bắt buộc quản trị viên cài đặt và kích hoạt plugins mới có thể sử dụng chức năng Theme Options.
Cách 2 – tích hợp vào thư mục gốc của Theme: Ngược lại với cách 1, quản trị viên web sẽ không thể tự cập nhật Redux Framework. Việc cập nhật sẽ phụ thuộc hoàn toàn vào bạn mỗi khi bạn nâng cấp version của Theme.
Tùy theo sở thích mà bạn chọn phương án mà bạn cho là tốt nhất. Trong bài này mình sẽ chọn cách 1 để làm bài viết hướng dẫn.
1.2 Code chức năng bắt buộc cài plugin Redux Framework
Như đã nói ở trên, chọn hướng cài đặt plugins để tạo chức năng Theme Options thì bạn cần phải tạo thêm một chức năng yêu cầu quản trị viên cài đặt Redux Framework ngay khi họ vừa kích hoạt theme lên.
Để yêu cầu người dùng phải kích hoạt plugin, bạn có thể sử dụng thư viện TGM bằng cách tải về file sau: class-tgm-plugin-activation.php.
Sau khi tải về, copy nó vào thư mục inc/classes. Mở file init.php và nhúng thư viện TGM vào web như sau:
require get_template_directory() . '/inc/classes/class-tgm-plugin-activation.php';Tạo thêm một file class-plugins.php bên trong classes và nhúng nó vào init.php như trên. Bên trong viết đoạn code như sau:
function webshop_plugins_activation(){
// Redux Framework
$plugins = array(
array(
'name' => 'Redux Framework', // tên plugin cần cài
'slug' => 'redux-framework', //Slug của trang tải plugin trên trang wordpress.org/plugins
'required' => true // Có bắt buộc cài hay không? true - bắt buộc, false - khuyến nghị
)
);
// Setup TGM
$configs = array(
'menu' => 'ws_plugin_install',
'has_notice' => true, // Hiện thông báo bắt buộc cài plugins
'dimissable' => false, // Có muốn admin tắt thông báo hay ko?
'is_automatic' => true // Cho phép tự động kích hoạt thông báo khi cài theme
);
tgmpa($plugins, $configs);
}
add_action( 'tgmpa_register','webshop_plugins_activation' );Trong đoạn code trên mình tạo một hàm webshop_plugins_activation() và add nó vào hook tgmpa_register của TGM. Tại các dòng code mình đã chú thích nên bạn chỉ cần đọc qua là sẽ hiểu.
Lưu tất cả các file code trên và load lại trang quản trị, bạn sẽ thấy yêu cầu cài đặt plugin Redux Framework hiển thị bên trong box thông báo của WordPress.
Click vào Begin installing plugins sẽ chuyển bạn đến trang ws_plugin_install bạn cấu hình trong đoạn code trên:
Ấn Install để cài đặt Redux Framework. Bạn cũng có thể làm tương tự với các plugins khác, miễn là bạn cảm thấy nó cần thiết cho theme của bạn thì bạn yêu cầu quản trị cài vào ngay khi kích hoạt theme.
Quá trình cài đặt và kích hoạt sẽ tự diễn ra, bạn chờ đợi cho đến khi có thông báo hoàn thành xuất hiện.
2. Các tập tin cần thiết để tạo Theme Options WordPress
Trong thư mục inc/classes, bạn tiếp tục tạo file class-webshop-options.php. Trong file này bạn sẽ cấu hình các thứ cần thiết cho quản trị viên như mục tạo logo, nhập hotline,… Nhúng nó vào file init.php:
require get_template_directory() . '/inc/classes/class-webshop-options.php';Vào thư mục webshop\wp-content\plugins\redux-framework\sample, bạn mở file barebones-config.php lên và copy toàn bộ nội dung của file này sang file class-webshop-options.php ở trên và lưu lại.
Lúc này Theme Options vẫn chưa hiện ra, bạn cần phải cấu hình một vài thứ nữa. Tìm đến đoạn code sau:
if ( ! class_exists( 'Redux' ) ) {
return null;
}
// This is your option name where all the Redux data is stored.
$opt_name = 'redux_demo';- Tại dòng
return null;xóanull, chỉ để lạireturn; - $opt_name = ‘redux_demo’; Đổi tên tùy theo ý của bạn, ở đây mình đổi thành ws_options. Sau này bạn sẽ dùng tên này để hiển thị các thành phần bạn đã tạo trong Options Themes.
if ( ! class_exists( 'Redux' ) ) {
return;
}
// This is your option name where all the Redux data is stored.
$opt_name = 'ws_options';Tiếp tục đổi toàn bộ keywords “your-textdomain-here” thành tên textdomain của bạn bằng tổ hợp phím Ctrl + H. Việc này sẽ hưu ích cho bạn khi làm file ngôn ngữ cho website.
Tiếp tục tìm đến 2 dòng code sau:
'menu_title' => esc_html__( 'Sample Options', 'webshop' ),
'page_title' => esc_html__( 'Sample Options', 'webshop' ),Đổi Sample Options thành Theme Options hoặc tên gì đó tùy thích. Đây là tên thư mục sẽ hiển thị trong Menu quản trị.
Đến đây, tạm thời lưu lại và F5 trình duyệt để kiểm tra xem Theme Options đã hiển thị trong quản trị chưa?
Bạn có thể tìm và xóa các thông báo bên trên và bên dưới của Theme Options cho chuyên nghiệp, ví dụ như chuyển dev_mode thành false – để ẩn thông báo chế độ dev_mode,… Nói chung tắt hết các thông báo dành cho dev trước khi đóng gói theme để giao cho khách hàng.
3. Tạo các Theme Options WordPress của riêng bạn
Sau khi tích hợp xong, bạn kéo xuống tìm đến các dòng Redux::set_section( $opt_name, $section );, đây là khu vực để tạo thêm các options cho theme WordPress của bạn. Bạn có thể xem tất cả các chức năng hỗ trợ tại đây.
Mình sẽ tạo một ví dụ và giải thích các thành phần giúp bạn hiểu, tạo thêm các options vô cùng dễ với phiên bản mới của Redux Framework.
// Slide Settings
$section = array(
'title' => esc_html__( 'Slides Home', 'eshopper' ),
'desc' => esc_html__( 'Drag and drop to reposition images slides. ', 'eshopper' ),
'id' => 'ws_slides',
'icon' => 'el el-picture',
'fields' => array(
array(
'id' => 'slides-main',
'type' => 'slides',
'title' => esc_html__('Slides Options', 'eshopper'),
'desc' => esc_html__('Title: Advertisement name - Description: Detailed description of the advertisement - URL: Link to product page, category or partner website', 'eshopper')
)
),
);
Redux::set_section( $opt_name, $section );Giải thích từ trên xuống dưới như sau:
title: Đây là tiêu đề của phần tùy chọn “Slides Home”. Nó sẽ xuất hiện như một tiêu đề của phần tùy chọn trong giao diện quản lý.desc: Đây là mô tả cho phần tùy chọn “Slides Home”. Nó sẽ hiển thị dưới tiêu đề của phần tùy chọn và cung cấp mô tả ngắn gọn về chức năng của nó.id: Đây là ID của phần tùy chọn “Slides Home”. Đây là một giá trị duy nhất dùng để xác định phần tùy chọn này trong mã nguồn và tránh xung đột với các phần khác.icon: Đây là biểu tượng cho phần tùy chọn “Slides Home”. Nó sẽ xuất hiện bên cạnh tiêu đề của phần tùy chọn để tạo ra một biểu tượng đại diện cho phần này.fields: Đây là một mảng chứa các trường tùy chọn bên trong phần “Slides Home”. Trong đoạn mã trên, chỉ có một trường duy nhất được định nghĩa.array(...): Mảng chứa cấu hình cho trường tùy chọn. Trong đoạn mã trên, trường đó là một trường loại “slides” (hình ảnh trượt). Loại trường này cho phép người dùng kéo và thả hình ảnh để sắp xếp lại các slide trên trang chủ. Slide sẽ bao gồm các thông tin như tiêu đề, mô tả và liên kết đến trang sản phẩm, danh mục hoặc website đối tác.id: Đây là ID của trường tùy chọn “slides-main”. Tương tự như ID của phần, ID của trường này sẽ được sử dụng để xác định trường trong mã nguồn.type: Đây là loại trường, trong trường hợp này, là “slides”. Điều này cho Redux biết rằng đây là một trường dạng slides.title: Đây là tiêu đề của trường tùy chọn “Slides Options”. Nó sẽ xuất hiện bên cạnh trường tùy chọn trong giao diện quản lý để cung cấp mô tả ngắn gọn về trường này.desc: Đây là mô tả cho trường tùy chọn “slides-main”. Nó sẽ hiển thị dưới tiêu đề của trường tùy chọn và cung cấp hướng dẫn cho người dùng về cách sử dụng trường này.
Sau khi cấu hình phần và trường tùy chọn như trên, Redux::set_section() sẽ thêm phần “Slides Home” và trường “slides-main” vào Theme Options, cho phép quản trị tùy chỉnh các slide trên trang chủ của theme WordPress của bạn.
Mình đã có bài viết Chuyển HTML sang WordPress theme Woocomerce để giúp bạn chia nhỏ các thành phần của template HTML ra các files template-part để thuận tiện việc code. Sau khi tạo slides xong, bạn thử vào Theme Options nhập hình ảnh và code chức năng đầu tiên của theme xem sao?
4. Tổng kết
Như vậy, với bài viết này, mình đã hướng dẫn bạn cách tạo chức năng Theme Options WordPress bằng Redux Framwork phiên bản mới nhất 2023. Chỉ vài thao tác là bạn có thể cài đặt và sử dụng nó để tạo một giao diện Options chuyên nghiệp trong quản trị.
Như mình đã nói, có nhiều phương pháp khác cũng sẽ giúp bạn tạo được chức năng Theme Options và tạo Theme Options WordPress bằng Redux Framwork là một trong các cách làm mình cho là nhanh, dễ hiểu, giao diện chuyên nghiệp giúp bạn nhanh chóng xây dựng các themes WordPress tùy biến.
Trong bài viết sau, mình sẽ hướng dẫn bạn hiển thị các Options này ra bên ngoài trang web. Nếu thấy bài viết hữu ích, hãy chia sẻ nó giúp mình, cảm ơn và hẹn gặp lại!
