Hướng dẫn bắt đầu phát triển plugin WordPress: Xây dựng plugin chức năng đầu tiên của bạn từ đầu

Trong vũ trụ bao la của Internet, WordPress chiếm một vị trí quan trọng trong số các hệ thống quản lý nội dung nhờ vào tính linh hoạt và hệ sinh thái mạnh mẽ của mình. Khả năng mở rộng cốt lõi của WordPress phần lớn phụ thuộc vào các plugin. Đối với các nhà phát triển, việc nắm vững kỹ thuật phát triển plugin không chỉ giúp họ tùy chỉnh chức năng của trang web một cách sâu rộng mà còn biến những ý tưởng sáng tạo thành những sản phẩm có thể được tái sử dụng. Bài viết này sẽ hướng dẫn bạn từ đầu, từng bước cụ thể cách tạo ra plugin WordPress đầu tiên có chức năng thực tế, giúp bạn khám phá bí mật của quá trình phát triển plugin.

Những kiến thức cơ bản về plugin WordPress và các bước chuẩn bị cần thực hiện

Trước khi bắt đầu viết dòng mã đầu tiên, việc hiểu rõ các khái niệm cơ bản về plugin WordPress và thiết lập một môi trường phát triển phù hợp là điều vô cùng quan trọng. Một plugin WordPress về cơ bản là tập hợp một hoặc nhiều tệp PHP, và có thể bao gồm thêm các tài nguyên như JavaScript, CSS, hình ảnh, v.v. Plugin có thể thêm chức năng mới hoặc sửa đổi các chức năng hiện có, và chúng hoạt động độc lập với giao diện (theme) của trang web; điều này có nghĩa là khi bạn thay đổi giao diện, các chức năng của plugin thường sẽ không bị ảnh hưởng.

Bạn cần một môi trường phát triển cục bộ (chẳng hạn như Local by Flywheel, XAMPP, MAMP) hoặc một trang web thử nghiệm dùng cho mục đích phát triển. Các công cụ cốt lõi bao gồm trình soạn thảo mã (như VS Code, PhpStorm) và công cụ phát triển trình duyệt dùng để gỡ lỗi (debugging tools). Bạn cũng cần hiểu rõ về cách thức hoạt động của WordPress.wp-content/pluginsCấu trúc thư mục là bước đầu tiên; tất cả các tiện ích mở rộng (plugin) đều được cài đặt tại đây.

Đọc thêm Bắt đầu hành trình phát triển plugin WordPress có nghĩa là bạn đã thành thục trong việc phát triển phần mềm cho toàn thế giới.。

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

Điểm nhập cảnh (entry point) của plugin là một tệp PHP chính nằm trong thư mục độc lập của nó. Tệp này cần chứa các ghi chú đầu tiên (header comments) theo tiêu chuẩn của plugin; WordPress dựa vào những ghi chú này để nhận diện và hiển thị plugin của bạn trên giao diện quản trị nề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

Định nghĩa thông tin tiêu đề của plugin

Mọi plugin đều phải bắt đầu bằng một khối chú thích PHP cụ thể. Khối chú thích này xác định thông tin cơ bản về plugin đó trong giao diện quản trị của WordPress. Trong thư mục chứa các plugin của bạn (ví dụ:wp-content/plugins/my-first-pluginTrong đó, hãy tạo một thứ có tên là…my-first-plugin.phptệp.

<?php
/**
 * Plugin Name:       我的第一个功能插件
 * Plugin URI:        https://yourwebsite.com/my-first-plugin
 * Description:       这是一个学习用的WordPress插件，用于在文章末尾添加自定义提示框。
 * Version:           1.0.0
 * Requires at least: 5.6
 * Requires PHP:      7.4
 * Author:            你的名字
 * Author URI:        https://yourwebsite.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 */

Sau khi lưu file, hãy đăng nhập vào trang quản trị WordPress của bạn, sau đó vào menu “Plugins” (Các tiện ích mở rộng). Bạn sẽ thấy tiện ích có tên “My First Feature Plugin” xuất hiện trong danh sách các tiện ích. Lúc này, bạn có thể kích hoạt nó. Mặc dù tiện ích này vẫn chưa có bất kỳ chức năng nào, nhưng bạn đã thực hiện thành công bước đầu tiên trong quá trình tạo ra một tiện ích mở rộng cho WordPress.

Cấu trúc cơ bản của một plugin

Khi số lượng chức năng tăng lên, một tệp tin duy nhất sẽ trở nên khó bảo trì. Một thực hành tốt là tạo cấu trúc thư mục có tổ chức. Ví dụ, bạn có thể tạo các thư mục con trong thư mục gốc của plugin.includes/Thư mục chứa các tệp lớp hoặc hàm PHP cốt lõi.assets/Thư mục chứa các tệp JavaScript và CSS.admin/和public/Xử lý logic của phía backend và frontend riêng biệt. Tệp chính (main file).my-first-plugin.phpChức năng của nó là hướng dẫn và tải các mô-đun này vào hệ thống.

Thực hiện các chức năng cốt lõi: Hook (khớp nối) và Filter (bộ lọc).

Triết lý cốt lõi của việc phát triển plugin cho WordPress là sử dụng “Hook” (Câu khóa – Hooks), cho phép bạn chèn mã của mình vào những thời điểm nhất định mà không cần phải thay đổi các tệp gốc của hệ thống. Có hai loại Hook chính: Action và Filter. Hook Action cho phép bạn thực thi một hàm khi một sự kiện cụ thể xảy ra, chẳng hạn như khi bài viết được đăng hoặc trang web được tải; trong khi Hook Filter cho phép bạn thay đổi dữ liệu, chẳng hạn như nội dung hoặc tiêu đề của bài viết.

Đọc thêm Từ 0 đến 1: Hướng dẫn toàn diện về phát triển plugin WordPress kèm theo các ví dụ thực tế。

Sử dụng bộ lọc để chỉnh sửa nội dung bài viết

Hãy cùng thêm chức năng đầu tiên thực sự cho plugin này: tự động hiển thị một hộp thông báo tùy chỉnh ở cuối mỗi bài viết. Chúng ta sẽ sử dụng…the_contentBộ lọc.

Trước hết, trong tệp tin plugin chính, ngay dưới phần chú thích ở đầu, hãy thêm các hàm và hook sau đây:

// 防止直接访问文件
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * 在文章内容末尾添加自定义提示框
 *
 * @param string $content 原始文章内容。
 * @return string 修改后的文章内容。
 */
function mfp_add_notice_box( $content ) {
    // 仅在主循环的单篇文章页面显示
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $notice_box = '<div class="mfp-notice" style="background-color: #f0f8ff; border-left: 4px solid #3498db; padding: 15px; margin: 20px 0; border-radius: 5px;">'$notice_box .= '<p><strong>Gợi ý:</strong> Bài viết này được hiển thị một cách nổi bật nhờ sự hỗ trợ của “My First Feature Plugin”. Hy vọng bạn thích nội dung này!</p>'$notice_box .= '</div>';
        $content .= $notice_box;
    }
    return $content;
}
add_filter( 'the_content', 'mfp_add_notice_box' );

Hàmmfp_add_notice_boxnhận nội dung gốc$contentLàm một tham số, hãy kiểm tra xem môi trường hiện tại có phải là trang hiển thị một bài viết đơn lẻ hay không. Nếu đúng, hãy nối các phần tử HTML chứa thông báo cần hiển thị lại với nhau, sau đó trả về nội dung đã được sửa đổi.add_filterHàm này sẽ gắn (mount) hàm tùy chỉnh đó vào hệ thống WordPress.the_contentTrên bộ lọc.

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

Sử dụng hành động để thêm menu cài đặt cho plugin

Để làm cho plugin trở nên hoàn thiện hơn, chúng ta thường cần cung cấp một trang cấu hình nền (backend configuration page). Ở đây, chúng ta sẽ sử dụng các hook hành động (action hooks).admin_menuHãy thêm một mục menu vào đây.

/**
 * 在WordPress后台添加插件设置菜单
 */
function mfp_add_admin_menu() {
    add_options_page(
        '我的插件设置',          // 页面标题
        '我的第一个插件',        // 菜单标题
        'manage_options',       // 所需权限
        'my-first-plugin',      // 菜单 Slug
        'mfp_render_settings_page' // 用于输出页面内容的回调函数
    );
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );

/**
 * 渲染设置页面内容
 */
function mfp_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Cài đặt plugin đầu tiên của tôi</h1>
        <form action="/vi/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            settings_fields( 'mfp_settings_group' );
            do_settings_sections( 'my-first-plugin' );
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="vi"/></form>
    </div>
    &lt;?php
}

Thông qua ví dụ này, bạn đã hiểu cách sử dụng các “action hook” để mở rộng giao diện quản trị của WordPress. Trang cấu hình hoàn chỉnh thường còn yêu cầu sử dụng thêm các công cụ khác nữa.register_setting, add_settings_section和add_settings_fieldCác hàm như vậy được sử dụng để định nghĩa và lưu trữ các tùy chọn, và chúng tạo nên nền tảng cho tính tương tác của plugin.

Thêm phong cách (styles) và mã nguồn (scripts) cho plugin

Một plugin chuyên nghiệp không chỉ cần có chức năng tốt mà còn phải có giao diện đẹp mắt, phù hợp với thiết kế tổng thể của trang web. Chúng ta cần phải đưa các tệp CSS và JavaScript vào đúng cách để tránh xung đột với chủ đề (theme) hoặc các plugin khác.

Đọc thêm Làm thế nào để lựa chọn và phát triển plugin WordPress chất lượng cao: Hướng dẫn từ cơ bản đến nâng cao。

Đăng ký và tải các tài nguyên phía trước một cách an toàn

WordPress cung cấp…wp_enqueue_style和wp_enqueue_scriptHãy sử dụng các hàm để thêm tài nguyên một cách an toàn.wp_enqueue_scriptsSử dụng các “hook” (khớp nối chức năng) để tải chúng vào hệ thống.

/**
 * 注册并加载插件的前端样式和脚本
 */
function mfp_enqueue_public_assets() {
    // 获取插件URL
    $plugin_url = plugin_dir_url( __FILE__ );

// 注册并排队样式表
    wp_enqueue_style(
        'mfp-public-style',
        $plugin_url . 'assets/css/mfp-public.css',
        array(),
        '1.0.0'
    );

// 注册并排队JavaScript文件（示例）
    wp_enqueue_script(
        'mfp-public-script',
        $plugin_url . 'assets/js/mfp-public.js',
        array('jquery'), // 依赖jQuery
        '1.0.0',
        true            // 在页脚加载
    );
}
add_action( 'wp_enqueue_scripts', 'mfp_enqueue_public_assets' );

Bạn cần phải tạo thư mục đầu tiên trong thư mục các plugin trước.assets/css/mfp-public.cssChúng ta có thể tạo ra các tệp tin, sau đó thêm các phong cách (styles) để làm đẹp hơn những hộp thông báo (prompt boxes) mà chúng ta đã tạo trước đó.

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

/* assets/css/mfp-public.css */
.mfp-notice {
    background-color: #f0f8ff;
    border-left: 4px solid #3498db;
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}
.mfp-notice p {
    margin: 0;
    color: #2c3e50;
}

Tải các tài nguyên nền (background resources)

Cách đăng ký các tài nguyên nền (backend resources) cũng tương tự, nhưng các hook (hàm được gọi tự động) được sử dụng là khác nhau.admin_enqueue_scriptsBạn cần xác định xem trang hiện tại có phải là trang cấu hình của plugin của mình hay không (ví dụ, bằng cách sử dụng một số điều kiện nhất định).get_current_screen()Các hàm được sử dụng để tải các tài nguyên một cách có chọn lọc, nhằm tránh việc tiêu tốn tài nguyên hệ thống và ảnh hưởng xấu đến hiệu năng.

Tóm lại

Bạn đã trải qua toàn bộ quá trình xây dựng một plugin đầu tiên, bắt đầu từ việc định nghĩa các thông tin cơ bản trong phần đầu của plugin, sử dụng hệ thống hook mạnh mẽ của WordPress (actions và filters) để thay đổi nội dung và cấu trúc trang web một cách dinh hồi, cho đến việc quản lý các tài nguyên về kiểu dáng (styles) và script một cách chuyên nghiệp. Trọng tâm của quá trình này nằm ở việc hiểu và tuân thủ các quy tắc phát triển của WordPress: sử dụng hook thay vì thay đổi trực tiếp phần cốt lõi của hệ thống, đăng ký và sắp xếp các tài nguyên một cách chính xác, cũng như xây dựng cấu trúc tệp tin rõ ràng. Đây chỉ mới là bước khởi đầu trong thế giới phát triển plugin mà thôi. Tiếp theo, bạn có thể khám phá những chủ đề nâng cao hơn như tạo Shortcode, tùy chỉnh các loại bài viết (Custom Post Types – CPT), tương tác với cơ sở dữ liệu (database interactions), các điểm cuối API REST (REST API endpoints), và quốc tế hóa plugin (plugin localization), để làm cho plugin của mình trở nên mạnh mẽ và thân thiện hơn với người dùng.

FAQ 常见问题

Phát triển plugin WordPress cần những kiến thức tiên quyết nào?

Bạn cần nắm vững các kỹ năng lập trình PHP cơ bản, bao gồm cách sử dụng hàm, câu lệnh điều kiện, vòng lặp và thao tác với mảng. Việc hiểu biết về HTML, CSS và một chút JavaScript cũng sẽ rất hữu ích, đặc biệt là khi bạn cần thay đổi giao diện người dùng (frontend). Điều quan trọng nhất là bạn phải hiểu rõ cách thức hoạt động của WordPress, chẳng hạn như cấu trúc của các template, vòng lặp chính (main loop) và cấu trúc cơ bản của cơ sở dữ liệu.

Làm thế nào để gỡ lỗi plugin WordPress của tôi?

Kích hoạt WordPressWP_DEBUG“Mô hình (pattern) là bước đầu tiên trong quá trình gỡ lỗi (debugging). Nó nằm trong thư mục gốc (root directory) của trang web của bạn.”wp-config.phpTrong tệp tin, hãy thực hiện các thiết lập cần thiết.define( 'WP_DEBUG', true );Điều này sẽ hiển thị các lỗi và cảnh báo của PHP trên màn hình, đồng thời ghi chúng lại vào hệ thống.wp-content/debug.logTệp tin nằm trong đó. Đồng thời, việc sử dụng các panel Console và Network trong công cụ phát triển trình duyệt (browser developer tools) sẽ giúp bạn gỡ lỗi các đoạn mã JavaScript và các yêu cầu Ajax. Đối với những logic phức tạp, bạn có thể áp dụng các công cụ hỗ trợ phát triển chuyên dụng.error_log()Các hàm hoặc các tiện ích gỡ lỗi chuyên dụng sẽ xuất thông tin về biến vào nhật ký (log).

Làm thế nào để tôi thêm các tùy chọn có thể cấu hình vào plugin của mình?

Cách tiêu chuẩn để thêm tùy chọn cấu hình cho một plugin là sử dụng API cấu hình của WordPress. Điều này liên quan đến một loạt hàm:register_setting()Dùng để đăng ký một nhóm tùy chọn cài đặt và lưu chúng một cách an toàn vào cơ sở dữ liệu;add_settings_section()Hãy thêm một khối nội dung trên trang cài đặt của bạn.add_settings_field()Trong khối nội dung đó, hãy thêm các trường biểu mẫu cụ thể (chẳng hạn như ô nhập liệu, menu thả xuống). Hàm gọi lại (callback function) trên trang cấu hình của bạn nên bao gồm những thao tác liên quan đến việc xử lý các dữ liệu từ các trường biểu mẫu này.settings_fields()和do_settings_sections()Việc gọi các hàm cần thiết để tạo ra và xác thực biểu mẫu một cách chính xác là rất quan trọng.

Làm thế nào để đảm bảo rằng plugin của tôi không xung đột với các plugin hoặc theme khác?

The key to avoiding conflicts is to follow best practices. Add a unique prefix or namespace to the names of all your functions, classes, constants, actions/filters, as well as the CSS classes in your HTML. For example, you can use something like…myplugin_function_nameNhững tên hàm như vậy, chứ không chỉ là…function_nameSử dụngwp_enqueue_style和wp_enqueue_scriptHãy tải các tài nguyên cần thiết, và đảm bảo rằng các đối tượng liên quan đến kiểu dáng (styles) và các đoạn mã script (scripts) có những tên (identifiers) duy nhất. Nếu có thể, hãy đóng gói mã nguồn của bạn vào các lớp (classes) để tách biệt rõ ràng các biến (variables) và hàm (functions) với nh

Sau khi hoàn thành quá trình phát triển, làm thế nào để phát hành plugin của tôi?

Nếu bạn muốn gửi plugin của mình đến danh mục plugin chính thức của WordPress, bạn cần đảm bảo rằng nó hoàn toàn tuân thủ các tiêu chuẩn lập trình của WordPress và giấy phép GPL. Bạn cần đăng ký một tài khoản trên WordPress.org để gửi plugin để được xem xét. Nhóm xem xét sẽ kiểm tra tính an toàn, chức năng và tài liệu hướng dẫn sử dụng của plugin. Trước khi gửi, hãy đọc kỹ hướng dẫn phát triển plugin chính thức và hướng dẫn gửi plugin. Đối với các plugin thương mại, bạn có thể lựa chọn phân phối chúng trên trang web của mình hoặc trên các thị trường bên thứ ba.