Pengembangan Plugin WordPress: Dari Pemula Hingga Ahli: Membuat Plugin Fungsional Pertamamu

Mengapa perlu belajar pengembangan plugin WordPress?

Sebagai sistem manajemen konten (Content Management System/CMS) paling populer di dunia, kekuatan ekspansibilitas WordPress sebagian besar berkat adanya sejumlah besar plugin. Belajar mengembangkan plugin tidak hanya memungkinkan Anda untuk menyesuaikan fungsionalitas sesuai kebutuhan sendiri, tetapi juga membantu Anda memahami lebih dalam arsitektur inti WordPress, meningkatkan keterampilan teknis, dan bahkan mengubah ide-ide kreatif Anda menjadi produk yang dapat dipublikasikan. Dengan mengembangkan plugin sendiri, Anda dapat mengontrol kualitas kode dengan tepat, memastikan keamanan situs web, serta menghindari masalah kompatibilitas yang mungkin timbul akibat penggunaan plugin pihak ketiga.

Sebuah plugin dasar untuk WordPress pada dasarnya merupakan satu atau lebih file PHP yang terletak di direktori tertentu. Plugin tersebut berinteraksi dengan sistem inti WordPress melalui API yang tersedia, seperti hook aksi (action hooks), hook filter (filter hooks), shortcodes, dan widgets. Memahami mekanisme ini merupakan prasyarat penting untuk mengembangkan plugin dengan sukses.

Menyiapkan lingkungan pengembangan dan infrastruktur dasar

Sebelum menulis baris kode pertama, sangat penting untuk membangun lingkungan pengembangan yang baik. Anda memerlukan lingkungan server lokal (seperti XAMPP, Local by Flywheel, atau DevKinsta), sebuah editor kode (seperti VS Code atau PhpStorm), serta instalasi WordPress untuk keperluan pengujian.

推荐阅读 Panduan Utama untuk Mengembangkan Plugin WordPress: Menguasai Prinsip-Prinsip Inti dan Proyek-Proyek Praktis.。

Pintu masuk untuk plugin adalah sebuah file PHP utama. Komentar di bagian awal file tersebut merupakan kunci bagi WordPress untuk mengenali plugin tersebut. Mari kita mulai dengan membuat struktur dasar dari plugin 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

Membuat file utama untuk plugin

File utama sebuah plugin biasanya dinamai sesuai dengan nama plugin tersebut. Misalnya, jika kita membuat sebuah plugin dengan nama “My First Plugin”, maka file utamanya dapat dinamai “my_first_plugin.js”.my-first-plugin.phpFile tersebut harus diletakkan di…/wp-content/plugins/my-first-plugin/Di bawah menu.

Bagian awal (header) dari file harus memuat komentar informasi plugin yang standar. Berikut adalah contoh paling dasar:

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

Setelah menyimpan file tersebut, masuklah ke halaman “Plugin” di panel administrasi WordPress. Anda seharusnya dapat melihat plugin baru ini muncul dalam daftar plugin, dan Anda bisa mengaktifkannya. Saat ini plugin ini belum memiliki fungsi apa pun, tetapi kerangka dasarnya sudah selesai dibangun.

Membangun struktur direktori dasar untuk plugin

Sebuah plugin dengan struktur yang jelas akan memudahkan proses pemeliharaan jangka panjang. Disarankan untuk membuat direktori-direktori berikut:
* /assets/Digunakan untuk menyimpan sumber daya statis seperti CSS, JavaScript, dan gambar.
* /includes/Digunakan untuk menyimpan file-file kelas PHP inti serta file-file fungsi yang terkait dengan kode program utama.
* /languages/Digunakan untuk menyimpan file terjemahan internasional (.po/.mo).

推荐阅读 Prinsip Dasar Tailwind CSS: Mengungkap Cara Kerja Kerangka CSS Atomis yang Mengutamakan Kegunaan (Practicality-First)。

Main Filemy-first-plugin.phpSeharusnya hanya bertanggung jawab atas proses inisialisasi plugin, seperti mendefinisikan konstanta, mengimpor file lain, mendaftarkan fungsi-fungsi tertentu (hook), dan sebagainya.

Mengimplementasikan fungsi inti: membuat menu dan halaman manajemen.

Salah satu fitur plugin yang umum adalah menambahkan halaman menu administrasi di panel administrasi WordPress. Kita akan mewujudkannya menggunakan “Menu Page API” yang tersedia di WordPress.

Menambahkan menu utama di bagian belakang (backend).

Kita perlu menggunakan…add_menu_page()Fungsi. Fungsi ini biasanya digunakan dalam…admin_menuFungsi pengait aksi (action hook) ini akan dipanggil ketika trigger-nya terjadi. Mari kita tambahkan kode berikut ke dalam file utama:

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_add_admin_menu() {
    add_menu_page(
        '我的插件设置',         // 页面标题
        '我的插件',            // 菜单标题
        'manage_options',      // 所需权限
        'my-first-plugin',     // 菜单slug
        'mfp_display_settings_page', // 用于显示页面内容的回调函数
        'dashicons-admin-generic', // 菜单图标（Dashicon）
        6                      // 菜单位置
    );
}
// 将函数挂载到 `admin_menu` 钩子上
add_action('admin_menu', 'mfp_add_admin_menu');

Membuat konten yang akan ditampilkan pada halaman pengaturan

Dalam kode di atas,mfp_display_settings_pageIni adalah sebuah fungsi pemanggil balik (callback function) yang bertanggung jawab untuk menghasilkan konten HTML dari halaman pengaturan. Kita perlu mendefinisikan fungsi ini:

// 设置页面的显示内容
function mfp_display_settings_page() {
    // 检查用户权限
    if (!current_user_can('manage_options')) {
        wp_die(__('你没有权限访问此页面。'));
    }
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <form action="/id/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 输出设置字段和安全nonce字段
            settings_fields('mfp_options_group'); // 设置组的名称
            do_settings_sections('my-first-plugin'); // 页面slug
            submit_button('保存设置');
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Kode ini membuat kerangka halaman pengaturan standar untuk WordPress, di dalamnya digunakan…settings_fields()和do_settings_sections()Fungsi tersebut berarti kita akan menggunakan WordPress Settings API untuk mengelola opsi-opsi kita, yang merupakan cara yang paling aman dan terstandarisasi.

Gunakan API Settings untuk mengelola opsi-opsi plugin.

Menangani langsung$_POSTData menghadapi risiko keamanan. WordPress Settings API telah menangani proses verifikasi data, keamanan, dan penyimpanan, sehingga menjadi metode terbaik untuk mengelola pengaturan plugin.

推荐阅读 Panduan Lengkap Plugin WooCommerce: Membangun Situs Web E-commerce Internasional Profesional dari Nol。

Pengaturan Pendaftaran, Bidang (Field), dan Bab (Chapter)

Kita perlu…admin_initInilah bagian kode yang digunakan untuk menginisialisasi pengaturan kita di dalam fungsi “hook”. Pertama-tama, gunakan…register_setting()Daftarkan sebuah opsi pengaturan.

function mfp_register_settings() {
    // 注册一个设置：`mfp_options` 是存储在`wp_options`表中的键名
    register_setting(
        'mfp_options_group', // 设置组名，需与`settings_fields()`参数一致
        'mfp_options',       // 选项名
        'mfp_sanitize_options' // 可选：数据清洗回调函数
    );

// 添加一个设置章节
    add_settings_section(
        'mfp_main_section',                // 章节ID
        '主要设置',                         // 章节标题
        'mfp_main_section_callback',       // 章节介绍的回调函数
        'my-first-plugin'                  // 所属页面slug
    );

// 在章节中添加一个文本字段
    add_settings_field(
        'mfp_text_field',                  // 字段ID
        '示例文本',                         // 字段标签
        'mfp_text_field_callback',         // 用于渲染字段HTML的回调函数
        'my-first-plugin',                 // 所属页面slug
        'mfp_main_section'                 // 所属章节ID
    );
}
add_action('admin_init', 'mfp_register_settings');

Mendefinisikan fungsi rendering (pemformatan tampilan) dan cleaning (pembersihan data) untuk field (kolom)

Sekarang, kita perlu mendefinisikan berbagai fungsi callback yang telah digunakan di atas, untuk menghasilkan kode HTML untuk bidang-bidang tertentu dan membersihkan 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 mfp_main_section_callback() {
    echo '<p>Ini adalah area pengaturan utama untuk plugin tersebut.</p>';
}

// 文本字段的HTML输出
function mfp_text_field_callback() {
    // 从数据库获取现有值
    $options = get_option('mfp_options');
    $value = $options['mfp_text_field'] ?? ''; // PHP 7.0+ 空合并运算符
    echo '<input type="text" name="mfp_options[mfp_text_field]" value="' . esc_attr($value) . '" class="regular-text">';
}

// 数据清洗函数（可选但推荐）
function mfp_sanitize_options($input) {
    $sanitized_input = [];
    if (isset($input['mfp_text_field'])) {
        // 对文本字段进行基本的清洗，如去除标签
        $sanitized_input['mfp_text_field'] = sanitize_text_field($input['mfp_text_field']);
    }
    return $sanitized_input;
}

Hingga saat ini, plugin yang lengkap, termasuk halaman pengaturan keamanannya, telah selesai dibuat. Setelah plugin diaktifkan, Anda dapat melihat menu “My Plugins” di panel administrasi WordPress. Klik menu tersebut untuk memasuki halaman pengaturan, di mana Anda dapat mengatur dan menyimpan sebuah opsi teks. Semua data disimpan dengan aman melalui API WordPress.wp_optionsDi dalam tabel.

Menambahkan fitur front-end untuk plugin: membuat kode singkat

Fungsi backend memang merupakan dasar yang penting, tetapi plugin biasanya juga perlu mempengaruhi tampilan (frontend) situs web. Membuat kode singkat (shortcode) merupakan cara yang sangat baik untuk menampilkan fitur-fitur plugin dalam artikel, halaman, atau alat bantu (tools) lainnya.

Daftarkan kode singkat yang sederhana.

Kami mendaftarkan sebuah nama yang disebut…[my_greeting]Kode singkat ini digunakan untuk menampilkan pesan sapaan di bagian frontend (halaman web yang ditampilkan pengguna).add_shortcode()Fungsi.

Tambahkan di file utama atau file fungsional khusus:

// 注册短代码
function mfp_greeting_shortcode($atts, $content = null) {
    // 使用shortcode_atts设置默认属性并合并用户输入
    $atts = shortcode_atts(
        array(
            'name' => '访客', // 默认值
        ),
        $atts,
        'my_greeting' // 短代码名称
    );

// 获取插件选项中存储的文本
    $options = get_option('mfp_options');
    $custom_text = $options['mfp_text_field'] ?? '';

// 构造输出
    $output = '<div class="mfp-greeting">'$output .= '<p>Halo, '. esc_html($atts['name'])'. ‘! Selamat datang di situs kami.</p>';
    if (!empty($custom_text)) {
        $output .= '<p><strong>Pesan Khusus:</strong>'`. esc_html($custom_text)`.'</p>'$output = '</div>';

// 返回输出内容，而不是直接echo
    return $output;
}
add_shortcode('my_greeting', 'mfp_greeting_shortcode');

Sekarang, pengguna dapat memasukkan teks di editor artikel.[my_greeting name="张三"]Di sisi frontend, pesan sapaan yang disesuaikan dengan kebutuhan pengguna akan ditampilkan, dan jika “teks contoh” telah diatur di sisi backend, maka teks tersebut juga akan ditampilkan bersamaan. Pendekatan ini secara efektif menghubungkan pengaturan yang ada di backend dengan hasil output yang ditampilkan di frontend.

Menyimpulkan.

Dengan langkah-langkah di atas, kita telah menyelesaikan pembuatan sebuah plugin WordPress yang memiliki fungsi yang lengkap. Kita memulainya dari nol, membuat file dan struktur dasar dari plugin tersebut, menggunakan…add_menu_page()Dengan menggunakan API Settings, halaman pengaturan backend yang aman telah dibangun, dan…add_shortcode()Fungsi output di bagian frontend telah berhasil diimplementasikan. Proses ini mencakup alur utama pengembangan plugin, yaitu perencanaan, inisialisasi, integrasi dengan API backend, pemrosesan data, dan penyediaan antarmuka (interface) untuk bagian frontend.

Setelah memahami dengan baik pengetahuan dasar ini, Anda dapat melanjutkan untuk mengeksplorasi topik-topik lebih lanjut, seperti membuat jenis artikel khusus, metadata (Meta Box), tabel basis data yang disesuaikan, endpoint API REST, pemrosesan AJAX, serta internasionalisasi plugin. Ingatlah bahwa mengikuti standar pemrograman WordPress dan praktik terbaik merupakan kunci untuk mengembangkan plugin yang berkualitas tinggi dan mudah dikelola.

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja pengetahuan PHP yang harus dikuasai untuk pengembangan plugin?

Anda perlu setidaknya menguasai sintaks dasar PHP, termasuk variabel, array, fungsi, pengecekan kondisi (conditional statements), dan perulangan (loops). Pengetahuan tentang pemrograman berorientasi objek (Object-Oriented Programming/OOP) sangat membantu dalam pembuatan plugin yang berskala menengah hingga besar. Selain itu, Anda perlu memahami cara WordPress memuat plugin, serta cara menggunakan variabel dan fungsi global secara aman.

Bagaimana cara mendebug (debug) plugin WordPress yang Anda kembangkan sendiri?

Pertama-tama, pastikan bahwa…wp-config.phpBuka file tersebut.WP_DEBUG和WP_DEBUG_LOGDengan cara ini, pesan kesalahan akan dicatat ke dalam berkas log. Selanjutnya, Anda dapat menggunakan…error_log()Fungsi tersebut menghasilkan informasi debugging. Untuk logika yang kompleks, Anda dapat menggunakan alat debugging profesional seperti Xdebug untuk menjalankan kode secara bertahap.

Bagaimana cara memastikan keamanan saat mengembangkan plugin?

Selalu verifikasi dan bersihkan input dari pengguna. Gunakan fungsi bawaan WordPress, seperti…esc_html(), esc_attr(), sanitize_text_field()和wp_kses()Gunakan metode yang bukan berbasis CE (Common Encoding) untuk memproses hasil keluaran tersebut.wp_nonce_field()Hal tersebut dilakukan untuk mencegah penipuan permintaan antar situs (Cross-Site Request Forgery/CSRF). Untuk operasi terhadap basis data, gunakan…$wpdbMetode yang disediakan oleh kelas, atau cara penggunaannya.prepare()Pernyataan tersebut digunakan untuk mencegah serangan SQL injection.

Apakah plugin sebaiknya dikembangkan di server lokal atau di server online?

Sangat disarankan untuk melakukan pengembangan utama di lingkungan pengembangan lokal (seperti Local, XAMPP). Lingkungan lokal memiliki respons yang cepat, tidak terpengaruh oleh jaringan, dan Anda dapat menguji dan merusaknya sesuka hati tanpa memengaruhi situs web online. Setelah fungsionalitasnya hampir selesai, kemudian dikerahkan ke lingkungan pengujian online untuk melakukan pengujian kompatibilitas terakhir.

Bagaimana cara menerbitkan plugin Anda ke direktori resmi WordPress?

Anda perlu mengakses WordPress.org, mendaftarkan akun pengembang, dan mengirimkan kode plugin Anda melalui Subversion (SVN). Plugin tersebut harus memenuhi standar kode dan struktur direktori resmi WordPress, serta harus mencakup semua komponen yang diperlukan.readme.txtSetelah file tersebut disetujui untuk audit, pengguna di seluruh dunia dapat langsung mencari dan menginstal plugin Anda dari panel administrasi (backend).