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

Sebelum memulai, pastikan Anda memiliki lingkungan WordPress lokal atau online yang digunakan untuk pengembangan dan pengujian. Lingkungan terintegrasi seperti Local, XAMPP, atau MAMP merupakan pilihan yang baik. Selain itu, Anda memerlukan komputer yang telah diinstal dengan editor kode (misalnya Visual Studio Code,PhpStorm), serta pengetahuan dasar tentang PHP, HTML, CSS, dan JavaScript.

Memiliki lingkungan pengembangan yang jelas merupakan dasar untuk semua pekerjaan selanjutnya; hal ini memungkinkan Anda untuk fokus pada logika kode, bukan pada konfigurasi lingkungan.

Buatlah file plugin pertamamu.

Sebuah plugin WordPress memerlukan setidaknya satu file PHP utama, dan file tersebut harus berisi sebuah komentar header plugin khusus yang berfungsi untuk menyediakan metainformasi kepada sistem WordPress.

推荐阅读 Panduan Lengkap Pengembangan Plugin WordPress: Membangun Plugin Profesional Dari Nol。

Komentar di bagian header plugin dan file utama

Pertama-tama, di dalam direktori instalasi WordPress… wp-content/plugins/ Di dalam folder tersebut, buatlah sebuah folder baru, misalnya… my-first-pluginDalam folder tersebut, buatlah file utama (main file). my-first-plugin.phpDi awal file, harus ditambahkan komentar header plugin standar.

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

<?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
 */

Komentar ini merupakan “kartu identitas” dari plugin tersebut. WordPress membacanya untuk memahami fungsi dan cara kerja plugin tersebut. Plugin Name Nama plugin akan ditampilkan di halaman manajemen backend, begitu pula informasi lainnya seperti versi dan deskripsi. Setelah file disimpan, Anda dapat melihat plugin yang belum diaktifkan di halaman “Plugins” di backend WordPress.

Pengimplementasian Fungsi: Menambahkan Hook Aksi (Action Hook)

Logika plugin terutama diintegrasikan melalui sistem Hook dari WordPress. Kita akan menggunakannya. wp_footer Hook aksinya ini akan menampilkan sebuah teks di bagian kaki halaman (footer) dari situs web.

Di bawah komentar di bagian atas plugin, tambahkan kode berikut:

// 在网站页脚添加自定义文本
function mfp_add_footer_text() {
    echo '<p style="text-align: center; color: #666;">Terima kasih telah membaca! Bagian kaki halaman ini dihasilkan oleh “My First Feature Plugin”.</p>';
}
add_action( 'wp_footer', 'mfp_add_footer_text' );

Di sini, kami telah membuat sebuah entitas yang bernama… mfp_add_footer_text Fungsi kustom tersebut, lalu gunakanlah. add_action() Fungsi tersebut akan “menggantungkan” (menghubungkan) fungsi lainnya ke dalamnya. wp_footer Di kait ini. Ketika WordPress menjalankan kode di bagian footer, fungsi kita akan dipanggil secara otomatis, dan paragraf HTML tersebut akan ditampilkan.

推荐阅读 Membangun Plugin WordPress Pertama Anda Secara Bertahap: Dari Pengantar hingga Pengembangan Praktis.。

Tambahkan halaman pengaturan manajemen untuk plugin.

Sebuah plugin yang memiliki fitur yang lengkap biasanya memerlukan antarmuka konfigurasi di backend, sehingga pengguna dapat menyesuaikan perilaku plugin tersebut tanpa perlu mengubah kode. Kita akan membuat halaman opsi yang sederhana.

Membuat item menu administrasi

Pertama-tama, kita perlu menggunakan… add_action( ‘admin_menu’, … ) Mari tambahkan item menu baru di backend pengelolaan. Lanjutkan menambahkan kode berikut ke dalam file plugin utama Anda:

// 添加管理菜单
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() Fungsi tersebut merupakan API yang disediakan oleh inti WordPress, yang digunakan untuk menambahkan menu utama ke bilah navigasi sebelah kiri. Kita telah menentukan hak akses (permission) yang diperlukan untuk mengakses fungsi tersebut. manage_optionsBiasanya, hanya administrator yang memiliki akses ke sana.

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

Membangun halaman pengaturan dan formulir

Selanjutnya, kita perlu mendefinisikan fungsi panggilan balik (callback function) yang telah disebutkan di atas. mfp_settings_page Menghasilkan konten HTML untuk halaman pengaturan, serta menangani proses penyimpanan data dari formulir.

// 设置页面的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>Pengaturan telah disimpan!</p></div>’;
    }

// 从数据库获取现有值，用于填充表单
    $current_text = get_option( ‘mfp_footer_text’, ‘这是默认的页脚文本。’ );
    ?&gt;
    <div class="“wrap”">
        <h1>Pengaturan plugin saya</h1>
        <form method="“post”" action="/id/“”/" 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”">Teks kaki halaman yang disesuaikan (Custom footer text)</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”">Teks ini akan ditampilkan di bagian bawah semua halaman situs web.</p>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Fungsi ini menyelesaikan beberapa tugas penting, yaitu pemeriksaan hak akses dan pemrosesan pengiriman formulir (dengan menggunakan…) update_option Penyimpanan data, serta rendering antarmuka formulir. Perhatikan bahwa teknik tertentu telah digunakan dalam proses tersebut. sanitize_text_field() 和 esc_attr() Gunakan fungsi keamanan untuk mencegah serangan XSS.

Membuat fitur dapat dikonfigurasi

Sekarang, kita perlu memodifikasi fungsi yang sebelumnya digunakan untuk menghasilkan teks di bagian kaki halaman, agar fungsi tersebut membaca pengaturan pengguna dari basis data, bukan hanya menampilkan teks yang telah dikodekan secara tetap (hard-coded).

推荐阅读 Belajar mengembangkan plugin WordPress dari nol: panduan lengkap dan latihan praktis.。

// 更新页脚文本函数，使其可配置
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’ );

Dengan demikian, plugin dengan fitur manajemen backend dasar telah selesai dibuat. Pengguna dapat mengubah teks di backend, dan perubahan tersebut akan langsung terlihat di situs web frontend.

Best Practices and Security in Plugin Development

Mengikuti praktik terbaik tidak hanya dapat meningkatkan kualitas kode, tetapi juga dapat memastikan keamanan dan kompatibilitas plugin.

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

Menggunakan prefiks dan namespace

Semua fungsi, kelas, variabel, dan nama opsi yang Anda definisikan harus menggunakan prefiks yang unik untuk menghindari konflik dengan inti WordPress, tema, atau plugin lainnya. Dalam contoh ini, kami menggunakan… mfp_ “My First Plugin” digunakan sebagai awalan nama plugin pertama Anda. Untuk plugin yang lebih kompleks, Anda dapat mempertimbangkan untuk menggunakan namespace PHP.

Data Validation, Cleaning, and Escaping

Inilah inti dari keamanan plugin: semua input yang berasal dari pengguna (termasuk administrator) harus dianggap tidak dapat dipercaya.
* 验证 (Validation): 检查数据是否符合预期格式（如是否为邮箱、数字）。
* 清理 (Sanitization): 在将数据存入数据库或用于其他操作前，移除其中的非法或危险字符。我们使用了 sanitize_text_field()。
* 转义 (Escaping): 在将数据从数据库输出到 HTML、JavaScript 或 URL 时，进行转义以防止 XSS 攻击。我们使用了 esc_html() 和 esc_attr()。

(Persiapan Internationalisasi)

Agar plugin dapat diterjemahkan oleh pengguna di seluruh dunia, semua string yang ditujukan untuk pengguna harus dibungkus menggunakan fungsi internasionalisasi (internationalization) dari WordPress. Modifikasi output string kita:

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

Dan pastikan bahwa penjelasan yang benar telah diset dalam komentar di bagian awal plugin (plugin header comments). Text DomainKemudian, gunakan alat seperti Poedit untuk membuat file template berformat .pot.

Debugging, Testing, and Preparation for Release

Sebelum memasukkan plugin ke lingkungan produksi atau mengirimkannya ke direktori resmi, pengujian yang menyeluruh sangat penting.

Aktifkan mode debug.

Dalam berkas konfigurasi WordPress wp-config.php Di dalamnya, mengaktifkan mode debug (mode pelacakan kesalahan) memungkinkan Anda melihat kesalahan, peringatan, dan notifikasi PHP, yang sangat membantu dalam proses pengembangan.

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

Melakukan pengujian fungsionalitas dan kompatibilitas

• Uji fungsional: Uji semua fungsi plugin satu per satu: aktivasi/nonaktivasi, simpan pengaturan, dan apakah output front-end benar.
• Uji kompatibilitas: Uji plugin Anda di berbagai versi WordPress (terutama versi yang lebih lama), versi PHP (7.4+ dan 8.x), serta tema populer dan lingkungan plugin lainnya yang umum digunakan.
• Pemeriksaan keamanan: Anda dapat menggunakan alat otomatisasi atau melakukan pemeriksaan kode secara manual untuk memastikan tidak ada kerentanan seperti SQL injection, XSS, CSRF, dan lainnya. Field Nonce yang telah kami tambahkan sebelumnya bertujuan untuk mencegah serangan CSRF.

Siap untuk menerbitkan file.

Jika rencananya adalah untuk menerbitkan suatu dokumen atau proyek, diperlukan sebuah struktur file yang standar. Struktur file standar umumnya mencakup:
* 主插件文件 (如 my-first-plugin.php)
* readme.txtHarus ditulis sesuai format WordPress.org, untuk ditampilkan di halaman direktori plugin.
* assets Folder: Tempat untuk menyimpan ikon, tangkapan layar, dan lainnya.
* languages Folder: Tempat penyimpanan file terjemahan (.po/.mo).
* includes Folder: Tempat untuk menyimpan file-file kelas PHP lainnya.
* uninstall.phpMendefinisikan operasi pembersihan yang dilakukan ketika plugin dihapus (misalnya, menghapus data dari basis data).

Menyimpulkan.

Dengan panduan ini, Anda telah menyelesaikan seluruh proses pengembangan sebuah plugin fungsional dasar untuk WordPress: mulai dari membuat file utama yang berisi informasi header standar, menambahkan fungsionalitas menggunakan action hooks, hingga membangun halaman pengaturan administrasi yang lengkap dan memastikan keamanannya. Kami menekankan pentingnya penggunaan prefix, penanganan data yang aman, dan praktik terbaik dalam pengembangan internasionalisasi (internationalization), serta memberikan gambaran singkat tentang persiapan yang diperlukan sebelum melakukan debugging dan pengunggahan plugin tersebut.

Ingatlah, inti dari pengembangan plugin terletak pada pemahaman dan pemanfaatan yang cerdik terhadap sistem Hook dan Filter yang sangat luas yang disediakan oleh WordPress. Dari plugin kecil ini, Anda dapat terus mengeksplorasi cara menambahkan Shortcode, Widget, tipe artikel khusus (Custom Post Type/CPT), atau endpoint REST API, sehingga dapat membuat plugin yang kuat, fleksibel, dan memenuhi standar industri.

FAQ - Pertanyaan yang Sering Diajukan.

Di mana direktori yang harus ditempatkan plugin-nya?

WordPress plugin harus diletakkan di… wp-content/plugins/ Di dalam direktori tersebut, setiap plugin dapat berupa file PHP yang terpisah (cocok untuk plugin yang sederhana), namun praktik yang lebih umum adalah dengan membuat folder yang dinamai sesuai dengan nama plugin, lalu meletakkan file utama dan file sumber daya lainnya di dalamnya.

Bagaimana cara menghapus data yang dibuat oleh plugin?

Ketika pengguna mengklik tombol “Hapus” pada panel administrasi (backend), secara default hanya file plugin yang akan dihapus, sedangkan tabel opsi yang dibuat plugin di dalam basis data tetap ada.wp_optionsData yang ada di dalamnya akan tetap dipertahankan. Untuk membersihkannya sepenuhnya, Anda perlu membuat sebuah… uninstall.php File tersebut, dan gunakanlah isinya. delete_option() Fungsi ini digunakan untuk menghapus opsi yang terkait. File ini hanya akan dipanggil ketika pengguna menghapus plugin melalui fitur penghapusan yang tersedia di WordPress.

Apa perbedaan antara aksi (Actions) dan filter dalam Hook (Hook)?

Action Hooks (Penggunaan) add_action()Fungsi ini memungkinkan Anda untuk memasukkan dan menjalankan sepotong kode pada waktu tertentu saat WordPress sedang berjalan, tanpa mengharapkan adanya nilai kembalian (return value). Misalnya, Anda dapat menjalankan suatu fungsi di bagian header, footer, atau saat sebuah artikel diterbitkan.

Filter Hooks (dipakai untuk): add_filter()Hal tersebut memungkinkan Anda untuk mengubah data yang ditransmisikan dalam proses. Fungsi tersebut menerima sebuah nilai, memprosesnya, dan kemudian harus mengembalikan sebuah nilai sebagai hasil. Sebagai contoh, Anda dapat mengubah judul artikel, isi komentar, atau hasil pencarian.

Mengapa plugin saya tidak muncul di bagian belakang (backend)?

Pertama-tama, periksa apakah file PHP utama dari plugin Anda berada di direktori yang benar, serta apakah komentar header plugin tersebut (terutama…) Plugin Name:Apakah formatnya benar dan tidak ada kesalahan? Selanjutnya, periksa apakah file tersebut mengandung kesalahan tata bahasa. Anda dapat melakukannya dengan… wp-config.php Aktifkan di tengah. WP_DEBUG Mari lihat informasi kesalahan yang mungkin terjadi.