Mengembangkan Plugin WordPress, Dari Pemula hingga Ahli: Panduan Langkah demi Langkah untuk Membuat Plugin Kustom Pertama Anda.

Mengapa belajar pengembangan plugin WordPress?

WordPress menjadi sistem manajemen konten (Content Management System/CMS) paling populer di dunia berkat kemampuan ekspansibilitasnya yang luar biasa. Inti dari kemampuan ekspansibilitas ini adalah adanya plugin. Dengan mengembangkan plugin khusus, Anda dapat menambahkan fitur apa pun yang Anda inginkan ke situs web Anda, tanpa perlu mengubah kode inti WordPress. Hal ini tidak hanya memastikan keamanan saat melakukan pembaruan inti WordPress, tetapi juga membuat fitur-fitur tersebut terstruktur secara modular, sehingga lebih mudah untuk dikelola dan dipindahkan ke situs web lain.

Mempelajari pengembangan plugin dapat mengubah Anda dari sekadar “pengguna” WordPress menjadi “pembuat” (creator). Baik itu untuk membuat fitur khusus sesuai kebutuhan klien, menyelesaikan masalah bisnis tertentu, maupun mengemas ide Anda menjadi produk yang dijual di pasar, menguasai keterampilan ini membuka berbagai peluang bagi Anda. Yang lebih penting lagi, memahami proses pengembangan plugin akan memungkinkan Anda untuk lebih efektif dalam melakukan debugging dan pengembangan lanjutan saat menggunakan plugin lainnya.

Sebuah plugin WordPress standar secara struktural merupakan sebuah folder yang berisi file PHP utama. File utama ini menyatakan keberadaannya kepada sistem WordPress melalui informasi header berupa komentar khusus. Semua logika bisnis, baik itu menambahkan alat tambahan baru, membuat jenis artikel khusus, maupun memproses data formulir, dijalankan melalui berbagai “hook” yang disediakan oleh WordPress.

推荐阅读 Pengembangan Plugin WordPress dari Pemula hingga Ahli: Pelajari Cara Membuat Fitur Khusus Sendiri Secara Langsung.。

Membangun proyek plugin pertamamu

Sebelum memulai pengembangan, Anda memerlukan lingkungan pengembangan lokal. Kami merekomendasikan penggunaan alat-alat seperti XAMPP, MAMP, Local by Flywheel, atau Docker untuk membangun server lokal yang mencakup PHP, MySQL, dan Apache/Nginx. Dengan mengembangkan di instalasi WordPress lokal, Anda dapat menghindari dampak negatif terhadap situs web yang berjalan di server online.

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 file dasar untuk membuat sebuah plugin

Salah satu plugin paling sederhana hanya perlu berisi satu file saja. Di dalam direktori instalasi WordPress Anda, masuk ke… wp-content/plugins Folder: Buatlah folder baru, misalnya… my-first-pluginKemudian, buatlah sebuah file PHP utama di dalam folder tersebut. Nama file tersebut biasanya sama dengan nama foldernya. my-first-plugin.php。

Menulis bagian header metainformasi untuk plugin

Dalam file utama plugin, blok komentar di bagian atas file sangat penting. Blok ini memberitahu WordPress tentang nama plugin, deskripsi, versi, penulis, dan informasi lainnya. Contoh header standar adalah sebagai berikut:

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个用于学习 WordPress 插件开发的自定义插件。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

Setelah menyimpan file tersebut, masuklah ke panel administrasi WordPress Anda, lalu kunjungi halaman “Plugins”. Anda seharusnya dapat melihat “My First Plugin” muncul dalam daftar plugin, dan Anda dapat mengaktifkannya. Dengan demikian, sebuah plugin yang “kosong” namun valid telah berhasil dibuat. Plugin ini saat ini tidak memiliki fungsi apa pun, tetapi strukturnya sudah benar.

Menjelajahi Mekanisme Inti WordPress: Hook dan Filter

Inti dari pengembangan plugin WordPress terletak pada pemahaman dan penerapan sistem “hook”-nya. Hook terbagi menjadi dua jenis: action hook dan filter hook. Kedua jenis ini merupakan mekanisme yang memungkinkan Anda untuk “menyisipkan” kode kustom atau memodifikasi data pada titik waktu tertentu dalam proses kerja WordPress.

推荐阅读 Panduan Memulai Pengembangan Plugin WordPress: Membangun Ekstensi Fungsional Pertama Anda dari Nol.。

Memahami cara kerja action hook

Action hooks memungkinkan Anda untuk menjalankan fungsi Anda pada titik tertentu dalam proses eksekusi WordPress. Misalnya, ketika halaman selesai diunduh, atau ketika sebuah artikel diterbitkan. add_action() Fungsi tersebut dapat digunakan untuk “menggantungkan” (menghubungkan) fungsi kustom Anda ke sebuah “hook” (titik akses tertentu dalam sistem). Syntax dasarnya adalah:add_action( ‘hook_name’， ‘your_function_name’ );。

Mari kita wujudkan sebuah fitur: menampilkan pesan khusus di bagian bawah halaman depan situs web. Kita akan menggunakan… wp_footer Action hook ini…

function my_custom_footer_message() {
    echo '<p style="text-align: center; color: #666;">Terima kasih telah mengunjungi situs kami! Ini adalah informasi bagian kaki (footer) yang ditambahkan oleh sebuah plugin khusus.</p>';
}
add_action( 'wp_footer’, 'my_custom_footer_message’ );

Tambahkan kode tersebut ke dalam file utama plugin Anda. my-first-plugin.php Simpan perubahan tersebut dan perbarui halaman depan situs web. Anda akan melihat baris teks ini di bagian kaki halaman (footer).

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

Menggunakan filter untuk mengubah konten default.

Hook filter digunakan untuk memodifikasi data yang dihasilkan oleh WordPress selama proses pemrosesan. Berbeda dengan hook action, fungsi filter harus mengembalikan sebuah nilai. add_filter() Fungsi tersebut digunakan untuk memasang (menghubungkan) filter tertentu. Sebagai contoh, untuk mengubah isi default dari judul sebuah artikel:

function modify_post_title( $title ) {
    if ( is_single() ) {
        return '【精选】’ . $title;
    }
    return $title;
}
add_filter( ‘the_title’, 'modify_post_title’ );

Fungsi ini akan menambahkan prefiks “【Seleksi】” di depan judul halaman artikel tertentu, sedangkan judul halaman lainnya (seperti halaman utama, halaman daftar, dll.) akan tetap tidak berubah. Dengan menggabungkan penggunaan aksi (actions) dan filter (filters), Anda dapat mengontrol hampir setiap aspek dalam WordPress.

Membangun halaman manajemen backend yang praktis

Agar pengguna plugin dapat mengonfigurasi opsi-opsinya, kita biasanya perlu membuat halaman administrasi khusus untuk mereka. Proses ini melibatkan penggunaan API menu administrasi WordPress.

推荐阅读 Pengembangan Plugin WordPress: Panduan Lengkap Dari Dasar Hingga Mahir – Membangun Modul Fungsi yang Sangat Dapat Disesuaikan。

Tambahkan sebuah item menu manajemen yang baru.

Gunakan add_menu_page() 或 add_options_page() Fungsi-fungsi seperti ini memungkinkan Anda menambahkan halaman baru ke menu sebelah kiri di panel administrasi WordPress. Mari kita ambil contoh menambahkan halaman di bawah sub-menu “Pengaturan” (Settings).

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

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_plugin_settings_page_html() {
    // 检查用户权限
    if ( ! current_user_can( ‘manage_options’ ) ) {
        return;
    }
    ?>
    <div class="wrap">
        <h1>\n</h1>
        <form action="/id/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 输出设置字段和安全字段
            settings_fields( ‘my_plugin_settings’ );
            do_settings_sections( ‘my_plugin_settings’ );
            submit_button( ‘保存设置’ );
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Pengaturan Pendaftaran, Blok, dan Bidang (Registration Settings, Blocks, and Fields)

WordPress menyediakan register_setting(), add_settings_section() 和 add_settings_field() Kumpulan API ini digunakan untuk memproses pengaturan secara terstandarisasi. API tersebut mampu menangani verifikasi keamanan (Nonce) secara otomatis, serta proses penyimpanan/pembacaan opsi-opsi yang diinginkan.

Selanjutnya, kita memerlukan sebuah fungsi untuk menginisialisasi pengaturan-pengaturan tersebut. Fungsi ini harus dihubungkan (dimount) ke sistem yang berwenang untuk mengelola pengaturan tersebut. admin_init Di atas kait itu.

function my_plugin_settings_init() {
    // 注册一个新的设置选项组
    register_setting( ‘my_plugin_settings’, ‘my_plugin_options’ );

// 在页面中添加一个新的区块
    add_settings_section(
        ‘my_plugin_section_1’,
        ‘基础设置’,
        null, // 回调函数，用于输出区块描述，可为空
        ‘my_plugin_settings’
    );

// 在区块内添加一个字段
    add_settings_field(
        ‘my_plugin_field_text’,
        ‘欢迎语’,
        ‘my_plugin_field_text_cb’,
        ‘my_plugin_settings’,
        ‘my_plugin_section_1’,
        [
            ‘label_for’ => ‘my_plugin_field_text’,
            ‘class’ => ‘my_plugin_row’,
        ]
    );
}
add_action( ‘admin_init’, ‘my_plugin_settings_init’ );

// 字段的回调函数，用于输出字段的 HTML
function my_plugin_field_text_cb( $args ) {
    $options = get_option( ‘my_plugin_options’ );
    ?>
    <input type="text" id="<?php echo esc_attr( $args[‘label_for’] ); ?>"
           name="my_plugin_options[<?php echo esc_attr( $args[‘label_for’] ); ?>]"
           value="<?php echo esc_attr( $options[ $args[‘label_for’] ] ?? ‘’ ); ?>">
    <p class="“description”">Teks ini akan ditampilkan di halaman depan situs web.</p>
    \n&lt;?php
}

Tambahkan tautan halaman ke menu.

Terakhir, gunakan… add_options_page() Tambahkan halaman yang kami buat ini ke dalam menu “Pengaturan”.

function my_plugin_add_settings_page() {
    add_options_page(
        ‘我的插件设置’, // 页面标题
        ‘我的插件’, // 菜单标题
        ‘manage_options’, // 所需能力
        ‘my-plugin-settings’, // 菜单别名
        ‘my_plugin_settings_page_html’ // 渲染页面的回调函数
    );
}
add_action( ‘admin_menu’, ‘my_plugin_add_settings_page’ );

Sekarang, setelah mengaktifkan plugin tersebut, Anda dapat menemukan opsi “My Plugins” di menu “Settings” (Pengaturan) di backend WordPress. Klik pada opsi tersebut untuk masuk ke halaman pengaturan yang berisi sebuah bidang teks. Di sana, Anda dapat memasukkan dan menyimpan pesan selamat datang. Setelah itu, Anda dapat… get_option( ‘my_plugin_options’ ) Dapatkan dan gunakan nilai ini di frontend.

Mengimplementasikan fitur antarmuka pengguna (frontend) plugin serta mempertimbangkan aspek keamanannya

Saat mengimplementasikan fitur antarmuka pengguna (front-end) dalam sebuah plugin, keamanan merupakan faktor utama yang perlu dipertimbangkan. Jangan pernah mempercayai data yang dimasukkan oleh pengguna; data tersebut harus selalu diverifikasi, dibersihkan, dan di-escapasi (dilindungi dari potensi serangan).

Misalkan kita ingin menggunakan “ucapan selamat datang” yang disimpan dalam pengaturan backend, dan menampilkannya di bagian atas halaman utama situs web. Pertama-tama, kita perlu mengambil informasi tersebut dari basis data, lalu menampilkannya dengan aman.

function display_frontend_greeting() {
    // 1. 获取数据
    $options = get_option( ‘my_plugin_options’ );
    $greeting = $options[‘my_plugin_field_text’] ?? ‘’;

// 2. 如果内容为空，则不输出任何东西
    if ( empty( $greeting ) ) {
        return;
    }

// 3. 在输出前进行清理和转义
    $safe_greeting = esc_html( $greeting );

// 4. 输出到前端（这里假设只在首页显示）
    if ( is_front_page() ) {
        echo ‘<div class="“my-plugin-greeting”"><p>’. $safe_greeting . ‘</p></div>’;
    }
}
add_action( ‘wp_body_open’, ‘display_frontend_greeting’ );

Di sini kita menggunakan… esc_html() Fungsi ini digunakan untuk meng-ekspos karakter HTML, sehingga mencegah serangan jenis Cross-Site Scripting (XSS). Kami juga memeriksa apakah data tersebut kosong, dan menggunakan tag kondisional untuk memprosesnya. is_front_page() Untuk mengontrol posisi output, Anda perlu memasang (meng-montek) fungsi tersebut ke sistem yang bersangkutan. wp_body_open Hook, memastikan konten ditampilkan segera setelah tag halaman dimulai.

Selain itu, dalam pengembangan plugin, internasionalisasi (internationalization) juga merupakan praktik yang penting. Dengan menggunakan… __() 和 _e() Dengan menggunakan fungsi-fungsi penerjemahan yang tersedia dan mengatur domain teks (Text Domain) dari plugin dengan benar, plugin Anda dapat diterjemahkan ke dalam berbagai bahasa. Di bagian meta-information di awal plugin, kita sudah mendefinisikannya terlebih dahulu. Text Domain: my-first-pluginDalam kode, seharusnya digunakan seperti ini:

echo esc_html__( ‘Hello, World!’, ‘my-first-plugin’ );

Menyimpulkan.

Melalui praktik yang dijelaskan dalam artikel ini, kami telah menyelesaikan proses pengembangan plugin WordPress yang lengkap namun sederhana. Kami memulai dengan membuat struktur file dasar dan informasi meta plugin, kemudian secara bertahap mempelajari mekanisme inti WordPress, yaitu sistem hook (pautan). Kami menggunakan fungsi “action” dan “filter” untuk mengontrol alur eksekusi program dan memodifikasi data. Selanjutnya, kami membuat halaman administrasi backend yang dilengkapi dengan field kustom, sehingga pengguna dapat mengonfigurasi opsi plugin tersebut, dan akhirnya menghasilkan output dari opsi tersebut ke halaman depan (frontend) situs web dengan aman.

Proses ini mencakup beberapa aspek penting dalam pengembangan plugin, yaitu pengorganisasian file, pemanfaatan mekanisme “hook”, pembuatan antarmuka backend, pengelolaan opsi, serta penanganan keamanan data di sisi frontend. Ingatlah bahwa sebuah plugin yang baik tidak hanya harus memiliki fungsi yang kuat, tetapi juga harus aman, efisien, dan mudah diperawat. Selanjutnya, Anda dapat mencoba menambahkan lebih banyak fitur ke dalam plugin tersebut, seperti jenis artikel khusus, kode singkat (shortcode), alat bantu (tool), atau endpoint REST API, untuk terus memperdalam pemahaman Anda tentang pengembangan plugin untuk WordPress.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah sebuah plugin hanya bisa berisi satu file PHP saja?

Ya, plugin WordPress yang paling sederhana bisa hanya terdiri dari satu file PHP, asalkan file tersebut berisi komentar header plugin yang benar. Namun, untuk plugin dengan fungsi yang kompleks, disarankan untuk mengorganisir kode ke dalam berbagai file yang berbeda. Misalnya, fungsi-fungsi backend, fungsi frontend, dan fungsi umum sebaiknya disimpan terpisah, agar kode lebih mudah dibaca dan diperawat.

Bagaimana cara mendebug plugin yang Anda kembangkan sendiri?

Disarankan untuk mengaktifkan mode debug di WordPress. Letakkan file tersebut di direktori akar (root directory) situs web Anda. wp-config.php Dalam dokumen tersebut, akan... WP_DEBUG Konstanta diatur ke trueDengan cara ini, kesalahan PHP, peringatan (warning), dan notifikasi akan semuanya ditampilkan. Selain itu, kedua fitur tersebut dapat digunakan bersama-sama (dikombinasikan). error_log() Fungsi tersebut menulis informasi debug ke log kesalahan server, atau menggunakan konsol alat pengembang browser untuk melakukan debug JavaScript.

Ada beberapa norma keamanan yang harus dipatuhi saat mengembangkan plugin:

Prinsip utama adalah: Jangan pernah mempercayai apa pun yang dimasukkan oleh pengguna. Terhadap semua data atau informasi yang berasal dari pengguna, perlakukanlah dengan sikap skeptis dan waspada. $_GET、$_POST、$_COOKIE Data yang diperoleh perlu diverifikasi dan dibersihkan terlebih dahulu. Saat menghasilkan tampilan data dalam format HTML, gunakan proses yang sesuai untuk memastikan bahwa data tersebut telah melalui pemeriksaan yang benar dan bebas dari kesalahan atau konten yang tidak diinginkan. esc_html()、esc_attr()、esc_url() Gunakan fungsi-fungsi seperti escape untuk mengubah karakter-karakter khusus menjadi bentuk yang dapat diterima oleh sistem. Saat menyusun kueri database, pastikan untuk menggunakannya dengan benar. $wpdb->prepare() Metode untuk mencegah serangan SQL injection. Selain itu, periksa juga hak akses pengguna saat ini (misalnya…) current_user_can()Hal tersebut juga merupakan langkah yang sangat penting.

Bagaimana cara mengirimkan plugin saya ke direktori plugin resmi WordPress?

Pertama-tama, pastikan bahwa plugin Anda sepenuhnya mematuhi standar pengkodean WordPress dan lisensi GPL. Anda perlu mengunjungi situs WordPress.org, membuat akun, lalu mengunggah paket plugin yang telah dikompresi ke halaman pengajuan plugin. Tim resmi WordPress akan melakukan peninjauan secara manual untuk memeriksa kualitas kode, keamanan, dokumentasi, dan kepatuhan terhadap persyaratan yang ditetapkan. Setelah peninjauan selesai dan plugin Anda lulus, plugin tersebut akan dimasukkan ke dalam direktori resmi WordPress, mendapatkan dukungan pembaruan otomatis, dan dapat ditemukan serta diinstal oleh pengguna di seluruh dunia.