Hướng dẫn thực hành dành cho người mới bắt đầu: Hướng dẫn từng bước cách phát triển plugin cho WordPress

Môi trường phát triển plugin WordPress và các bước chuẩn bị cơ bản

Trước khi bắt đầu viết mã, bạn cần một môi trường phát triển địa phương phù hợp. Môi trường này thường bao gồm một máy chủ địa phương (chẳng hạn như XAMPP, MAMP hoặc Local by Flywheel), một trình soạn thảo mã (chẳng hạn như VS Code hoặc PHPStorm), và một phiên bản WordPress được cài đặt để thử nghiệm. Hãy đảm bảo rằng phiên bản PHP của bạn tương thích với phiên bản được khuyến nghị bởi WordPress.

Trọng tâm của một plugin WordPress là một thành phần được đặt tại…/wp-content/plugins/Các thư mục nằm trong thư mục chính. Tên của thư mục này chính là mã định danh cho plugin của bạn; tốt nhất nên sử dụng ký tự thường, chữ số và dấu gạch nối. Bên trong thư mục này, phải có một tệp chính bằng ngôn ngữ PHP có cùng tên với thư mục đó. Ví dụ:my-first-plugin.phpTệp này là điểm vào (entry point) của plugin, chứa thông tin meta về plugin.

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

Hãy bắt đầu bằng cách tạo một plugin đơn giản nhất – plugin này sẽ hiển thị thông điệp chào mừng trên giao diện quản trị của trang web.

Đọc thêm Hướng dẫn toàn diện về plugin WooCommerce: Từ cấu hình cơ bản đến tùy chỉnh nâng cao。

Viết chú thích ở phần đầu của plugin

Mọi plugin của WordPress đều phải bắt đầu bằng một đoạn chú thích đặc biệt ở phần đầu (header comment). WordPress sẽ đọc những thông tin này để nhận diện và hiển thị các plugin. Trong thư mục chứa plugin của bạn (ví dụ:my-first-pluginTrong đó, hãy tạo tệp chính (main file).my-first-plugin.phpVà hãy viết đoạn mã sau:

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: 我的第一个WordPress插件
 * Plugin URI:  https://example.com/my-first-plugin
 * Description: 这是一个用于学习WordPress插件开发的入门插件，将在管理后台添加一个欢迎提示。
 * Version:     1.0.0
 * Author:      你的名字
 * Author URI:  https://example.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 đó truy cập trang “Plugins” (Các tiện ích mở rộng). Bạn sẽ thấy “My First WordPress Plugin” xuất hiện trong danh sách các tiện ích mở rộng. Lúc này bạn có thể kích hoạt nó, mặc dù nó vẫn chưa có bất kỳ chức năng nào.

Thêm chức năng đầu tiên cho plugin.

Bây giờ, hãy cùng thêm một tính năng đơn giản cho plugin này: hiển thị một thông báo quản trị tùy chỉnh ở phía trên giao diện quản trị. Chúng ta sẽ sử dụng công cụ có sẵn trong WordPress để thực hiện điều này.admin_noticesMóc.

Trong tệp chính (main file)my-first-plugin.phpDưới phần chú thích ở đầu (header comment), hãy thêm đoạn mã sau:

// 在管理后台添加一个欢迎提示
function my_first_plugin_admin_notice() {
    ?>
    <div class="notice notice-success is-dismissible">
        <p>Chào mừng bạn sử dụng “My First WordPress Plugin”! Bạn đã kích hoạt plugin này thành công.</p>
    </div>
    &lt;?php
}
add_action( &#039;admin_notices&#039;, &#039;my_first_plugin_admin_notice&#039; );

Đoạn mã này định nghĩa một biến có tên là…my_first_plugin_admin_noticeMột hàm được sử dụng để hiển thị một đoạn HTML, tạo ra một hộp thông báo thành công có thể được đóng lại.add_action()Hàm này sẽ “gắn kết” (mount) hàm tùy chỉnh này vào hệ thống WordPress.admin_noticesHãy thực hiện các bước sau: lưu file và làm mới trang quản trị của WordPress. Sau đó, bạn sẽ thấy thông báo chào mừng màu xanh lá cây ở phía trên trang.

Đọc thêm Hướng dẫn thực tế xây dựng website: Quy trình phát triển hoàn chỉnh từ con số 0 đến lên sóng và hướng dẫn lựa chọn công nghệ。

Hiểu rõ cơ chế cốt lõi của các plugin WordPress: Hook và Filter

Trọng tâm của việc phát triển plugin cho WordPress nằm ở việc tương tác với phần cốt lõi của WordPress, và điều này chủ yếu được thực hiện thông qua cơ chế được gọi là “hook”. Có hai loại hook: action và filter.

Cách sử dụng hook hành động (Action Hook)

Các “hook hành động” (action hooks) cho phép bạn chèn mã tùy chỉnh vào những thời điểm cụ thể trong quá trình thực thi của WordPress, giống như những gì chúng ta vừa sử dụng.admin_noticesMột ví dụ khác phổ biến là…initHook (móc): Nó được kích hoạt khi WordPress được khởi tạo, thường được sử dụng để đăng ký các loại bài viết tùy chỉnh (custom post types) hoặc hệ thống phân loại (custom taxonomies).

Ví dụ, chúng ta có thể thiết lập một giá trị tùy chọn khi khởi tạo plugin:

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

function my_first_plugin_set_default_option() {
    // 如果选项不存在，则添加它
    if ( false === get_option( 'my_first_plugin_greeting' ) ) {
        add_option( 'my_first_plugin_greeting', 'Hello from my plugin!' );
    }
}
add_action( 'init', 'my_first_plugin_set_default_option' );

Cách sử dụng các hook của bộ lọc (Filter Hooks)

Các hook (khớp nối) của bộ lọc cho phép bạn thay đổi dữ liệu được truyền trong quá trình xử lý. Ví dụ,the_contentCác bộ lọc (filters) cho phép bạn thay đổi nội dung được hiển thị trong bài viết. Chúng ta có thể sử dụng chúng để tự động thêm một đoạn thông tin bản quyền vào cuối mỗi bài viết.

function my_first_plugin_add_copyright( $content ) {
    // 仅对主循环中的单篇文章生效
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $copyright = '<p><em>Bài viết này được bảo hộ bản quyền; vui lòng ghi rõ nguồn khi sao chép.</em></p>';
        $content .= $copyright;
    }
    return $content;
}
add_filter( 'the_content', 'my_first_plugin_add_copyright' );

Trong ví dụ này, hàm…my_first_plugin_add_copyrightNhận được dữ liệu nguyên thủy.$contentSau khi thực hiện các điều kiện kiểm tra (đảm bảo rằng chỉ có hiệu lực trên trang của một bài viết cụ thể), một đoạn HTML đã được thêm vào cuối trang đó. Cuối cùng, phải đảm bảo rằng phiên bản bài viết đã được sửa đổi được lưu trữ đúng cách.$contentTrở lại.

Xây dựng các plugin phức tạp hơn: Các đoạn mã ngắn và trang cấu hình

Một plugin hoàn chỉnh về chức năng thường cần cung cấp khả năng tương tác từ phía người dùng (như các đoạn mã ngắn – short codes) cũng như các công cụ để cấu hình từ phía máy chủ (như các trang thiết lập – setup pages).

Đọc thêm Công cụ mạnh mẽ cho việc tối ưu hóa công cụ tìm kiếm (SEO): Xây dựng chiến lược SEO cho trang web WordPress từ đầu。

Tạo mã ngắn tùy chỉnh

Các mã ngắn (short codes) cho phép người dùng thực hiện các thao tác cụ thể bằng cách sử dụng những thẻ đơn giản (tags) như…[my_greeting]Chức năng plugin có thể được chèn vào các bài viết hoặc trang web. Để sử dụng chức năng này, bạn cần đăng ký một mã ngắn (short code).add_shortcode()Hàm.

// 注册一个简单的问候短代码
function my_first_plugin_greeting_shortcode( $atts ) {
    // 使用 shortcode_atts 定义默认属性并合并用户输入
    $attributes = shortcode_atts( array(
        'name' => '访客',
    ), $atts );

// 获取我们之前设置的选项
    $greeting_text = get_option( 'my_first_plugin_greeting', 'Hello' );

// 生成输出
    $output = '<div class="my-plugin-greeting">';
    $output .= esc_html( $greeting_text ) . ', ' . esc_html( $attributes['name'] ) . '!';
    $output .= '</div>';

return $output;
}
add_shortcode( 'my_greeting', 'my_first_plugin_greeting_shortcode' );

Bây giờ, người dùng có thể nhập nội dung vào trình soạn thảo.[my_greeting name="张三"]Trong trường hợp này, phía trước (frontend) sẽ hiển thị dòng chữ: “Hello from my plugin! Zhang San!”

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

Thêm trang cài đặt plugin

Để người dùng có thể tự định nghĩa lời chào hỏi, chúng ta cần thêm một trang cấu hình vào giao diện quản trị. Điều này bao gồm việc thêm các trang menu cấp cao hoặc con menu, cũng như xử lý việc lưu các tùy chọn từ biểu mẫu.

// 在后台“设置”菜单下添加子菜单页
function my_first_plugin_add_settings_page() {
    add_options_page(
        '我的插件设置',          // 页面标题
        '我的第一个插件',        // 菜单标题
        'manage_options',       // 所需权限
        'my-first-plugin',      // 菜单slug
        'my_first_plugin_render_settings_page' // 回调函数，用于输出页面内容
    );
}
add_action( 'admin_menu', 'my_first_plugin_add_settings_page' );

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

// 注册设置、区域和字段
function my_first_plugin_register_settings() {
    register_setting(
        &#039;my_first_plugin_settings_group&#039;, // 设置组名
        &#039;my_first_plugin_greeting&#039;        // 选项名
    );

add_settings_section(
        &#039;my_first_plugin_main_section&#039;,    // 区域ID
        &#039;问候语设置&#039;,                     // 区域标题
        null,                            // 区域回调函数（可为空）
        &#039;my-first-plugin&#039;                // 页面slug
    );

add_settings_field(
        &#039;greeting_text_field&#039;,            // 字段ID
        &#039;问候语文本&#039;,                     // 字段标题
        &#039;my_first_plugin_greeting_field_callback&#039;, // 字段HTML的回调函数
        &#039;my-first-plugin&#039;,                // 页面slug
        &#039;my_first_plugin_main_section&#039;    // 所属区域ID
    );
}
add_action( &#039;admin_init&#039;, &#039;my_first_plugin_register_settings&#039; );

// 渲染问候语输入字段
function my_first_plugin_greeting_field_callback() {
    $greeting = get_option( &#039;my_first_plugin_greeting&#039; );
    echo &#039;<input type="text" name="my_first_plugin_greeting" value="' . esc_attr( $greeting ) . '" class="regular-text" />';
}

Đoạn mã này tạo ra một trang cài đặt tiêu chuẩn cho WordPress. Khi người dùng thay đổi lời chào trên trang cài đặt và lưu lại, các đoạn mã ngắn (shortcodes) đã được tạo trước đó sẽ sử dụng văn bản lời chào mới.

Tóm lại

Thông qua hướng dẫn này, chúng ta đã cùng nhau xây dựng một plugin WordPress có các chức năng cơ bản từ con số không. Bạn đã học được cách tạo cấu trúc tệp tin của plugin, viết thông tin tiêu đề (header) cho plugin, sử dụng các hook hành động (action hooks) để gửi thông báo về phía backend, áp dụng các bộ lọc (filters) để chỉnh sửa nội dung, tạo các mã ngắn (shortcodes) để người dùng có thể gọi từ phía frontend, và xây dựng trang cấu hình hoàn chỉnh để quản lý các tùy chọn của plugin. Đây là những kỹ năng cốt lõi và cơ bản nhất trong quá trình phát triển plugin cho WordPress. Sau khi nắm vững những điều này, bạn có thể tham khảo sách hướng dẫn chính thức của WordPress để tìm hiểu sâu hơn về các API như cách tùy chỉnh bảng cơ sở dữ liệu, các điểm cuối (endpoints) của REST API, xử lý AJAX, v.v., từ đó phát triển những plugin có chức năng mạnh mẽ và chuyên nghiệp hơn.

FAQ 常见问题

开发WordPress插件需要哪些编程语言知识？

Việc phát triển các plugin cho WordPress chủ yếu đòi hỏi kiến thức về ngôn ngữ PHP, vì bản thân nền tảng WordPress được viết bằng PHP. Bạn cũng cần làm quen với HTML, CSS và JavaScript cơ bản để xây dựng giao diện người dùng (frontend) và logic tương tác của plugin. Việc nắm vững kiến thức cơ bản về SQL sẽ hữu ích trong việc xử lý các thao tác dữ liệu phức tạp hơn.

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

Trước tiên, hãy đảm bảo trongwp-config.phptrong tệpWP_DEBUGChế độ này sẽ hiển thị các lỗi và cảnh báo của PHP trên màn hình. Ngoài ra, bạn cũng có thể sử dụng…error_log()Hàm này sẽ ghi thông tin gỡ lỗi vào nhật ký lỗi của máy chủ. Đối với các trường hợp gỡ lỗi phức tạp hơn, bạn có thể xem xét sử dụng các công cụ gỡ lỗi PHP chuyên dụng như Xdebug, hoặc cài đặt các tiện ích gỡ lỗi của WordPress để hỗ trợ việc tìm kiếm và khắc phục sự cố.

Làm thế nào để tôi phát hành plugin mà tôi đã phát triển lên danh mục plugin chính thức của WordPress?

Bạn cần truy cập trang web WordPress.org và tạo một tài khoản nhà phát triển (developer account). Sau đó, sử dụng công cụ Subversion (SVN) để gửi mã nguồn của plugin của bạn lên kho lưu trữ mã được cung cấp bởi WordPress. Plugin của bạn phải tuân thủ giấy phép GPL, và chất lượng mã nguồn, tính bảo mật cũng như tài liệu hướng dẫn sử dụng phải đáp ứng các tiêu chuẩn kiểm duyệt nhất định. Sau khi vượt qua quá trình kiểm duyệt, plugin của bạn sẽ được đăng tải vào danh mục chính thức của WordPress để người dùng có thể tải về.

Làm thế nào để tải đúng cách các tệp CSS và JavaScript thuộc giao diện người dùng (frontend) của plugin?

Để tránh xung đột và đảm bảo hiệu suất, không nên trực tiếp đưa các tài nguyên vào tệp template. Cách thức đúng đắn là sử dụng…wp_enqueue_style()和wp_enqueue_script()Đối với các tài nguyên của giao diện quản trị, chúng nên được gắn (mount) vào hệ thống phù hợp.admin_enqueue_scriptsHook; Đối với các tài nguyên ở phía trước của trang web (front-end), chúng nên được gắn (mount) vào đúng vị trí thích hợp.wp_enqueue_scripts“Hook” (khóa móc). Điều này giúp đảm bảo rằng các mối phụ thuộc giữa các thành phần được thiết lập đúng cách, và cùng một tệp tin sẽ không bị tải lại nhiều lần.