Panduan Dasar Pengembangan Plugin WordPress: Membuat Plugin Pertama Anda Dari Nol

Preparasi dan pengaturan lingkungan.

Sebelum memulai menulis kode, Anda perlu memastikan bahwa Anda memiliki lingkungan pengembangan yang sesuai. Ini mencakup instalasi WordPress lokal dan sebuah editor kode. Lingkungan lokal memungkinkan Anda untuk menguji dan mendeteksi kesalahan dengan bebas tanpa mempengaruhi situs web yang berjalan di internet. Perangkat lunak lingkungan pengembangan lokal yang umum digunakan antara lain Local by Flywheel, XAMPP, atau MAMP.

Anda perlu memikirkan sebuah nama unik untuk plugin Anda, nama tersebut akan digunakan sebagai nama direktori utama plugin dan juga nama file utama plugin tersebut. Misalnya, jika nama plugin Anda adalah “Hello World”, maka file utama plugin Anda dapat diberi nama “HelloWorld.js” atau “HelloWorld.py” (tergantung pada platform pengembangan yang digunakan). hello-world.phpPastikan nama dan deskripsi plugin Anda unik di dalam direktori plugin WordPress, hal ini akan membantu mencegah konflik dengan plugin lainnya.

Selain itu, sangat penting untuk memahami buku panduan pengembangan resmi WordPress dan referensi kode-nya. Memahami konsep-konsep inti WordPress, seperti Action Hooks, Filter Hooks, Shortcodes, dan API Pengaturan (Settings API), akan memberikan dasar yang kuat untuk pengembangan Anda.

推荐阅读 Panduan Lengkap Pengembangan Plugin WordPress: Membuat Plugin PHP Profesional dari Nol。

Membuat file plugin pertama

Inti dari sebuah plugin adalah satu atau lebih file PHP. Dalam kasus yang paling sederhana, sebuah plugin dapat hanya terdiri dari satu file PHP saja. Untuk membuat sebuah plugin yang efektif, Anda perlu menambahkan komentar informasi plugin standar di bagian awal (header) dari file plugin utama. Blok komentar ini akan memberitahu WordPress semua metainformasi tentang plugin Anda, seperti nama, deskripsi, versi, penulis, dan lainnya.

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

WordPress mengidentifikasi dan menampilkan informasi plugin dengan membaca komentar dalam format tertentu yang terletak di bagian awal sebuah file. Berikut adalah contoh struktur header plugin yang paling dasar:

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个用于学习和演示的简单 WordPress 插件。
 * Version:           1.0.0
 * Requires at least: 5.2
 * Requires PHP:      7.2
 * Author:            你的名字
 * Author URI:        https://example.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

Simpan kode tersebut ke dalam sebuah file PHP yang baru, misalnya `new_file.php`. my-first-plugin.phpKemudian, letakkan file tersebut ke dalam direktori instalasi WordPress lokal Anda. wp-content/plugins Di dalam folder tersebut. Saat ini, setelah Anda masuk ke halaman “Plugin” di panel administrasi WordPress, Anda seharusnya dapat melihat sebuah plugin baru dengan nama “My First Plugin” yang muncul di daftar, dan Anda dapat mengaktifkannya. Plugin ini belum memiliki fungsi apa pun untuk saat ini.

Menambahkan fitur dasar untuk plugin

Setelah plugin diaktifkan, kami akan menambahkan sebuah fitur sederhana ke dalamnya: teks kustom akan secara otomatis ditambahkan di akhir isi artikel. Untuk melakukan ini, kami perlu menggunakan hook filter dari WordPress. the_content。

Anda dapat menambahkan kode berikut di bawah informasi kepala plugin yang baru saja Anda buat:

推荐阅读 Mulai dari Nol: Panduan Lengkap Proses Pengembangan Plugin WordPress。

/**
 * 在文章内容末尾添加自定义文本
 *
 * @param string $content 当前文章内容。
 * @return string 修改后的文章内容。
 */
function mfp_add_footer_text( $content ) {
    // 仅针对主循环中的单个文章页面
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $custom_text = '<p><em>Terima kasih telah membaca artikel ini, disajikan oleh “My First Plugin”.</em></p>';
        $content .= $custom_text;
    }
    return $content;
}
// 将自定义函数挂载到 `the_content` 过滤器上
add_filter( 'the_content', 'mfp_add_footer_text' );

Kode ini mendefinisikan sebuah objek atau fungsi dengan nama… mfp_add_footer_text Fungsi tersebut menerima isi artikel sebagai parameter. $content Sebagai parameter, di dalam fungsi tersebut pertama-tama digunakan tag kondisional (…)is_single(), in_the_loop(), is_main_query()Hal tersebut dilakukan untuk memastikan bahwa perubahan hanya dilakukan dalam siklus utama halaman artikel tertentu, sehingga tidak mempengaruhi halaman lain seperti halaman utama atau halaman arsip. Setelah itu, sebuah teks HTML khusus dibuat dan ditambahkan setelah konten asli. Akhirnya, proses tersebut selesai. add_filter Fungsi tersebut akan “menggantungkan” (menghubungkan) fungsi kustom tersebut ke sistem WordPress. the_content Di atas filter.

Setelah menyimpan file, lakukan pembaruan (refresh) pada halaman artikel di frontend, dan Anda akan melihat teks yang telah ditambahkan di bagian akhir isi artikel tersebut.

Mengembangkan fitur lanjutan: Membuat menu manajemen dan halaman opsi

Sebuah plugin yang memiliki fitur yang lengkap umumnya memerlukan interaksi dengan administrator, yang biasanya dilakukan dengan menambahkan halaman pengaturan di sisi backend. WordPress menyediakan API yang kaya untuk membuat menu administrasi dan halaman opsi.

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

Menambahkan item menu plugin di bagian belakang (backend).

Kami akan membuat halaman menu manajemen yang terpisah untuk plugin tersebut, yang digunakan untuk mengonfigurasi beberapa opsi. Hal ini memerlukan penggunaan… add_action Kait dan… admin_menu Aksi.

Lanjutkan menambahkan kode berikut ke dalam file utama plugin Anda:

/**
 * 在 WordPress 后台管理菜单中添加一个新的顶级菜单项
 */
function mfp_register_admin_menu() {
    add_menu_page(
        '我的插件设置',          // 页面标题
        '我的插件',             // 菜单标题
        'manage_options',       // 所需权限
        'my-first-plugin',      // 菜单 slug
        'mfp_render_settings_page', // 渲染页面的回调函数
        'dashicons-admin-plugins', // 图标（可选）
        80                      // 菜单位置
    );
}
add_action( 'admin_menu', 'mfp_register_admin_menu' );

add_menu_page Fungsi ini digunakan untuk mendaftarkan menu utama (top-level menu) yang baru.manage_options Ini merupakan identifikasi hak akses, yang berarti hanya pengguna yang memiliki hak akses “Opsi Manajemen” (biasanya administrator) yang dapat melihat menu ini.mfp_render_settings_page Ini adalah nama fungsi yang akan kita definisikan selanjutnya, yang digunakan untuk menghasilkan konten HTML halaman pengaturan.

推荐阅读 Panduan Akhir Pengembangan Plugin WordPress: Membangun Plugin Kustom Pertama Anda Dari Nol。

Membangun konten halaman pengaturan

Sekarang, kita perlu mendefinisikan fungsi panggilan balik (callback function) yang telah disebutkan di atas. mfp_render_settings_page Mari kita render halaman pengaturan yang sederhana.

/**
 * 渲染插件设置页面的内容
 */
function mfp_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>\n</h1>
        <form action="/id/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 输出设置字段、安全 nonce 字段等
            settings_fields( 'mfp_settings_group' );
            do_settings_sections( 'my-first-plugin' );
            submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Fungsi ini menghasilkan struktur halaman administrasi dasar WordPress, yang mencakup judul dan sebuah formulir. Fungsi ini menggunakan dua fungsi inti dari API pengaturan WordPress:settings_fields 和 do_settings_sectionsUntuk membuatnya berfungsi, kita juga perlu mendaftarkan pengaturan (settings), bagian-bagian (sections), dan field-field yang terkait.

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

Gunakan API Pengaturan untuk mendaftarkan opsi.

Pengaturan API di WordPress menyediakan cara yang aman dan terstandarisasi untuk menangani proses pendaftaran, penyimpanan, dan validasi opsi formulir. Mari kita lanjutkan dengan menambahkan kode berikut untuk mendaftarkan sebuah bidang teks yang sederhana.

/**
 * 初始化插件的设置
 */
function mfp_settings_init() {
    // 注册一个新的设置项 `mfp_options` 到数据库
    register_setting( 'mfp_settings_group', 'mfp_options' );

// 在页面内添加一个新的节
    add_settings_section(
        'mfp_section_basic',
        '基础设置',
        'mfp_section_basic_callback',
        'my-first-plugin'
    );

// 向节中添加一个字段
    add_settings_field(
        'mfp_field_custom_text',
        '自定义页脚文本',
        'mfp_field_custom_text_callback',
        'my-first-plugin',
        'mfp_section_basic',
        array( 'label_for' => 'mfp_field_custom_text' )
    );
}
add_action( 'admin_init', 'mfp_settings_init' );

/**
 * 节描述的回调函数（可以为空）
 */
function mfp_section_basic_callback() {
    echo '<p>Di sini Anda dapat mengonfigurasi opsi dasar dari plugin tersebut.</p>';
}

/**
 * 字段 `mfp_field_custom_text` 的回调函数，用于输出 HTML 输入框
 */
function mfp_field_custom_text_callback() {
    // 从数据库获取现有值
    $options = get_option( 'mfp_options' );
    $value = isset( $options['custom_text'] ) ? $options['custom_text'] : '';
    ?&gt;
    <input type="text"
           id="mfp_field_custom_text"
           name="mfp_options[custom_text]"
           value="<?php echo esc_attr( $value ); ?>"
           class="regular-text" />
    <p class="description">Teks ini akan ditampilkan di akhir artikel.</p>
    \n&lt;?php
}

Sekarang, kita perlu memodifikasi versi sebelumnya. mfp_add_footer_text Gunakan fungsi tersebut agar dapat menggunakan nilai opsi yang baru kita buat, bukan teks yang dikodekan secara tetap (hardcoded).

function mfp_add_footer_text( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $options = get_option( 'mfp_options' );
        $custom_text = isset( $options['custom_text'] ) ? $options['custom_text'] : '';
        if ( ! empty( $custom_text ) ) {
            $content .= '<p><em>'`. esc_html($custom_text)`.'</em></p>';
        }
    }
    return $content;
}

Hingga saat ini, plugin Anda telah memiliki halaman pengaturan backend yang lengkap. Administrator dapat menemukan halaman pengaturan tersebut di menu “My Plugins”, memasukkan teks kaki halaman yang diinginkan, lalu menyimpannya. Teks tersebut akan ditampilkan secara dinamis di bagian akhir setiap artikel di halaman depan situs web.

Optimisasi Plugin dan Praktik Keamanan

Saat mengembangkan plugin, mengikuti praktik terbaik sangat penting untuk menjaga keamanan, kinerja, dan kemudahan pemeliharaan. Berikut ini adalah beberapa prinsip utama yang perlu diperhatikan:

Pastikan keamanan kode.

Semua data yang diterima dari frontend atau antarmuka manajemen harus diverifikasi, dibersihkan, dan di-escapese (diubah agar tidak berbahaya) sebelum ditampilkan di browser atau disimpan ke dalam database. Hal ini bertujuan untuk mencegah kelemahan keamanan seperti serangan Cross-Site Scripting (XSS) dan SQL injection.

• Untuk melakukan output yang di-“escape” (dihapus tanda khususnya), gunakan fungsi seperti… esc_html(), esc_attr(), esc_url(), wp_kses_post() Untuk mengubah konten dinamis.
• Cuci data masukan: Gunakan fungsi seperti… sanitize_text_field(), sanitize_email(), intval() Untuk memproses data formulir yang dikirim oleh pengguna.
• Pemeriksaan hak akses: Digunakan dalam fungsi panggilan balik (callback) administrator. current_user_can() Lakukan konfirmasi hak akses sekali lagi. Pada titik akhir (endpoint) AJAX atau REST API yang melibatkan modifikasi data, pastikan untuk menggunakan nonce (token numerik) sebagai alat verifikasi.

Mengikuti standar pengkodean WordPress

Menggunakan standar pengkodean WordPress dapat memastikan bahwa gaya penulisan kode Anda selaras dengan kode inti WordPress, meningkatkan keterbacaan, dan memudahkan kolaborasi dengan pengembang lain. Hal ini mencakup penggunaan indentasi yang benar, gaya tanda kurung, dan konvensi penamaan (fungsi dan variabel menggunakan huruf kecil ditambah garis bawah). Anda dapat menggunakan PHP CodeSniffer bersama dengan aturan standar WordPress untuk memeriksa kode secara otomatis.

Mengimplementasikan dukungan internasionalisasi (internationalization).

Menambahkan dukungan internasionalisasi untuk plugin Anda sejak awal akan memungkinkan pengguna di seluruh dunia untuk dengan mudah menerjemahkannya ke bahasa mereka sendiri. Hal ini dapat dicapai melalui langkah-langkah berikut:
1. 在插件头部注释中正确设置 Text Domain 和 Domain Path。
2. 在所有需要翻译的字符串周围使用 WordPress 的翻译函数，如 (), _e(), esc_html() dan lain-lain.
3. 使用工具如 Poedit 来生成 .pot File template, digunakan oleh penerjemah untuk membuat terjemahan. .po 和 .mo File terjemahan.

Misalnya, untuk menginternasionalisasi teks deskripsi halaman pengaturan:

function mfp_section_basic_callback() {
    echo '<p>' . esc_html__( '在这里配置插件的基础选项。', 'my-first-plugin' ) . '</p>';
}

Menyimpulkan.

Artikel ini membimbing Anda dari awal hingga akhir dalam proses membuat sebuah plugin WordPress yang sederhana namun memiliki fungsi yang lengkap. Kita telah membahas berbagai aspek, mulai dari persiapan lingkungan, pembuatan file plugin, penulisan informasi header plugin, penggunaan action hooks dan filter hooks untuk menambahkan konten ke artikel, hingga penggunaan API WordPress untuk membuat antarmuka administrasi yang kompleks. Di akhir, kita juga membahas praktik-praktik penting dalam pengembangan plugin, seperti aspek keamanan, standar pemrograman, dan internasionalisasi (penggunaan bahasa yang beragam).

Melalui praktik ini, Anda seharusnya sudah memahami proses inti dan alat-alat dasar dalam pengembangan plugin WordPress. Langkah selanjutnya, Anda dapat mencoba mengembangkan fitur yang lebih kompleks, seperti membuat jenis artikel khusus, membuat tabel database sendiri, meningkatkan interaksi menggunakan jQuery, atau mengirimkan plugin Anda ke direktori plugin resmi WordPress. Ingatlah bahwa belajar secara terus-menerus dan membaca kode sumber merupakan cara terbaik untuk meningkatkan keterampilan pengembangan Anda.

FAQ - Pertanyaan yang Sering Diajukan.

Bagaimana cara mendeteksi dan memperbaiki kesalahan (bug) pada plugin WordPress saya?

Langkah pertama yang perlu Anda lakukan adalah mengaktifkan mode debug (mode debugging) di WordPress. wp-config.php Dalam dokumen tersebut, akan... WP_DEBUG Konstanta diatur ke trueIni akan langsung menampilkan kesalahan PHP, peringatan, dan pemberitahuan di halaman web.

Pada saat yang sama, juga dapat digunakan. error_log() Fungsi tersebut akan menulis informasi debug khusus ke log kesalahan server, atau menggunakan alat pengembang di browser (konsol dan tab jaringan) untuk melakukan debug pada permintaan JavaScript dan AJAX. Untuk logika yang kompleks, menggunakan alat debug profesional seperti Xdebug akan sangat membantu dan mempercepat proses debug.

Akankah plugin saya bertentangan dengan tema atau plugin lainnya?

Memungkinkan, terutama saat menangani fungsi yang sama, menggunakan nama variabel atau kelas global yang umum. Untuk meminimalkan konflik sebanyak mungkin, pastikan untuk menambahkan prefiks yang unik pada semua nama fungsi, kelas, variabel, dan opsi Anda. Misalnya, jangan gunakan nama yang sama untuk berbagai komponen dalam kode. add_footer_textBukan itu, melainkan menggunakan metode yang serupa… myplugin_add_footer_text Nama tersebut.

Sebelum memodifikasi konten global (seperti variabel pencarian), lakukan pemeriksaan yang menyeluruh dan batasi kondisi-kondisi yang berlaku. Sebelum merilisnya, uji plugin Anda sebanyak mungkin di berbagai lingkungan dan kombinasi tema yang berbeda.

Apa teknologi yang perlu saya pelajari untuk mengembangkan plugin tingkat lanjut?

Selain memiliki dasar PHP yang kuat, Anda juga perlu memahami secara mendalam:
– JavaScript: Digunakan untuk interaksi di sisi pengguna (front end) dan pengembangan plugin/kustomizer untuk WordPress.
– jQuery: Meskipun WordPress sedang beralih ke kerangka kerja JavaScript yang lebih modern, jQuery masih banyak digunakan.
REST API: Digunakan untuk membuat aplikasi front-end yang terpisah atau untuk berinteraksi dengan layanan eksternal.
Pengetahuan tentang database: Memahami struktur database WordPress dan cara melakukan kueri kustom atau membuat tabel baru secara aman.
Composer: digunakan untuk mengelola paket-paket dependensi PHP.
Alat pembangunan: Seperti Webpack, yang digunakan untuk mengelola kompilasi JavaScript dan SASS modern.

Bagaimana cara menerbitkan plugin saya ke direktori resmi WordPress?

Pertama-tama, pastikan bahwa plugin Anda sepenuhnya mematuhi panduan pengembangan plugin resmi dan praktik terbaik dalam hal keamanan. Anda memerlukan akun WordPress.org untuk mengirimkan paket kompresi plugin Anda ke pihak yang berwenang untuk ditinjau. Proses peninjauan akan memeriksa kualitas kode, aspek keamanan, serta lisensi yang digunakan (harus kompatibel dengan GPL).

Jika plugin Anda lulus audit, maka plugin tersebut akan ditambahkan ke dalam repositori SVN. Anda dapat menggunakan SVN untuk memperbarui dan memelihara plugin Anda. Setelah dipublikasikan, pengguna dapat langsung mencari, menginstal, dan memperbarui plugin Anda dari panel administrasi WordPress mereka.