Tutorial Akhir tentang Pengembangan Plugin WordPress: Membangun Plugin Pertama Anda dari Nol

Dasar-Dasar Pengembangan Plugin WordPress dan Persiapan Lingkungan

Sebelum memulai menulis kode, sangat penting untuk memahami konsep dasar dari plugin WordPress dan membangun lingkungan pengembangan yang sesuai. Pada dasarnya, sebuah plugin WordPress merupakan kumpulan satu atau lebih file PHP yang digunakan untuk memperluas atau mengubah fungsi-fungsi inti dari WordPress melalui sistem Hook yang disediakan oleh WordPress. Plugin dapat sederhana, hanya berupa kode singkat, atau dapat juga kompleks, hingga mencakup pembuatan sistem perdagangan elektronik yang lengkap.

Inti dari lingkungan pengembangan adalah membangun lingkungan server lokal. Anda dapat menggunakan alat-alat seperti XAMPP, MAMP, Local by Flywheel, atau Docker untuk dengan cepat membangun situs WordPress lokal yang mencakup PHP, MySQL, dan Apache/Nginx. Pastikan versi PHP yang Anda gunakan sesuai dengan versi yang direkomendasikan oleh WordPress secara resmi. Dalam hal editor kode, Visual Studio Code,PhpStorm, atau Sublime Text merupakan pilihan yang sangat baik; alat-alat ini menyediakan fitur penyorotan sintaks, saran kode (code hints), dan dukungan debugging, yang secara signifikan meningkatkan efisiensi pengembangan.

Sebuah plugin WordPress yang standar harus setidaknya memuat satu file PHP utama, dan bagian awal (header) dari file tersebut perlu berisi komentar-komentar khusus yang berisi informasi tentang plugin tersebut. Komentar-komentar ini sangat penting agar WordPress dapat mengenali plugin tersebut dengan benar. Selain itu, meskipun tidak wajib, sangat disarankan untuk membuat direktori terpisah untuk plugin Anda, hal ini akan membantu dalam mengelola berbagai file sumber daya, paket bahasa (language packs), dan dependensi lainnya.

推荐阅读 Pengembangan Plugin WordPress: Panduan Lengkap Dari Pemula Hingga Ahli – Membangun Situs Web yang Dapat Disesuaikan Sesuai Kebutuhan。

Buatlah file plugin pertamamu.

Sekarang, mari kita mulai membuat file inti dari plugin pertama kita. Pertama-tama, Anda perlu masuk ke direktori instalasi WordPress./wp-content/plugins/Folder. Di sini, buatlah folder baru untuk plugin Anda, misalnya dengan nama “my-plugin-folder”.my-first-plugin。

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

Dalam folder tersebut, buatlah sebuah file PHP utama. Umumnya, file utama ini memiliki nama yang sama dengan folder pluginnya, misalnya…my-first-plugin.phpPada awal file ini, harus terdapat informasi header plugin yang standar.

<?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
 * Domain Path:       /languages
 */

Komentar ini menyediakan semua metainformasi yang diperlukan untuk penggunaan plugin di backend WordPress. Setelah file disimpan, Anda dapat melihat dan mengaktifkan plugin tersebut di halaman “Plugins” di backend WordPress. Saat ini plugin ini belum memiliki fungsi apa pun, tetapi strukturnya sudah terbentuk.

Menambahkan sebuah fitur sederhana ke plugin

Setelah plugin diaktifkan, kita akan menambahkan fungsi pertamanya: menampilkan baris teks kustom di bagian bawah halaman situs web. Kita akan menggunakan fitur yang tersedia di WordPress untuk melakukan hal ini.wp_footerKait (hook).

Dalam file utama plugin…my-first-plugin.phpDi bawah komentar header, tambahkan kode berikut:

推荐阅读 Menguasai Pengembangan Plugin WordPress Dari Nol: Membangun Fungsi Khusus dan Ekstensi。

// 在网站页脚输出自定义文本
function mfp_add_footer_text() {
    echo '<p style="text-align: center; color: #666;">Terima kasih telah menggunakan situs web ini! Dukungan disediakan oleh “My First Plugin”.</p>';
}
add_action( 'wp_footer', 'mfp_add_footer_text' );

Di sini,mfp_add_footer_textIni adalah fungsi yang kami buat sendiri, dan fungsi tersebut berisi konten HTML yang akan ditampilkan.add_action()Ini adalah fungsi inti yang digunakan untuk menambahkan “hook” aksi (action hooks), yang memungkinkan fungsi kita “terpasang” (dibungkus) ke dalam inti sistem WordPress.wp_footerPada titik eksekusi ini, simpan file dan perbarui tampilan situs web. Maka, Anda akan dapat melihat baris teks tersebut di bagian bawah halaman.

Menggunakan kode singkat untuk memperluas fitur pengeditan konten

Shortcode merupakan fitur yang sangat berguna yang disediakan oleh WordPress, yang memungkinkan pengguna untuk memasukkan konten dinamis ke dalam artikel atau halaman dengan menggunakan tag-tag sederhana. Selanjutnya, kita akan membuat sebuah shortcode sederhana untuk menampilkan tanggal saat ini.

Di dalam file utama yang sama, lanjutkan dengan menambahkan kode berikut:

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 mfp_show_current_date( $atts ) {
    // 定义短码的默认属性
    $attributes = shortcode_atts(
        array(
            'format' => 'Y年m月d日',
        ),
        $atts
    );

// 根据属性中的格式返回日期
    return date( $attributes['format'] );
}
add_shortcode( 'show_date', 'mfp_show_current_date' );

fungsimfp_show_current_dateLogika untuk mendefinisikan kode singkat telah ditentukan.shortcode_atts()Fungsi ini digunakan untuk menggabungkan atribut yang didefinisikan oleh pengguna dengan atribut default, sehingga kode menjadi lebih kokoh (robust).add_shortcode()Fungsi tersebut akan…[show_date]Tag ini terkait dengan fungsi pemrosesan yang kita buat sendiri.

Sekarang, Anda dapat memasukkan teks tersebut di dalam editor teks artikel, halaman, atau alat bantu apa pun.[show_date]Untuk menampilkan tanggal dalam format default, atau menggunakan…[show_date format="F j, Y"]Untuk menampilkan tanggal dalam format bahasa Inggris.

Memahami lebih dalam tentang hook dan filter

Filosofi inti dalam pengembangan plugin WordPress adalah penggunaan “Hook” (Pengait). Hook terbagi menjadi dua jenis: Action (Aksi) dan Filter (Filter). Yang telah kita gunakan sebelumnya…add_action()Hanya perlu menambahkan sebuah “action hook” saja.

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

Hook aksi (action hook) akan menjalankan kode Anda pada titik waktu tertentu; hook ini tidak mengharapkan nilai kembali (return value) dan umumnya digunakan untuk menampilkan konten atau melakukan tugas tertentu, seperti menambahkan teks di bagian kaki halaman (footer). Sebaliknya, hook filter digunakan untuk memodifikasi data. Hook filter menerima sebuah nilai, dan setelah diproses oleh fungsi Anda, harus mengembalikan nilai yang telah dimodifikasi.

Menggunakan filter untuk mengubah judul artikel

Mari kita buat sebuah filter untuk secara otomatis menambahkan sebuah prefix ke semua judul artikel. Tambahkan kode berikut ke dalam file utama plugin:

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 mfp_add_title_prefix( $title, $id = null ) {
    // 确保只在主循环且是文章页面的标题上生效
    if ( in_the_loop() && is_single() && get_post_type( $id ) === 'post' ) {
        $title = '【推荐阅读】' . $title;
    }
    return $title;
}
add_filter( 'the_title', 'mfp_add_title_prefix', 10, 2 );

Di sini,the_titleIni adalah sebuah hook filter.add_filter()Parameter ketiga, “10”, merupakan nilai prioritas (semakin kecil angkanya, semakin dulu fungsi akan dieksekusi), sedangkan parameter keempat, “2”, menunjukkan bahwa fungsi pemrosesan kita menerima dua parameter (yaitu data asli).$title(Fungsi ini akan memeriksa kondisi dan hanya menambahkan prefiks ke judul ketika berada di halaman artikel tunggal dan dalam siklus utama.)

Keamanan Plugin dan Praktik Terbaik

Saat mengembangkan plugin, keamanan merupakan faktor utama yang perlu dipertimbangkan. Jangan pernah mempercayai data yang dimasukkan oleh pengguna; data tersebut harus diverifikasi, dibersihkan, dan di-escapasi (dilindungi dari potensi serangan).

Data Validation and Escaping

Ketika sebuah plugin perlu memproses data yang berasal dari formulir atau URL, fungsi keamanan yang disediakan oleh WordPress harus digunakan. Misalnya, gunakan…sanitize_text_field()Gunakan alat ini untuk membersihkan input teks.esc_html()或esc_attr()Gunakan kode HTML atau atribut tertentu untuk mencegah serangan jenis Cross-Site Scripting (XSS).

Membuat halaman pengaturan yang sederhana

Sebuah plugin yang lengkap umumnya memerlukan halaman pengaturan di backend. Di sini akan ditunjukkan cara membuat halaman opsi yang sederhana, serta cara menyimpan sebuah pengaturan dengan aman.

// 在后台管理菜单中添加一个选项页面
function mfp_add_admin_menu() {
    add_options_page(
        '我的第一个插件设置', // 页面标题
        '我的插件设置',       // 菜单标题
        'manage_options',     // 权限要求
        'my-first-plugin',    // 菜单slug
        'mfp_options_page_html' // 用于显示页面内容的回调函数
    );
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );

// 注册一个设置项
function mfp_settings_init() {
    register_setting( 'mfpPlugin', 'mfp_settings' ); // 设置组，选项名

add_settings_section(
        'mfp_plugin_section', // 区块ID
        '基础设置',           // 区块标题
        null,                 // 区块介绍的回调函数（此处为null）
        'my-first-plugin'     // 所属页面slug
    );

add_settings_field(
        'custom_text',        // 字段ID
        '自定义显示文本',     // 字段标签
        'mfp_custom_text_field_html', // 用于输出字段HTML的回调函数
        'my-first-plugin',    // 页面slug
        'mfp_plugin_section'  // 所属区块ID
    );
}
add_action( 'admin_init', 'mfp_settings_init' );

// 渲染设置字段的HTML
function mfp_custom_text_field_html() {
    $options = get_option( 'mfp_settings' );
    $value = isset( $options['custom_text'] ) ? esc_attr( $options['custom_text'] ) : '';
    ?>
    <input type='text' name='mfp_settings[custom_text]' value='<?php echo $value; ?>'>
    <p class="description">Teks yang dimasukkan di sini akan ditampilkan di bagian kaki halaman (footer).</p>
    <?php
}

// 渲染整个选项页面的HTML
function mfp_options_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( 'mfpPlugin' ); // 输出安全字段
            do_settings_sections( 'my-first-plugin' ); // 输出设置区块和字段
            submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Kode ini membuat sebuah halaman anak yang terletak di bawah menu “Pengaturan”, yang berfungsi untuk menyimpan teks kustom. Perhatikan pula proses pemeriksaan hak akses pengguna yang terdapat di dalamnya.current_user_can) dan pengkodean ulang data yang dihasilkan (escape and reencoding of the output data).esc_html, esc_attrSemua ini merupakan bagian dari praktik keamanan (security practices). Setelah itu, Anda dapat memodifikasi fungsi yang sebelumnya digunakan untuk menampilkan informasi di bagian kaki halaman (footer), sehingga…get_option( 'mfp_settings' )Nilai tersebut dibaca dari dalam untuk ditampilkan secara dinamis.

Menyimpulkan.

Dengan tutorial ini, Anda telah menyelesaikan seluruh proses pembuatan sebuah plugin WordPress yang fungsional dari nol. Anda telah mempelajari cara membuat struktur file dasar sebuah plugin, serta cara menggunakan action hooks.add_actionTambahkan konten di footer, melaluiadd_shortcodeMembuat kode singkat (short code) khusus, serta menggunakan hook filteradd_filterModifikasi data artikel. Yang lebih penting lagi, Anda telah memahami konsep-konsep dasar keamanan plugin, serta telah menerapkan pengetahuan tersebut untuk membuat halaman pengaturan backend yang aman, sehingga Anda dapat mengelola opsi-opsi plugin dengan baik.

Pengembangan plugin merupakan proses belajar dan praktik yang berkelanjutan. Langkah selanjutnya, Anda dapat mencoba menambahkan dukungan internasionalisasi (penggunaan bahasa asing) untuk plugin tersebut.__()和_e()Gunakan fungsi yang tersedia, masukkan sumber daya JavaScript dan CSS, atau gunakan pemrograman berorientasi objek (Object-Oriented Programming/OOP) untuk merekonstruksi struktur kode agar lebih mudah diperawat dan diperluas. Ingatlah bahwa membaca manual plugin resmi WordPress serta kode inti WordPress merupakan cara terbaik untuk meningkatkan keterampilan Anda.

FAQ - Pertanyaan yang Sering Diajukan.

Bagaimana cara men-debug plugin WordPress saya?

Langkah pertama dalam mengaktifkan mode debug di WordPress adalah dengan mengaktifkannya terlebih dahulu. Di situs web Anda…wp-config.phpDalam dokumen tersebut, akan...WP_DEBUGKonstanta diatur ketrueIni akan langsung menampilkan kesalahan PHP, peringatan, dan pemberitahuan di halaman web. Untuk debugging yang lebih kompleks, Anda dapat menggunakan alat-alat khusus.error_log()Fungsi tersebut menulis informasi ke log kesalahan server, atau menggunakan alat debugging profesional seperti Query Monitor untuk melihat hasil kueri database, eksekusi kode (hook), serta data kinerja sistem.

Bagaimana cara agar plugin saya kompatibel dengan berbagai versi WordPress?

Dalam kode plugin, Anda sebaiknya menggunakan pernyataan kondisional untuk memeriksa keberadaan fungsi inti WordPress, kelas, atau konstanta tersebut, sebelum menggunakannya. Anda dapat menggunakan metode berikut:function_exists()、class_exists()或defined()Lakukan penilaian. Pada saat yang sama, dalam konteks plugin…readme.txtDalam file tersebut, dijelaskan secara eksplisit versi WordPress terendah yang didukung oleh plugin Anda (melalui…)Requires at least(FIELD), ini dapat membantu pengguna memahami tingkat kompatibilitasnya.

Apakah pengembangan plugin harus menggunakan pemrograman berorientasi objek?

Tidak wajib. Anda dapat menggunakan pemrograman prosedural murni (seperti contoh dalam tutorial ini) untuk mengembangkan plugin yang memiliki fungsi yang lengkap. Keunggulan utama pemrograman berorientasi objek (Object-Oriented Programming/OOP) adalah organisasi kode yang lebih baik, pengemasan (encapsulation), dan kemudahan penggunaan kembali (reusability), yang sangat menguntungkan untuk proyek plugin yang besar dan kompleks. Untuk plugin yang kecil, pemrograman prosedural mungkin lebih sederhana dan langsung. Anda dapat memilih metode yang tepat berdasarkan skala dan tingkat kompleksitas proyek Anda.

Bagaimana cara mengunggah plugin saya ke direktori plugin resmi WordPress?

Pertama-tama, Anda perlu mendaftarkan akun di WordPress.org dan mengajukan plugin Anda. Kode plugin Anda harus memenuhi standar dan pedoman resmi, termasuk aspek keamanan, tidak mengandung kode berbahaya, serta menggunakan lisensi yang kompatibel dengan GPL. Anda juga perlu membuat deskripsi yang detail…readme.txtAnda perlu mengirimkan file tersebut, serta memastikan bahwa komentar di bagian awal (header) file utama plugin memenuhi standar yang ditentukan. Setelah pengiriman, tim sukarelawan yang bertugas meninjau plugin akan melakukan verifikasi. Jika plugin tersebut lulus verifikasi, maka plugin tersebut dapat diterbitkan.