Thành thạo phát triển plugin WordPress: Xây dựng mô-đun mở rộng đầu tiên của bạn từ con số 0 đến 1

Hiểu cấu trúc cơ bản của plugin WordPress

Các plugin của WordPress về bản chất là một hoặc nhiều tệp PHP, tuân theo một cấu trúc đặc biệt về tên gọi và tổ chức nội dung. Chúng được sử dụng để mở rộng hoặc thay đổi các chức năng cốt lõi của WordPress thông qua hệ thống “Hook” được cung cấp bởi nền tảng này. Việc hiểu rõ cấu trúc này là bước đầu tiên quan trọng để phát triển các plugin một cách thành công.

Một plugin đơn giản nhất chỉ cần một tệp chính (main file) và một dòng chú thích ở đầu tệp plugin (plugin header comment). Dòng chú thích này rất quan trọng vì WordPress sử dụng nó để nhận diện plugin; nó phải được đặt ở đầu tệp PHP chính. Ví dụ, một plugin có tên…my-first-plugin.phpĐối với tệp tin này, phần nội dung bắt đầu phải được trình bày như sau:

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个用于演示的简单WordPress插件。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 */

Đoạn chú thích này thông báo cho giao diện quản lý plugin của WordPress rằng đây là một plugin có tên “My First Plugin” (Tôi’s First Plugin). Hãy tạo tập tin này và đặt nó vào đúng vị trí được yêu cầu./wp-content/plugins/my-first-plugin/Sau khi thêm mục đó vào danh mục, bạn có thể tìm thấy nó trên trang “Các tiện ích mở rộng” (Plugins) trong giao diện quản trị WordPress, và từ đó kích hoạt hoặc vô hiệu hóa nó tùy theo nhu cầu.

Đọc thêm Học cách phát triển plugin cho WordPress từ đầu: Xây dựng chức năng tùy chỉnh đầu tiên của bạn。

Cơ chế hoạt động cốt lõi của plugin dựa trên các “hook” (khớp nối). Có hai loại hook: Action và Filter. Hook loại Action cho phép bạn thực thi mã tự định vào những thời điểm nhất định (chẳng hạn khi đăng bài hoặc tải trang). Hook loại Filter cho phép bạn thay đổi dữ liệu được tạo ra trong quá trình xử lý (chẳng hạn nội dung bài viết, tiêu đề). Mã của plugin chủ yếu được thực hiện thông qua các hook này.add_action()和add_filter()Hai hàm này được “gắn” (mount) vào những điểm kết nối (hooks) đó.

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

Xây dựng môi trường phát triển plugin đầu tiên của bạn

Trước khi bắt tay vào lập trình, một môi trường phát triển địa phương (local development environment) đáng tin cậy là điều vô cùng quan trọng. Nó giúp bạn thực hiện các bước kiểm thử và gỡ lỗi một cách an toàn.

Chọn công cụ máy chủ địa phương phù hợp

Chúng tôi khuyên bạn nên sử dụng các giải pháp máy chủ địa phương tích hợp sẵn, như Local by Flywheel, XAMPP hoặc MAMP. Những công cụ này cho phép bạn cài đặt một môi trường hoàn chỉnh bao gồm PHP, MySQL, Apache/Nginx chỉ với một cú nhấp chuột, từ đó giúp giảm đáng kể thời gian và công sức trong quá trình cấu hình. Trong số đó, Local by Flywheel được đặc biệt thiết kế để hỗ trợ tốt nhất cho WordPress, cho phép bạn tạo và sao chép các trang web WordPress một cách nhanh chóng.

Khởi tạo thư mục và tệp tin của plugin

Trên trang web WordPress cục bộ của bạn…wp-content/plugins/Trong thư mục, hãy tạo một thư mục riêng cho plugin của bạn. Tên thư mục nên bao gồm chữ cái viết thường, số và dấu gạch chéo, và nên tương ứng càng nhiều càng tốt với tên tệp chính của plugin. Ví dụ: hãy tạo thư mục này.greeting-pluginVà tạo ra tệp chính (main file) bên trong đó.greeting-plugin.php。

Để đảm bảo mã nguồn được tổ chức một cách rõ ràng và dễ hiểu, bạn nên áp dụng cấu trúc mô-đun ngay từ đầu. Một thư mục chứa các plugin cơ bản có thể được sắp xếp như sau:

Đọc thêm Phân Tích Chuyên Sâu Phát Triển Plugin WordPress: Từ Nhập Môn Đến Tùy Chỉnh Hiệu Quả。

greeting-plugin/
├── greeting-plugin.php      // 主文件，包含插件头部注释和核心逻辑
├── includes/                // 存放核心功能类或函数文件
├── admin/                   // 存放后台管理界面相关文件
├── public/                  // 存放前端功能相关文件
├── assets/                  // 存放CSS、JavaScript和图片资源
│   ├── css/
│   ├── js/
│   └── images/
└── languages/               // 存放国际化翻译文件（可选）

Thực hiện các chức năng cốt lõi và quản trị hậu cần.

Hãy cùng kết hợp những gì chúng ta đã học thông qua một ví dụ cụ thể: tạo một plugin để hiển thị lời chào cá nhân hóa trên trang web, đồng thời cho phép người dùng tự định nghĩa nội dung lời chào đó ở phía sau hậu trường (phần quản trị).

Create basic functional functions

Trước hết, chúng ta sẽ làm việc với tệp chính (main file).greeting-plugin.phpDưới phần chú thích ở đầu, hãy viết một hàm chức năng cốt lõi. Hàm đó sẽ thực hiện một nhiệm vụ cụ thể được chỉ định.display_greeting()Dùng để lấy lời chào hỏi và chuẩn bị để hiển thị.

function display_greeting() {
    // 从WordPress选项中获取存储的问候语，默认为“欢迎光临！”
    $greeting_text = get_option('my_greeting_text', '欢迎光临！');
    // 将问候语进行安全转义后返回
    return '<p class="custom-greeting">'`. esc_html($greeting_text)`.'</p>';
}

Để lời chào này được hiển thị sau nội dung bài viết, chúng ta cần sử dụng các “action hook” (khung lệnh xử lý hành động).the_contentChúng ta hãy tạo một hàm mới.append_greeting_to_content()Và hãy gắn nó vào khớp đó.

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 append_greeting_to_content( $content ) {
    // 只在单篇文章和页面中追加问候语
    if ( is_single() || is_page() ) {
        $content .= display_greeting();
    }
    return $content;
}
// 将函数挂载到‘the_content’过滤器
add_filter( 'the_content', 'append_greeting_to_content' );

Thêm menu quản lý plugin và trang cấu hình.

Để 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ị của WordPress. Việc này thường được thực hiện trong phần cài đặt nội dung (Content Settings) hoặc phần quản lý người dùng (User Management).admin/Hãy tạo một tệp riêng biệt trong thư mục con để xử lý nội dung cần thiết, ví dụ như vậy.admin/settings-page.php。

Trước hết, hãy sử dụng nó trong tệp chính (main file).add_action()Hãy thêm một hàm để tạo menu quản lý việc gắn (mounting).

// 仅在后台加载时引入管理页面代码
if ( is_admin() ) {
    require_once plugin_dir_path( __FILE__ ) . 'admin/settings-page.php';
}

在admin/settings-page.phpTrong tệp tin này, chúng ta viết mã để tạo menu và xử lý các biểu mẫu (form). Hàm chính (key function) là…add_options_page()。

Đọc thêm Hướng dẫn từ đầu: Tạo ra plugin WordPress đầu tiên của bạn。

function my_greeting_add_admin_menu() {
    add_options_page(
        '问候语设置',          // 页面标题
        '自定义问候语',        // 菜单标题
        'manage_options',      // 所需权限
        'greeting-settings',   // 菜单slug
        'my_greeting_settings_page' // 用于显示页面内容的回调函数
    );
}
add_action( 'admin_menu', 'my_greeting_add_admin_menu' );

function my_greeting_settings_page() {
    ?>
    <div class="wrap">
        <h1>Cài đặt lời chào hỏi</h1>
        <form method="post" action="/vi/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'greeting_settings_group' ); // 设置组名
            do_settings_sections( 'greeting-settings' ); // 页面slug
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="vi"/></form>
    </div>
    &lt;?php
}

Tiếp theo, chúng ta cần đăng ký một tùy chọn cài đặt.my_greeting_textVà hãy thêm một trường nhập dữ liệu cho nó. Điều này được thực hiện bằng cách…register_setting()、add_settings_section()和add_settings_field()hàm hoàn thành.

function my_greeting_settings_init() {
    register_setting( 'greeting_settings_group', 'my_greeting_text' );

add_settings_section(
        'greeting_settings_section',
        '编辑问候文本',
        null,
        'greeting-settings'
    );

add_settings_field(
        'my_greeting_field',
        '问候语内容',
        'my_greeting_field_render',
        'greeting-settings',
        'greeting_settings_section'
    );
}
function my_greeting_field_render() {
    $value = get_option( 'my_greeting_text', '欢迎光临！' );
    echo '<input type="text" name="my_greeting_text" value="' . esc_attr( $value ) . '" class="regular-text">';
}
add_action( 'admin_init', 'my_greeting_settings_init' );

Hiện nay, người dùng có thể chỉnh sửa nội dung văn bản trên trang “Cài đặt” -> “Lời chào tùy chỉnh”. Lời chào đã được cập nhật sẽ được hiển thị ở cuối các bài viết và nội dung trang trên giao diện người dùng.

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

Chuẩn bị cho việc bảo mật, tối ưu hóa và phát hành plugin

Một plugin đáp ứng các yêu cầu cơ bản không chỉ cần có thể chạy được mà còn phải an toàn, hiệu quả và dễ bảo trì.

Thực hiện các phương pháp bảo mật tốt nhất

An toàn là yếu tố cần được xem xét hàng đầu. Mọi dữ liệu được thu thập từ người dùng, lấy ra từ cơ sở dữ liệu, hoặc được hiển thị trên giao diện người dùng (frontend) đều phải được xử lý để loại bỏ các nguy cơ liên quan đến lỗi (như xác thực dữ liệu, kiểm tra độ dài, v.v.). Hãy sử dụng các hàmesc_html()、esc_attr()、wp_kses_post()V.v. Khi xử lý việc gửi biểu mẫu và các yêu cầu không sử dụng AJAX, hãy nhớ sử dụng các phương thức phù hợp.wp_verify_nonce()和check_admin_referer()Điều này nhằm xác thực tính hợp lệ của yêu cầu, ngăn chặn các cuộc tấn công xâm nhập từ nơi khác (Cross-Site Request Forgery – CSRF).

Đối với bất kỳ tập lệnh frontend hoặc bảng định kiểu nào do plugin giới thiệu, phải sử dụngwp_enqueue_script()和wp_enqueue_style()Hãy thực hiện quá trình đăng ký và tải dữ liệu một cách chính xác. Điều này sẽ đả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à tránh được xung đột. Đồng thời, hãy sử dụng những thông tin được tải về để tạo các đối tượng script của bạn.wp_localize_script()Cách truyền biến PHP sang JavaScript một cách an toàn:

Internationalization and Localization

Để plugin có thể được sử dụng bởi người dùng trên toàn thế giới, nó cần hỗ trợ tính quốc tế hóa (internationalization). Điều này có nghĩa là bạn cần thay thế tất cả các chuỗi văn bản dành cho người dùng trong plugin bằng những phiên bản phù hợp với các ngôn ngữ khác nhau.__()或_e()Hãy đóng gói các hàm dịch trong một lớp (class). Đặt các đoạn mã liên quan đến việc này trong phần ghi chú ở đầu tệp chính (header of the main file).Text DomainTên phải trùng khớp với tên thư mục chứa các plugin. Ví dụ:
Text Domain: greeting-plugin

Sau đó, bạn có thể sử dụng các công cụ dịch thuật (chẳng hạn như Poedit) để tạo ra bản dịch cần thực hiện..potĐây là tệp mẫu; những người dịch có thể sử dụng nó để tạo ra các tài liệu mới..po和.moCác tệp tin được lưu trữ trong plugin.languages/trong thư mục.

Chuẩn bị đăng lên danh mục chính thức của WordPress.

Nếu bạn dự định gửi plugin của mình đến danh mục plugin trên WordPress.org, bạn cần phải chuẩn bị thêm một số thứ. Đầu tiên, hãy đảm bảo rằng mã nguồn của plugin tuân thủ các tiêu chuẩn lập trình của WordPress. Thứ hai, hãy tạo một tài liệu hướng dẫn sử dụng chi tiết và đầy đủ cho plugin của bạn.readme.txtTệp tin phải tuân thủ định dạng theo yêu cầu của thư mục, bao gồm phần mô tả, hướng dẫn cài đặt, ảnh chụp màn hình, nhật ký cập nhật, v.v. Bạn cũng cần phải gửi plugin đó lên kho lưu trữ SVN và đảm bảo rằng cấu trúc thư mục đúng theo quy định. Trước khi phát hành, hãy thực hiện kiểm thử tính tương thích kỹ lưỡng giữa các phiên bản khác nhau, các chủ đề khác nhau, và với các plugin khác.

Tóm lại

Việc phát triển plugin cho WordPress là quá trình biến những ý tưởng sáng tạo thành những chức năng thực tế, và yếu tố then chốt nằm ở việc hiểu rõ và vận dụng thành thạo hệ thống hook (các điểm kết nối giữa các thành phần của plugin). Bạn bắt đầu bằng cách tạo một tệp tin đơn lẻ chứa các chú thích đầu (header comments) đúng cách, sau đó từng bước xây dựng các module chức năng, đồng thời tuân thủ nghiêm ngặt các tiêu chuẩn mã hóa an toàn và hỗ trợ đa ngôn ngữ (internationalization). Qua quá trình thực hành từ việc thiết lập môi trường phát triển cục bộ, tổ chức mã nguồn theo nguyên tắc mô-đun hóa, thực hiện sự tương tác giữa giao diện người dùng (frontend) và phía máy chủ (backend), cho đến việc chuẩn bị để phát hành plugin, bạn đã nắm vững những kỹ năng cơ bản để xây dựng một plugin chuyên nghiệp và đáng tin cậy. Việc tiếp tục học hỏi về API cốt lõi của WordPress và nghiên cứu mã nguồn của các plugin xuất sắc là con đường tốt nhất để nâng cao kỹ năng phát triển của bạn.

FAQ 常见问题

Có phải để phát triển các plugin, người ta nhất định phải am hiểu sâu rộng về PHP không?

Đúng vậy, việc có một nền tảng vững chắc về PHP là điều kiện bắt buộc. WordPress được viết bằng PHP, và hầu hết các plugin cũng được phát triển bằng PHP. Bạn cần hiểu rõ ngữ pháp PHP, các hàm, lập trình hướng đối tượng, cũng như cách tương tác với cơ sở dữ liệu MySQL. Ngoài ra, kiến thức cơ bản về HTML, CSS và JavaScript cũng rất hữu ích cho việc tạo giao diện người dùng.

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

WordPress cung cấp nhiều công cụ gỡ lỗi khác nhau. Đầu tiên, trong trường hợp của bạn…wp-config.phpKích hoạt chế độ gỡ lỗi trong tệp, sẽWP_DEBUGHằng số được thiết lậptrueĐiều này sẽ hiển thị các lỗi, cảnh báo và thông báo PHP trên màn hình. Bạn cũng có thể sử dụng chúng để kiểm tra và xử lý các vấn đề liên quan đến PHP trong ứng dụng của mình.error_log()Hàm này ghi thông tin tùy chỉnh vào nhật ký lỗi của máy chủ, hoặc sử dụng các công cụ tiên tiến hơn như plugin Query Monitor – công cụ có thể phân tích các truy vấn cơ sở dữ liệu, các lệnh được thực thi (hooks), các script, v.v. Đây thực sự là công cụ hữu ích cho các nhà phát triển.

Các plugin của tôi có thể xảy ra xung đột với giao diện người dùng (theme) hoặc các plugin khác không?

Có thể. Các xung đột thường xảy ra do một số lý do sau: sử dụng cùng tên hàm, tên lớp hoặc tên hằng số; xung đột giữa các tập lệnh được tải vào hoặc các bảng định dạng (style sheets); hoặc xử lý sai thứ tự ưu tiên của các “hook” (các điểm gọi được định nghĩa trong mã nguồn). Để tránh xung đột về tên, tất cả các hàm, lớp và hằng số đều nên được đặt một tiền tố duy nhất, thường liên quan đến tên của plugin hoặc một từ viết tắt.wp_enqueue_scriptCác hàm trong loạt này có thể quản lý chu kỳ sống của tài sản một cách hiệu quả. Khi thay đổi hành vi cốt lõi, hãy xem xét kỹ lưỡng thứ tự ưu tiên và mối phụ thuộc giữa các hàm (hook).

Tôi cần tạo một bảng dữ liệu riêng biệt cho plugin của mình không?

Trong hầu hết các trường hợp, không cần thiết và cũng không được khuyến nghị việc tạo mới các bảng cơ sở dữ liệu. WordPress cung cấp các API mạnh mẽ như Options API (dùng để lưu trữ dữ liệu dạng cặp khóa-giá trị) và Post Meta/User Meta API (dùng để lưu trữ dữ liệu liên quan đến bài viết và người dùng), những API này có thể đáp ứng nhu cầu lưu trữ dữ liệu với dung lượng lên đến hơn 901TB. Chỉ khi cần lưu trữ một lượng lớn dữ liệu có mối quan hệ phức tạp và yêu cầu truy vấn nhanh chóng thì mới nên xem xét việc sử dụng các công cụ này.$wpdbLớp được tạo ra để xây dựng các bảng tùy chỉnh, nhưng điều này sẽ làm tăng đáng kể độ phức tạp của plugin.

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

Như đã đề cập trước đó, cách tiếp cận tiêu chuẩn là sử dụng API Settings của WordPress. API này giúp bạn xử lý các vấn đề liên quan đến bảo mật (chẳng hạn như xác thực nonce), kiểm tra quyền người dùng và hiển thị giao diện. Các bước cần thực hiện bao gồm:add_menu_page()hoặc các hàm được phái sinh từ nó (chẳng hạn như…)add_options_page()Thêm menu và trang (page) vào hệ thống, sau đó sử dụng chúng.register_setting()、add_settings_section()和add_settings_field()Điều này giúp định nghĩa và hiển thị các trường thiết lập cụ thể một cách chính xác. Phương pháp này an toàn và tuân thủ các quy định hơn so với việc tự tay tạo biểu mẫu và xử lý các yêu cầu gửi đi (submission requests).