Hướng dẫn toàn diện phát triển plugin WordPress: Xây dựng plugin chức năng đầu tiên của bạn từ con số không

Trước khi bắt đầu, hãy đảm bảo rằng bạn đã có một môi trường WordPress cục bộ hoặc trực tuyến dùng để phát triển và thử nghiệm. Các công cụ như Local, XAMPP hoặc MAMP là những lựa chọn tốt. Ngoài ra, bạn cần một máy tính đã cài đặt các công cụ biên dịch mã nguồn (chẳng hạn như Visual Studio Code,PhpStorm), và nên có kiến thức cơ bản về PHP, HTML, CSS và JavaScript.

Việc sở hữu một môi trường phát triển rõ ràng là nền tảng cho tất cả các công việc tiếp theo; nó giúp bạn tập trung vào logic của mã nguồn, thay vì vào việc cấu hình môi trường.

Tạo tệp plugin đầu tiên của bạn

Một plugin WordPress cần ít nhất một tệp PHP chính, và tệp này phải chứa một comment đặc biệt (header comment) để cung cấp thông tin meta cho hệ thống WordPress.

Đọc thêm Hướng dẫn toàn diện về phát triển plugin WordPress: Từ con số không đến việc xây dựng plugin chuyên nghiệp。

Chú thích ở đầu plugin và tệp chính (Main File)

Trước hết, trong thư mục cài đặt của WordPress… wp-content/plugins/ Trong thư mục đó, hãy tạo một thư mục mới, ví dụ như: my-first-plugin。Trong thư mục đó, tạo tệp chính my-first-plugin.phpĐầu tệp phải chứa phần chú thích tiêu đề plugin tiêu chuẩn.

UltaHost – Nhà cung cấp dịch vụ máy chủ WordPress chuyên nghiệp

Bảo đảm hoàn tiền trong 30 ngày, băng thông và cơ sở dữ liệu không giới hạn, bảo vệ DDoS miễn phí, mua 3 năm ưu đãi 50%

Truy cập trang

<?php
/**
 * Plugin Name:       我的第一个功能插件
 * Plugin URI:        https://yourwebsite.com/my-first-plugin
 * Description:       这是一个学习 WordPress 插件开发的示例插件，用于在前端页面底部添加自定义文本。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://yourwebsite.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 */

Đoạn chú thích này chính là “giấy tờ tùy thân” của plugin (tức là thông tin cấu hình quan trọng liên quan đến plugin). WordPress sử dụng những thông tin này để hiểu cách plugin hoạt động và quản lý nó một cách hiệu quả. Plugin Name Tên của plugin sẽ được hiển thị trên giao diện quản trị nền (backend management interface), cùng với các thông tin khác như phiên bản và mô tả. Sau khi lưu tệp, bạn có thể thấy plugin này trên trang “Plugins” trong WordPress Admin. Plugin này vẫn chưa được kích hoạt (chưa được sử dụng).

Triển khai tính năng: Thêm action hook

Logic của các plugin chủ yếu được tích hợp vào hệ thống Hook của WordPress. Chúng ta sẽ sử dụng cơ chế này để triển khai các chức năng cần thiết. wp_footer This action hook is used to display a piece of text at the bottom of the website page.

Dưới phần chú thích ở đầu plugin, hãy thêm đoạn mã sau:

// 在网站页脚添加自定义文本
function mfp_add_footer_text() {
    echo '<p style="text-align: center; color: #666;">Cảm ơn bạn đã đọc! Phần chân trang này được tạo ra bởi “My First Feature Plugin”.</p>';
}
add_action( 'wp_footer', 'mfp_add_footer_text' );

Ở đây, chúng ta đã tạo ra một thứ có tên là… mfp_add_footer_text Hãy sử dụng hàm tùy chỉnh đó, sau đó áp dụng nó. add_action() Hàm này sẽ “gắn” (mount) hàm kia vào hệ thống. wp_footer Nó được đặt trên chiếc móc này. Khi WordPress thực hiện việc hiển thị nội dung ở phần chân trang (footer), nó sẽ tự động gọi hàm của chúng ta và hiển thị đoạn HTML tương ứng.

Đọc thêm Hãy cùng xây dựng từng bước plugin WordPress đầu tiên của bạn: từ những kiến thức cơ bản đến việc phát triển thực tế.。

Thêm trang cấu hình quản lý cho plugin

Một plugin có chức năng hoàn chỉnh thường cần một giao diện cấu hình nền để người dùng có thể điều chỉnh hành vi của plugin mà không cần phải thay đổi mã nguồn. Chúng ta sẽ tạo một trang tùy chọn đơn giản.

Tạo mục menu quản lý

Trước hết, chúng ta cần sử dụng… add_action( ‘admin_menu’, … ) Hãy thêm một mục menu mới vào giao diện quản trị. Tiếp tục thêm đoạn mã sau vào tệp plugin chính của bạn:

// 添加管理菜单
function mfp_add_admin_menu() {
    add_menu_page(
        '我的插件设置',          // 页面标题
        '我的插件',             // 菜单标题
        'manage_options',       // 权限要求
        'mfp-settings',         // 菜单slug
        'mfp_settings_page',    // 显示页面内容的回调函数
        'dashicons-admin-generic', // 图标（使用Dashicons）
        30                      // 菜单位置
    );
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );

add_menu_page() Hàm này là một API được cung cấp bởi phần cốt lõi của WordPress, dùng để thêm các mục menu cấp cao vào thanh điều hướng bên trái. Chúng ta đã chỉ định quyền truy cập cần thiết cho việc sử dụng hàm này. manage_optionsThông thường, chỉ có quản trị viên mới có thể truy cập vào nó.

Hosting.com - lưu trữ chia sẻ

Hiệu năng cao, được trang bị CPU AMD EPYC, lưu trữ SSD NVMe và LiteSpeed, hỗ trợ chuyên gia nội bộ 24 giờ/ngày, các biện pháp bảo mật tiên tiến bao gồm SSL, chống brute force, phần mềm độc hại và bảo vệ DDoS, tiết kiệm tới 73%.

Truy cập trang

Xây dựng trang cấu hình và biểu mẫu

Tiếp theo, chúng ta cần định nghĩa các hàm gọi lại (callback functions) được đề cập ở trên. mfp_settings_page Trình bày nội dung HTML của trang cấu hình để hiển thị trên màn hình, đồng thời xử lý việc lưu trữ dữ liệu từ biểu mẫu.

// 设置页面的HTML内容
function mfp_settings_page() {
    // 检查用户权限
    if ( !current_user_can( ‘manage_options’ ) ) {
        return;
    }

// 处理表单提交
    if ( isset( $_POST[‘mfp_footer_text’] ) ) {
        // 验证和清理输入数据
        $new_text = sanitize_text_field( $_POST[‘mfp_footer_text’] );
        // 使用 update_option 将数据保存到数据库
        update_option( ‘mfp_footer_text’, $new_text );
        echo ‘<div class="“notice" notice-success is-dismissible”><p>Cài đặt đã được lưu!</p></div>’;
    }

// 从数据库获取现有值，用于填充表单
    $current_text = get_option( ‘mfp_footer_text’, ‘这是默认的页脚文本。’ );
    ?&gt;
    <div class="“wrap”">
        <h1>Cài đặt plugin của tôi</h1>
        <form method="“post”" action="/vi/“”/" data-trp-original-action="“”">
            <?php wp_nonce_field( ‘mfp_save_settings’, ‘mfp_settings_nonce’ ); ?>
            <table class="“form-table”">
                <tr>
                    <th scope="“row”"><label for="“mfp_footer_text”">Văn bản chân trang tùy chỉnh</label></th>
                    <td>
                        <input name="“mfp_footer_text”" type="“text”" id="“mfp_footer_text”" value="“NO NUMERIC NOISE KEY" 1001” class="“regular-text”">
                        <p class="“description”">Nội dung này sẽ được hiển thị ở phía dưới mọi trang trên trang web.</p>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        <input type="hidden" name="trp-form-language" value="vi"/></form>
    </div>
    &lt;?php
}

This function performs several key tasks: permission verification and form submission processing (using…) update_option Bao gồm việc lưu trữ dữ liệu, cũng như việc hiển thị (rendering) giao diện của các biểu mẫu (form interfaces). Lưu ý rằng công cụ được sử dụng là… sanitize_text_field() 和 esc_attr() Sử dụng các hàm bảo mật để ngăn chặn các cuộc tấn công XSS.

Make the functionality configurable.

Bây giờ, chúng ta cần sửa đổi hàm dùng để hiển thị nội dung chân trang (footer) mà chúng ta đã tạo trước đó, để nó lấy dữ liệu từ cơ sở dữ liệu dựa trên cài đặt của người dùng thay vì hiển thị những văn bản được khóa (hard-coded).

Đọc thêm Thành thạo phát triển plugin WordPress từ đầu: Hướng dẫn hoàn chỉnh và thực hành thực tế。

// 更新页脚文本函数，使其可配置
function mfp_add_footer_text() {
    // 从数据库获取保存的文本，如果没有则使用默认值
    $footer_text = get_option( ‘mfp_footer_text’, ‘感谢阅读！本页脚由“我的第一个功能插件”生成。’ );
    if ( !empty( $footer_text ) ) {
        echo ‘<p style="“text-align:" center; color: #666;”>’ . esc_html( $Footer_text ) . ‘</p>’;
    }
}
add_action( ‘wp_footer’, ‘mfp_add_footer_text’ );

Như vậy, một plugin với các chức năng quản trị cơ bản đã được hoàn thành. Người dùng có thể thay đổi nội dung văn bản trên phía backend, và những thay đổi đó sẽ được hiển thị ngay lập tức trên trang web phía frontend.

Best Practices and Security in Plugin Development

Việc tuân theo các thực hành tốt nhất không chỉ giúp nâng cao chất lượng mã nguồn mà còn đảm bảo tính bảo mật và tính tương thích của các plugin.

Máy chủ chia sẻ của InterServer

Lưu trữ chia sẻ với mức phí $2,50 USD mỗi tháng, giảm giá $0,1 USD trong tháng đầu tiên, mã giảm giá tryinterserver, với 461 ứng dụng đám mây và cài đặt chỉ bằng một cú nhấp chuột.

Truy cập trang

Sử dụng tiền tố và không gian tên (prefixes and namespaces)

Tất cả các hàm, lớp, biến, và tên tùy chọn mà bạn định nghĩa đều nên sử dụng một tiền tố duy nhất để tránh xung đột với phần cốt lõi của WordPress, các chủ đề (theme), hoặc các plugin khác. Trong ví dụ này, chúng ta đã sử dụng… mfp_ “(My First Plugin)” được sử dụng như một tiền tố (prefix) cho các plugin đơn giản. Đối với những plugin phức tạp hơn, bạn nên cân nhắc sử dụng không gian tên (namespace) trong PHP.

Xác thực, làm sạch và thoát dữ liệu

Đây chính là yếu tố cốt lõi trong việc bảo mật các plugin. Mọi dữ liệu đầu vào từ người dùng (kể cả quản trị viên) đều phải được coi là không đáng tin cậy.
* 验证 (Validation): 检查数据是否符合预期格式（如是否为邮箱、数字）。
* 清理 (Sanitization): 在将数据存入数据库或用于其他操作前，移除其中的非法或危险字符。我们使用了 sanitize_text_field()。
* 转义 (Escaping): 在将数据从数据库输出到 HTML、JavaScript 或 URL 时，进行转义以防止 XSS 攻击。我们使用了 esc_html() 和 esc_attr()。

Chuẩn bị cho quá trình quốc tế hóa

Để các plugin có thể được dịch bởi người dùng trên toàn thế giới, tất cả các chuỗi ký tự dành cho người dùng đều cần được bao bọc bằng các hàm quốc tế hóa (internationalization functions) của WordPress. Hãy sửa đổi cách hiển thị các chuỗi ký tự của chúng ta.

echo ‘<p style="“text-align:" center; color: #666;”>’ . esc_html__( ‘感谢阅读！本页脚由“我的第一个功能插件”生成。’, ‘my-first-plugin’ ) . ‘</p>’;

Và đảm bảo rằng bạn đã thiết lập đúng thông tin trong phần chú thích ở đầu plugin. Text DomainSau đó, sử dụng các công cụ như Poedit để tạo tệp mẫu có định dạng .pot.

Gỡ lỗi, kiểm thử và chuẩn bị phát hành

Trước khi đưa plugin vào môi trường sản xuất hoặc gửi nó đến danh mục chính thức, việc kiểm thử kỹ lưỡng là điều cực kỳ quan trọng.

Kích hoạt chế độ gỡ lỗi (Debug Mode)

Trong tệp cấu hình của WordPress wp-config.php Trong quá trình phát triển ứng dụng, việc bật chế độ gỡ lỗi (debug mode) sẽ giúp bạn nhìn thấy các lỗi, cảnh báo và thông báo từ PHP, điều này rất hữu ích cho quá trình phát triển ứng dụng.

define( ‘WP_DEBUG’, true );
define( ‘WP_DEBUG_LOG’, true ); // 将错误记录到 wp-content/debug.log 文件
define( ‘WP_DEBUG_DISPLAY’, false ); // 不在页面上直接显示错误

Thực hiện các bài kiểm thử về chức năng và tính tương thích.

• Kiểm tra chức năng: Kiểm tra lần lượt tất cả các chức năng của plugin: kích hoạt/vô hiệu hóa, lưu cài đặt, đầu ra front-end có chính xác không.
• Kiểm thử tương thích: Kiểm thử plugin của bạn trong các môi trường WordPress phiên bản khác nhau (đặc biệt là các phiên bản cũ hơn), phiên bản PHP (7.4+ và 8.x), cũng như với các chủ đề phổ biến và các plugin thông dụng khác.
• Kiểm tra bảo mật: Có thể sử dụng công cụ tự động hoặc kiểm tra mã thủ công để đảm bảo không có các lỗ hổng như SQL injection, XSS, CSRF. Trường Nonce chúng tôi đã thêm trước đây chính là để ngăn chặn CSRF.

Chuẩn bị công bố tệp tin.

Nếu dự định công bố tài liệu đó, cần có một cấu trúc tệp tin chuẩn. Thông thường, cấu trúc này bao gồm:
* 主插件文件 (如 my-first-plugin.php)
* readme.txtNội dung phải được viết theo định dạng của WordPress.org, dùng để hiển thị trên trang danh mục các plugin.
* assets Thư mục: Dùng để lưu trữ các biểu tượng, hình ảnh chụp màn hình, v.v.
* languages Thư mục: Dùng để lưu trữ các tệp dịch (.po/.mo).
* includes Thư mục: Dùng để lưu trữ các tệp lớp PHP khác.
* uninstall.phpXác định các thao tác dọn dẹp khi plugin bị xóa (chẳng hạn như việc xóa các thông tin trong cơ sở dữ liệu).

Tóm lại

Thông qua hướng dẫn này, bạn đã hoàn thành toàn bộ quy trình phát triển một plugin chức năng cơ bản cho WordPress: từ việc tạo tệp chính chứa thông tin tiêu đề tiêu chuẩn, sử dụng các hook hành động (action hooks) để thêm chức năng mới, cho đến việc xây dựng trang cấu hình nền tảng hoàn chỉnh và đảm bảo tính bảo mật cho nó. Chúng tôi đã nhấn mạnh đến các thực tiễn tốt nhất như việc sử dụng tiền tố (prefixes), xử lý dữ liệu một cách an toàn, và hỗ trợ đa ngôn ngữ (internationalization), đồng thời cũng giới thiệu ngắn gọn về các bước chuẩn bị trước khi gỡ lỗi (debugging) và phát hành plugin.

Hãy nhớ rằng, bí quyết của việc phát triển plugin nằm ở việc hiểu rõ và sử dụng một cách khéo léo hệ thống Hooks và Filters phong phú của WordPress. Từ plugin nhỏ này, bạn có thể tiếp tục khám phá cách thêm các Shortcode, Widget, loại bài viết tùy chỉnh (Custom Post Types – CPT), hoặc các điểm cuối (Endpoints) của REST API, để xây dựng những plugin chuyên nghiệp, linh hoạt và tuân thủ các tiêu chuẩn.

FAQ 常见问题

Plugin phải được đặt trong thư mục nào?

Plugin WordPress phải được đặt trong wp-content/plugins/ Các plugin thường nằm trong thư mục tương ứng. Mỗi plugin có thể là một tệp PHP độc lập (đặc biệt là đối với những plugin có cấu trúc đơn giản), nhưng phương pháp phổ biến hơn là tạo một thư mục mang tên tương ứng với tên plugin đó, và đặt tệp chính cùng các tệp nguồn khác bên trong thư mục đó.

Làm thế nào để xóa dữ liệu được tạo ra bởi các plugin?

Khi người dùng nhấp vào nút “Xóa” plugin ở phía sau hậu trường, theo mặc định chỉ có tệp tin của plugin được xóa; các thông tin liên quan đến plugin (như các bảng tùy chọn được lưu trữ trong cơ sở dữ liệu) sẽ không bị ảnh hưởng.wp_optionsDữ liệu trong đó sẽ được giữ nguyên. Để làm sạch hoàn toàn, bạn cần tạo một… uninstall.php Tệp tin, và sử dụng nó bên trong. delete_option() Đây là một hàm được sử dụng để xóa các tùy chọn liên quan. Tệp tin này chỉ được thực thi khi người dùng xóa plugin thông qua tính năng xóa trong WordPress.

Sự khác biệt giữa các hành động (Actions) và bộ lọc (Filters) trong Hook là gì?

Action Hooks (Các Hook Hành động) – Cách sử dụng chúng add_action()Nó cho phép bạn chèn và thực thi một đoạn mã vào WordPress tại một thời điểm cụ thể, và đoạn mã này không yêu cầu phải trả về giá trị nào. Ví dụ, bạn có thể thực thi một hàm trong phần đầu trang (header), phần chân trang (footer), hoặc khi một bài viết được đăng.

Hook bộ lọc (Filter Hooks, sử dụng add_filter()Nó cho phép bạn thay đổi dữ liệu được truyền trong quá trình xử lý. Hàm này nhận một giá trị vào, xử lý nó và sau đó phải trả về một giá trị khác. Ví dụ, bạn có thể thay đổi tiêu đề bài viết, nội dung bình luận hoặc kết quả truy vấn.

Tại sao plugin của tôi không hiển thị trong giao diện backend?

Trước hết, vui lòng kiểm tra xem tệp PHP chính của plugin của bạn có nằm trong thư mục đúng hay không, và xem phần ghi chú về đầu plugin (đặc biệt là…) có đầy đủ thông tin cần thiết hay không. Plugin Name:Trước hết, hãy kiểm tra xem định dạng của tệp có chính xác và không có lỗi nào không. Sau đó, hãy kiểm tra xem tệp có chứa lỗi ngữ pháp hay không. Bạn có thể thực hiện việc này bằng các công cụ chuyên dụng hoặc bằng cách đọc nội dung tệp một cách cẩn thận để phát hiện wp-config.php Bật ở giữa WP_DEBUG Hãy kiểm tra để xem có thông tin lỗi nào không.