Pemula dalam Pengembangan Plugin WordPress: Bangun Ekstensi Fungsional Pertama Anda dari Nol

Mengapa memilih untuk mengembangkan plugin WordPress?

Sebagai sistem manajemen konten (Content Management System/CMS) yang paling populer di dunia, keunggulan WordPress dalam hal skalabilitas sangat dipengaruhi oleh arsitektur plugin-nya. Mengembangkan plugin sendiri berarti Anda tidak lagi terbatas oleh fungsi-fungsi yang tersedia dalam plugin yang sudah ada, sehingga Anda dapat memenuhi kebutuhan khusus situs web Anda atau klien Anda dengan tepat. Baik itu dengan menambahkan kode singkat (short code) atau membuat panel manajemen yang kompleks, plugin memungkinkan Anda memisahkan logika fungsional dari tampilan situs (theme), sehingga fungsi-fungsi tersebut tidak terpengaruh saat tema diperbarui.

Dari sudut pandang pembelajaran, memahami pengembangan plugin merupakan langkah penting untuk memahami lebih dalam inti dari WordPress. Dengan mempelajarinya, Anda akan mengenal dua konsep utama, yaitu Action Hooks dan Filter Hooks, yang merupakan fondasi dari kemodularan dan keandalan WordPress. Menguasai pengembangan plugin tidak hanya akan meningkatkan kemampuan teknis Anda, tetapi juga membuka peluang karier baru, bahkan memungkinkan Anda untuk membuat produk digital yang dapat dijual.

Persiapan sebelum pengembangan (Pre-development preparations)

Sebelum menulis baris kode pertama, Anda memerlukan lingkungan pengembangan yang sesuai. Lingkungan pengembangan ini biasanya mencakup server lokal (seperti Local by Flywheel, XAMPP, atau MAMP), editor kode (seperti VS Code atau PhpStorm), serta situs uji coba yang telah diinstal dengan WordPress. Pastikan bahwa versi PHP yang digunakan di lingkungan uji coba Anda sesuai dengan versi PHP yang digunakan di lingkungan produksi online, untuk menghindari masalah kompatibilitas.

推荐阅读 Menguasai Keterampilan Inti WordPress: Panduan Praktis Lengkap Dari Pemulaan Hingga Optimisasi。

Memahami struktur dasar sebuah plugin

Sebuah plugin WordPress yang paling sederhana hanya perlu mengandung satu file PHP saja. Namun, sebuah plugin dengan struktur yang baik biasanya terdiri dari beberapa direktori dan file untuk mencapai organisasi yang lebih baik. Struktur direktori dalam sebuah plugin yang tipikal dapat mencakup hal-hal berikut:
File plugin utama (misalnya my-first-plugin.phpIni adalah titik masuk (entry point) dari plugin, yang berisi informasi header plugin.
- includes/ Daftar Isi: Berisi file-file kelas atau fungsi yang mewakili fitur-fitur inti dari aplikasi.
- admin/ Daftar Isi: Berisi kode yang berkaitan dengan antarmuka manajemen backend.
- public/ Daftar Isi: Berisi kode yang ditujukan untuk bagian frontend (pengguna) dari sebuah situs web.
- assets/ Direktori: Menyimpan sumber daya statis seperti JavaScript, CSS, dan gambar.
- languages/ Daftar Isi: Berisi file-file terjemahan internasional (.po/.mo).

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

Informasi header plugin yang wajib ada:

Setiap plugin WordPress harus memasukkan komentar header plugin standar di bagian atas file PHP utamanya; 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:            你的名字
 * Author URI:        https://example.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

Di antaranya,Plugin Name Hal tersebut merupakan kolom wajib (required fields), sedangkan yang lainnya bersifat opsional (optional). Namun, demi keutuhan dan kemudahan pemeliharaan (maintainability) plugin, disarankan untuk mengisi semua informasi yang tersedia.Text Domain Digunakan untuk internasionalisasi.Domain Path Menunjuk ke direktori berisi file bahasa.

Buatlah plugin pertamamu: sebuah fitur sederhana untuk menyampaikan salam.

Mari kita praktikkan ini dengan sebuah contoh nyata. Kita akan membuat sebuah plugin yang menampilkan pesan sapaan yang dapat disesuaikan di bagian atas konten artikel di sebuah situs web.

Membuat file dan direktori plugin

Pertama-tama, di dalam direktori instalasi WordPress Anda… wp-content/plugins/ Dalam folder tersebut, buatlah sebuah folder baru dengan nama… my-greeting-pluginKemudian, buatlah sebuah file PHP utama di dalam folder tersebut, dengan nama… my-greeting-plugin.phpDan salin informasi header plugin di atas ke dalamnya.

推荐阅读 Cara Memilih & Mengembangkan Plugin WordPress Berkualitas Tinggi: Panduan untuk Pemula hingga Profesional。

\nMenggunakan hook untuk menambahkan fungsionalitas.

WordPress berjalan menggunakan sistem hook (pautan). Untuk menambahkan informasi di depan isi artikel, kita perlu menggunakan fitur tersebut. the_content Filter Hook. Di dalam file plugin utama Anda, tambahkan fungsi dan pemanggilan hook berikut:

/**
 * 在文章内容前添加问候语
 *
 * @param string $content 原始的文章内容。
 * @return string 修改后的文章内容。
 */
function mgp_add_greeting_to_content( $content ) {
    $greeting_text = get_option( 'mgp_greeting_text', '欢迎阅读！' ); // 从数据库获取设置，默认为“欢迎阅读！”
    $custom_greeting = '<div class="mgp-greeting"><p><strong>'`. esc_html($greeting_text)`.'</strong></p></div>';

// 仅对主循环中的单篇文章页面生效
    if ( is_single() &amp;&amp; in_the_loop() &amp;&amp; is_main_query() ) {
        return $custom_greeting . $content;
    }
    return $content;
}
// 将函数挂载到 `the_content` 过滤器
add_filter( 'the_content', 'mgp_add_greeting_to_content' );

Kode ini mendefinisikan sebuah fungsi. mgp_add_greeting_to_contentSistem tersebut menerima isi artikel, lalu menambahkan sebuah kontainer berbentuk DIV yang berisi ucapan selamat di bagian depannya. add_filter() Fungsi: Kita akan memasang fungsi kustom ke dalam WordPress. the_content Filter tersebut berfungsi untuk memastikan bahwa pesan sapaan hanya muncul dalam siklus utama halaman artikel individu di frontend, dan tidak mempengaruhi halaman arsip atau alat bantu (tools). Logika penilaian yang ada di dalam fungsi tersebut memastikan hal tersebut terjadi.

Membuat halaman pengaturan manajemen yang sederhana

Agar pengguna dapat mengatur teks sapaan mereka sendiri, kita perlu menambahkan halaman pengaturan yang sederhana. Hal ini melibatkan penggunaan API menu administrasi WordPress. Lanjutkan dengan menambahkan kode berikut ke dalam file plugin 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 mgp_register_admin_menu() {
    add_options_page(
        '问候语设置',           // 页面标题
        '问候语插件设置',       // 菜单标题
        'manage_options',      // 所需权限
        'my-greeting-plugin',  // 菜单slug
        'mgp_render_settings_page' // 用于输出页面内容的回调函数
    );
}
add_action( 'admin_menu', 'mgp_register_admin_menu' );

/**
 * 渲染设置页面的内容
 */
function mgp_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Pengaturan Plugin Salam (Greeting Plugin Settings)</h1>
        <form method="post" action="/id/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'mgp_settings_group' ); // 输出设置组和非ce字段
            do_settings_sections( 'my-greeting-plugin' ); // 输出设置区域
            submit_button(); // 输出提交按钮
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    <?php
}

/**
 * 初始化插件设置
 */
function mgp_initialize_settings() {
    // 注册一个设置
    register_setting(
        'mgp_settings_group', // 设置组名
        'mgp_greeting_text',  // 选项名，对应数据库中的键
        array( // 可选的验证回调函数
            'sanitize_callback' => 'sanitize_text_field',
            'default' =&gt; '欢迎阅读！'
        )
    );

// 添加一个设置区域
    add_settings_section(
        'mgp_main_section',           // 区域ID
        '主要设置',                   // 区域标题
        null,                         // 区域介绍的回调函数（此处不需要）
        'my-greeting-plugin'          // 页面slug
    );

// 向区域中添加一个字段
    add_settings_field(
        'mgp_greeting_field',         // 字段ID
        '问候语文本',                 // 字段标签
        'mgp_greeting_field_callback', // 用于输出字段HTML的回调函数
        'my-greeting-plugin',         // 页面slug
        'mgp_main_section'            // 区域ID
    );
}
add_action( 'admin_init', 'mgp_initialize_settings' );

/**
 * 渲染问候语文本输入字段
 */
function mgp_greeting_field_callback() {
    $greeting = get_option( 'mgp_greeting_text', '欢迎阅读！' );
    echo '<input type="text" name="mgp_greeting_text" value="' . esc_attr( $greeting ) . '" class="regular-text" />'; echo '
    echo '<p class="description">Teks ini akan ditampilkan di bagian atas setiap artikel di situs web Anda.</p>';
}

Kode ini melakukan hal-hal berikut:
1. Menggunakan add_action( 'admin_menu', ... ) Di bawah menu “Pengaturan”, telah ditambahkan sebuah halaman sub-menu.
2. Menggunakan add_action( 'admin_init', ... ) Pengaturan awal, termasuk opsi untuk mendaftarkan sebuah basis data, sebuah area pengaturan, dan sebuah bidang masukan (input field).
3. Telah didefinisikan fungsi untuk mengatur halaman formulir dan field saat proses rendering (pemutaran/penggambaran tampilan).
Sekarang, masuk ke panel administrasi WordPress Anda, lalu temukan menu “Pengaturan” (Settings). Di dalam menu tersebut, cari opsi “Pengaturan Plugin Greeting” (Greeting Plugin Settings). Di sana, Anda dapat mengubah teks sapaan (greeting message), dan perubahan tersebut akan langsung terlihat di artikel-artikel yang Anda publikasikan di halaman depan (front end).

Best Practices and Advanced Techniques for Plugin Development

Setelah menyelesaikan fungsi-fungsi dasar, mengikuti praktik terbaik akan membuat plugin Anda lebih profesional, lebih aman, dan lebih mudah diperawat.

Keamanan adalah tugas utama.

Jangan pernah mempercayai input dari pengguna. Dalam plugin, semua data yang diperoleh dari sumber eksternal (seperti…) $_GET、$_POST、$_COOKIE Data yang diperoleh dari sumber apa pun (misalnya, formulir pengisian, permintaan API, atau kueri basis data) harus diverifikasi, dibersihkan, atau dieksekusi dengan cara yang tepat sebelum dihasilkan atau digunakan.
Output escape: Gunakan esc_html()、esc_attr()、esc_url() 和 wp_kses_post() Fungsi-fungsi seperti itu.
Membersihkan input: Gunakan sanitize_text_field()、sanitize_email()、intval() Fungsi-fungsi seperti itu.
Keamanan database: gunakan $wpdb Untuk melakukan pencarian menggunakan metode sebuah kelas, atau dengan menggunakan… prepare() Menggunakan metode parameterisasi dalam kueri untuk mencegah serangan SQL injection.
Pemeriksaan izin: Sebelum mengakses halaman administrasi atau melakukan tindakan sensitif, gunakan current_user_can() Periksa hak akses pengguna, lalu gunakannya sesuai kebutuhan. check_admin_referer() Menguverifikasi field `nonce` untuk mencegah penipuan permintaan antar situs (Cross-Site Request Forgery/CSRF).

推荐阅读 Menguasai keterampilan inti WordPress untuk membuat situs web profesional yang menggabungkan fungsi dan estetika.。

Mengimplementasikan internasionalisasi (i18n)

Agar plugin Anda dapat digunakan oleh pengguna di seluruh dunia, diperlukan dukungan terhadap terjemahan berbagai bahasa. Untuk itu, Anda perlu menggunakan fungsi terjemahan WordPress untuk mengatur semua teks yang ditampilkan kepada pengguna. Ubah pengaturan penampilan teks dalam kode Anda sebelumnya.

// 在插件头信息中已定义 Text Domain: my-first-plugin
$greeting_text = get_option( 'mgp_greeting_text', __( '欢迎阅读！', 'my-first-plugin' ) );

// 在管理菜单函数中
add_options_page(
    __( '问候语设置', 'my-first-plugin' ),
    __( '问候语插件设置', 'my-first-plugin' ),
    'manage_options',
    'my-greeting-plugin',
    'mgp_render_settings_page'
);

Kemudian, Anda dapat menggunakan alat seperti Poedit untuk mengekstrak string dari kode sumber plugin dan menggunakannya untuk pembuatan konten yang diinginkan. .pot File template; penerjemah dapat menggunakan file ini untuk membuat terjemahan dalam berbagai bahasa. .po 和 .mo File tersebut kemudian dimasukkan ke dalam plugin. /languages Indeks.

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

Pengorganisasian Kode dan Optimisasi Kinerja

Seiring dengan bertambahnya fitur plugin, akan lebih bijaksana untuk membagi kode ke dalam berbagai file yang terpisah. Penggunaan pemrograman berorientasi objek (Object-Oriented Programming/OOP) dan kelas dapat meningkatkan keterbacaan serta kemudahan penggunaan kembali kode. Untuk sumber daya seperti CSS dan JS, gunakan pendekatan yang terstruktur dan terorganisir dengan baik. wp_enqueue_style() 和 wp_enqueue_script() Fungsi tersebut berjalan dengan benar pada hook (titik penanganan tertentu) yang sesuai. wp_enqueue_scripts 或 admin_enqueue_scriptsData dapat diunduh sesuai kebutuhan, dan versi dependensi yang digunakan dapat ditentukan secara spesifik. Hindari melakukan kueri database yang membutuhkan banyak sumber daya secara langsung di dalam plugin; pertimbangkan untuk menggunakan API Transients untuk menyimpan data yang tidak kritis dalam cache.

Menyimpulkan.

Mulai dari membuat sebuah file PHP sederhana dan menambahkan informasi header plugin standar, hingga memanfaatkan action hooks dan filter hooks untuk berinteraksi dengan siklus hidup (lifecycle) WordPress, lalu membuat antarmuka pengelolaan dan mengikuti praktik terbaik dalam hal keamanan serta internasionalisasi (internationalization), Anda telah melewati langkah-langkah dasar dalam pembuatan sebuah plugin WordPress yang lengkap. Plugin “Greeting” ini mungkin sederhana, tetapi secara keseluruhan menunjukkan proses inti dalam pengembangan plugin: perencanaan fitur, penanganan data, dan pembuatan antarmuka pengguna. Ingatlah bahwa belajar terus-menerus dari manual resmi, mempelajari kode plugin open source yang berkualitas, serta terus berlatih adalah cara terbaik untuk meningkatkan keterampilan dalam pengembangan plugin. Plugin berikutnya Anda buat mungkin akan dapat menyelesaikan masalah nyata yang lebih kompleks dan menarik.

FAQ - Pertanyaan yang Sering Diajukan.

Berapa banyak file yang dibutuhkan minimal untuk sebuah plugin WordPress?

Sebuah plugin WordPress yang berfungsi dengan lengkap hanya memerlukan satu file PHP saja. Yang penting, di bagian awal file tersebut terdapat informasi header plugin yang benar (setidaknya mencakup…). Plugin NameDengan demikian, WordPress dapat mengenali dan mengaktifkannya dari daftar plugin di backend. File tersebut dapat berisi seluruh kode fungsionalitas, kode halaman administrasi, dan lainnya. Tentu saja, untuk plugin yang kompleks, membagi kode ke dalam beberapa file dan direktori merupakan praktik yang disarankan demi memudahkan pemeliharaan.

Bagaimana cara menghindari konflik antara plugin yang saya kembangkan dengan plugin lainnya?

Kunci untuk menghindari konflik adalah dengan menggunakan prefiks yang unik untuk menamai semua fungsi, kelas, variabel, nama opsi, serta hook aksi/filter. Misalnya, jangan gunakan… add_greeting() Nama fungsi yang bersifat umum seperti ini seharusnya menggunakan format yang lebih standar atau baku. mgp_add_greeting() Nama-nama seperti itu (di antaranya) mgp Itu merupakan singkatan dari plugin Anda. Untuk opsi yang disimpan dalam basis data, juga perlu digunakan awalan yang unik, misalnya… mgp_greeting_textIni dapat meminimalkan kemungkinan terjadinya konflik namespace sebanyak mungkin.

Apa yang harus dilakukan saat mengaktifkan dan menonaktifkan sebuah plugin?

Saat plugin diaktifkan, biasanya diperlukan beberapa tugas sekali jalan, seperti memeriksa versi PHP atau WordPress, membuat tabel dalam basis data, menginisialisasi opsi default, dan sebagainya. Hal ini dapat dilakukan melalui… register_activation_hook() Fungsi tersebut dapat diimplementasikan dengan cara yang sama.register_deactivation_hook() Digunakan untuk mendefinisikan tindakan yang akan dijalankan ketika plugin dinonaktifkan, misalnya menghapus tugas yang dijadwalkan. Namun, perlu diingat bahwa fungsi “hook” untuk dinonaktifkan umumnya tidak digunakan untuk menghapus data; proses pembersihan data biasanya dilakukan oleh fungsi “hook” saat uninstallasi atau secara manual oleh pengguna.

Bagaimana cara menambahkan halaman pengaturan untuk plugin saya?

Menambahkan halaman pengaturan untuk plugin terutama melibatkan dua API WordPress: Menu API dan Settings API. Pertama-tama, gunakan… add_action( 'admin_menu', ... ) Menggantungkan sebuah fungsi, lalu menggunakan fungsi tersebut di dalamnya. add_menu_page() 或 add_submenu_page() Daftarkan halaman menu tingkat atas atau sub-menu. Setelah itu, gunakan… add_action( 'admin_init', ... ) Menggantungkan (menghubungkan) sebuah fungsi lain, lalu menggunakan fungsi tersebut di dalamnya. register_setting()、add_settings_section() 和 add_settings_field() Mari kita definisikan opsi pengaturan yang spesifik dan field-formulir yang diperlukan. Akhirnya, tulis sebuah fungsi callback untuk merender formulir HTML halaman pengaturan tersebut.

Plug-in saya perlu kompatibel dengan versi WordPress mana?

Hal ini tergantung pada target audiens Anda. Umumnya, disarankan untuk kompatibel dengan 3 hingga 4 versi WordPress terbaru. Anda dapat menggunakan informasi tersebut di bagian header plugin Anda. Requires at least: Untuk menyatakan versi WordPress minimum yang diperlukan, berikut adalah penjelasannya: Selama proses pengembangan, sebaiknya dihindari penggunaan fungsi-fungsi yang sangat baru yang hanya didukung oleh versi WordPress terbaru. Hal ini dilakukan untuk memastikan bahwa kode yang dibuat dapat berjalan dengan baik pada versi WordPress yang lebih lama, sehingga aplikasi tersebut lebih kompatibel dengan berbagai sistem. function_exists() Lakukan pemeriksaan kondisi untuk menyediakan solusi alternatif yang kompatibel dengan versi sebelumnya. Selain itu, melakukan pengujian secara berkala pada versi WordPress yang lebih lama merupakan cara yang baik untuk memastikan kekompatibilitas.