Panduan Memulai Pengembangan Plugin WordPress: Membangun Ekstensi Fitur Pertama Anda dari Nol.

Preparasi dan pengaturan lingkungan.

Sebelum memulai menulis kode, Anda memerlukan lingkungan pengembangan yang sesuai. Ini mencakup instalasi WordPress lokal dan sebuah editor kode. XAMPP, Local by Flywheel, atau Docker direkomendasikan untuk membangun lingkungan server lokal. Pastikan bahwa WordPress Anda berada pada versi terbaru, agar Anda dapat menggunakan API dan fitur keamanan terbaru.

Anda perlu memahami struktur dasar dari plugin WordPress. Plugin terkecil sekalipun memerlukan setidaknya satu file utama, yang merupakan file PHP yang memiliki komentar header tertentu. Nama file tersebut biasanya adalah… your-plugin-name.phpHal tersebut memberitahu WordPress bahwa ini adalah sebuah plugin, serta menyediakan informasi seperti nama plugin, deskripsi, versi, dan penulisnya.

Di editor kode, buatlah sebuah folder baru untuk proyek plugin Anda, misalnya: my-first-pluginDalam folder ini, buatlah file PHP utama.

推荐阅读 Mulai dari nol: Panduan definitif dan tutorial praktis untuk pengembangan plugin WordPress.。

Buatlah file plugin pertamamu.

Sekarang, mari kita mulai membuat file utama dari plugin tersebut. File ini merupakan titik masuk (entry point) dari plugin, dan melalui blok komentar di bagian atas, file ini memberitahukan keberadaannya kepada WordPress.

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

Menulis informasi kepala (header) untuk plugin

Dalam file PHP yang baru saja Anda buat, Anda perlu menambahkan header file plugin yang standar. Misalnya, sebuah plugin dengan nama “Salam Situs” dapat dimulai dengan kode berikut:

<?php
/**
 * Plugin Name:       站点问候语
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       一个简单的插件，用于在网站前台显示自定义问候语。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

WordPress akan melakukan pemindaian (scanning). wp-content/plugins Semua file PHP yang ada di dalam direktori tersebut perlu dibaca untuk mendapatkan informasi komentar tertentu, lalu informasi tersebut ditampilkan di halaman manajemen plugin di backend. Text Domain Digunakan untuk internasionalisasi.Domain Path Posisi berkas bahasa telah ditentukan.

Kode untuk mengimplementasikan fungsi inti

Di bawah informasi header, Anda dapat mulai menulis kode fungsional untuk plugin tersebut. Mari kita ambil contoh fungsi yang sederhana: menampilkan sebuah ucapan selamat di sudut kiri atas bagian footer situs web. Untuk menghindari perubahan langsung pada file tema, kita akan menggunakan sistem hook dari WordPress.

Pertama-tama, kita perlu membuat sebuah fungsi untuk menghasilkan ucapan selamat. Setelah itu, gunakan fungsi tersebut untuk mengeluarkan pesan ucapan selamat tersebut. add_action Fungsi tersebut akan menghubungkan hasil output tersebut dengan suatu tindakan eksekusi (action) di WordPress, misalnya… wp_footer。

推荐阅读 Panduan Lengkap Pengembangan Plugin WordPress: Dari Nol Sampai Penerapan Nyata。

// 定义一个函数来输出问候语
function my_first_plugin_display_greeting() {
    echo '<p style="position: fixed; bottom: 10px; left: 10px; background: #f1f1f1; padding: 10px; border-radius: 5px;">Halo, selamat datang di situs web saya!</p>';
}

// 使用 add_action 钩子将函数挂载到 wp_footer 动作
add_action( 'wp_footer', 'my_first_plugin_display_greeting' );

Setelah menyelesaikan kode di atas, simpan folder plugin tersebut (misalnya: my-first-pluginSeluruh konten tersebut perlu disalin ke direktori instalasi WordPress Anda. wp-content/plugins/ Prosesnya adalah sebagai berikut: Masuk ke alamat URL yang tercantum di langkah sebelumnya, lalu masuk ke panel administrasi WordPress. Setelah berhasil login, kunjungi menu “Plugins” (Pembaruan/Plugin). Di sana, Anda seharusnya dapat menemukan plugin bernama “Site Greeting”. Klik tombol “Aktifkan” (Enable) untuk mengaktifkan plugin tersebut. Setelah itu, kunjungi halaman depan ( frontend) situs web Anda, dan Anda akan melihat pesan sapaan yang telah Anda buat di bagian bawah halaman.

Menambahkan opsi pengelolaan untuk plugin

Sebuah plugin yang memiliki fitur yang lengkap biasanya memerlukan halaman konfigurasi, yang memungkinkan administrator untuk melakukan pengaturan di backend WordPress. Hal ini melibatkan pembuatan menu administrasi dan logika pemrosesan opsi.

Membuat halaman pengaturan plugin

WordPress menyediakan fungsi untuk menambahkan halaman pengaturan (setting page) ke dalam plugin. Biasanya, kita menggunakan fungsi tersebut untuk… add_options_page 或 add_menu_page Fungsi-fungsi tertentu digunakan untuk menambahkan halaman ini ke menu latar belakang (backend menu). Contoh di bawah ini menunjukkan cara menambahkan halaman sub-setelan yang sederhana ke bawah menu utama “Setelan” (Settings).

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

Pertama-tama, buat sebuah fungsi untuk merender konten HTML halaman pengaturan.

// 渲染插件设置页面的函数
function my_first_plugin_settings_page() {
    ?>
    <div class="wrap">
        <h1>Pengaturan Pesan Salam Situs (Site Greeting Message Settings)</h1>
        <form method="post" action="/id/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'my_first_plugin_settings_group' );
            do_settings_sections( 'my-first-plugin' );
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Kemudian, gunakan… add_action Kait itu berada di… admin_menu Halaman untuk pendaftaran tahap pertama.

// 将设置页面添加到后台菜单
function my_first_plugin_add_admin_menu() {
    add_options_page(
        '问候语设置',          // 页面标题
        '站点问候语',          // 菜单标题
        'manage_options',      // 权限要求
        'my-first-plugin',     // 菜单别名
        'my_first_plugin_settings_page' // 渲染函数
    );
}
add_action( 'admin_menu', 'my_first_plugin_add_admin_menu' );

Field untuk pengaturan pendaftaran dan penyimpanan data

Hanya memiliki halaman saja tidak cukup; kita perlu mendefinisikan field pengaturan tertentu (seperti kotak masukan, kotak pilihan), serta mengelola proses penyimpanan data. Untuk hal ini, kita perlu menggunakan API pengaturan (settings API) dari WordPress. register_setting、add_settings_section 和 add_settings_field Fungsi-fungsi seperti itu.

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

Kode berikut mendaftarkan sebuah grup pengaturan (setting group) dan sebuah bidang teks (text field), yang digunakan untuk memungkinkan pengguna menyesuaikan isi ucapan selamat (greeting message).

// 初始化插件的设置
function my_first_plugin_settings_init() {
    // 注册一个设置，将其保存到 `options` 表的 `my_first_plugin_greeting_text` 字段中
    register_setting( 'my_first_plugin_settings_group', 'my_first_plugin_greeting_text' );

// 在页面中添加一个设置区域
    add_settings_section(
        'my_first_plugin_section',
        '自定义问候语',
        null,
        'my-first-plugin'
    );

// 在设置区域中添加一个文本字段
    add_settings_field(
        'my_first_plugin_field',
        '问候语文本',
        'my_first_plugin_field_render',
        'my-first-plugin',
        'my_first_plugin_section'
    );
}
add_action( 'admin_init', 'my_first_plugin_settings_init' );

// 渲染文本输入框的函数
function my_first_plugin_field_render() {
    $option = get_option( 'my_first_plugin_greeting_text', '你好，欢迎来到我的网站！' );
    echo '<input type="text" name="my_first_plugin_greeting_text" value="' . esc_attr( $option ) . '" style="width: 300px;" />';
}

Terakhir, kita perlu memodifikasi fungsi yang sebelumnya digunakan untuk menghasilkan ucapan selamat, agar fungsi tersebut dapat membaca pengaturan yang disimpan oleh pengguna dari basis data.

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 my_first_plugin_display_greeting() {
    $greeting_text = get_option( 'my_first_plugin_greeting_text', '你好，欢迎来到我的网站！' );
    echo '<p style="position: fixed; bottom: 10px; left: 10px; background: #f1f1f1; padding: 10px; border-radius: 5px;">'`. esc_html($greeting_text)`.'</p>';
}

Keamanan Plugin dan Praktik Terbaik

Saat mengembangkan plugin, keamanan merupakan faktor utama yang perlu dipertimbangkan. Kode yang tidak aman dapat menyebabkan situs web diserang. Berikut adalah beberapa pedoman keamanan yang penting:

Data Validation and Cleaning

Kapan pun Anda mendapatkan data dari masukan pengguna (misalnya $_POST, $_GET) atau dari basis data, Anda harus menganggap bahwa data tersebut tidak dapat diandalkan. Sebelum data tersebut ditampilkan di browser atau disimpan kembali ke basis data, data tersebut harus diverifikasi dan dibersihkan (dari konten yang tidak diperlukan atau tidak valid).

Untuk konten yang ditampilkan di halaman HTML, gunakan… esc_html()、esc_attr() 或 wp_kses_post() Fungsi-fungsi seperti ini digunakan untuk melakukan “escaping” (penggantian karakter khusus dengan karakter biasa), guna mencegah serangan jenis Cross-Site Scripting (XSS).
Untuk variabel yang digunakan dalam kueri database, sebaiknya menggunakan pernyataan yang telah dikompilasi terlebih dahulu (precompiled statements) atau alat serupa. $wpdb->prepare() Metode seperti itu.

Dalam contoh kita ini, saat menyimpan pengaturan, WordPress… register_setting Fungsi tersebut akan secara otomatis melakukan beberapa proses pembersihan dasar. Saat menghasilkan output, kami menggunakan… esc_html() Untuk memastikan bahwa tag HTML dalam teks sapaan diubah dengan aman menjadi teks biasa.

Menggunakan metode selain CE (Common Encryption) untuk pemeriksaan hak akses

Ketika menangani pengiriman formulir dari halaman administrasi, penting untuk memverifikasi keabsahan permintaan tersebut. Hal ini mencakup pemeriksaan hak akses pengguna serta validasi angka acak (random number).

Di formulir pada halaman pengaturan,settings_fields() Fungsi tersebut sudah secara otomatis mencakup verifikasi non-CE (Common European Certification). Namun, jika Anda membuat pemrosesan AJAX khusus atau formulir non-standar, Anda perlu melakukan verifikasi secara manual. Hal ini umumnya dilakukan menggunakan metode yang sesuai dengan standar yang berlaku. current_user_can() Periksa izin, lalu gunakan. check_admin_referer() 或 wp_verify_nonce() Verifikasi angka acak.

Misalnya, dalam fungsi penanganan pengiriman (submission processing function) yang dibuat sendiri:

function my_plugin_handle_form_submit() {
    // 检查权限
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( '权限不足' );
    }
    // 验证随机数
    if ( ! isset( $_POST['my_nonce_field'] ) || ! wp_verify_nonce( $_POST['my_nonce_field'], 'my_action' ) ) {
        wp_die( '安全校验失败' );
    }
    // ... 处理安全的数据 ...
}

Menyimpulkan.

Dengan panduan ini, Anda telah menyelesaikan seluruh proses pengembangan dari sebuah file PHP sederhana menjadi sebuah plugin WordPress yang memiliki fitur manajemen backend. Anda telah mempelajari struktur dasar sebuah plugin, cara menggunakan action hooks untuk menambahkan fungsi baru, cara menggunakan API pengaturan WordPress untuk membuat halaman opsi yang dapat dikonfigurasi, serta praktik-praktik keamanan yang sangat penting. Ingatlah bahwa sebuah plugin yang baik tidak hanya perlu memiliki fungsi yang kuat, tetapi juga kode yang jelas, aman, dan dapat diandalkan, serta mematuhi standar pengkodean WordPress. Dari plugin kecil ini, Anda dapat melanjutkan untuk mengeksplorasi fitur-fitur yang lebih canggih seperti kode singkat (shortcodes), alat bantu (tools), dan jenis artikel kustom, serta secara bertahap membangun ekstensi yang lebih kompleks.

FAQ - Pertanyaan yang Sering Diajukan.

Bagaimana cara menambahkan dukungan berbahasa multibahasa untuk sebuah plugin?

Untuk menambahkan dukungan internasionalisasi (i18n) ke plugin, hal utama yang perlu dilakukan adalah menggunakan bidang teks (text fields) dan fungsi penerjemahan (translation functions). Pertama-tama, pastikan bahwa pengaturan terkait internasionalisasi telah dilakukan dengan benar di bagian awal (header) file plugin. Text Domain 和 Domain PathDalam kode, gantilah semua string yang perlu diterjemahkan dengan… __() 或 _e() Gunakan fungsi-fungsi terkait untuk membungkus kode tersebut. Setelah itu, gunakan alat seperti Poedit untuk membuat file template POT, serta file terjemahan berformat .mo dan .po, lalu letakkan file-file tersebut di direktori bahasa yang ditentukan oleh plugin.

Contohnya:echo esc_html( __( ‘Hello, World!’, ‘my-first-plugin’ ) );Ketika pengguna beralih ke bahasa yang diinginkan, WordPress akan secara otomatis memuat file terjemahan yang sesuai.

Bagaimana cara menghindari konflik nama fungsi dalam sebuah plugin dengan plugin lain?

Praktik terbaik untuk menghindari konflik nama fungsi adalah dengan menggunakan namespace (PHP 5.3+) atau menambahkan prefiks unik pada semua fungsi, kelas, dan konstanta. Prefiks tersebut harus cukup unik; umumnya menggunakan singkatan atau nama penuh dari nama plugin yang digunakan.

Misalnya, jangan gunakan… display_greeting()…dan sebaiknya menggunakan… my_first_plugin_display_greeting()Jika menggunakan namespace PHP, Anda dapat mendeklarasikannya di bagian atas file. namespace MyFirstPlugin;Lalu, di dalamnya digunakan nama fungsi yang singkat, sedangkan saat dipanggil dari luar, nama fungsi tersebut diuraikan melalui namespace.

Bagaimana cara mengunggah plugin ke direktori resmi setelah proses pengembangan selesai?

Untuk mengunggah plugin ke direktori resmi WordPress.org, Anda perlu membuat akun terlebih dahulu di WordPress.org dan kemudian mengirimkan plugin tersebut. Prosesnya meliputi: memastikan kode plugin mematuhi lisensi GPL, melewati pemeriksaan standar PHPCS, menyiapkan file readme.txt (dengan format yang sesuai), serta menyediakan tangkapan layar dan dokumentasi yang jelas. Setelah pengiriman, akan ada pengawas yang meninjau kode plugin tersebut. Jika lolos pemeriksaan, plugin dapat diunggah ke direktori resmi WordPress.org. Setelah diunggah, pengguna dapat mencari dan menginstal plugin tersebut langsung dari panel administrasi WordPress.

Bagaimana cara plugin tetap kompatibel dengan versi WordPress yang lebih lama?

Untuk menjaga kompatibilitas ke versi sebelumnya, saat mengembangkan plugin, periksa terlebih dahulu versi WordPress yang digunakan, dan gunakan pernyataan kondisional (conditional statements) untuk mengelilingi kode yang bergantung pada API versi baru. Selain itu, hindari penggunaan fungsi-fungsi yang sudah tidak lagi didukung (deprecated functions); jika tetap perlu digunakan, pastikan ada solusi alternatif yang tersedia. Dalam berkas readme.txt plugin, sebutkan dengan jelas versi WordPress minimum yang dibutuhkan oleh plugin tersebut, serta berikan petunjuk yang jelas kepada pengguna. Menguji kinerja plugin di versi WordPress yang lebih lama secara berkala merupakan kunci untuk mempertahankan kompatibilitas.