Dari Nol ke Satu: Panduan Lengkap untuk Mengembangkan Plugin WordPress Pertama Anda Secara Bertahap

Pengaturan Lingkungan Pengembangan Plugin WordPress

Sebelum mulai menulis kode, sangat penting untuk membangun lingkungan pengembangan yang stabil dan terisolasi dari sistem komputer utama. Hal ini tidak hanya akan melindungi situs web utama Anda, tetapi juga memungkinkan Anda untuk melakukan percobaan dan debugging dengan bebas.

Sebuah lingkungan yang efisien umumnya terdiri dari tiga komponen utama. Yang pertama adalah perangkat lunak server web, seperti Apache atau Nginx. Kedua adalah lingkungan eksekusi PHP, dengan versi yang kompatibel dengan versi WordPress yang akan Anda deploy. Terakhir adalah basis data MySQL atau MariaDB. Meskipun Anda dapat menginstal perangkat lunak-perangkat lunak ini secara manual satu per satu, kami sangat menyarankan penggunaan lingkungan terintegrasi pada server lokal.

Di pasaran, tersedia berbagai alat lingkungan integrasi yang berkualitas untuk dipilih, seperti Local by Flywheel, XAMPP, MAMP, atau DevKinsta. Alat-alat ini menggabungkan komponen-komponen yang diperlukan untuk pengembangan situs web, dan menyediakan layanan instalasi serta pengaktifan yang mudah (dengan satu klik saja). Umumnya, alat-alat tersebut juga dilengkapi dengan fitur-fitur yang ramah pengembang, seperti pengumpulan data melalui email, kemampuan untuk mengkloning situs web, serta konfigurasi SSL yang dapat dilakukan dengan mudah, sehingga dapat sangat meningkatkan efisiensi proses pengembangan Anda.

推荐阅读 Panduan Akhir Pengembangan Plugin WordPress: Membuat Plugin Kustom Pertama Dari Nol。

Selain lingkungan server, Anda juga memerlukan sebuah editor kode. Anda dapat memilih lingkungan pengembangan terintegrasi (IDE) yang memiliki fitur lengkap, seperti PhpStorm, atau editor yang ringan namun dapat diperluas, seperti Visual Studio Code. Untuk pengembangan plugin, disarankan agar plugin tersebut setidaknya memiliki fitur penyediaan saran kode PHP, penyorotan sintaks, dan manajemen file. Menginstal beberapa plugin khusus di editor teks (seperti kode snippet terkait WordPress, PHP Intelephense, dll.) akan membuat proses pengkodean menjadi lebih lancar.

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

Memahami struktur file inti dari sebuah plugin

Sebenarnya, plugin WordPress merupakan kumpulan satu atau lebih file PHP yang mengikuti struktur dan aturan tertentu, sehingga sistem inti WordPress dapat mengenali dan memuatnya dengan lancar.

Setiap plugin dimulai dari sebuah file utama. File utama ini merupakan “titik masuk” (entry point) dari plugin, dan harus memuat sebuah komentar header (header comment) yang khusus. Komentar header tersebut berbentuk blok komentar berbilang baris, yang berisi metadata dari plugin, seperti nama plugin, deskripsi, versi, penulis, dan lainnya. WordPress menggunakan informasi-informasi ini untuk menampilkan plugin tersebut di antarmuka pengelolaan backend-nya. Nama file utama dapat disesuaikan, tetapi umumnya… plugin-name.php Bentuk seperti ini.

Berikut adalah contoh dasar untuk bagian header dari file utama sebuah plugin:

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

Setelah file utama siap, Anda perlu meletakkannya di tempat yang tepat. File inti dari plugin tersebut harus berada di… /wp-content/plugins/ Di dalam sebuah folder terpisah yang berada di dalam direktori tersebut. Nama folder harus singkat, unik, dan terdiri dari huruf kecil serta tanda hubung (-). Misalnya, plugin kami dapat diletakkan di folder dengan nama “my-plugin”. /wp-content/plugins/my-first-plugin/ Di dalam path tersebut, terdapat file utama (main file). my-first-plugin.php Letakkan saja di direktori akar dari folder ini.

推荐阅读 Mengurai Pengembangan Plugin WordPress: Panduan Lengkap untuk Membangun Modul Fungsi Khusus dari Nol。

Menulis fungsi pertama Anda…

Sekarang, mari kita tambahkan fitur interaktif pertama untuk plugin ini. WordPress memungkinkan plugin untuk memodifikasi atau menambahkan fitur pada saat tertentu melalui mekanisme “Hook”. Hook terbagi menjadi dua jenis utama: Action Hooks dan Filter Hooks.

Action hooks memungkinkan Anda menjalankan kode Anda sendiri pada titik-titik tertentu saat WordPress dijalankan, seperti saat artikel diterbitkan atau halaman dimuat. Contoh yang paling umum adalah menambahkan informasi khusus di bagian kaki (footer) halaman web. Kita dapat menggunakan action hooks untuk melakukan hal ini. wp_footer Aksi ini diimplementasikan menggunakan hook (pengait fungsi).

Kita perlu menulis sebuah fungsi kustom, dan memberitahu WordPress untuk… wp_footer Eksekusikan fungsi tersebut saat terjadi trigger. Proses ini disebut “menggantungkan” (mounting) fungsi atau metode tersebut ke pada hook yang bersangkutan. Berikut adalah contoh implementasinya:

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 my_first_plugin_display_footer_text() {
    echo ‘<p style="text-align: center; color: #666;">Dipersembahkan oleh plugin pertama saya untuk Anda.</p>’;
}
add_action( ‘wp_footer’， ‘my_first_plugin_display_footer_text’ );

add_action() Ini adalah fungsi inti dari aksi pemasangan (mounting). Setelah menyelesaikan langkah-langkah di atas, bersihkan cache situs Anda dan perbarui halaman frontend (halaman yang ditampilkan di browser pengguna). Anda seharusnya dapat melihat teks kaki halaman (footer) yang ditambahkan oleh plugin tersebut.

Selanjutnya, mari kita bahas tentang filter hooks. Filter hooks memungkinkan Anda untuk memodifikasi data yang diterimanya. Misalnya, kita ingin mengubah isi judul sebuah artikel. Anda dapat menggunakan filter hooks untuk melakukan hal tersebut. the_title “Filter.” Kode berikut menunjukkan cara menambahkan prefix di depan semua judul artikel:

function my_first_plugin_prefix_title( $title ) {
    // 检查是否在主循环中且不是管理后台，避免影响后台标题显示
    if ( ! is_admin() && in_the_loop() ) {
        $title = ‘[插件前缀] ’ . $title;
    }
    return $title;
}
add_filter( ‘the_title’， ‘my_first_plugin_prefix_title’ );

Perbaiki plugin: Tambahkan menu pengelolaan dan halaman pengaturan.

Sebuah plugin yang memiliki fitur yang lengkap umumnya memerlukan interaksi dengan administrator, yang berarti perlu menambahkan menu dan halaman pengaturan khusus. Hal ini memungkinkan pengguna untuk mengonfigurasi plugin tersebut tanpa perlu menyentuh kode.

推荐阅读 Mulai dari nol: Panduan lengkap dan tutorial praktis untuk pengembangan plugin WordPress.。

Untuk menambahkan item menu tingkat atas baru di menu administrasi di sisi kiri WordPress, Anda perlu menggunakan add_menu_page() Fungsi ini memerlukan beberapa parameter untuk mendefinisikan judul menu, hak akses, identifikasi unik, fungsi pemanggil kembali (callback function), dan lainnya. Anda perlu menggunakan parameter tersebut pada waktu yang tepat (biasanya…). admin_menu Action hook: Panggillah fungsi tersebut.

Berikut adalah contoh halaman untuk membuat menu utama yang sederhana beserta pengaturannya:

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

function my_first_plugin_add_admin_menu() {
    add_menu_page(
        ‘我的第一个插件设置’， // 页面标题
        ‘我的插件’，           // 菜单标题
        ‘manage_options’，     // 所需权限（管理员）
        ‘my-first-plugin-settings’， // 菜单slug
        ‘my_first_plugin_render_settings_page’， // 渲染页面的回调函数
        ‘dashicons-admin-plugins’， // 图标（Dashicons）
        100                     // 菜单位置
    );
}
add_action( ‘admin_menu’， ‘my_first_plugin_add_admin_menu’ );

Selanjutnya, Anda perlu mendefinisikan fungsi panggilan balik (callback function). my_first_plugin_render_settings_page() Untuk menghasilkan konten HTML dari halaman pengaturan ini. Dalam fungsi ini, Anda dapat mengeluarkan formulir dan menangani pengiriman formulir (bukan dengan metode Ajax).

Untuk menyimpan dan mengambil pengaturan plugin dengan aman, Anda sebaiknya menggunakan API Opsi (Options API) dari WordPress. Anda dapat menggunakannya untuk melakukan berbagai tindakan terkait pengaturan plugin, seperti mengubah nilai, menambah atau menghapus pengaturan, dan lainnya. add_option()、get_option()、update_option() 和 delete_option() Gunakan fungsi-fungsi seperti… untuk mengoperasikan objek yang bernama… my_first_plugin_options Data opsi tersebut. Dalam formulir, Anda perlu menggunakan fitur bawaan WordPress untuk mengelolanya. settings_fields() 和 do_settings_sections() Fungsi tersebut digunakan untuk menghasilkan output dari field pengaturan secara aman, namun biasanya digunakan bersama dengan “API pengaturan” yang lebih formal. Untuk halaman pengaturan yang sederhana, memproses pengiriman formulir secara manual, serta memverifikasi dan membersihkan data juga merupakan praktik yang umum dilakukan.

Menyimpulkan.

Mengembangkan plugin pertama Anda untuk WordPress merupakan proses pembelajaran yang sistematis. Anda memulai dengan membangun lingkungan pengembangan lokal yang aman, memahami struktur file dasar dan standar penamaan plugin. Selanjutnya, Anda mempelajari mekanisme ekspansi plugin WordPress, yaitu sistem “hook” (pautan), dan berhasil menggunakan hook aksi untuk menampilkan konten, serta hook filter untuk memodifikasi data. Untuk membuat plugin lebih mudah dikelola, Anda belajar cara membuat menu administrasi dan halaman pengaturan, serta berinteraksi dengan API opsi WordPress guna menyimpan data secara permanen.

Dengan mengikuti langkah-langkah ini, Anda tidak hanya berhasil membuat sebuah plugin yang fungsional, tetapi yang lebih penting lagi, Anda telah membangun sebuah kerangka dasar yang dapat diperluas. Di atas dasar ini, Anda dapat terus menambahkan fitur-fitur yang lebih kompleks dan lebih kuat ke dalam plugin Anda dengan mengeksplorasi berbagai mekanisme (hook), mempelajari lebih dalam tentang JavaScript (termasuk Ajax), membuat tabel basis data khusus, atau mengembangkan kode singkat.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah saya yang tidak memiliki pengalaman pemrograman bisa mengembangkan plugin untuk WordPress?
Meskipun memiliki pengetahuan dasar tentang PHP, HTML, dan sedikit CSS akan memudahkan Anda, Anda tetap bisa memulai dari nol. Yang penting adalah melakukannya secara bertahap: mulailah dengan memodifikasi dan meniru kode plugin yang sudah ada, lalu perlahan-lahan memahami fungsi-fungsi inti dan mekanisme “hook” yang disediakan oleh WordPress. Selain itu, gunakan dokumen resmi WordPress secara aktif sebagai referensi serta lakukan banyak praktik.

Mengapa plugin saya tidak dapat diaktifkan di backend?

Kegagalan dalam mengaktifkan plugin biasanya disebabkan oleh beberapa hal. Yang paling umum adalah format informasi header file utama yang tidak benar atau adanya field wajib yang hilang (seperti Plugin Name). Selanjutnya, mungkin terdapat kesalahan sintaks dalam kode PHP, yang dapat diidentifikasi dengan melihat log kesalahan dari server web. Kemungkinan lainnya adalah nama folder plugin atau file utama bertabrakan dengan plugin lain yang sudah terinstal, atau versi PHP yang dibutuhkan oleh plugin lebih tinggi daripada versi yang digunakan oleh server Anda saat ini.

Bagaimana cara membagi pengaturan lanjutan (advanced settings) dari sebuah plugin menjadi beberapa halaman tag (tab pages)?

Anda dapat melakukannya dengan memanggil fungsi tersebut beberapa kali. add_menu_page() Untuk membuat menu utama yang terpisah, hal tersebut bisa menyebabkan tampilan backend menjadi kacau. Cara yang lebih baik adalah dengan menggunakan… add_submenu_page() Fungsi tersebut digunakan untuk menambahkan halaman pengaturan tambahan sebagai item menu anak ke dalam menu utama Anda. Saat membuat menu anak, gunakan parameter pertama (slug dari menu induk) sebagai slug dari menu utama Anda, sedangkan parameter berikutnya digunakan untuk mendefinisikan judul dan fungsi dari menu anak tersebut.

Bagaimana cara mengeluarkan plugin dengan aman setelah pengembangan selesai?

Sebelum mengunggah kode ke direktori plugin WordPress, sangat penting untuk memastikan keamanan kode tersebut. Anda perlu melakukan validasi dan ekstraksi (escaping) yang ketat terhadap semua input dari pengguna. Disarankan untuk menggunakan fungsi-fungsi yang disediakan oleh WordPress itu sendiri. sanitize_text_field()、wp_kses() 和 esc_html()Pada saat yang sama, semua operasi basis data yang dipanggil secara langsung harus menggunakan… $wpdb Metode yang disediakan oleh kelas tersebut digunakan untuk mencegah serangan SQL injection. Sebelum dipublikasikan, plugin juga perlu diatur agar dapat digunakan dalam berbagai bahasa (internasionalisasi), dan file terjemahan perlu disiapkan untuk semua string yang akan ditampilkan kepada pengguna.