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

WordPress, sebagai sistem manajemen konten (Content Management System/ CMS) yang paling populer di dunia, memiliki kemampuan ekspansibilitas yang sangat kuat, yang terutama berkat adanya plugin. Dengan mengembangkan plugin, Anda dapat menambahkan fitur khusus apa pun ke situs web Anda tanpa perlu mengubah kode inti (core code) WordPress. Panduan ini akan memandu Anda melalui seluruh proses pembuatan plugin pertama Anda, mulai dari persiapan lingkungan, penulisan kode, hingga pengujian setelah plugin tersebut dirilis.

Preparasi dan pengaturan lingkungan.

Sebelum menulis baris kode pertama, Anda memerlukan lingkungan pengembangan yang sesuai. Hal ini tidak hanya dapat meningkatkan efisiensi, tetapi juga dapat menghindari risiko yang mungkin timbul saat melakukan debugging pada situs web yang sebenarnya.

Membangun lingkungan pengembangan lokal

Disarankan untuk menggunakan paket perangkat lunak server lokal, seperti XAMPP, MAMP, atau Laragon. Paket-paket ini memungkinkan Anda menginstal Apache, MySQL, dan PHP dengan satu klik, sehingga menciptakan lingkungan yang mirip dengan lingkungan online. Pastikan versi PHP yang Anda gunakan kompatibel dengan versi WordPress yang ingin Anda gunakan; biasanya situs resmi WordPress akan memberikan informasi mengenai persyaratan versi terbaru.

推荐阅读 Panduan Lengkap untuk Mengembangkan Plugin WordPress: Membuat Plugin Fungsional Pertama Anda dari Nol.。

Menginstal WordPress dan editor kode

Instal sebuah situs WordPress yang baru di server lokal, untuk keperluan pengembangan dan pengujian plugin. Selain itu, pilihlah editor kode yang canggih, seperti Visual Studio Code atau PhpStorm. Editor-editor ini memiliki fitur penyorotan sintaks PHP yang baik, saran kode (code suggestions), dan dukungan debugging yang sangat membantu dalam meningkatkan pengalaman pemrograman.

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

Buatlah file plugin pertamamu.

Sebuah plugin WordPress yang paling sederhana dapat hanya terdiri dari satu file saja. Kita akan memulai dengan plugin sederhana “Hello World” untuk memahami struktur sebuah plugin.

Struktur file utama plugin

Pertama-tama, di WordPress… wp-content/plugins Di dalam direktori tersebut, buatlah sebuah folder baru, misalnya… my-first-pluginDalam folder tersebut, buatlah file plugin utama, yang umumnya diberi nama sesuai dengan nama plugin tersebut, misalnya… my-first-plugin.php。

Setiap plugin harus memuat komentar informasi plugin yang spesifik di bagian awal file (header file), dan ini merupakan kunci bagi WordPress untuk mengenali plugin tersebut. Berikut adalah contoh yang paling sederhana:

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

Setelah menyimpan file tersebut, masuklah ke halaman “Plugin” di panel administrasi WordPress, dan Anda akan melihat plugin tersebut serta dapat mengaktifkannya. Meskipun plugin ini belum memiliki fungsi apa pun saat ini, Anda telah berhasil membuat kerangka kerja plugin yang memenuhi persyaratan yang dibutuhkan.

推荐阅读 Pelajari cara mengembangkan plugin WordPress dari nol, langkah demi langkah.。

Menambahkan fitur dasar ke plugin

Setelah plugin diaktifkan, mari kita tambahkan sebuah fitur sederhana kepadanya: menampilkan baris teks kustom di bagian kaki halaman (footer) situs web. Kita akan menggunakan fitur yang tersedia di WordPress untuk melakukannya. wp_footer Kait (hook).

Di bawah komentar informasi plugin, tambahkan kode berikut:

// 在网站页脚输出自定义文本
function myfp_add_footer_text() {
    echo '<p style="text-align: center;">Terima kasih telah menggunakan plugin pertama saya!</p>';
}
add_action( 'wp_footer', 'myfp_add_footer_text' );

Simpan file tersebut dan perbarui tampilan situs web (frontend-nya). Anda akan melihat teks yang terletak di bagian bawah halaman, dan teks tersebut akan terpusat (tidak miring ke kiri atau kanan). Contoh ini menunjukkan cara menggunakannya. add_action() Fungsi tersebut “menggantungkan” (menghubungkan) fungsi kustom Anda ke titik eksekusi inti (core execution point) WordPress.

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 sebuah fitur manajemen yang praktis.

Sebuah plugin yang lengkap umumnya perlu menyediakan antarmuka konfigurasi di panel administrasi WordPress. Selanjutnya, kita akan menambahkan halaman pengaturan sederhana untuk plugin tersebut, yang memungkinkan administrator untuk mengatur teks yang akan ditampilkan di bagian kaki halaman (footer).

\nMembuat halaman menu administrasi.

Kita perlu menambahkan halaman menu anak di bawah menu “Pengaturan” (Settings) di bagian belakang (backend). Untuk melakukan ini, kita memerlukan… add_options_page() Fungsi.

Pertama-tama, buat sebuah fungsi untuk merender konten HTML halaman pengaturan, lalu pasangnya ke (mount it to)… admin_menu Di atas kait itu.

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

// 添加插件设置页面到后台菜单
function myfp_add_admin_menu() {
    add_options_page(
        '我的插件设置',          // 页面标题
        '我的插件',              // 菜单标题
        'manage_options',       // 权限（管理员）
        'my-first-plugin',      // 菜单slug
        'myfp_settings_page'    // 用于输出页面内容的回调函数
    );
}
add_action( 'admin_menu', 'myfp_add_admin_menu' );

// 设置页面的HTML内容
function myfp_settings_page() {
    ?>
    <div class="wrap">
        <h1>Pengaturan plugin pertama saya</h1>
        <form method="post" action="/id/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'myfp_settings_group' ); // 设置字段组
            do_settings_sections( 'my-first-plugin' ); // 设置区域
            submit_button(); // 提交按钮
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Pengaturan pendaftan, bidang, dan penyimpanan data.

Hanya memiliki halaman saja tidak cukup; kita perlu menggunakan API yang disediakan oleh WordPress untuk melakukan proses pendaftaran, verifikasi, dan penyimpanan opsi secara aman. Hal ini melibatkan tiga fungsi inti:register_setting(), add_settings_section() 和 add_settings_field()。

// 初始化插件设置
function myfp_settings_init() {
    // 注册一个新的设置项到数据库的 `wp_options` 表
    register_setting( 'myfp_settings_group', 'myfp_footer_text' );

// 在设置页面添加一个区域
    add_settings_section(
        'myfp_section',
        '页脚文字设置',
        null, // 区域描述回调函数，这里不需要
        'my-first-plugin'
    );

// 在刚添加的区域里创建一个字段
    add_settings_field(
        'myfp_field_footer',
        '显示的文本',
        'myfp_field_footer_cb', // 用于输出字段HTML的回调函数
        'my-first-plugin',
        'myfp_section'
    );
}
add_action( 'admin_init', 'myfp_settings_init' );

// 渲染文本输入字段的回调函数
function myfp_field_footer_cb() {
    $text = get_option( 'myfp_footer_text', '感谢使用我的第一个插件！' ); // 获取已保存的值
    echo '<input type="text" name="myfp_footer_text" value="' . esc_attr( $text ) . '" class="regular-text">'; echo '
    echo '<p class="description">Teks yang dimasukkan di sini akan ditampilkan di bagian kaki halaman (footer) situs web.</p>';
}

Fungsi pembaruan telah diperbarui untuk menggunakan pengaturan yang telah disimpan.

Terakhir, modifikasi apa yang telah kita tulis sebelumnya. myfp_add_footer_text Fungsi tersebut digunakan untuk membaca nilai yang telah diatur oleh administrator dari basis data.

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 myfp_add_footer_text() {
    $footer_text = get_option( 'myfp_footer_text', '感谢使用我的第一个插件！' );
    if ( ! empty( $footer_text ) ) {
        echo '<p style="text-align: center;">'`. esc_html($footer_text)`.'</p>';
    }
}
add_action( 'wp_footer', 'myfp_add_footer_text' );

Sekarang, masuk ke panel administrasi WordPress (WordPress Dashboard), lalu ke “Settings” (Pengaturan) -> “My Plugins” (Plugin Saya). Di sana, Anda dapat mengubah teks di bagian footer (kaki halaman) dan menyimpan perubahan tersebut. Setelah itu, refresh halaman web untuk melihat bahwa konten yang Anda buat telah berfungsi dengan benar.

Keamanan plugin, optimisasi, dan persiapan untuk penerbitan

Sebuah plugin yang berkualitas harus mempertimbangkan aspek keamanan, kinerja, serta praktik terbaik dalam hal internasionalisasi (penggunaan bahasa yang beragam).

Mengimplementasikan validasi data dan proses pengelolaan karakter (escaping)

Jangan pernah mempercayai data yang dimasukkan oleh pengguna atau data yang dikeluarkan langsung dari basis data. Dalam contoh di atas, kita telah menggunakan… esc_attr() Untuk melakukan escape pada atribut di bidang input, gunakan esc_html() Untuk output yang di-ekspos di sisi frontend (front end), penggunaan escape karakter sangat penting. Dalam skenario yang lebih kompleks, metode penggunaan escape karakter yang tepat perlu diterapkan. sanitize_text_field() Gunakan alat ini untuk membersihkan data yang dimasukkan. wp_kses_post() Ini memungkinkan output HTML yang aman.

Menambahkan dukungan internasionalisasi

Agar plugin dapat digunakan oleh pengguna di seluruh dunia, diperlukan persiapan terlebih dahulu untuk menerjemahkan semua teks yang ditampilkan kepada pengguna. Hal ini memerlukan penggunaan alat atau proses tertentu untuk melakukan penerjemahan tersebut. __() 和 _e() Fungsi-fungsi seperti tersebut, serta deklarasi untuk bidang teks (text field).

Perbarui komentar di bagian atas plugin tersebut untuk memastikan bahwa… Text Domain Sesuai dengan panggilan berikutnya. Kemudian, ubah string dalam kode, misalnya:

// 在设置字段描述中使用国际化函数
echo '<p class="description">' . esc_html__( '这里输入的文字将显示在网站页脚。', 'my-first-plugin' ) . '</p>';

// 在输出函数中使用
$default_text = __( '感谢使用我的第一个插件！', 'my-first-plugin' );
$footer_text = get_option( 'myfp_footer_text', $default_text );

Setelah itu, Anda dapat menggunakan alat seperti Poedit untuk membuatnya. .pot File template, digunakan oleh penerjemah untuk membuat terjemahan. .po 和 .mo File terjemahan.

Melakukan pengujian akhir dan pengemasan (final testing and packaging).

Sebelum dipublikasikan, perlu menguji fungsi plugin di berbagai lingkungan (seperti versi PHP yang berbeda, versi WordPress yang berbeda). Pastikan bahwa operasi seperti mengaktifkan, menonaktifkan, menyimpan pengaturan, dan menghapus data tidak menyebabkan kesalahan atau meninggalkan data yang tidak diperlukan. Anda dapat menulis sebuah fungsi pembersihan (uninstallation cleaner) untuk melakukan hal tersebut. register_uninstall_hook() Opsi untuk membersihkan basis data ketika pengguna menghapus plugin.

Terakhir, kompresi folder plugin Anda menjadi… .zip File ini merupakan paket kompresi yang dapat langsung diinstal melalui fitur “Upload Plugin” di panel administrasi WordPress, dan juga memenuhi persyaratan format untuk dikirim ke direktori plugin resmi WordPress.

Menyimpulkan.

Dengan panduan ini, Anda telah menyelesaikan seluruh proses pembuatan sebuah plugin WordPress yang fungsional dari nol. Anda telah mempelajari cara membuat file dasar plugin, menggunakan action hooks untuk menambahkan fitur, memanfaatkan API pengaturan WordPress untuk membuat antarmuka administrasi di belakang layar, serta memahami konsep-konsep penting seperti keamanan, internasionalisasi, dan pengemasan (packaging). Plugin teks kaki halaman (footer text plugin) yang sederhana ini mungkin terlihat dasar, tetapi struktur pluginnya, mekanisme hook-nya, dan API pengaturannya merupakan fondasi penting untuk mengembangkan plugin yang lebih kompleks. Selanjutnya, Anda dapat mencoba fitur-fitur yang lebih tingkat, seperti shortcodes, jenis artikel kustom (custom article types), dan endpoint REST API, untuk secara bertahap meningkatkan keterampilan pengembangan plugin Anda.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah untuk mengembangkan plugin WordPress, seseorang harus menguasai PHP?

Ya, PHP merupakan bahasa pemrograman inti untuk pengembangan WordPress dan plugin-nya. Anda perlu memahami sintaks dasar PHP, fungsi-fungsi, array, serta konsep pemrograman berorientasi objek. Selain itu, pengetahuan tentang HTML, CSS, dan JavaScript dasar juga sangat membantu dalam mengembangkan plugin yang mencakup antarmuka pengguna (user interface).

Apakah nama file utama plugin bisa diambil sesuka hati?

Bisa, tetapi nama file tersebut harus sesuai dengan nama file PHP utama yang ada di dalam folder plugin. Umumnya, untuk kejelasan, file utama memiliki nama yang sama dengan folder plugin atau diberi nama yang mencerminkan fungsinya. index.phpYang paling penting, bagian awal (header) dari file tersebut harus memuat blok komentar informasi plugin yang benar. WordPress mengenali plugin berdasarkan analisis blok komentar ini.

Mengapa pengaturan plugin saya tidak berlaku setelah disimpan?

Silakan periksa sesuai dengan langkah-langkah berikut: Pertama, pastikan bahwa bidang pengaturan (setting fields) Anda telah melewati proses verifikasi yang diperlukan. register_setting() Pendaftaran telah dilakukan dengan benar, dan… settings_fields() Nama grup pengaturan dalam pemanggilan fungsi harus sesuai dengan yang ada. Selanjutnya, periksa formulir tersebut. action Apakah atribut tersebut merujuk ke sesuatu? options.phpTerakhir, saat melakukan output di front end, pastikan bahwa Anda menggunakan… get_option() Fungsi tersebut menerima parameter, dan nama parameter yang dikirimkan sama persis dengan nama parameter saat proses pendaftaran.

Bagaimana cara membuat plugin saya membersihkan data ketika tidak digunakan (dinyalakan)?

Anda dapat menggunakannya. register_uninstall_hook() Fungsi ini digunakan untuk mendaftarkan sebuah “uninstall hook” (pemanggilan fungsi yang dijalankan saat proses uninstallasi). Dalam fungsi pemanggilan kembali (callback function) dari hook tersebut, Anda dapat menggunakan… delete_option() Fungsi ini digunakan untuk menghapus semua opsi database yang dibuat oleh plugin. Harap diingat bahwa operasi ini tidak dapat dibatalkan, dan hanya boleh dilakukan ketika pengguna secara eksplisit memilih opsi “Hapus” plugin, bukan “Nonaktifkan” plugin.

Apakah plugin gratis dapat dikirimkan ke direktori resmi WordPress?

Ya, WordPress secara resmi mendorong para pengembang untuk mengirimkan plugin gratis yang memenuhi standar ke direktori plugin mereka. Untuk melakukannya, Anda perlu memiliki akun WordPress.org dan membaca dengan seksama panduan pengiriman plugin yang disediakan. Kode yang Anda tulis harus mengikuti standar pengkodean yang ditentukan, dan tidak boleh mengandung kode berbahaya atau melanggar ketentuan lisensi. Setelah pengiriman berhasil, pengguna dapat langsung mencari dan menginstal plugin Anda dari panel administrasi WordPress.