Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)
Trong một loạt bài trước, tôi đã cung cấp một hướng dẫn chuyên sâu về cách làm việc với WordPress Settings API. Đối với những người mới đến với WordPress hoặc những người sử dụng các công cụ khác như Customizer để xử lý các tùy chọn khác nhau, thì đây có thể là thứ mà bạn chưa từng sử dụng trong phát triển plugin hoặc theme của mình.
Như đã nêu trong Codex:
Settings API, được thêm vào WordPress 2.7, cho phép các trang quản trị có chứa các form cài đặt được quản lý một cách bán tự động. Nó cho phép bạn định nghĩa các trang cài đặt, các khu vực bên trong các trang dó và các trường bên trong các khu vực.
Tôi không nghĩ rằng đó là điều bắt buộc phải học, nhưng đó là điều bạn cần biết sẵn và biết cách làm việc với nó nếu bạn thấy mình cần đưa ra các trang tùy chọn bên trong khu vực quản trị của WordPress.
Đó là một API mạnh mẽ, mặc dù hơi phức tạp, nhưng nó cung cấp cho chúng ta rất nhiều tính năng. Cuối cùng, nó cho phép chúng ta làm được rất nhiều việc ở phía máy chủ và giảm thiểu công việc ở phía máy khách.
Nhưng sẽ thế nào khi chúng ta đang làm việc với một giải pháp tùy biến cho khách hàng và chúng ta cần thêm một chút linh hoạt hơn so với những gì mà Settings API cung cấp? Ví dụ, sẽ ra sao nếu chúng ta cần phải xây dựng một plugin sẽ có một trang cài đặt nhưng cần có một bộ tùy chọn linh hoạt hơn và các tính năng kiểm tra phù hợp?
Trong những trường hợp đó, có thể viết các trang quản trị WordPress tuỳ biến của riêng bạn. Trong loạt bài này, chúng ta sẽ tìm hiểu cách làm thế nào để thực hiện chính xác điều đó.
Trước khi Bắt đầu
Đối với hầu hết các hướng dẫn giống như thế này, điều quan trọng là đảm bảo rằng bạn có đầy đủ mọi thứ phù hợp để theo dõi để bạn có thể làm việc với mã nguồn mà chúng ta khái quát trong toàn bộ loạt bài viết này.
Đối với hướng dẫn này, tôi giả sử:
- Bạn có một môi trường phát triển cục bộ được thiết lập cho hệ điều hành của bạn.
- Bạn có một phiên bản WordPress được cài đặt và sẵn sàng được sử dụng để cài đặt một plugin.
- Bạn đã nắm vững các phương pháp phát triển plugin cho WordPress.
- Bạn nắm vững cách làm việc với PHP và HTML.
Nếu bạn không rành về cách thiết lập môi trường phát triển cục bộ bao gồm WordPress, xin vui lòng xem loạt bài viết này để biết cách thiết lập.
Và nếu bạn tương đối rành về PHP, thậm chí nếu đó chỉ là đọc ngôn ngữ, thì tôi cũng sẽ cố gắng hết sức có thể để đưa ra bước và chú thích rõ ràng cho từng dòng code mà chúng tôi chia sẻ.
Khi tất cả những điều này đã được thiết lập, chúng ta sẵn sàng bắt đầu làm việc trên plugin của chúng ta.
Các Cài đặt Quản trị Tuỳ biến trong WordPress
Vào cuối loạt bài này, chúng ta sẽ có một plugin đáp ứng các yêu cầu sau đây:
- Thêm một menu con mới vào hệ thống menu hiện có của WordPress.
- Thêm một trang cài đặt mới tương ứng với menu con mới đó.
- Chuẩn hoá (hay còn gọi là sanitize) và trình tự hoá (hay còn gọi là serialize) các tùy chọn trên trang.
- Kiểm tra và trả về các giá trị được lưu và kết xuất chúng sao cho phù hợp.
Hơn nữa, chúng ta sẽ đảm bảo rằng chúng ta tiếp cận điều này theo cách mô-đun hoá cao nhất có thể bằng cách sử dụng các Tiêu chuẩn Viết code cho WordPress và các cách làm tương tự để đọc, viết và duy trì plugin của chúng ta dễ dàng nhất có thể.
1. Tập tin Khởi động của Plugin
Điều đầu tiên chúng ta cần làm là tạo tập tin khởi động plugin. Điều này sẽ bao gồm việc tạo ra một thư mục để chứa các tập tin của plugin, một README cơ bản, một bản sao của giấy phép (license), một tập tin khởi động sẽ được sử dụng để bắt đầu plugin và một thư mục sẽ được dùng để chứa các lớp có liên quan đến chức năng quản trị.
Các tập tin này có sẵn để tải về từ phần đính kèm cho bài viết này, nhưng trong lúc chờ đợi, bạn có thể xem thư mục của tôi trông như thế nào ở dưới đây:
Hơn nữa, nội dung của tập tin khởi động plugin rất đơn giản. Hãy xem xét code sau đây cho tập tin PHP custom-admin-settings.php, và sau đó tôi sẽ thảo luận chi tiết hơn bên dưới khối code.
1 |
<?php
|
2 |
/**
|
3 |
* The plugin bootstrap file
|
4 |
*
|
5 |
* This file is read by WordPress to generate the plugin information in the
|
6 |
* plugin admin area. This file also defines a function that starts the plugin.
|
7 |
*
|
8 |
* @link https://code.tutsplus.com/tutorials/creating-custom-admin-pages-in-wordpress-1
|
9 |
* @since 1.0.0
|
10 |
* @package Custom_Admin_Settings
|
11 |
*
|
12 |
* @wordpress-plugin
|
13 |
* Plugin Name: Custom Admin Settings
|
14 |
* Plugin URI: http://code.tutsplus.com/tutorials/creating-custom-admin-pages-in-wordpress-1
|
15 |
* Description: Demonstrates how to write custom administration pages in WordPress.
|
16 |
* Version: 1.0.0
|
17 |
* Author: Tom McFarlin
|
18 |
* Author URI: https://tommcfarlin.com
|
19 |
* License: GPL-2.0+
|
20 |
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
|
21 |
*/
|
22 |
|
23 |
// If this file is called directly, abort.
|
24 |
if ( ! defined( 'WPINC' ) ) { |
25 |
die; |
26 |
}
|
27 |
|
28 |
add_action( 'plugins_loaded', 'tutsplus_custom_admin_settings' ); |
29 |
/**
|
30 |
* Starts the plugin.
|
31 |
*
|
32 |
* @since 1.0.0
|
33 |
*/
|
34 |
function tutsplus_custom_admin_settings() { |
35 |
|
36 |
}
|
Lưu ý rằng trong đoạn code ở trên, thật sự có rất ít code. Thay vào đó, là rất nhiều chú thích. Khối chú thích chính ở đầu tập tin giải thích những gì mà tập tin này thực hiện.
Khu vực bên dưới thẻ @wordpress-plugin là những gì WordPress sẽ đọc để tạo tiêu đề, mô tả và các liên kết tương đối trong phần quản lý plugin của WordPress.
Tiếp theo, chúng ta ngăn chặn bất cứ ai truy cập trực tiếp vào tập tin này. Và cuối cùng, chúng ta tạo ra một hàm tùy biến để chạy cùng với hook plugins_loaded. Hàm này là những gì sẽ được sử dụng để khởi động plugin.
Tại thời điểm này, bạn có thể đăng nhập vào WordPress, điều hướng đến Bảng quản lý Plugin và sau đó sẽ thấy plugin sẵn sàng để kích hoạt. Tiếp tục và nhấp vào Activate.
Chưa có gì xảy ra cả, nhưng chúng ta sẽ bắt đầu thêm chức năng khi chúng ta từng bước đi qua hướng dẫn này.
2. Tạo Menu con
Để bắt đầu làm việc trên plugin, trước hết chúng ta đưa ra một menu con. Để làm điều này, chúng ta cần phải tận dụng hàm của WordPress API add_options_page. Hàm này sẽ yêu cầu năm tham số:
- văn bản để hiển thị như là tiêu đề của trang tùy chọn tương ứng
- văn bản để hiển thị như là tên của menu con
- các khả năng cần thiết để truy cập menu này
- tên slug của menu được dùng để xác định menu con này
- một hàm callback chịu trách nhiệm kết xuất trang quản trị
Lưu ý rằng chúng ta sẽ sử dụng các lớp để tổ chức các chức năng của chúng ta, vì vậy phần lớn những gì chúng ta đang thực hiện sẽ theo hướng đối tượng.
Đầu tiên, hãy tạo một lớp trong thư mục admin đặt tên là class-submenu.php. Vì lớp này chịu trách nhiệm đưa ra một menu con mới, nên chúng ta sẽ đặt tên nó mang tính mô tả.
Nội dung của lớp sẽ giống như sau:
1 |
<?php
|
2 |
/**
|
3 |
* Creates the submenu item for the plugin.
|
4 |
*
|
5 |
* @package Custom_Admin_Settings
|
6 |
*/
|
7 |
|
8 |
/**
|
9 |
* Creates the submenu item for the plugin.
|
10 |
*
|
11 |
* Registers a new menu item under 'Tools' and uses the dependency passed into
|
12 |
* the constructor in order to display the page corresponding to this menu item.
|
13 |
*
|
14 |
* @package Custom_Admin_Settings
|
15 |
*/
|
16 |
class Submenu { |
17 |
|
18 |
/**
|
19 |
* A reference the class responsible for rendering the submenu page.
|
20 |
*
|
21 |
* @var Submenu_Page
|
22 |
* @access private
|
23 |
*/
|
24 |
private $submenu_page; |
25 |
|
26 |
/**
|
27 |
* Initializes all of the partial classes.
|
28 |
*
|
29 |
* @param Submenu_Page $submenu_page A reference to the class that renders the
|
30 |
* page for the plugin.
|
31 |
*/
|
32 |
public function __construct( $submenu_page ) { |
33 |
$this->submenu_page = $submenu_page; |
34 |
}
|
35 |
|
36 |
/**
|
37 |
* Adds a submenu for this plugin to the 'Tools' menu.
|
38 |
*/
|
39 |
public function init() { |
40 |
add_action( 'admin_menu', array( $this, 'add_options_page' ) ); |
41 |
}
|
42 |
|
43 |
/**
|
44 |
* Creates the submenu item and calls on the Submenu Page object to render
|
45 |
* the actual contents of the page.
|
46 |
*/
|
47 |
public function add_options_page() { |
48 |
|
49 |
add_options_page( |
50 |
'Tuts+ Custom Administration Page', |
51 |
'Custom Administration Page', |
52 |
'manage_options', |
53 |
'custom-admin-page', |
54 |
array( $this->submenu_page, 'render' ) |
55 |
);
|
56 |
}
|
57 |
}
|
Tại thời điểm này, plugin vẫn chưa làm bất cứ công việc gì. Chúng ta vẫn cần phải tạo lớp Submenu_Page thật sự, và sau đó chúng ta cần phải liên kết các lớp đến tập tin khởi động.
3. Tạo Trang cho Menu con
Hãy bắt đầu với lớp Submenu_Page trước. Tạo một tập tin khác trong thư mục admin và đặt tên nó là class-submenu-page.php. Sau đó, trong tập tin, thêm code sau đây.
1 |
<?php
|
2 |
/**
|
3 |
* Creates the submenu page for the plugin.
|
4 |
*
|
5 |
* @package Custom_Admin_Settings
|
6 |
*/
|
7 |
|
8 |
/**
|
9 |
* Creates the submenu page for the plugin.
|
10 |
*
|
11 |
* Provides the functionality necessary for rendering the page corresponding
|
12 |
* to the submenu with which this page is associated.
|
13 |
*
|
14 |
* @package Custom_Admin_Settings
|
15 |
*/
|
16 |
class Submenu_Page { |
17 |
|
18 |
/**
|
19 |
* This function renders the contents of the page associated with the Submenu
|
20 |
* that invokes the render method. In the context of this plugin, this is the
|
21 |
* Submenu class.
|
22 |
*/
|
23 |
public function render() { |
24 |
echo 'This is the basic submenu page.'; |
25 |
}
|
26 |
}
|
Khi trang này được kết xuất, nó sẽ đơn giản là hiển thị văn bản: "This is the basic submenu page." Cuối cùng, chúng ta sẽ bắt đầu thêm các tuỳ chọn mới. Nhưng trước tiên, hãy làm sống dậy plugin này bằng cách khởi tạo nó trong tập tin khởi động của chúng ta.
4. Kết xuất Menu và Trang
Tiếp theo, hãy mở tập tin custom-admin-settings.php mà chúng ta đã tạo ra trước đó trong hướng dẫn này. Hãy tiếp tục và viết các code cần thiết để đưa ra menu con mới và trang liên kết với nó.
Hãy nhớ rằng, lớp Submenu yêu cầu rằng một đối tượng của lớp Submenu_Page được truyền vào hàm xây dựng của nó, và chúng ta cần phải gọi phương thức init trên lớp Submenu để thiết lập mọi thứ.
Trong code, điều này giống như sau:
1 |
<?php |
2 |
|
3 |
// If this file is called directly, abort. |
4 |
if ( ! defined( 'WPINC' ) ) {
|
5 |
die; |
6 |
} |
7 |
|
8 |
// Include the dependencies needed to instantiate the plugin. |
9 |
foreach ( glob( plugin_dir_path( __FILE__ ) . 'admin/*.php' ) as $file ) {
|
10 |
include_once $file; |
11 |
} |
12 |
|
13 |
add_action( 'plugins_loaded', 'tutsplus_custom_admin_settings' ); |
14 |
/** |
15 |
* Starts the plugin. |
16 |
* |
17 |
* @since 1.0.0 |
18 |
*/ |
19 |
function tutsplus_custom_admin_settings() {
|
20 |
|
21 |
$plugin = new Submenu( new Submenu_Page() ); |
22 |
$plugin->init(); |
23 |
|
24 |
} |
Tại thời điểm này, bạn sẽ có thể làm mới lại trang WordPress của bạn, kích hoạt plugin (nếu nó chưa được kích hoạt), và sau đó xem trang mới của bạn được hiển thị trong khu vực quản trị.
Trong bài tiếp theo, chúng ta sẽ xem xét cách chúng ta có thể bắt đầu đưa ra các cài đặt thật sự vào màn hình. Ngoài ra, chúng ta sẽ xem xét một số cách làm tốt khi làm việc với template và các bộ phận của template của chúng ta, và sau đó chúng ta sẽ xem chúng sẽ được liên kết như thế nào với các API chịu trách nhiệm không chỉ lưu lại chúng mà còn làm thế nào để chúng ta chuẩn hoá và kiểm tra chúng.
Nhưng trước khi chúng ta đến đó, tôi muốn nói một chút về thiết kế lớp mà chúng ta đã nhìn thấy trong hướng dẫn này. Nói chung, tôi muốn nói về lý do tại sao chúng ta có một lớp cho Submenu và Submenu_Page và nó liên quan đến tập tin khởi động như thế nào.
Đôi điều về Trách nhiệm của một Lớp
Đối với những người đã quen với Nguyên tắc Trách nhiệm Duy nhất, thì phần này có thể không có gì hấp dẫn đối với bạn. Nhưng nếu ai cần ôn lại hoặc muốn hiểu thêm thì hãy đọc tiếp.
Gộp chung các thứ lại với nhau mà thay đổi vì các lý do tương tự. Tách những thứ đó ra mà thay đổi vì nhiều lý do khác nhau.
Không chỉ có như vậy, nhưng nếu bạn nhìn vào từng lớp của chúng ta (ít nhất là hai lớp hiện có), thì rõ ràng rằng các lý do khiến lớp của chúng ta thay đổi là như sau:
- Nội dung của menu con có thể thay đổi. Bất cứ thứ gì từ tiêu đề trang cho tới tên slug của menu và tất cả mọi thứ ở giữa.
- Cái cách mà trang kết xuất nội dung của nó có thể (và sẽ thay đổi). Cụ thể, ngay bây giờ nó không làm gì cả mà xuất ra một chuỗi. Sớm thôi, nó sẽ include một tập tin cụ thể. Sau đó, nó có thể cần phải include nhiều tập tin.
Hai lý do ở trên là hai lý do rất khác nhau mà các lớp có thể thay đổi, vì vậy giữ chúng lại với nhau trong cùng một lớp sẽ vi phạm nguyên tắc trên.
Cuối cùng, tôi đưa ra điều này không chỉ để giúp làm sáng tỏ các nguyên tắc kỹ thuật phần mềm lớn hơn có thể được áp dụng trong WordPress, mà còn giúp bạn chuẩn bị một số lý do mà chúng ta sẽ phân chia những thứ nhất định, thường là các tập tin lớn bên trong ngữ cảnh của plugin.
Điều tuyệt vời về việc học các nguyên tắc đó là chúng có thể được áp dụng trong nhiều dự án chứ không chỉ trong các dự án đơn lẻ. Bạn học chúng, bạn thực hành sử dụng chúng, và bạn sẽ tiến bộ hơn trong việc phát kiến các giải pháp cho những người khác.
Quá trình học tập có thể là một cái dốc khó khăn, nhưng một khi bạn bắt đầu leo lên dốc đó, nó trở nên ngày càng dễ dàng hơn để kết hợp các nguyên tắc này vào công việc hàng ngày của bạn. Sau đó, giải pháp mà bạn cung cấp cho những người khác trở nên dễ dàng hơn nhiều để duy trì theo thời gian.
Tóm tắt
Đừng quên rằng, bạn có thể tải plugin về trong giai đoạn hiện tại từ bài viết này. Khi chúng ta tiến hành xuyên suốt loạt bài này, tôi sẽ đưa ra phiên bản mới nhất trên mỗi bài viết để bạn có thể theo dõi cùng với code đã được khái quát trong mỗi hướng dẫn, chỉnh sửa nó và chuẩn bị các câu hỏi mà bạn có thể muốn hỏi trong phần nhận xét .
Một lưu ý ngoài lề, nếu bạn đang tìm kiếm các tiện ích khác nhau để giúp bạn xây dựng bộ công cụ cho WordPress đang phát triển của mình hoặc cho việc nghiên cứu và trở nên chuyên nghiệp hơn trong WordPress, thì đừng quên xem qua những gì chúng tôi có sẵn trên Envato Market.
Hãy nhớ rằng, bạn có thể tìm thấy tất cả các khóa học và hướng dẫn của tôi trên trang tiểu sử của tôi và bạn có thể theo dõi tôi trên blog và/hoặc Twitter của tôi tại @tommcfarlin, nơi mà tôi nói về các phương pháp phát triển phần mềm khác nhau và cách chúng ta có thể sử dụng chúng trong WordPress.
Cuối cùng, đừng ngần ngại để lại bất kỳ câu hỏi hoặc nhận xét nào trong phần bình luận bên dưới. Tôi sẽ cố gắng hết sức để tham gia và trả lời mọi câu hỏi hoặc phê bình mà bạn đưa ra liên quan đến dự án này.
Tham khảo thêm
By
