Panduan Lengkap Pengembangan Plugin WordPress: Membangun Plugin Pertama Anda Dari Nol

Preparasi dan pengaturan lingkungan.

Sebelum memulai menulis kode, Anda memerlukan lingkungan pengembangan yang sesuai. Ini mencakup instalasi WordPress secara lokal, sebuah editor kode, serta pengetahuan dasar tentang PHP. Untuk lingkungan pengembangan lokal, alat-alat seperti XAMPP, MAMP, atau Local by Flywheel sangat disarankan, karena alat-alat ini dapat dengan cepat membangun lingkungan server yang mencakup PHP dan MySQL di komputer lokal Anda.

Membuat direktori dasar dan file untuk plugin

Setiap plugin WordPress harus memiliki sebuah file utama, yang berfungsi sebagai titik masuk (entry point) untuk plugin tersebut. Pertama-tama, Anda perlu membuat file tersebut di dalam direktori yang ditentukan oleh WordPress. wp-content/plugins Buatlah folder baru di dalam direktori tersebut, misalnya… my-first-pluginKemudian, buatlah sebuah file PHP utama di dalam folder tersebut. File tersebut umumnya memiliki nama yang sama dengan foldernya. my-first-plugin.php。

Pada awal file utama ini, harus terdapat sebuah komentar header informasi plugin yang standar. WordPress menggunakan informasi tersebut untuk mengenali dan menampilkan plugin Anda di antarmuka pengelolaan backend.

推荐阅读 Dari Nol ke Satu: Panduan Langsung untuk Memahami Keterampilan Inti dalam Pengembangan Plugin WordPress。

<?php
/**
 * Plugin Name:       我的第一个插件
 * 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
 * Domain Path:       /languages
 */

Memahami struktur dasar pengembangan plugin WordPress

Sebuah plugin yang memiliki fungsi yang lengkap biasanya terdiri dari lebih dari satu file. Selain file utama, Anda juga mungkin memiliki file sumber daya seperti JavaScript, CSS, gambar, serta file bahasa yang digunakan untuk pengaturan internasionalisasi (internationalization). Struktur direktori yang teratur akan membantu dalam mengorganisir dan memelihara kode tersebut.

UltaHost – Hosting untuk WordPress

Jaminan pengembalian uang dalam 30 hari, bandwidth dan basis data yang tidak terbatas, perlindungan DDoS gratis, diskon 50% untuk pembelian selama 3 tahun (dari harga normal: 50%).

halaman akses

Struktur yang direkomendasikan adalah sebagai berikut:
- my-first-plugin/ (Direktori akar plugin)
- my-first-plugin.php (File Utama)
- includes/ (Dirigunakan untuk menyimpan file-file kelas atau fungsi yang berisi fungsi-fungsi inti.)
- admin/ (Kode terkait antarmuka manajemen backend)
- public/ (Ditempatkan kode yang terkait dengan tampilan frontend.)
- assets/ (Ditempatkan untuk menyimpan sumber daya seperti CSS, JavaScript, gambar, dll.)
- languages/ (Dirikan untuk menyimpan file terjemahan internasional)

Penulisan kode PHP inti

Semua logika fungsional dari plugin tersebut diimplementasikan melalui kode PHP. WordPress menyediakan banyak sekali…动作钩子和过滤器钩子Ini adalah fondasi bagi interaksi antara plugin dengan inti (core) WordPress.

Membuat sebuah fungsi kode singkat yang sederhana

Shortcodes merupakan alat yang sangat berguna untuk memungkinkan pengguna dengan mudah memasukkan fitur plugin ke dalam artikel atau halaman web. Mari kita buat sebuah shortcode sederhana yang akan menampilkan sebuah pesan sapaan di halaman web.

Dalam file utama Anda… my-first-plugin.php Di bawah komentar header, tambahkan fungsi dan hook berikut:

推荐阅读 Analisis Mendalam Pengembangan Plugin WordPress: Membangun Ekstensi Fungsi Pertama Anda Dari Nol。

// 注册短代码
function mfp_greeting_shortcode( $atts ) {
    // 使用 shortcode_atts 设置默认参数并合并用户传入的参数
    $atts = shortcode_atts( array(
        'name' => '访客',
    ), $atts, 'mfp_greeting' );

// 返回要显示的内容
    return '<p>Halo, '. esc_html($atts['name'])'. ‘! Selamat menggunakan plugin pertamaku.</p>'php
add_shortcode('mfp_greeting', 'mfp_greeting_shortcode');

Sekarang, pengguna dapat memasukkan teks di editor artikel. [mfp_greeting name=“小明”]Pada bagian frontend, akan muncul pesan “Halo, Xiaoming! Selamat menggunakan plugin pertamaku.”

Tambahkan sebuah opsi pengaturan ke bagian backend.

Agar fitur plugin dapat dikonfigurasi, kita biasanya perlu menambahkan halaman pengaturan. Di sini akan ditunjukkan cara menambahkan halaman sub-menu ke menu “Pengaturan”.

Pertama-tama, kita menggunakan… add_action Hook (pemrograman) didaftarkan dan diatur saat administrator melakukan proses inisialisasi.

hosting.com hosting bersama

Kinerja tinggi, dilengkapi dengan CPU AMD EPYC, penyimpanan SSD NVMe, dan LiteSpeed, dukungan internal ahli 24 jam sehari, langkah-langkah keamanan canggih termasuk SSL, brute force, malware, dan perlindungan DDoS, menghemat hingga 731 TB/bulan.

halaman akses

// 初始化插件设置
function mfp_settings_init() {
    // 注册一个新的设置 section
    add_settings_section(
        'mfp_settings_section', // section ID
        '我的插件设置', // 标题
        'mfp_settings_section_callback', // 回调函数，用于输出 section 描述
        'general' // 显示在哪个设置页，这里是“常规”设置页
    );

// 在 section 内注册一个字段
    add_settings_field(
        'mfp_default_greeting', // 字段 ID
        '默认问候人名', // 字段标题
        'mfp_default_greeting_callback', // 渲染字段输入框的回调函数
        'general', // 设置页面
        'mfp_settings_section' // 所属 section
    );

// 在 WordPress 的 `option` 表中注册这个设置
    register_setting( 'general', 'mfp_default_greeting' );
}
add_action( 'admin_init', 'mfp_settings_init' );

Kemudian, definisikan kedua fungsi callback yang telah digunakan di atas untuk merender antarmuka (interface):

// Section 描述的回调函数
function mfp_settings_section_callback() {
    echo '<p>Di sini saya mengonfigurasi opsi terkait untuk plugin pertama saya.</p>';
}

// 字段输入框的回调函数
function mfp_default_greeting_callback() {
    // 从数据库获取已保存的值，如果没有则使用默认值
    $option = get_option( 'mfp_default_greeting', 'WordPress 用户' );
    // 输出一个输入框
    echo '<input type="text" name="mfp_default_greeting" value="' . esc_attr( $option ) . '" />';
}

Sekarang, Anda dapat melihat opsi pengaturan ini di bagian bawah halaman “Settings -> General” di panel administrasi WordPress (WordPress Dashboard).

Manajemen Sumber Daya Front End dan Interaksi dengan Ajax

Plugin modern umumnya memerlukan gaya tampilan (style) dan logika interaksi (interaction logic) yang khusus. WordPress menyediakan cara standar untuk mendaftarkan dan memuat file CSS serta JavaScript dengan aman.

推荐阅读 Mulai dari nol: Mengapa memilih pengembangan plugin WordPress?。

Mengunduh CSS dan JavaScript dengan aman

Jangan pernah langsung menulis kode dalam file PHP Anda. <link> 或 <script> Sumber daya berupa path tag dienkripsi secara keras (hard-coded). Sebaiknya digunakan pendekatan yang lebih fleksibel. wp_enqueue_style 和 wp_enqueue_script Fungsi.

// 注册并加载前端资源
function mfp_enqueue_public_assets() {
    // 加载一个 CSS 文件
    wp_enqueue_style(
        'mfp-public-style', // 样式表句柄
        plugin_dir_url( __FILE__ ) . 'assets/css/public-style.css', // 样式表 URL
        array(), // 依赖项
        '1.0.0' // 版本号，可用于清除缓存
    );

// 加载一个 JavaScript 文件
    wp_enqueue_script(
        'mfp-public-script', // 脚本句柄
        plugin_dir_url( __FILE__ ) . 'assets/js/public-script.js', // 脚本 URL
        array( 'jquery' ), // 依赖项，这里依赖 jQuery
        '1.0.0',
        true // 是否在页面底部加载
    );

// 重要：将 PHP 变量安全地传递到 JavaScript
    wp_localize_script(
        'mfp-public-script',
        'mfp_ajax_object', // 在 JS 中访问的对象名
        array(
            'ajax_url' => admin_url( 'admin-ajax.php' ),
            'nonce'    => wp_create_nonce( 'mfp_ajax_nonce' ),
            'default_name' => get_option( 'mfp_default_greeting', 'WordPress 用户' )
        )
    );
}
// 在前端页面加载资源
add_action( 'wp_enqueue_scripts', 'mfp_enqueue_public_assets' );
// 在后台管理页面加载资源（如果需要）
// add_action( 'admin_enqueue_scripts', 'mfp_enqueue_admin_assets' );

Membuat sebuah permintaan Ajax yang sederhana

Ajax memungkinkan interaksi dengan server tanpa perlu memperbarui halaman web. WordPress memiliki pemroses Ajax yang sudah terintegrasi (built-in).

Hosting bersama InterServer.

Hosting bersama seharga $2,50 USD per bulan, diskon $0,1 USD untuk bulan pertama dengan kode promo tryinterserver, serta 461 skrip aplikasi cloud yang dapat diinstal dengan sekali klik.

halaman akses

Pertama-tama, dalam file JavaScript di sisi front end… public-script.js Mengirimkan permintaan ke:

jQuery(document).ready(function($) {
    $('#my-button').on('click', function(e) {
        e.preventDefault();
        $.post(
            mfp_ajax_object.ajax_url, // WordPress 提供的 Ajax URL
            {
                action: 'mfp_get_server_time', // 触发的 PHP 钩子标识
                nonce: mfp_ajax_object.nonce, // 安全随机数
            },
            function(response) {
                if (response.success) {
                    $('#result-container').html('服务器时间：' + response.data);
                } else {
                    alert('请求失败：' + response.data);
                }
            }
        );
    });
});

Kemudian, proses permintaan tersebut diolah di sisi PHP. Diperlukan fungsi-fungsi pemrosesan pendaftaran yang berbeda untuk pengguna yang telah login dan yang belum login (atau bisa juga diproses secara bersamaan).

// 处理 Ajax 请求的函数
function mfp_ajax_get_server_time() {
    // 验证 nonce，防止 CSRF 攻击
    check_ajax_referer( 'mfp_ajax_nonce', 'nonce' );

// 处理逻辑
    $server_time = current_time( 'mysql' );

// 返回成功响应（JSON 格式）
    wp_send_json_success( $server_time );
}
// 为登录用户注册处理函数
add_action( 'wp_ajax_mfp_get_server_time', 'mfp_ajax_get_server_time' );
// 为未登录用户注册处理函数（如果功能允许）
add_action( 'wp_ajax_nopriv_mfp_get_server_time', 'mfp_ajax_get_server_time' );

Internasionalisasi plugin dan persiapan untuk penerbitan

Agar plugin Anda dapat digunakan oleh pengguna WordPress di seluruh dunia, proses internasionalisasi (i18n) merupakan langkah yang sangat penting. Selain itu, melakukan pengujian dan optimisasi yang menyeluruh sebelum merilis plugin juga sangatlah krusial.

Menggunakan fungsi gettext untuk menerjemahkan teks

WordPress menggunakan kerangka kerja GNU gettext untuk proses penerjemahan. Anda perlu membungkus semua teks yang ditujukan untuk pengguna (string yang ditampilkan kepada pengguna) dengan fungsi tertentu.

Modifikasi fungsi kode singkat sebelumnya agar dapat mendukung proses penerjemahan:

function mfp_greeting_shortcode_i18n( $atts ) {
    $atts = shortcode_atts( array(
        'name' => __( '访客', 'my-first-plugin' ), // 默认值也可翻译
    ), $atts, 'mfp_greeting' );

// 使用 sprintf 和 __ 函数组合翻译字符串
    return '<p>' . sprintf( __( '你好，%s！欢迎使用我的第一个插件。', 'my-first-plugin' ), esc_html( $atts['name'] ) ) . '</p>'add_shortcode( 'mfp_greeting', 'mfp_greeting_shortcode_i18n' );

Anda perlu menggunakan alat seperti Poedit untuk memindai semua elemen yang serupa dalam plugin tersebut. __(‘文本’, ‘my-first-plugin’) Menghasilkan string dari... .pot File template, kemudian buat file yang sesuai untuk setiap bahasa (misalnya, bahasa Cina). .po Dan yang telah dikompilasi .mo File tersebut, masukkanlah ke dalam… /languages Indeks.

Melakukan pengujian akhir dan pembersihan kode (final testing and code cleaning).

Sebelum merilis plugin, pastikan untuk melakukan pemeriksaan berikut:
1. Pengujian Fungsi: Aktifkan plugin pada instalasi WordPress yang baru, lalu uji apakah semua fitur (shortcode, pengaturan, Ajax, dll.) berfungsi sebagaimana diharapkan.
2. Pengujian Kode: Periksa apakah semua input dari pengguna telah dimanfaatkan dengan benar. esc_html, esc_attr, wp_kses_post Gunakan fungsi-fungsi seperti ini untuk melakukan ekstraksi data dengan aman. Apakah semua kueri terhadap basis data menggunakan mekanisme ekstraksi data yang aman tersebut? $wpdb Kelas tersebut menggunakan pernyataan persiapan (preparation statements) untuk mencegah serangan SQL injection.
3. 性能检查：确保脚本和样式只在需要的页面加载（可以使用条件标签如 is_admin(), is_single() Lakukan penilaian (evaluasi) terlebih dahulu. Hindari melakukan kueri database yang tidak perlu setiap kali halaman diunduh (diload).
4. Pembersihan File: Hapus kode debug yang digunakan selama proses pengembangan, komentar yang tidak diperlukan, serta file-file yang tidak digunakan.
5. File README: Buatlah sebuah file README yang berisi informasi yang detail dan lengkap. readme.txt File tersebut harus memiliki format yang sesuai dengan persyaratan WordPress.org, dan harus mencakup deskripsi, langkah-langkah instalasi, pertanyaan umum, serta informasi lainnya yang relevan. File ini merupakan dokumen yang wajib disertakan saat mengajukan plugin ke direktori resmi WordPress.

Menyimpulkan.

Dengan panduan ini, Anda telah menyelesaikan proses pembuatan sebuah plugin WordPress yang lengkap, mulai dari file kosong hingga plugin yang memiliki fitur kode singkat, pengaturan backend, pengunduhan sumber daya frontend, interaksi Ajax, dan dukungan internasionalisasi. Langkah-langkah utama yang perlu Anda lakukan antara lain: membangun lingkungan pengembangan dan membuat file utama yang berisi header standar; menggunakan action hooks dan filter hooks untuk menambahkan fungsi tertentu; mengelola file sumber daya dengan aman; mewujudkan komunikasi asinkron antara frontend dan backend; serta mempersiapkan terjemahan dan pengujian sebelum plugin dipublikasikan ke seluruh dunia. Ingatlah bahwa keamanan (penggunaan escape karakter, validasi data, penggunaan nonce), kinerja (pengunduhan sumber daya sesuai kebutuhan), dan pematuhan terhadap standar pengembangan WordPress (seperti kode yang terstruktur dengan baik) merupakan tiga pilar utama dalam pengembangan plugin berkualitas tinggi. Dengan terus belajar dan mempraktikkan API yang lebih canggih, seperti pengaturan jenis artikel khusus, penggunaan REST API, dan pengembangan editor Blocks, plugin Anda akan menjadi semakin kuat.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah pengembangan plugin harus menggunakan pemrograman berorientasi objek (Object-Oriented Programming/OOP)?

Tidak selalu demikian. Untuk plugin yang sederhana, penggunaan pemrograman prosedural (sekelompok fungsi) sangat memungkinkan, dan bahkan lebih sederhana serta langsung. Namun, untuk plugin yang lebih kompleks, berukuran menengah hingga besar, penggunaan pemrograman berorientasi objek (OOP) dan struktur kelas dapat membantu mengorganisir kode dengan lebih baik, mewujudkan konsep enkapsulasi dan penggunaan kembali kode (reusability), serta mengurangi kemungkinan terjadinya konflik penamaan (name conflicts). Oleh karena itu, pendekatan ini lebih disarankan.

Bagaimana cara mendeteksi dan memperbaiki masalah dalam plugin WordPress?

Pertama-tama, pastikan bahwa… wp-config.php Buka file tersebut. WP_DEBUG 和 WP_DEBUG_LOG Konstanta; dengan cara ini, pesan kesalahan akan tercatat. /wp-content/debug.log Dalam file tersebut, informasi tersebut tidak akan ditampilkan kepada pengguna. Selanjutnya, hal tersebut dapat digunakan (dapat dimanfaatkan/diterapkan). error_log() Fungsi tersebut mengeluarkan nilai variabel ke dalam log. Untuk kasus Ajax atau logika yang kompleks, panel “Jaringan” (Network) dan “Konsol” (Console) di alat pengembang browser merupakan alat bantu debugging yang sangat penting.

Bagaimana cara agar plugin saya kompatibel dengan tema atau plugin lainnya?

Praktik terbaik untuk menjaga kompatibilitas adalah: secara ketat mengikuti API resmi WordPress dan standar pemrograman; serta menambahkan prefiks unik pada nama fungsi, kelas, dan hook aksi (action hooks) yang Anda buat. mfp_Untuk menghindari konflik, pastikan variabel atau fungsi global tersebut benar-benar ada sebelum digunakan. Lakukan pemeriksaan terlebih dahulu menggunakan mekanisme yang sesuai. function_exists() 或 class_exists()); dan jelaskan dengan jelas dalam dokumen tabel basis data yang dibuat oleh plugin Anda.选项或 用户元数据。

Apa saja syarat yang diperlukan untuk mengirimkan plugin ke direktori WordPress.org?

Anda perlu memiliki akun WordPress.org, dan pastikan bahwa plugin tersebut memenuhi semua persyaratan resmi dari WordPress. Persyaratan tersebut meliputi: kode plugin harus sesuai dengan lisensi yang kompatibel dengan GPL (umumnya adalah GPLv2+); plugin tersebut harus bersifat open source (dapat diakses dan dikembangkan oleh siapa saja) dan tidak bergantung pada layanan berbayar eksternal untuk menjalankan fungsionalitas intinya; serta plugin tersebut harus menyertakan format data yang standar. readme.txt File tersebut tidak mengandung konten berbahaya atau tidak berguna, dan telah melewati pemeriksaan oleh tim audit manual. Sebelum mengirimkannya, harap membaca dengan seksama manual pengembangan plugin resmi serta panduan pengiriman yang tersedia.