Pelatihan praktis untuk pemula tanpa latar belakang: memandu Anda langkah demi langkah dalam mengembangkan plugin WordPress.

Lingkungan Pengembangan Plugin WordPress dan Persiapan Dasar

Sebelum memulai menulis kode, Anda memerlukan lingkungan pengembangan lokal yang sesuai. Lingkungan ini biasanya mencakup sebuah server lokal (seperti XAMPP, MAMP, atau Local by Flywheel), sebuah editor kode (seperti VS Code atau PHPStorm), serta instalasi WordPress untuk keperluan pengujian. Pastikan bahwa versi PHP yang Anda gunakan sesuai dengan versi yang direkomendasikan oleh WordPress secara resmi.

Inti dari sebuah plugin WordPress adalah komponen yang terletak di…/wp-content/plugins/Folder yang terdapat di dalam direktori tersebut merupakan identifikasi plugin Anda. Sebaiknya gunakan huruf kecil, angka, dan tanda hubung (-) untuk nama folder tersebut. Di dalam folder ini, harus ada sebuah file PHP utama yang bernama sama dengan nama foldernya. Contohnya:my-first-plugin.phpFile ini merupakan titik masuk (entry point) dari plugin, dan berisi metainformasi mengenai plugin tersebut.

Buatlah file plugin pertamamu.

Mari kita mulai dengan membuat plugin yang paling sederhana; plugin ini akan menampilkan pesan selamat datang di panel administrasi situs web.

推荐阅读 Analisis mendalam tentang plugin WooCommerce: panduan lengkap dari konfigurasi awal hingga kustomisasi tingkat lanjut.。

Penulisan komentar di bagian atas plugin (plugin header comments)

Setiap plugin WordPress harus dimulai dengan sebuah komentar header yang spesifik. WordPress menggunakan informasi ini untuk mengenali dan menampilkan plugin tersebut. Di dalam folder plugin Anda (misalnya…my-first-pluginDalam proses tersebut, Anda perlu membuat sebuah file utama (main file).my-first-plugin.phpDan tuliskan kode berikut:

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

<?php
/**
 * Plugin Name: 我的第一个WordPress插件
 * 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
 */

Setelah menyimpan file tersebut, masuklah ke panel administrasi WordPress Anda, lalu kunjungi halaman “Plugin”. Anda seharusnya dapat melihat “My First WordPress Plugin” tercantum dalam daftar plugin. Anda dapat mengaktifkannya, meskipun plugin tersebut belum memiliki fungsi apa pun untuk saat ini.

Menambahkan fungsi pertama ke plugin

Sekarang, mari kita tambahkan sebuah fitur sederhana untuk plugin ini: menampilkan pemberitahuan administrasi khusus di bagian atas halaman admin. Kita akan menggunakan fitur yang tersedia di WordPress untuk melakukannya.admin_noticesKait (hook).

Di dalam file utama (main file).my-first-plugin.phpDi bawah komentar header, tambahkan kode berikut:

// 在管理后台添加一个欢迎提示
function my_first_plugin_admin_notice() {
    ?>
    <div class="notice notice-success is-dismissible">
        <p>Selamat menggunakan “My First WordPress Plugin”! Anda telah berhasil mengaktifkan plugin ini.</p>
    </div>
    ';
}
add_action( 'admin_notices', 'my_first_plugin_admin_notice' );

Kode ini mendefinisikan sebuah objek atau fungsi dengan nama…my_first_plugin_admin_noticeFungsi tersebut akan menghasilkan sepotong kode HTML yang digunakan untuk membuat kotak pesan sukses yang dapat ditutup.add_action()Fungsi tersebut “menggantungkan” (menghubungkan) fungsi kustom tersebut ke sistem WordPress.admin_noticesAksi tersebut terkait dengan penggunaan “hook” (pemanggil fungsi tertentu dalam WordPress). Setelah menyimpan file dan memperbarui halaman admin WordPress, Anda akan melihat pesan selamat datang berwarna hijau di bagian atas halaman.

推荐阅读 Tutorial praktis membangun situs web: proses pengembangan lengkap dari nol hingga peluncuran dan panduan pemilihan teknologi.。

Memahami Mekanisme Inti Plugin WordPress: Hook dan Filter

Inti dari pengembangan plugin WordPress terletak pada interaksi dengan inti WordPress itu sendiri, yang terutama dilakukan melalui mekanisme “hook”. Hook terbagi menjadi dua jenis: action dan filter.

Penggunaan Action Hook

Action hooks memungkinkan Anda untuk menyisipkan kode kustom pada titik waktu tertentu saat WordPress dijalankan, sama seperti yang baru saja kita gunakan.admin_noticesContoh lain yang sering terjadi adalah…init“Hook” adalah mekanisme yang diaktifkan saat WordPress diinisialisasi, dan sering digunakan untuk mendaftarkan jenis artikel (post types) atau kategori (categories) yang dibuat secara khusus (custom).

Misalnya, kita dapat mengatur nilai sebuah opsi saat plugin diinisialisasi:

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 my_first_plugin_set_default_option() {
    // 如果选项不存在，则添加它
    if ( false === get_option( 'my_first_plugin_greeting' ) ) {
        add_option( 'my_first_plugin_greeting', 'Hello from my plugin!' );
    }
}
add_action( 'init', 'my_first_plugin_set_default_option' );

Penggunaan Filter Hooks

Filter hooks memungkinkan Anda untuk memodifikasi data yang dilewatkan dalam proses. Misalnya,the_contentFilter tersebut memungkinkan Anda untuk mengubah tampilan teks utama artikel. Kita dapat menggunakannya untuk secara otomatis menambahkan informasi hak cipta di akhir setiap artikel.

function my_first_plugin_add_copyright( $content ) {
    // 仅对主循环中的单篇文章生效
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $copyright = '<p><em>Artikel ini dilindungi oleh hak cipta. Mohon cantumkan sumber saat mengutipnya.</em></p>';
        $content .= $copyright;
    }
    return $content;
}
add_filter( 'the_content', 'my_first_plugin_add_copyright' );

Dalam contoh ini, fungsi…my_first_plugin_add_copyrightMenerima yang asli.$contentSetelah dilakukan penilaian terhadap kondisi (untuk memastikan bahwa perubahan hanya berlaku pada halaman artikel tunggal), sebuah bagian HTML ditambahkan di akhir halaman tersebut. Akhirnya, versi artikel yang telah dimodifikasi tersebut harus disimpan atau ditampilkan.$contentKembali.

Membangun plugin yang lebih kompleks: kode singkat dan halaman pengaturan

Sebuah plugin yang memiliki fungsi yang lengkap umumnya perlu menyediakan interaksi antarmuka pengguna (seperti kode singkat/shortcode) serta konfigurasi di sisi server (seperti pengaturan halaman).

推荐阅读 Alat utama untuk optimisasi mesin pencari: Membuat strategi SEO untuk situs WordPress dari nol.。

Membuat kode singkat (short code) khusus

Kode singkat memungkinkan pengguna untuk menggunakan tag-tag sederhana (seperti…)[my_greeting]) Memasukkan fitur plugin ke dalam artikel atau halaman web. Daftarkan kode singkat untuk menggunakannya.add_shortcode()Fungsi.

// 注册一个简单的问候短代码
function my_first_plugin_greeting_shortcode( $atts ) {
    // 使用 shortcode_atts 定义默认属性并合并用户输入
    $attributes = shortcode_atts( array(
        'name' => '访客',
    ), $atts );

// 获取我们之前设置的选项
    $greeting_text = get_option( 'my_first_plugin_greeting', 'Hello' );

// 生成输出
    $output = '<div class="my-plugin-greeting">';
    $output .= esc_html( $greeting_text ) . ', ' . esc_html( $attributes['name'] ) . '!';
    $output .= '</div>';

return $output;
}
add_shortcode( 'my_greeting', 'my_first_plugin_greeting_shortcode' );

Sekarang, pengguna dapat memasukkan teks di editor.[my_greeting name="张三"]Pada sisi frontend, akan muncul pesan “Hello from my plugin! Zhang San!”.

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

Halaman Pengaturan Plugin

Agar pengguna dapat mengatur ucapan selamat mereka sendiri, kita perlu menambahkan halaman pengaturan di backend administrasi. Hal ini melibatkan penambahan menu utama atau sub-menu, serta pengelolaan proses penyimpanan data yang diisi oleh pengguna melalui formulir.

// 在后台“设置”菜单下添加子菜单页
function my_first_plugin_add_settings_page() {
    add_options_page(
        '我的插件设置',          // 页面标题
        '我的第一个插件',        // 菜单标题
        'manage_options',       // 所需权限
        'my-first-plugin',      // 菜单slug
        'my_first_plugin_render_settings_page' // 回调函数，用于输出页面内容
    );
}
add_action( 'admin_menu', 'my_first_plugin_add_settings_page' );

// 渲染设置页面的HTML
function my_first_plugin_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Pengaturan plugin pertama saya</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>
    &lt;?php
}

// 注册设置、区域和字段
function my_first_plugin_register_settings() {
    register_setting(
        &#039;my_first_plugin_settings_group&#039;, // 设置组名
        &#039;my_first_plugin_greeting&#039;        // 选项名
    );

add_settings_section(
        &#039;my_first_plugin_main_section&#039;,    // 区域ID
        &#039;问候语设置&#039;,                     // 区域标题
        null,                            // 区域回调函数（可为空）
        &#039;my-first-plugin&#039;                // 页面slug
    );

add_settings_field(
        &#039;greeting_text_field&#039;,            // 字段ID
        &#039;问候语文本&#039;,                     // 字段标题
        &#039;my_first_plugin_greeting_field_callback&#039;, // 字段HTML的回调函数
        &#039;my-first-plugin&#039;,                // 页面slug
        &#039;my_first_plugin_main_section&#039;    // 所属区域ID
    );
}
add_action( &#039;admin_init&#039;, &#039;my_first_plugin_register_settings&#039; );

// 渲染问候语输入字段
function my_first_plugin_greeting_field_callback() {
    $greeting = get_option( &#039;my_first_plugin_greeting&#039; );
    echo &#039;<input type="text" name="my_first_plugin_greeting" value="' . esc_attr( $greeting ) . '" class="regular-text" />';
}

Kode ini membuat halaman pengaturan standar untuk WordPress. Ketika pengguna mengubah pesan sapaan di halaman pengaturan dan menyimpannya, kode singkat (shortcode) yang telah dibuat sebelumnya akan menggunakan teks pesan sapaan yang baru.

Menyimpulkan.

Melalui tutorial ini, kita telah membuat sebuah plugin WordPress dengan fungsi dasar dari nol. Anda telah mempelajari cara membuat struktur file plugin, menulis informasi header plugin, menggunakan hook aksi untuk mengirim notifikasi di backend, memanfaatkan filter untuk mengubah konten, membuat shortcode yang dapat dipanggil oleh pengguna di frontend, serta membuat halaman pengaturan yang lengkap untuk mengelola opsi plugin. Semua ini merupakan keterampilan inti dan dasar dalam pengembangan plugin WordPress. Setelah menguasai hal-hal tersebut, Anda dapat mempelajari lebih lanjut mengenai API resmi WordPress dengan membaca dokumentasi resminya, seperti cara membuat tabel database khusus, endpoint REST API, dan pengolahan AJAX, sehingga dapat mengembangkan plugin yang lebih kuat dan lebih profesional.

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja pengetahuan pemrograman yang diperlukan untuk mengembangkan plugin WordPress?

Untuk mengembangkan plugin WordPress, pengetahuan tentang bahasa PHP sangat diperlukan, karena inti dari WordPress sendiri ditulis menggunakan PHP. Selain itu, Anda juga perlu memahami HTML, CSS, dan JavaScript dasar untuk membuat antarmuka pengguna (frontend) serta logika interaksi dalam plugin tersebut. Pemahaman dasar tentang SQL juga akan membantu dalam menangani operasi data yang lebih kompleks.

Bagaimana cara men-debug plugin WordPress saya?

Pertama-tama, pastikan bahwa di dalam sistem Anda…wp-config.phpBuka file tersebut.WP_DEBUG“Mode ini akan menampilkan kesalahan dan peringatan PHP di layar. Selain itu, Anda juga dapat menggunakan…”error_log()Fungsi tersebut menulis informasi debug ke log kesalahan (error log) server. Untuk proses debug yang lebih kompleks, Anda dapat mempertimbangkan untuk menggunakan alat debug PHP khusus, seperti Xdebug, atau menginstal plugin debug WordPress untuk membantu mengidentifikasi masalah.

Bagaimana cara mengunggah plugin yang saya kembangkan ke direktori plugin resmi WordPress?

Anda perlu mengakses situs WordPress.org dan membuat akun pengembang (developer account). Setelah itu, gunakan alat Subversion (SVN) untuk mengirimkan kode plugin Anda ke repositori kode yang telah ditentukan oleh pihak WordPress. Plugin Anda harus mematuhi lisensi GPL, dan kualitas kode, keamanan, serta dokumentasi harus memenuhi standar tertentu yang ditetapkan. Setelah proses audit selesai dan berhasil, plugin Anda akan ditampilkan di direktori resmi WordPress untuk diunduh oleh pengguna.

Bagaimana cara memuat file CSS dan JavaScript dari plugin dengan benar di sisi frontend?

Untuk menghindari konflik dan memastikan kinerja yang optimal, sumber daya (resource) sebaiknya tidak diperkenalkan langsung ke dalam file template. Cara yang benar adalah dengan menggunakan…wp_enqueue_style()和wp_enqueue_script()Fungsi tersebut. Untuk sumber daya di bagian administrasi (backend), sebaiknya fungsi tersebut diunggah (dimount) ke…admin_enqueue_scripts“Hook”; untuk sumber daya di bagian frontend situs web, sebaiknya di-mount (dipasang) ke…wp_enqueue_scripts“Hook.” Hal ini memastikan bahwa hubungan ketergantungan (dependency relationships) berjalan dengan benar, dan file yang sama tidak akan diunduh atau dimuat ulang secara berlebihan.