Memahami pengembangan plugin WordPress: Membangun modul fungsionalitas ekstensi pertama Anda dari nol hingga satu.

Memahami arsitektur dasar plugin WordPress

Pembaruan (plugin) WordPress pada dasarnya merupakan satu atau lebih file PHP yang mengikuti struktur penamaan dan organisasi tertentu. Pembaruan tersebut digunakan untuk memperluas atau mengubah fungsi inti WordPress melalui sistem “Hook” yang disediakan oleh WordPress. Memahami arsitektur ini merupakan langkah pertama yang penting dalam pengembangan yang sukses.

Salah satu plugin paling sederhana hanya memerlukan satu file utama dan satu komentar di bagian awal file tersebut (yang disebut “plugin header”). Komentar plugin header ini sangat penting agar WordPress dapat mengenali plugin tersebut, dan harus diletakkan di bagian awal file PHP utama. Sebagai contoh, sebuah plugin dengan nama…my-first-plugin.phpUntuk file tersebut, bagian awal isi harus seperti berikut:

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

Komentar ini memberitahu panel manajemen plugin WordPress bahwa ini adalah sebuah plugin dengan nama “My First Plugin”. Buatlah file ini dan letakkanlah di tempat yang sesuai./wp-content/plugins/my-first-plugin/Setelah menambahkannya ke dalam direktori yang ditentukan, Anda dapat melihat plugin tersebut di halaman “Plugins” di panel administrasi WordPress, lalu mengaktifkannya atau menonaktifkannya sesuai kebutuhan.

推荐阅读 Belajar Pengembangan Plugin WordPress Dari Nol: Membangun Fungsi Khusus Pertama Anda。

Prinsip kerja inti dari plugin ini berfokus pada konsep “hook” (pengait). Ada dua jenis hook, yaitu Action dan Filter. Hook tipe Action memungkinkan Anda untuk menjalankan kode kustom pada momen tertentu, seperti saat artikel diterbitkan atau halaman dimuat. Sementara itu, hook tipe Filter memungkinkan Anda untuk memodifikasi data yang dihasilkan selama proses tertentu, seperti isi artikel atau judul artikel. Kode plugin Anda terutama berfungsi untuk melakukan hal-hal tersebut.add_action()和add_filter()Dua fungsi ini “dipasang” (di-mont) pada hook-hook 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

Membangun lingkungan pengembangan plugin pertamamu

Sebelum mulai mengkode, memiliki lingkungan pengembangan lokal yang andal sangat penting. Hal ini memungkinkan Anda untuk melakukan pengujian dan debugging dengan aman.

Memilih alat server lokal yang sesuai

Disarankan untuk menggunakan solusi server lokal yang terintegrasi, seperti Local by Flywheel, XAMPP, atau MAMP. Solusi-solusi ini memungkinkan Anda menginstal lingkungan yang lengkap (termasuk PHP, MySQL, Apache/Nginx) dengan satu klik, sehingga proses konfigurasi menjadi jauh lebih sederhana. Di antaranya, Local by Flywheel memberikan dukungan yang sangat baik untuk WordPress, memungkinkan Anda membuat dan mengkloning situs WordPress dengan cepat.

Menginisialisasi direktori dan file plugin

Di situs WordPress lokal Anda…wp-content/plugins/Di dalam direktori tersebut, buatlah sebuah folder khusus untuk plugin Anda. Nama folder sebaiknya terdiri dari huruf kecil, angka, dan tanda hubung (-), dan sebaiknya sesuai dengan nama file utama plugin tersebut. Misalnya, buatlah folder dengan nama “my-plugin-folder”.greeting-pluginDan buatlah file utama di dalamnya.greeting-plugin.php。

Untuk memastikan kode terorganisir dengan jelas, disarankan untuk menggunakan struktur modular sejak awal. Daftar direktori plugin yang sederhana dapat terlihat seperti berikut:

推荐阅读 Analisis Mendalam Pengembangan Plugin WordPress: Dari Pemula Hingga Penyesuaian yang Efisien。

greeting-plugin/
├── greeting-plugin.php      // 主文件，包含插件头部注释和核心逻辑
├── includes/                // 存放核心功能类或函数文件
├── admin/                   // 存放后台管理界面相关文件
├── public/                  // 存放前端功能相关文件
├── assets/                  // 存放CSS、JavaScript和图片资源
│   ├── css/
│   ├── js/
│   └── images/
└── languages/               // 存放国际化翻译文件（可选）

Mengimplementasikan fungsi inti dan manajemen backend

Mari kita sambungkan pengetahuan yang telah kita pelajari dengan sebuah contoh praktis: membuat sebuah plugin yang menampilkan ucapan selamat yang disesuaikan di halaman depan situs web, serta memungkinkan pengguna untuk mengatur teks ucapan tersebut di bagian belakang (backend).

Membuat fungsi-fungsi dasar

Pertama-tama, kita berada di file utama…greeting-plugin.phpDi bawah komentar header, tulis sebuah fungsi fungsional inti. Fungsi tersebut…display_greeting()Digunakan untuk mendapatkan ucapan selamat dan mempersiapkan hasilnya untuk ditampilkan.

function display_greeting() {
    // 从WordPress选项中获取存储的问候语，默认为“欢迎光临！”
    $greeting_text = get_option('my_greeting_text', '欢迎光临！');
    // 将问候语进行安全转义后返回
    return '<p class="custom-greeting">'`. esc_html($greeting_text)`.'</p>';
}

Untuk membuat ucapan selamat ini muncul setelah isi artikel, kita perlu menggunakan action hook.the_contentKita membuat sebuah fungsi baru.append_greeting_to_content()Dan montorkan (pasang)nya ke kait (hook) tersebut.

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 append_greeting_to_content( $content ) {
    // 只在单篇文章和页面中追加问候语
    if ( is_single() || is_page() ) {
        $content .= display_greeting();
    }
    return $content;
}
// 将函数挂载到‘the_content’过滤器
add_filter( 'the_content', 'append_greeting_to_content' );

Tambahkan menu pengelolaan plugin dan halaman pengaturan.

Untuk memungkinkan pengguna menyesuaikan pesan sapaan mereka, kita perlu menambahkan halaman pengaturan di backend WordPress. Hal ini biasanya dilakukan…admin/Buatlah sebuah file terpisah di dalam subdirektori untuk menangani hal tersebut, misalnya…admin/settings-page.php。

Pertama-tama, gunakan kode tersebut di dalam file utama (main file).add_action()Mount a function that creates a management menu.

// 仅在后台加载时引入管理页面代码
if ( is_admin() ) {
    require_once plugin_dir_path( __FILE__ ) . 'admin/settings-page.php';
}

在admin/settings-page.phpDalam berkas tersebut, kami menulis logika untuk membuat menu dan memproses formulir. Fungsi kunci yang digunakan adalah…add_options_page()。

推荐阅读 Memulai dari nol: Membuat plugin WordPress pertamamu.。

function my_greeting_add_admin_menu() {
    add_options_page(
        '问候语设置',          // 页面标题
        '自定义问候语',        // 菜单标题
        'manage_options',      // 所需权限
        'greeting-settings',   // 菜单slug
        'my_greeting_settings_page' // 用于显示页面内容的回调函数
    );
}
add_action( 'admin_menu', 'my_greeting_add_admin_menu' );

function my_greeting_settings_page() {
    ?>
    <div class="wrap">
        <h1>Pengaturan Ucapan Selamat (Greeting Settings)</h1>
        <form method="post" action="/id/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'greeting_settings_group' ); // 设置组名
            do_settings_sections( 'greeting-settings' ); // 页面slug
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Selanjutnya, kita perlu mendaftarkan sebuah opsi pengaturan.my_greeting_textDan tambahkan sebuah bidang masukan untuknya. Hal ini dilakukan dengan…register_setting()、add_settings_section()和add_settings_field()Fungsi telah selesai dijalankan.

function my_greeting_settings_init() {
    register_setting( 'greeting_settings_group', 'my_greeting_text' );

add_settings_section(
        'greeting_settings_section',
        '编辑问候文本',
        null,
        'greeting-settings'
    );

add_settings_field(
        'my_greeting_field',
        '问候语内容',
        'my_greeting_field_render',
        'greeting-settings',
        'greeting_settings_section'
    );
}
function my_greeting_field_render() {
    $value = get_option( 'my_greeting_text', '欢迎光临！' );
    echo '<input type="text" name="my_greeting_text" value="' . esc_attr( $value ) . '" class="regular-text">';
}
add_action( 'admin_init', 'my_greeting_settings_init' );

Sekarang, pengguna dapat mengubah teks pada halaman “Setelan” -> “Ucapan Selamat Bersifat Khusus” (Custom Greetings). Ucapan selamat yang telah diperbarui akan ditampilkan di akhir artikel dan konten halaman di frontend.

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

Keamanan plugin, optimisasi, dan persiapan untuk penerbitan

Sebuah plugin yang memenuhi syarat tidak hanya harus dapat dijalankan, tetapi juga harus aman, efisien, dan mudah diperawat.

Menerapkan praktik terbaik keamanan

Keamanan merupakan faktor utama yang perlu dipertimbangkan. Semua data yang berasal dari masukan pengguna atau basis data, serta data yang ditampilkan di frontend, harus di-escapasi (dilindungi dari potensi serangan atau manipulasi yang tidak diinginkan). Gunakan fungsi-fungsi yang disediakan oleh WordPress untuk melakukan hal ini.esc_html()、esc_attr()、wp_kses_post()Dalam menangani pengiriman formulir dan permintaan non-AJAX, pastikan untuk menggunakan…wp_verify_nonce()和check_admin_referer()Ini digunakan untuk memverifikasi keabsahan permintaan, guna mencegah serangan penipuan permintaan antar situs (Cross-Site Request Forgery/CSRF).

Untuk setiap skrip atau tabel gaya (style sheet) yang diimpor dari plugin, harus digunakan…wp_enqueue_script()和wp_enqueue_style()Lakukan proses pendaftaran dan pengambilan (loading) yang benar. Hal ini akan memastikan bahwa hubungan antar komponen (dependencies) teratur dan menghindari konflik. Selain itu, gunakan objek skrip (script objects) dengan cara yang sesuai.wp_localize_script()Untuk mentransfer variabel PHP ke JavaScript secara aman.

Mengimplementasikan internasionalisasi dan lokalisasi

Agar plugin dapat digunakan oleh pengguna di seluruh dunia, fitur internasionalisasi (internationalization) harus didukung. Artinya, Anda perlu mengubah semua string teks yang ditujukan untuk pengguna dalam plugin tersebut menjadi versi yang cocok untuk berbagai bahasa.__()或_e()Fungsi penerjemahan tersebut perlu dibungkus dalam sebuah fungsi. Cantumkan penjelasan mengenai hal ini dalam komentar di bagian awal file utama (header).Text DomainHarus sesuai dengan nama direktori plugin. Contohnya:
Text Domain: greeting-plugin

Kemudian, Anda dapat menggunakan alat penerjemah (seperti Poedit) untuk menghasilkan terjemahannya..potFile template; penerjemah dapat menggunakan file ini sebagai dasar untuk membuat konten baru..po和.moFile tersebut disimpan dalam plugin.languages/Di dalam folder tersebut.

Siap untuk dipublikasikan ke direktori resmi WordPress.

Jika Anda berencana untuk mengirimkan plugin Anda ke direktori plugin WordPress.org, ada beberapa persiapan tambahan yang perlu Anda lakukan. Pertama-tama, pastikan bahwa kode Anda mematuhi standar pengkodean WordPress. Kedua, buatlah dokumentasi yang lengkap dan jelas tentang plugin Anda.readme.txtFile tersebut harus memiliki format yang sesuai dengan persyaratan direktori, termasuk deskripsi, langkah-langkah instalasi, tangkapan layar, dan log pembaruan. Anda juga perlu mengirimkan plugin tersebut ke repositori SVN, serta memastikan bahwa struktur direktori memenuhi standar yang ditentukan. Sebelum dirilis, pastikan untuk melakukan pengujian kompatibilitas yang menyeluruh terhadap berbagai versi, topik, dan plugin lainnya.

Menyimpulkan.

Pengembangan plugin WordPress merupakan proses mengubah ide-ide kreatif menjadi fitur-fungsi yang nyata, dan inti dari proses ini terletak pada pemahaman serta penerapan sistem hook dengan mahir. Mulailah dengan membuat sebuah file tunggal yang berisi komentar header yang benar, lalu perlahan-lahan bangun modul-modul fungsional, sambil selalu mematuhi standar pengkodean yang aman dan internasionalisasi. Dengan melalui proses yang lengkap ini—membangun lingkungan lokal, mengorganisir kode secara termodul, mengimplementasikan interaksi antara bagian depan ( frontend) dan belakang (backend), serta mempersiapkan plugin untuk dipublikasikan—Anda telah mempelajari dasar-dasar pembuatan plugin dari nol. Terus belajar tentang API inti WordPress dan mempelajari kode sumber plugin-plugin yang berkualitas tinggi merupakan cara terbaik untuk meningkatkan keterampilan pengembangan Anda.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah untuk mengembangkan plugin, seseorang harus mahir dalam PHP?

Ya, memiliki dasar yang kuat dalam PHP sangat penting. Karena WordPress itu sendiri ditulis menggunakan PHP, dan kode pluginnya juga sebagian besar terbuat dari PHP. Anda perlu memahami sintaks PHP, fungsi-fungsi dalam PHP, pemrograman berorientasi objek, serta cara berinteraksi dengan basis data MySQL. Selain itu, pengetahuan dasar tentang HTML, CSS, dan JavaScript juga sangat membantu dalam membuat antarmuka pengguna (user interface).

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

WordPress menyediakan berbagai alat untuk melakukan debugging (pemecahan masalah). Pertama-tama, di dalam situs web Anda…wp-config.phpAktifkan mode debug dalam file tersebut.WP_DEBUGKonstanta diatur ketrueHal ini akan menampilkan kesalahan PHP, peringatan, dan pemberitahuan di layar. Anda juga dapat menggunakan…error_log()Fungsi tersebut mencatat informasi khusus ke dalam log kesalahan server, atau menggunakan alat yang lebih canggih seperti plugin Query Monitor, yang mampu menganalisis kueri database, hook, skrip, dan lainnya. Alat ini merupakan senjata yang sangat berguna bagi para pengembang.

Akankah plugin saya bertentangan dengan tema atau plugin lainnya?

Mungkin saja. Konflik biasanya terjadi karena beberapa alasan berikut: penggunaan nama fungsi, kelas, atau konstanta yang umum; adanya konflik antara skrip dan tabel gaya (style sheet) yang diunduh; atau penanganan prioritas untuk hook yang sama yang tidak tepat. Untuk menghindari konflik penamaan, semua fungsi, kelas, dan konstanta harus diberi prefix yang unik, yang umumnya berkaitan dengan nama plugin atau singkatan tertentu.wp_enqueue_scriptFungsi-fungsi dalam seri tersebut mampu mengelola siklus hidup aset dengan baik. Saat memodifikasi perilaku inti suatu sistem, perlu mempertimbangkan dengan cermat prioritas dan hubungan ketergantungan antara berbagai komponen (hook) yang terlibat.

Apakah saya perlu membuat tabel data yang terpisah untuk plugin saya?

Dalam sebagian besar kasus, tidak diperlukan dan tidak disarankan untuk membuat tabel database baru secara langsung. WordPress menyediakan API Options (untuk menyimpan data berupa pasangan kunci-nilai) serta API Post Meta/User Meta (untuk menyimpan data terkait artikel dan pengguna), yang mampu memenuhi kebutuhan penyimpanan data hingga lebih dari 901TB. Penggunaan tabel database baru hanya perlu dipertimbangkan ketika diperlukan penyimpanan data dalam jumlah besar yang memiliki hubungan yang kompleks dan memerlukan pencarian yang efisien.$wpdbKelas tersebut membuat tabel kustom, tetapi hal ini akan secara signifikan meningkatkan kompleksitas plugin.

Bagaimana cara menambahkan opsi pengaturan untuk plugin saya?

Seperti yang telah dijelaskan sebelumnya, pendekatan standar adalah dengan menggunakan API Settings dari WordPress. API ini menangani berbagai aspek terkait keamanan (seperti verifikasi nonce), pemeriksaan hak akses pengguna, dan rendering antarmuka pengguna. Langkah-langkah yang perlu diikuti meliputi:add_menu_page()atau fungsi turunannya (seperti)add_options_page()Tambahkan menu dan halaman, lalu gunakanlah.register_setting()、add_settings_section()和add_settings_field()Ini digunakan untuk mendefinisikan dan merender field pengaturan tertentu. Metode ini lebih aman dan terstandarisasi dibandingkan dengan membuat formulir secara manual serta menangani proses pengiriman data (submission).