Sebuah panduan praktis pengembangan plugin WordPress yang lengkap, membantu Anda membangun plugin pertama Anda dari nol.

Di dunia maya yang luas ini, WordPress telah mendominasi sebagian besar sistem manajemen konten (CMS) berkat kemampuan ekspansinya yang luar biasa. Inti dari kemampuan ekspansi tersebut adalah plugin. Dengan mengembangkan plugin untuk WordPress, Anda dapat menambahkan fitur apa pun yang Anda bayangkan ke situs web Anda. Artikel ini akan memandu Anda langkah demi langkah, dari awal, untuk membuat plugin WordPress pertama Anda, serta memahami dengan mendalam struktur inti dan proses pengembangannya.

Dasar-Dasar Plugin WordPress dan Pembuatan Lingkungan Pengembangan

Sebelum memulai proses pengkodean, sangat penting untuk memahami esensi dari plugin WordPress dan membangun lingkungan pengembangan yang sesuai. Pada dasarnya, sebuah plugin terdiri dari satu atau lebih file PHP yang mengikuti spesifikasi WordPress, dan berfungsi melalui mekanisme tertentu dalam sistem WordPress.钩子(Hooks) Berinteraksi dengan sistem inti.

Definisi dasar dari plugin:

Setiap plugin harus memiliki satu file utama yang unik, dan di bagian awal file tersebut harus terdapat komentar dengan format tertentu yang berisi informasi tentang plugin tersebut. Komentar ini digunakan oleh WordPress untuk mengenali dan menampilkan metadata plugin, seperti nama plugin, deskripsi, versi, dan lainnya, di halaman pengelolaan plugin.

推荐阅读 Mengungkap Rahasia Pengembangan Plugin: Membangun Ekstensi Pertama Anda Dari Nol。

Konfigurasi lingkungan pengembangan lokal.

Untuk melakukan pengembangan dengan efisien dan aman, sangat disarankan untuk menggunakan lingkungan server lokal. Anda dapat memilih alat-alat seperti XAMPP, MAMP, Local by Flywheel, atau Docker. Persyaratan utamanya adalah menginstal PHP (versi yang kompatibel dengan server target Anda), MySQL/MariaDB, serta Apache/Nginx. Setelah itu, unduh file inti (core files) WordPress terbaru dan lakukan proses instalasinya.

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 plugin pertamamu: alat bantu untuk menyampaikan ucapan selamat.

Sekarang, mari kita mulai membuat sebuah plugin sederhana. Fungsi dari plugin ini adalah untuk secara otomatis menambahkan sebuah ucapan selamat yang dapat disesuaikan di akhir isi artikel di situs web.

Pertama-tama, di WordPress… wp-content/plugins Dalam direktori tersebut, buatlah folder baru dengan nama… my-first-greeting-pluginKemudian, buatlah file PHP utama di dalam folder tersebut; namanya bisa Anda sesuaikan. my-first-greeting-plugin.php。

Pernyataan informasi kepala plugin

Buka file utama, lalu masukkan kode berikut untuk mendefinisikan plugin:

<?php
/**
 * Plugin Name:       我的第一个问候语插件
 * Plugin URI:        https://yourwebsite.com/my-first-greeting-plugin
 * Description:       这是一个练习用的插件，用于在文章末尾添加问候语。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://yourwebsite.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-greeting-plugin
 */

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. Tentu saja, untuk saat ini plugin ini belum memiliki fungsi apa pun.

推荐阅读 10 Kiat Kunci dan Panduan Praktis untuk Meningkatkan Kinerja Situs Web E-commerce WooCommerce。

Menggunakan “hook” untuk menambahkan fitur inti (core features).

Pengoperasian WordPress sangat bergantung pada mekanisme “hook” (pautan/koneksi antar-fungsi), yang terbagi menjadi…动作钩子(ACTION Hooks) dan过滤器钩子(Filter Hooks). Kita perlu menambahkan teks di bagian akhir isi artikel, dan untuk itu kita perlu menggunakan Filter Hooks. the_content Filter hook ini…

Di bawah komentar di bagian awal file utama, tambahkan fungsi dan hook berikut:

// 定义向文章内容添加问候语的函数
function mfgp_add_greeting_to_content( $content ) {
    // 确保只在主循环的单篇文章页面显示
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $greeting = '<p style="color:#666; font-style:italic;">Terima kasih telah membaca artikel ini! Semoga Anda memiliki hari yang indah!</p>';
        $content .= $greeting;
    }
    return $content;
}
// 将函数挂载到 ‘the_content’ 过滤器钩子上
add_filter( 'the_content', 'mfgp_add_greeting_to_content' );

Setelah menyimpan file dan mengaktifkan plugin tersebut, buka artikel apa pun di situs web, lalu gulir ke bagian bawahnya. Anda seharusnya dapat melihat pesan sapaan yang telah ditambahkan. Dengan contoh sederhana ini, Anda telah mempraktikkan konsep-konsep inti dalam pengembangan plugin, yaitu: mendeklarasikan plugin, menulis fungsi-fungsi fungsional, dan…add_filter或add_actionMount the function to the correct hook.

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

Peningkatan fitur plugin: Ditambahkan halaman pengaturan manajemen.

Sebuah plugin yang matang biasanya memungkinkan pengguna untuk melakukan konfigurasi di latar belakang. Selanjutnya, kita akan menambahkan halaman pengaturan sederhana untuk plugin ucapan selamat datang, sehingga administrator dapat mengatur teks yang akan ditampilkan.

Membuat item menu administrasi

Pertama-tama, kita perlu menggunakan…add_actionHook memanggil sebuah fungsi, dan fungsi tersebut akan menggunakan… add_options_page Fungsi tersebut menambahkan sebuah halaman anak (sub-page) di bawah menu “Pengaturan” (Settings) di backend WordPress.

Lanjutkan menambahkan kode berikut ke dalam file utama:

推荐阅读 Dari Nol ke Satu: Panduan Lengkap dan Tutorial Praktis Pengembangan Plugin WordPress。

// 添加设置菜单
function mfgp_add_admin_menu() {
    add_options_page(
        '问候语插件设置',          // 页面标题
        '自定义问候语',           // 菜单标题
        'manage_options',         // 权限要求（管理员）
        'my-greeting-plugin',     // 菜单 Slug
        'mfgp_settings_page_html' // 用于输出页面内容的回调函数
    );
}
add_action( 'admin_menu', 'mfgp_add_admin_menu' );

Membangun halaman pengaturan dan logika penyimpanan

Sekarang, kita perlu mendefinisikan fungsi panggilan balik (callback function) yang telah disebutkan di atas. mfgp_settings_page_html Untuk merender formulir HTML pada halaman pengaturan dan memproses penyimpanan data dari formulir tersebut, WordPress menyediakan API pengaturan (settings API) untuk mempermudah proses ini. Namun, agar lebih mudah memahami alur kerjanya, mari kita gunakan metode dasar terlebih dahulu.

// 定义设置页面的 HTML 结构
function mfgp_settings_page_html() {
    // 检查用户权限
    if ( !current_user_can( 'manage_options' ) ) {
        return;
    }

// 处理表单提交（非设置API方式）
    if ( isset( $_POST['mfgp_greeting_text'] ) ) {
        // 验证 Nonce 确保请求来源安全
        check_admin_referer( 'mfgp_save_settings' );
        // 清理并保存输入的数据
        $greeting_text = sanitize_textarea_field( $_POST['mfgp_greeting_text'] );
        update_option( 'mfgp_custom_greeting', $greeting_text );
        echo '<div class="notice notice-success is-dismissible"><p>Pengaturan telah disimpan!</p></div>';
    }

// 获取已保存的问候语
    $saved_greeting = get_option( 'mfgp_custom_greeting', '感谢您阅读本文！祝你拥有美好的一天！' );
    ?&gt;
    <div class="wrap">
        <h1>\n</h1>
        <form method="post" action="">
            <?php wp_nonce_field( 'mfgp_save_settings' ); ?>
            <table class="form-table">
                <tr>
                    <th scope="row"><label for="mfgp_greeting_text">Ucapan selamat yang disesuaikan (Custom greeting message)</label></th>
                    <td>
                        <textarea name="mfgp_greeting_text" id="mfgp_greeting_text" rows="5" cols="50" class="large-text"><?php echo esc_textarea( $saved_greeting ); ?></textarea>
                        <p class="description">Teks ini akan ditampilkan di akhir setiap artikel.</p>
                    </td>
                </tr>
            </table>
            <?php submit_button( '保存更改' ); ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Memperbarui fungsi output di sisi frontend.

Terakhir, kita perlu memodifikasi fungsi output frontend yang sebelumnya, agar dapat mengambil data dari opsi yang tersimpan di dalam database.get_optionMembaca ucapan selamat dari file tersebut, bukan menggunakan teks yang telah dikodekan secara tetap (hard-coded).

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 mfgp_add_greeting_to_content( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        // 从数据库选项中获取问候语，如果没有则使用默认值
        $greeting_text = get_option( 'mfgp_custom_greeting', '感谢您阅读本文！祝你拥有美好的一天！' );
        if ( ! empty( $greeting_text ) ) {
            $greeting = '<p style="color:#666; font-style:italic;">'`. esc_html($greeting_text)`.'</p>';
            $content .= $greeting;
        }
    }
    return $content;
}

Sekarang, administrator dapat dengan bebas mengubah teks yang ditampilkan di halaman “Settings” -> “Custom Greetings”, dan perubahan tersebut akan langsung terlihat di tampilan pengguna (frontend).

Pengaturan Penerbitan Plugin: Internasionalisasi dan Penguatan Keamanan

Sebelum membagikan plugin kepada orang lain atau mengirimkannya ke direktori resmi, masih ada beberapa pekerjaan penting yang perlu diselesaikan, terutama terkait aspek internasionalisasi (penyesuaian untuk berbagai bahasa) dan penguatan keamanan.

Mengimplementasikan internasionalisasi teks

Internasionalisasi (i18n) memungkinkan plugin Anda untuk diterjemahkan ke dalam bahasa lain. Anda perlu membungkus semua teks yang ditampilkan kepada pengguna menggunakan fungsi tertentu. Modifikasi teks-teks dalam plugin kami:

1. 在插件头部注释中，我们已经定义了 Text Domain。
2. 在代码中，使用 () 或 esc_html() Fungsi digunakan untuk “membungkus” sebuah string (teks). Contohnya:

    // 在设置页面函数中
    $greeting_text = get_option( 'mfgp_custom_greeting', __( ‘感谢您阅读本文！祝你拥有美好的一天！’， ‘my-first-greeting-plugin’ ) );
    echo ‘<h1>’ . esc_html__( ‘问候语插件设置’， ‘my-first-greeting-plugin’ ) . ‘</h1>’;

// 在前端输出函数中（注意：前端输出通常不需要翻译，除非是主题或用户决定）
    // 但如果问候语本身需要多语言，可能需要更复杂的逻辑。

3. 使用工具如 Poedit 创建 .pot File template; penerjemah dapat menggunakan file ini sebagai dasar untuk membuat konten baru. .po 和 .mo Dokumen.

Memperkuat perlindungan keamanan

Keamanan sangat penting. Kami telah menggunakan beberapa fungsi keamanan, seperti…sanitize_textarea_field、esc_html、esc_textarea和wp_nonce_fieldSelain itu, perlu juga diperhatikan:
* 权限检查：在管理页面函数开始处使用 current_user_can Periksa dengan seksama.
* 数据验证与清理：对所有用户输入（如 $_POST, $_GET）进行验证（是否符合预期格式）和清理（移除非法字符）。
* 非竞态条件更新：对于重要的选项，考虑使用 wp_options Untuk membuat tabel, cara yang lebih aman adalah dengan menggunakan API Settings, yang telah dilengkapi dengan fitur non-competitive (nonce) dan pemeriksaan hak akses (permission checks).

Menyimpulkan.

Dengan panduan ini, kita telah menyelesaikan seluruh proses pengembangan dan penerbitan sebuah plugin WordPress yang fungsional. Kita memulai dengan memahami dasar-dasar plugin, kemudian membuat berkas utama yang berisi informasi header standar. Selanjutnya, kita mempraktikkan mekanisme “hook” yang menjadi inti dari WordPress melalui sebuah fitur sederhana untuk menyampaikan salam. Setelah itu, kita menambahkan halaman pengaturan di backend untuk memberikan kemungkinan kepada pengguna untuk mengonfigurasi plugin tersebut. Akhirnya, kita membahas langkah-langkah penting sebelum penerbitan, yaitu internasionalisasi dan penguatan keamanan. Setiap langkah tersebut mencakup fungsi-fungsi inti dari WordPress serta praktik terbaik dalam pengembangan plugin. Setelah memahami pengetahuan dasar ini, Anda dapat mencoba mengembangkan plugin yang lebih kompleks dan kreatif, serta berkontribusi pada ekosistem WordPress di seluruh dunia.

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja pengetahuan dasar yang diperlukan untuk mengembangkan plugin WordPress?

Anda perlu memiliki pengetahuan dasar pemrograman PHP, pemahaman tentang HTML dan CSS, serta kemampuan dalam mengoperasikan WordPress (seperti membuat artikel, halaman, dan menu). Kemahiran dalam pemrograman berorientasi objek (Object-Oriented Programming/OOP) tidak wajib, tetapi akan sangat membantu dalam pengembangan plugin yang lebih kompleks.

Mengapa plugin saya tidak muncul di menu latar belakang setelah diaktifkan?

Penyebab yang paling umum adalah masalah hak akses. Silakan periksa apa yang Anda lakukan saat memanggil (function atau method tertentu).add_options_pageKetika menggunakan fungsi serupa, apakah parameter kedua (capability) telah diatur dengan benar? ‘manage_options’Selain itu, pastikan bahwa fungsi Anda telah diuji dan terbukti berfungsi dengan benar.add_action( ‘admin_menu’， ...)Hook telah terpasang dengan benar, dan tidak ada kesalahan sintaks yang menyebabkan fungsi tidak dieksekusi. Anda dapat menambahkannya di awal kode.error_logGunakan fungsi tersebut untuk melakukan debugging.

Bagaimana cara mendeteksi dan memperbaiki kesalahan (bug) pada plugin WordPress saya?

Pertama-tama, pastikan bahwa di dalam sistem Anda… wp-config.php Debugging mode for WordPress telah diaktifkan dalam file tersebut: define( ‘WP_DEBUG’， true ); 和 define( ‘WP_DEBUG_LOG’， true );Dengan cara ini, pesan kesalahan akan tercatat. /wp-content/debug.log Di dalam file tersebut. Selanjutnya, Anda dapat menggunakan fitur “Console” dan “Network” pada alat pengembang browser untuk melakukan debugging pada bagian frontend. Untuk logika yang kompleks, gunakan…error_log( print_r( $variable， true ) );Mengeluarkan nilai variabel ke dalam log merupakan metode yang umum digunakan.

Bagaimana cara agar plugin saya kompatibel dengan plugin atau tema lainnya?

为了最大程度保证兼容性，你的插件应该：1）使用独特的前缀命名所有函数、类、变量和选项（如我们使用了mfgp_），避免命名冲突。2）在添加修改前端或后端样式时，尽量使用独特的选择器类名。3）在可能的情况下，提供过滤器钩子（apply_filters），允许其他开发者修改你插件的行为。4）避免直接修改 WordPress 核心数据库表或文件。