Tutorial pengembangan plugin WordPress: Membangun plugin pertama Anda dari nol hingga satu.

Preparasi dan pengaturan lingkungan.

Sebelum memulai menulis kode, pastikan bahwa lingkungan pengembangan Anda telah diatur dengan benar. Lingkungan pengembangan lokal yang baik dapat sangat meningkatkan efisiensi pengembangan dan pengalaman debugging.

Pertama-tama, Anda perlu menginstal lingkungan server web di komputer lokal Anda, yang umumnya disebut “lingkungan server lokal”. Salah satu pilihan paling populer adalah XAMPP atau MAMP, yang mengintegrasikan Apache, MySQL/MariaDB, dan PHP. Alternatif lain yang kuat adalah menggunakan Docker untuk mengkonfigurasi lingkungan yang mirip dengan lingkungan produksi. Apa pun pilihan yang Anda buat, pastikan versi PHP (rekomendasi adalah 7.4 atau lebih tinggi) dan versi MySQL kompatibel dengan sebagian besar lingkungan hosting WordPress.

Selanjutnya, unduh dan instal versi terbaru dari WordPress. Ekstrak file WordPress ke direktori akar situs web di server lokal Anda (misalnya, direktori root dari XAMPP). htdocs Buka folder tersebut, lalu lakukan pengaturan sesuai dengan proses instalasi yang terkenal, yaitu “Proses Instalasi dalam Lima Menit”. Pastikan Anda dapat mengakses situs WordPress lokal ini dengan baik.

推荐阅读 Mudah dipahami dan praktis: Panduan lengkap untuk mempelajari pengembangan plugin WordPress dari nol.。

Terakhir, dan yang sangat penting: siapkan sebuah editor kode. Editor seperti Visual Studio Code, PhpStorm, atau Sublime Text sangat disarankan karena memiliki fitur pemformatan kode yang menarik, saran (tips) yang cerdas, serta alat untuk melakukan debugging (penyelidikan kesalahan program). Terutama untuk pengembangan dengan bahasa PHP, fitur-fitur ini dapat membantu Anda menghindari banyak kesalahan tata bahasa yang umum terjadi.

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

Struktur dasar plugin dan file utama

Sebuah plugin WordPress memiliki struktur file yang standar dan penting. Inti dari plugin tersebut terletak di… /wp-content/plugins/ Folder dengan nama yang sama di dalam direktori, serta file PHP utama yang berada di dalam folder tersebut.

Membuat file utama untuk plugin

Pertama, di /wp-content/plugins/ Buatlah folder baru di dalam direktori tersebut. Nama folder tersebut harus singkat, unik, dan mampu menggambarkan fungsi plugin tersebut, misalnya “my-first-plugin”. Setelah itu, buatlah file PHP dengan nama yang sama dengan nama folder tersebut di dalam folder tersebut. my-first-plugin.php。

File utama ini merupakan “titik masuk” (entry point) untuk plugin, dan WordPress mengidentifikasi metadata plugin tersebut dengan membaca informasi header plugin yang terletak di bagian awal file. Informasi header plugin merupakan blok komentar PHP standar yang harus ditempatkan di awal file tersebut. Setidaknya, informasi yang perlu disertakan adalah nama plugin dan deskripsinya.

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个学习WordPress插件开发的示例插件，用于展示“Hello World”。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

Dalam kode di atas,Plugin Name Ini merupakan kolom wajib yang harus diisi; kolom lainnya bersifat opsional namun disarankan untuk diisi. Informasi tersebut akan ditampilkan di halaman pengelolaan “Plugin” di backend WordPress.Text Domain Digunakan untuk internasionalisasi (dukungan berbagai bahasa), dan harus sesuai dengan domain teks yang digunakan saat memanggil fungsi penerjemahan selanjutnya.

推荐阅读 Menguasai Pengembangan Plugin WordPress dari Nol: Prinsip, Praktik, dan Teknik Lanjutan.。

Mendefinisikan konstanta dasar untuk plugin

Kebiasaan yang baik dalam pengembangan plugin adalah dengan mendefinisikan beberapa konstanta yang berguna sejak awal, seperti path file plugin dan URL-nya, agar dapat dengan mudah dirujuk dalam kode selanjutnya. Hal ini dapat menghindari penggunaan kode yang bersifat “hard-coded” (dikodekan secara langsung), sehingga membuat kode lebih mudah dikelola dan dipindahkan (diporting) ke sistem lain.

Anda dapat menambahkan kode berikut ke dalam file utama, tepat setelah informasi header plugin, untuk mendefinisikan konstanta:

// 防止直接访问
if ( ! defined( 'ABSPATH' ) ) {
    exit; // 如果 ABSPATH 未定义，则退出
}

// 定义插件路径和URL常量
define( 'MFP_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
define( 'MFP_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
define( 'MFP_PLUGIN_VERSION', '1.0.0' );

Di sini,plugin_dir_path( FILE ) 和 plugin_dir_url( FILE ) Ini adalah fungsi inti yang disediakan oleh WordPress, yang dapat digunakan untuk dengan aman mendapatkan path direktori dan URL dari file plugin yang sedang aktif.MFP_PLUGIN_VERSION Konstanta digunakan untuk menyimpan nomor versi plugin, agar memudahkan penggunaan saat mengimpor skrip atau gaya tampilan, maupun saat melakukan perbandingan versi.

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

Implementasi Fungsi Inti dan Penggunaan Hook

Inti dari pengembangan plugin WordPress terletak pada penggunaan sistem “Hook”. Hook terbagi menjadi dua jenis: Action dan Filter. Kedua jenis ini memungkinkan Anda untuk menyisipkan kode Anda pada titik waktu tertentu saat WordPress dijalankan (misalnya saat halaman dibuka atau artikel disimpan), atau untuk mengubah data yang dihasilkan oleh fungsi-fungsi lainnya.

Tambahkan sebuah hook aksi yang sederhana.

Mari kita wujudkan fitur yang paling sederhana: menambahkan satu baris teks di bagian kaki halaman situs web. Kita akan menggunakan action hook untuk melakukannya. wp_footerFungsi tersebut akan diaktifkan sebelum kode HTML ditampilkan di bagian kaki halaman (footer).

Tambahkan sebuah fungsi ke dalam file utama, lalu gunakannya melalui… add_action Fungsi tersebut menggunakannya untuk melakukan proses mounting (menghubungkan komponen tertentu ke sistem). wp_footer Di kait ini.

推荐阅读 Panduan Pengembangan Plugin WordPress: Pelajari Cara Membuat Plugin Sendiri dari Nol Hingga Selesai.。

/**
 * 在网站页脚输出自定义文本
 */
function mfp_display_footer_text() {
    echo '<p style="text-align: center; color: #666;">Terima kasih telah menggunakan plugin WordPress pertama saya!</p>';
}
add_action( 'wp_footer', 'mfp_display_footer_text' );

Sekarang, aktifkan plugin Anda dan kunjungi bagian depan situs web. Gulir ke bagian bawah halaman, dan Anda seharusnya dapat melihat baris teks tersebut. Inilah penggunaan dasar dari “action hook”: melakukan sesuatu pada waktu tertentu.

Menggunakan filter untuk memodifikasi konten.

Filter digunakan untuk mengubah nilai yang sudah ada. Misalnya, kita ingin mengubah judul artikel dengan menambahkan kata “【Rekomendasi】” di depan setiap judul. Hal ini dapat dilakukan dengan… the_title Filter digunakan untuk mewujudkannya.

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

Buatlah sebuah fungsi baru yang menerima judul asli sebagai parameter, kemudian mengembalikan judul yang telah dimodifikasi, lalu lanjutkan dengan proses selanjutnya… add_filter Menginstal/menghubungkan (mount).

/**
 * 在所有文章标题前添加前缀
 * @param string $title 原始标题
 * @return string 修改后的标题
 */
function mfp_add_prefix_to_title( $title ) {
    // 确保只在主循环中修改，避免影响后台列表等其他地方
    if ( is_single() && in_the_loop() ) {
        $title = '【推荐】' . $title;
    }
    return $title;
}
add_filter( 'the_title', 'mfp_add_prefix_to_title' );

Contoh sederhana ini menunjukkan kekuatan filter: Anda dapat memeriksa kondisi-kondisi tertentu (seperti…) is_single() Untuk menentukan apakah halaman tersebut merupakan halaman artikel tunggal, perlu dilakukan pemeriksaan terhadap kontennya hanya dalam konteks tertentu saja. Modifikasi hanya dilakukan pada bagian-bagian yang relevan dengan konteks tersebut.

Menambahkan halaman administrasi dan praktik keamanan

Sebuah plugin yang memiliki fitur yang lengkap umumnya memerlukan halaman konfigurasi di backend, agar administrator situs web dapat melakukan penyesuaian. Pada saat yang sama, memastikan keamanan kode sangatlah penting.

Halaman pengaturan untuk membuat plugin

Kami akan menggunakan add_menu_page Fungsi tersebut menambahkan menu manajemen tingkat atas serta halaman pengaturan yang sesuai untuk plugin tersebut.

Pertama-tama, buat sebuah fungsi untuk menghasilkan konten HTML halaman pengaturan, kemudian pasangnya (mount) ke… admin_menu Fungsi dari action hook digunakan untuk mendaftarkan menu tersebut.

/**
 * 渲染插件设置页面的HTML内容
 */
function mfp_render_settings_page() {
    // 检查用户权限
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( __( '你没有足够的权限访问此页面。', 'my-first-plugin' ) );
    }
    ?>
    <div class="wrap">
        <h1>\n</h1>
        <p>Ini adalah halaman pengaturan untuk plugin pertama saya. Di masa depan, formulir dan opsi dapat ditambahkan di sini.</p>
        <form action="/id/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 后续可以在这里添加设置字段
            // settings_fields( 'mfp_options_group' );
            // do_settings_sections( 'mfp-settings-page' );
            // submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    &lt;?php
}

/**
 * 注册插件管理菜单
 */
function mfp_add_admin_menu() {
    add_menu_page(
        &#039;我的第一个插件设置&#039;, // 页面标题
        &#039;我的插件&#039;,          // 菜单标题
        &#039;manage_options&#039;,    // 所需权限 (manage_options)
        &#039;mfp-settings-page&#039;, // 菜单slug
        &#039;mfp_render_settings_page&#039;, // 回调函数
        &#039;dashicons-admin-plugins&#039;, // 图标 (Dashicons)
        80                   // 菜单位置
    );
}
add_action( &#039;admin_menu&#039;, &#039;mfp_add_admin_menu&#039; );

Setelah mengaktifkan plugin tersebut, Anda akan melihat menu baru bernama “My Plugins” di sebelah kiri halaman backend WordPress. Klik menu tersebut untuk masuk ke halaman pengaturan yang sederhana. Di sini tersedia antarmuka untuk menambahkan field formulir menggunakan WordPress Settings API, yang merupakan metode standar untuk memproses input pengguna dengan aman.

Data Validation and Escaping

Setiap data yang diterima dari pengguna atau dihasilkan dan ditampilkan di browser harus diproses untuk mencegah serangan jenis Cross-Site Scripting (XSS) dan SQL Injection. WordPress menyediakan berbagai fungsi keamanan yang lengkap untuk membantu melindungi situs web dari serangan tersebut.

• Output: Use escape characters. esc_html()、esc_attr()、esc_url() 和 wp_kses_post() Gunakan fungsi-fungsi tertentu untuk membersihkan konten yang akan ditampilkan dalam HTML.
• Data Validation: Penggunaan sanitize_text_field()、sanitize_email() Gunakan fungsi-fungsi tertentu untuk membersihkan data yang dikirim dari formulir.
• Kunci non-CE: Untuk operasi formulir yang melibatkan modifikasi data, penggunaan kunci non-CE adalah wajib. wp_nonce_field() 和 wp_verify_nonce() Untuk memverifikasi keabsahan permintaan tersebut.

Keamanan merupakan hal yang sangat penting dalam pengembangan plugin; kewajiban untuk membentuk kebiasaan-kebiasaan yang baik sejak awal proses pengembangan harus selalu dipegang teguh.

Menyimpulkan.

Melalui tutorial ini, kita telah menyelesaikan proses pengembangan plugin WordPress yang lengkap, meskipun ukurannya kecil namun memiliki semua fitur yang diperlukan. Kita memulainya dari nol, membangun lingkungan pengembangan, membuat struktur file utama plugin yang sesuai dengan standar, dan dengan menerapkan dua fungsi yaitu menambahkan teks ke bagian footer dan mengubah judul artikel, kita memahami lebih dalam tentang penggunaan dasar dari action hooks dan filter hooks yang menjadi fondasi dari WordPress. Di akhir, kita menambahkan halaman administrasi dasar untuk plugin tersebut, serta menekankan pentingnya praktik keamanan seperti validasi data, pemeriksaan hak akses, dan pengelolaan karakter yang dihasilkan (output escaping).

Plugin sederhana tingkat “Hello World” ini sudah mencakup elemen-elemen inti yang diperlukan oleh plugin komersial, seperti struktur standar, penggunaan hook, antarmuka backend, dan pertimbangan keamanan. Dari sini, Anda dapat mencoba mengintegrasikan API Settings dari WordPress untuk membuat opsi-opsi yang sesungguhnya, menulis tabel basis data khusus, atau membuat kode singkat serta alat bantu (shortcodes) yang lebih kompleks. Ingatlah bahwa belajar terus-menerus dari manual pengembangan resmi dan mengamati kode dari plugin open source yang berkualitas adalah cara terbaik untuk meningkatkan keterampilan Anda.

FAQ - Pertanyaan yang Sering Diajukan.

Bagaimana cara mendebug (debug) plugin WordPress saya?
Langkah pertama dalam mengaktifkan mode debug di WordPress adalah dengan mengaktifkannya terlebih dahulu. Di situs Anda… wp-config.php Dalam dokumen tersebut, akan... WP_DEBUG Nilai konstanta diatur menjadi… trueAnda juga dapat mengatur (settings) lebih lanjut. WP_DEBUG_LOG 为 trueCatatkan pesan kesalahan ke dalam… /wp-content/debug.log Dalam file tersebut, hindari penampilan langsung dari pesan kesalahan di halaman web, agar tidak mempengaruhi pengguna.

Selain itu, menggunakan panel Console dan Network pada alat pengembang browser (F12) untuk melihat kesalahan JavaScript dan permintaan API, serta mengintegrasikan alat debugging PHP seperti Xdebug dengan editor kode Anda (misalnya VS Code) untuk melakukan debugging dengan penandaan titik henti (breakpoint), merupakan metode debugging yang sangat efisien dan profesional.

Mengapa plugin saya menampilkan “kesalahan fatal” saat diaktifkan?

Ini biasanya disebabkan oleh kesalahan sintaks PHP atau pemanggilan fungsi/kelas yang tidak ada. Pertama-tama, periksa log debug WordPress (seperti yang telah dijelaskan di atas). Informasi kesalahan akan secara spesifik menunjukkan file mana dan baris mana yang bermasalah.

Penyebab umum meliputi: kurangnya tanda koma (;), ketidakcocokan tanda kurung, atau ketidaksesuaian tanda kutip; pemanggilan fungsi tanpa file yang diperlukan; serta kode yang masih berusaha dijalankan setelah plugin dinonaktifkan. Pastikan versi PHP Anda memenuhi persyaratan, dan semua fungsi telah didefinisikan sebelum digunakan.

Bagaimana cara membuat plugin saya mendukung berbagai bahasa (internasionalisasi)?

WordPress menggunakan kerangka kerja GNU gettext untuk mengimplementasikan fitur internasionalisasi (i18n) dan lokalisasi (l10n). Pertama-tama, seperti yang dijelaskan dalam tutorial, pastikan untuk mengatur informasi header file utama dengan benar. Text Domain(Contohnya, my-first-plugindan Domain Path。

Dalam kode plugin, untuk semua string yang perlu diterjemahkan, gunakan fungsi penerjemahan untuk membungkusnya, misalnya:__( ‘文本’, ‘my-first-plugin’ ) 或 _e( ‘文本’, ‘my-first-plugin’ )Kemudian, gunakan alat seperti Poedit untuk memindai string-string tersebut dalam kode, menghasilkan file template berformat .pot, serta membuat file berformat .po dan .mo untuk bahasa yang bersangkutan (misalnya, bahasa Cina zh_CN), lalu letakkan file-file tersebut di tempat yang ditentukan. /languages/ Di bawah menu.

Bagaimana cara berinteraksi dengan basis data secara aman dalam pengembangan plugin?

Jangan pernah langsung menulis pernyataan SQL untuk menyatukan input dari pengguna. Selalu gunakan kelas operasi basis data yang disediakan oleh WordPress. $wpdb“It provides features such as…” $wpdb->prepare() Metode seperti ini dapat memproses pernyataan SQL secara aman sebelum eksekusi, sehingga mencegah serangan SQL injection dengan efektif.

Misalnya, saat melakukan pencarian data, tulisannya harus seperti ini:

global $wpdb;
$user_input = $_POST['some_input'];
$safe_query = $wpdb->prepare( "SELECT * FROM {$wpdb->prefix}table WHERE column = %s", $user_input );
$results = $wpdb->get_results( $safe_query );

Pada saat yang sama, dilakukan pemeriksaan data dan pemurnian terhadap input pengguna secara ketat, misalnya dengan menggunakan… sanitize_text_field() Fungsi-fungsi seperti itu.