Pelajari cara mengembangkan plugin WordPress dari nol, langkah demi langkah.

Pengaturan Lingkungan Pengembangan Plugin WordPress

Sebelum memulai menulis kode, lingkungan pengembangan yang stabil dan terisolasi sangat penting. Hal ini tidak hanya dapat melindungi situs web produksi Anda, tetapi juga memungkinkan Anda untuk melakukan pengujian dan debugging dengan bebas. Cara yang paling direkomendasikan adalah menggunakan lingkungan pengembangan lokal, seperti Local by Flywheel, XAMPP, atau MAMP. Alat-alat ini dapat menginstal PHP, MySQL, dan server web yang diperlukan oleh WordPress dengan satu klik di komputer lokal Anda.

Selanjutnya, Anda perlu mengaktifkan mode debug di instalasi WordPress lokal Anda. Hal ini akan membantu Anda menemukan kesalahan dengan cepat selama proses pengembangan. Buka direktori akar (root directory) WordPress. wp-config.php Temukan atau tambahkan definisi konstanta berikut dalam file:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Setelah pengaturan ini dilakukan, semua pesan kesalahan dan peringatan akan dicatat. /wp-content/debug.log File tersebut disimpan dalam sistem, dan tidak ditampilkan langsung di halaman web sehingga tidak mempengaruhi pengguna di sisi front end (pengguna yang berinteraksi dengan antarmuka pengguna).

推荐阅读 Panduan Memulai Pengembangan Plugin WordPress: Membuat Plugin Kustom Pertama Anda dari Nol.。

Terakhir, Anda memerlukan sebuah editor kode. Visual Studio Code, PhpStorm, atau Sublime Text semuanya merupakan pilihan yang sangat baik, karena mereka menawarkan dukungan terhadap penyorotan sintaks yang baik serta saran kode (code hints) untuk pengembangan dengan PHP dan WordPress. Pastikan bahwa editor yang Anda gunakan dapat dengan mudah mengakses file-file proyek yang berada di server lokal.

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.

Sebuah plugin WordPress pada dasarnya merupakan satu atau lebih komponen yang terletak di dalam struktur kode aplikasi WordPress itu sendiri. wp-content/plugins File-file PHP yang terdapat dalam direktori tersebut. Setiap plugin harus memiliki sebuah file utama (main file), dan di bagian awal file tersebut perlu terdapat komentar yang berisi informasi standar tentang plugin tersebut, agar WordPress dapat mengenali plugin tersebut.

Menulis informasi kepala (header) untuk plugin

Di milikmu wp-content/plugins Di dalam direktori tersebut, buatlah sebuah folder baru, misalnya… my-first-pluginDalam folder tersebut, buatlah file utama (main file). my-first-plugin.phpDi awal file, harus terdapat komentar dengan format berikut:

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

Dalam komentar ini, “Nama Plugin” merupakan kolom yang wajib diisi, sedangkan kolom lainnya bersifat opsional. WordPress akan membaca informasi tersebut dan menampilkannya di halaman pengelolaan plugin di bagian belakang (backend).

Merealisasikan sebuah fungsi sederhana.

Sekarang, mari kita tambahkan fitur pertama yang nyata untuk plugin ini: menambahkan teks kustom secara otomatis di akhir isi artikel. Kita akan menggunakan… the_content Filter Hook ini.

推荐阅读 Memulai dan Menjadi Ahli dalam Mengembangkan Plugin WordPress: Berbagi Pengalaman Praktis dan Teknik Inti。

Di bawah komentar di bagian atas, tambahkan kode berikut:

function myfp_add_text_to_content( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $custom_text = '<p><em>Terima kasih telah membaca artikel ini, disajikan oleh “My First Plugin”.</em></p>';
        $content .= $custom_text;
    }
    return $content;
}
add_filter( 'the_content', 'myfp_add_text_to_content' );

Setelah menyimpan file tersebut, masuklah ke halaman “Plugin” di panel administrasi WordPress. Anda seharusnya dapat melihat “Plugin Pertama Saya”. Aktifkan plugin tersebut, lalu periksa salah satu artikel di situs web Anda. Anda akan menemukan bahwa teks yang telah kami definisikan telah ditambahkan di akhir artikel tersebut. Dalam kode ini…myfp_add_text_to_content Ini adalah fungsi yang kita definisikan sendiri.add_filter() Mount it to… the_content Di atas kait tersebut. Penilaian kondisi di dalam fungsi tersebut memastikan bahwa teks ini hanya akan ditampilkan dalam siklus utama halaman artikel individu di frontend.

Memahami mekanisme inti dari plugin WordPress

Dasar dari kekuatan dan fleksibilitas plugin WordPress adalah mekanisme Hook-nya. Hook memungkinkan Anda untuk menyisipkan kode Anda sendiri pada titik-titik tertentu dalam eksekusi kode inti WordPress, sehingga Anda dapat mengubah atau memperluas perilaku defaultnya. Hook terutama dibagi menjadi dua jenis: Action Hooks dan Filter Hooks.

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

Action Hooks dan Filter Hooks

Action Hook memungkinkan Anda untuk menjalankan kode kustom saat suatu peristiwa tertentu terjadi, misalnya setelah artikel diterbitkan atau saat halaman manajemen dimuat. Hook ini tidak memerlukan nilai kembalian (return value). add_action() Fungsi tersebut digunakan untuk melakukan proses “mounting” (menghubungkan komponen tertentu ke sistem). Sebagai contoh, sebuah operasi dapat dijalankan saat plugin diaktifkan.

function myfp_plugin_activation_task() {
    // 创建数据库表、初始化选项等
    update_option( 'myfp_plugin_installed', '2026-01-01' );
}
register_activation_hook( __FILE__, 'myfp_plugin_activation_task' );

Di sini digunakan… register_activation_hookIni adalah sebuah “action hook” khusus yang dirancang khusus untuk proses pengaktifan plugin.

Filter hook memungkinkan Anda untuk memodifikasi data yang diterimanya. Hook ini mengharuskan fungsi yang digunakan untuk menerima sebuah nilai, dan fungsi tersebut harus mengembalikan nilai yang telah dimodifikasi. Contoh sebelumnya, yaitu modifikasi isi artikel, merupakan contoh khas dari penggunaan filter. Contoh lainnya adalah modifikasi panjang kutipan dari sebuah artikel.

推荐阅读 Memahami Pengembangan Plugin WordPress: Panduan Praktis Lengkap dari Nol hingga Satu.。

function myfp_custom_excerpt_length( $length ) {
    return 20; // 将摘录长度改为20个单词
}
add_filter( 'excerpt_length', 'myfp_custom_excerpt_length' );

Menggunakan kode singkat untuk menambahkan konten dinamis

Selain “hook”, kode singkat (shortcode) merupakan alat yang sangat efektif untuk interaksi antara plugin dan konten. Kode singkat memungkinkan pengguna untuk memasukkan tag sederhana ke dalam artikel atau halaman, sehingga memungkinkan plugin tersebut untuk berinteraksi dengan konten tersebut. [my_shortcode]) untuk memanggil konten kompleks yang dihasilkan oleh plugin tersebut.

Membuat kode pendek sangat sederhana, gunakan add_shortcode() Fungsi. Misalnya, buatlah kode singkat untuk menampilkan waktu saat ini:

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_current_time_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'format' => 'Y-m-d H:i:s',
    ), $atts, 'current_time' );

return date( $atts['format'] );
}
add_shortcode( 'current_time', 'myfp_current_time_shortcode' );

Pengguna dapat memasukkan teks di editor. [current_time format="H:i"] Hanya menampilkan jam dan menit saja.

Menambahkan halaman administrasi untuk plugin

Banyak plugin memerlukan opsi konfigurasi, yang biasanya diatur melalui halaman menu administrasi di WordPress. WordPress menyediakan serangkaian fungsi untuk menambahkan item menu utama atau sub-menu.

Membuat halaman pengaturan plugin

Kami akan menambahkan halaman pengaturan sederhana untuk plugin tersebut, yang berfungsi untuk mengelola teks yang sebelumnya ditambahkan di akhir artikel. Pertama-tama, gunakan… add_menu_page() 或 add_options_page() Fungsi tersebut digunakan untuk mendaftarkan halaman tertentu. Umumnya, plugin yang sederhana akan menambahkan halaman tersebut ke dalam sub-menu “Pengaturan” (Settings).

Tambahkan kode berikut ke dalam file utama plugin:

function myfp_add_admin_menu() {
    add_options_page(
        '我的第一个插件设置', // 页面标题
        '我的插件设置',       // 菜单标题
        'manage_options',     // 所需权限
        'myfp-settings',      // 菜单slug
        'myfp_settings_page_html' // 用于输出页面内容的回调函数
    );
}
add_action( 'admin_menu', 'myfp_add_admin_menu' );

Kode ini memberitahu WordPress bahwa saat membuat menu administrasi (backend management menu),…admin_menu (Akksi), eksekusi myfp_add_admin_menu Fungsi untuk menambahkan sebuah halaman.

Membangun formulir halaman pengaturan

Selanjutnya, kita perlu mendefinisikan… myfp_settings_page_html Fungsi tersebut digunakan untuk menghasilkan konten HTML halaman web serta menangani proses penyimpanan formulir. Untuk menyimpan pengaturan dengan aman, kami menggunakan fitur yang tersedia di WordPress. options API.

function myfp_settings_page_html() {
    // 检查用户权限
    if ( !current_user_can( 'manage_options' ) ) {
        return;
    }

// 处理表单提交
    if ( isset( $_POST['myfp_footer_text'] ) ) {
        update_option( 'myfp_footer_text', sanitize_textarea_field( $_POST['myfp_footer_text'] ) );
        echo '<div class="notice notice-success"><p>Pengaturan telah disimpan!</p></div>';
    }

// 获取现有值
    $current_text = get_option( 'myfp_footer_text', '感谢阅读本文，由“我的第一个插件”为您呈现。' );
    ?&gt;
    <div class="wrap">
        <h1>Pengaturan plugin pertama saya</h1>
        <form method="post" action="">
            <?php wp_nonce_field( 'myfp_settings_action', 'myfp_settings_nonce' ); ?>
            <table class="form-table">
                <tr>
                    <th scope="row"><label for="footer_text">Teks di bagian kaki halaman artikel (footer text)</label></th>
                    <td>
                        <textarea name="myfp_footer_text" id="footer_text" rows="4" cols="50" class="large-text"><?php echo esc_textarea( $current_text ); ?></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
}

Terakhir, jangan lupa untuk mengubah fungsi yang sebelumnya digunakan untuk memfilter isi artikel, agar fungsi tersebut dapat bekerja berdasarkan pilihan yang telah ditentukan. myfp_footer_text Teks dibaca dari file, bukan dari string yang dikodekan secara langsung (hard-coded). Dengan cara ini, halaman pengaturan backend yang memiliki fungsi manajemen dasar telah selesai dibuat.

Menyimpulkan.

Dengan mengikuti langkah-langkah dalam artikel ini, Anda telah berhasil membuat sebuah plugin WordPress yang berfungsi penuh dari nol. Anda telah mempelajari cara membangun lingkungan pengembangan, membuat struktur dasar plugin, memanfaatkan mekanisme hook (aksi dan filter) dari WordPress untuk memperluas fungsionalitas plugin, mengimplementasikan shortcode, serta membuat antarmuka administrasi di bagian belakang (backend). Inti dari pengembangan plugin adalah memahami konsep hook dan pengendalian berbasis peristiwa (event-driven), yang memungkinkan Anda untuk menyesuaikan perilaku WordPress secara mendalam tanpa perlu mengubah kode intinya. Ingatlah bahwa struktur kode yang baik, penanganan input/output yang aman, serta dukungan terhadap internasionalisasi (internationalization) merupakan dasar penting dalam mengembangkan plugin berkualitas tinggi. Selanjutnya, Anda dapat mencoba menambahkan lebih banyak fitur ke dalam plugin, seperti jenis artikel khusus, alat bantu (tools), atau endpoint REST API, dan terus mengeksplorasi berbagai kemungkinan yang tersedia dalam ekosistem WordPress.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah sebuah plugin harus hanya memiliki satu file PHP?

Tidak selalu demikian. Sebuah plugin dapat terdiri dari satu file PHP saja, tetapi untuk plugin yang lebih kompleks, struktur yang termodulasi lebih disarankan. Anda dapat memisahkan berbagai fungsi ke dalam kelas atau file yang berbeda, dan file utama hanya bertugas memanggil file-file tersebut serta menginisialisasi plugin tersebut. Hal ini akan membantu dalam pemeliharaan dan pengorganisasian kode. Sebagai contoh, Anda dapat membuat… includes/ Fungsi direktori digunakan untuk menyimpan kelas-kelas (classes).admin/ Direktori tersebut berisi kode terkait bagian belakang (backend) dari aplikasi.public/ Direktori tersebut berisi logika front-end (bagian kode yang berinteraksi langsung dengan pengguna).

Bagaimana cara memproses masukan pengguna dari plugin dengan aman?

Saat memproses input dari pengguna (seperti data formulir atau parameter URL), diperlukan proses validasi, sanitasi, dan pengelolaan karakter escape (escaping). Untuk data yang disimpan ke dalam basis data, gunakan metode yang sesuai untuk memastikan keamanan dan kualitas data tersebut. sanitize_text_field()、sanitize_textarea_field()、intval() Gunakan fungsi-fungsi tertentu untuk melakukan pembersihan data. Saat menghasilkan data untuk ditampilkan di halaman HTML, gunakanlah metode yang sesuai. esc_html()、esc_attr()、esc_url() 或 wp_kses() Melakukan proses ekstraksi (escaping) untuk mencegah serangan jenis Cross-Site Scripting (XSS).

Bagaimana cara mendebug kode saat mengembangkan plugin?

Selain mengaktifkan… WP_DEBUG Selain itu, Anda juga dapat menggunakan… error_log() Fungsi tersebut mencatat informasi khusus ke dalam log debug. Untuk memeriksa nilai variabel,var_dump() 或 print_r() Menggabungkan die() Metode tersebut cepat, tetapi kurang efisien (atau kurang berkualitas). Lebih disarankan untuk menggunakan fitur yang sudah tersedia di WordPress itu sendiri. wp_die() 和 wp_send_json()(Digunakan untuk debugging AJAX.) Selain itu, dengan menggunakan plugin debugging profesional seperti Query Monitor, Anda dapat melihat informasi mengenai kueri database, hook, skrip, dan lainnya saat program sedang berjalan dengan lebih mudah dan intuitif.

Bagaimana cara membuat plugin saya mendukung berbagai bahasa?

Untuk membuat plugin mendukung internasionalisasi (i18n), Anda perlu menggunakan fungsi terjemahan dari WordPress. Pertama-tama, atur pengaturan yang sesuai dalam komentar di bagian awal kode plugin. Text Domain(Dalam contoh ‘my-first-plugin’). Dalam kode, gunakan format yang sama untuk semua string yang ditampilkan kepada pengguna. () 或 _e() Fungsi tersebut dikemas (dibungkus) dalam sebuah objek, misalnya: ( ‘Hello World’, ‘my-first-plugin’ )Kemudian, gunakan alat seperti Poedit untuk menghasilkannya. .pot File template; penerjemah dapat menggunakan file ini untuk membuat terjemahan dalam berbagai bahasa. .po 和 .mo File tersebut disimpan dalam plugin. languages/ Di dalam folder tersebut.