Menguasai pengembangan plugin WordPress: Bangun plugin kustom pertamamu dari nol

Mengapa memilih pengembangan plugin untuk WordPress?

Sebagai sistem manajemen konten (Content Management System/CMS) yang paling populer di dunia, keunggulan WordPress terletak pada kemampuannya yang sangat tinggi dalam hal skalabilitas, yang terutama berasal dari adanya plugin. Dengan mengembangkan plugin khusus, Anda dapat menambahkan fitur-fitur unik ke dalam platform inti WordPress untuk memenuhi kebutuhan bisnis tertentu, tanpa perlu mengubah file tema (theme files). Hal ini memastikan bahwa kode fungsi yang Anda buat tidak akan hilang saat tema diperbarui, serta membuat struktur fitur menjadi lebih termodulasi dan mudah digunakan di berbagai situs web lainnya.

Mempelajari pengembangan plugin tidak hanya memungkinkan Anda menciptakan produk yang dapat digunakan oleh orang lain, tetapi juga memungkinkan Anda memahami lebih dalam cara kerja WordPress, termasuk sistem hook-nya, interaksi dengan basis data, dan praktik terbaik dalam hal keamanan. Ini merupakan langkah kunci dalam perjalanan dari seorang pengguna biasa menjadi seorang pengembang tingkat lanjut.

Membangun plugin pertama Anda…

Sebelum memulai menulis kode, Anda perlu membangun lingkungan WordPress yang standar di lokal atau pada server pengujian. Ini merupakan dasar dari semua pekerjaan pengembangan.

推荐阅读 Belajar Pengembangan Plugin WordPress Dari Nol: Membangun Fungsi Khusus Pertama Anda。

Membuat file utama plugin

Setiap plugin WordPress harus memiliki sebuah file utama, yang umumnya dinamai sesuai dengan nama plugin tersebut. Kita akan membuat sebuah file utama dengan nama…my-first-pluginPlugin tersebut. Pertama-tama, berada di dalam direktori instalasi WordPress Anda./wp-content/plugins/Di dalam folder tersebut, buatlah sebuah folder baru dengan nama…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 dengan nama…my-first-plugin.phpFile PHP tersebut merupakan titik masuk (entry point) dari plugin Anda. Buka file tersebut, lalu tambahkan komentar-komentar di bagian awal file yang berisi informasi tentang plugin Anda. Informasi-ini sangat penting agar WordPress dapat mengenali plugin Anda dengan benar.

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://yourwebsite.com/my-first-plugin
 * Description:       这是一个学习WordPress插件开发的示例插件，用于在文章底部添加自定义内容。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://yourwebsite.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

Mengimplementasikan fungsi sederhana pertama

Salah satu fitur klasik untuk pemula adalah adanya teks otomatis yang ditambahkan di bagian bawah setiap artikel di situs web. Kita akan menggunakan fitur ini di WordPress. the_content Implementasinya dilakukan menggunakan “filter hooks”. Di bawah komentar di bagian awal file utama Anda, tambahkan fungsi berikut:

// 防止直接访问文件
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * 在文章内容末尾添加自定义文本
 *
 * @param string $content 原始的文章内容。
 * @return string 修改后的文章内容。
 */
function mfp_add_footer_text( $content ) {
    // 判断是否是主循环且在单篇文章页面
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $custom_text = '<div class="mfp-footer-note"><p><em>Terima kasih telah membaca! Artikel ini disajikan untuk Anda oleh “My First Plugin”.</em></p></div>';
        return $content . $custom_text;
    }
    return $content;
}
// 将函数挂载到 `the_content` 过滤器上
add_filter( 'the_content', 'mfp_add_footer_text' );

Kode ini mendefinisikan sebuah fungsi. mfp_add_footer_textHal tersebut menerima isi artikel. $content Sebagai parameter, fungsi tersebut pertama-tama memeriksa apakah lingkungan saat ini berada di halaman artikel tunggal, siklus utama, atau proses kueri utama. Hal ini dilakukan untuk mencegah penambahan teks di bagian ringkasan, alat bantu (tools), atau bagian lainnya. Jika kondisi tersebut terpenuhi, fungsi akan membuat sebuah teks HTML khusus, lalu menambahkannya di belakang konten asli.

Mengenal Mendalam Arsitektur dan Keamanan Plugin

Seiring dengan semakin banyaknya fitur yang ditambahkan oleh plugin, organisasi kode yang baik menjadi sangat penting. Pada saat yang sama, keamanan merupakan hal yang paling mendasar dalam pengembangan WordPress.

推荐阅读 Memahami pengembangan plugin WordPress: Membangun modul fungsionalitas ekstensi pertama Anda dari nol hingga satu.。

Merekonstruksi kode menggunakan pemrograman berorientasi objek (Object-Oriented Programming/OOP).

Untuk meningkatkan keterawatan (maintainability) dan kemampuan untuk diperluas (scalability) kode, disarankan untuk menggunakan pendekatan berorientasi objek (Object-Oriented Programming/OOP) dalam mengorganisir plugin. Kami akan merekonstruksi fungsi-fungsi di atas menjadi sebuah kelas.

// 防止直接访问文件
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

class My_First_Plugin {
    /**
     * 构造函数，初始化插件钩子。
     */
    public function __construct() {
        // 在构造方法中将方法挂载到钩子上
        add_action( 'init', array( $this, 'load_textdomain' ) );
        add_filter( 'the_content', array( $this, 'add_footer_to_content' ) );
        add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_styles' ) );
    }

/**
     * 加载插件的文本翻译域。
     */
    public function load_textdomain() {
        load_plugin_textdomain( 'my-first-plugin', false, dirname( plugin_basename( __FILE__ ) ) . '/languages' );
    }

/**
     * 在文章内容末尾添加自定义文本。
     */
    public function add_footer_to_content( $content ) {
        if ( is_single() && in_the_loop() && is_main_query() ) {
            $custom_text = '<div class="mfp-footer-note"><p><em>' . esc_html__( '感谢阅读！本文由“我的第一个插件”为您呈现。', 'my-first-plugin' ) . '</em></p></div>';
            return $content . $custom_text;
        }
        return $content;
    }

/**
     * 为插件添加样式。
     */
    public function enqueue_styles() {
        wp_enqueue_style( 'mfp-style', plugins_url( 'assets/css/style.css', __FILE__ ), array(), '1.0.0' );
    }
}

// 实例化插件类
$my_first_plugin_instance = new My_First_Plugin();

Perhatikan, kami sedang… add_footer_to_content Metode tersebut menggunakan… esc_html__() Fungsi ini digunakan untuk “membungkus” teks. Fungsi tersebut merupakan fungsi penerjemahan, dan pada saat yang sama juga melakukan ekstraksi yang diperlukan pada hasil terjemahan, sehingga memastikan bahwa teks yang dihasilkan aman untuk ditampilkan. Hal ini merupakan praktik terbaik dalam pengelolaan teks yang akan ditampilkan di layar. Kami juga menambahkan metode untuk memuat file gaya (style sheet), serta mendukung penggunaan bidang teks (text fields), sehingga mempersiapkan sistem untuk mendukung internasionalisasi (i18n) plugin.

Memahami dan menerapkan validasi dan pengubahan data.

Jangan pernah mempercayai data yang dimasukkan oleh pengguna atau data dari sumber eksternal. Saat menerima, memproses, dan menghasilkan data, pastikan untuk melakukan verifikasi, pembersihan (cleaning), dan proses escape (penggantian karakter khusus menjadi karakter yang aman). Sebagai contoh, jika Anda ingin membuat halaman administrasi dengan formulir input, pastikan untuk menggunakan fungsi-fungsi yang disediakan oleh WordPress, seperti fungsi non-CE (Content Security), pemeriksaan hak akses (permission checks), dan verifikasi data.

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

Fungsi plugin ini cukup sederhana, tetapi saat kami menghasilkan kode HTML, kami sudah menggunakannya. esc_html__() Lakukan proses “escaping” (penghindaran dari interpretasi yang salah). Jika sebuah plugin perlu memproses data yang dikirim oleh pengguna, misalnya melalui formulir, maka penggunaan mekanisme escaping sangat penting. sanitize_text_field(), wp_kses_post() Lakukan pembersihan pada fungsi-fungsi tersebut, dan gunakan… wp_verify_nonce() Untuk memverifikasi keabsahan permintaan tersebut.

Create a plugin management page.

Sebuah plugin yang matang biasanya memerlukan halaman konfigurasi di backend. Kita akan belajar cara menggunakan API pengaturan (settings API) WordPress untuk membuat halaman manajemen yang sederhana dan standar.

Tambahkan menu pengaturan plugin.

Pertama-tama, kita perlu menambahkan sebuah halaman menu anak di bawah menu “Settings” (Pengaturan) di backend WordPress. Tambahkan metode baru dalam kelas Anda, dan pada fungsi konstruktor (constructor), lakukan proses yang diperlukan untuk mengatur halaman menu tersebut. add_action('admin_menu', ...) Hook memanggilnya.

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

/**
 * 注册插件管理页面。
 */
public function register_admin_menu() {
    add_options_page(
        __( '我的插件设置', 'my-first-plugin' ), // 页面标题
        __( '我的第一个插件', 'my-first-plugin' ), // 菜单标题
        'manage_options', // 所需权限
        'mfp-settings', // 菜单slug
        array( $this, 'display_settings_page' ) // 显示页面的回调函数
    );
}

Kemudian, tambahkan kode berikut ke dalam fungsi konstruktor:add_action( 'admin_menu', array( $this, 'register_admin_menu' ) );。

Membangun halaman pengaturan dan field (kolom data)

Selanjutnya, kita perlu mendefinisikan… display_settings_page Metode ini digunakan untuk merender konten HTML halaman pengaturan, serta menggunakan API pengaturan untuk mendaftarkan sebuah bidang pengaturan (setting field).

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

/**
 * 显示插件设置页面。
 */
public function display_settings_page() {
    ?>
    <div class="wrap">
        <h1>\n</h1>
        <form action="/id/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 输出设置字段、非ce等安全字段
            settings_fields( 'mfp_settings_group' );
            do_settings_sections( 'mfp-settings' );
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    <?php
}

/**
 * 初始化插件设置。
 */
public function initialize_settings() {
    // 注册一个设置
    register_setting(
        'mfp_settings_group', // 设置组名
        'mfp_footer_text', // 选项名
        array(
            'type' => 'string',
            'sanitize_callback' =&gt; 'sanitize_text_field', // 清理回调函数
            'default' =&gt; __( '感谢阅读！本文由“我的第一个插件”为您呈现。', 'my-first-plugin' ),
        )
    );

// 添加一个设置区域
    add_settings_section(
        'mfp_main_section',
        __( '主要设置', 'my-first-plugin' ),
        null, // 可选的区域描述回调函数
        'mfp-settings'
    );

// 向区域中添加字段
    add_settings_field(
        'mfp_footer_field',
        __( '页脚文本', 'my-first-plugin' ),
        array( $this, 'render_footer_field' ), // 渲染字段的回调函数
        'mfp-settings',
        'mfp_main_section',
        array( 'label_for' =&gt; 'mfp_footer_text' )
    );
}

Anda perlu mendefinisikan (define) sesuatu. render_footer_field Metode untuk merender kotak masukan (input field) yang sebenarnya, serta memperbarui tampilan sebelumnya. add_footer_to_content Metode untuk mengambilnya dari opsi basis data. get_option('mfp_footer_text') Baca teks dari sumber tertentu, bukan menggunakan string yang dikodekan secara tetap (hard-coded). Akhirnya, tambahkan kode berikut ke dalam fungsi konstruktor (constructor):add_action( 'admin_init', array( $this, 'initialize_settings' ) );。

Menyimpulkan.

Melalui perjalanan pembelajaran dalam artikel ini, Anda telah membangun sebuah plugin WordPress yang lengkap fungsionalitasnya dari nol. Anda telah mempelajari cara membuat struktur dasar sebuah plugin, menggunakan action dan filter hook untuk memperluas fungsi WordPress, mengorganisir kode dengan pendekatan berorientasi objek guna meningkatkan kualitasnya, mengikuti praktik terbaik keamanan dalam memverifikasi dan mengeksekusi data, serta memanfaatkan API pengaturan WordPress untuk membuat antarmuka manajemen backend yang profesional.

Inti dari pengembangan plugin adalah memahami sistem hook dan aliran data (data flow) di WordPress. Teruslah berlatih, mulai dengan fungsi-fungsi yang sederhana, lalu perlahan-lahan tingkatkan kompleksitasnya, sambil selalu mengutamakan aspek keamanan, kinerja, dan kemudahan pemeliharaan (maintainability). Seiring dengan bertambahnya pengalaman, Anda akan mampu mengembangkan plugin WordPress yang kuat, profesional, dan populer.

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja pengetahuan dasar yang diperlukan untuk mengembangkan plugin WordPress?

Anda perlu memiliki pengetahuan pemrograman PHP yang kuat, karena plugin tersebut sebagian besar ditulis menggunakan PHP. Selain itu, pemahaman dasar tentang HTML, CSS, dan JavaScript juga diperlukan, karena Anda perlu menangani tampilan dan interaksi di sisi pengguna (front end). Yang paling penting, Anda harus mengenal konsep-konsep inti dari WordPress, seperti hook (action dan filter), struktur perulangan (loop), hierarki template, serta operasi terhadap basis data (menggunakan kelas seperti WP_Query dan WP_User_Query).

Bagaimana cara mendebug dan menguji plugin saya?

Pertama-tama, sangat disarankan untuk melakukan pengembangan di lingkungan pengembangan lokal (seperti Local by Flywheel, XAMPP) atau di situs uji coba online, agar tidak mempengaruhi situs web produksi. Aktifkan mode debug di WordPress.wp-config.phpPengaturan dalam filedefine( 'WP_DEBUG', true );Ini akan menampilkan kesalahan dan peringatan PHP di layar. Gunakanlah fitur tersebut.error_log()Fungsi tersebut mencatat informasi debug khusus ke dalam log kesalahan (error log) server. Untuk proses debug yang lebih kompleks, Anda dapat mempertimbangkan untuk menggunakan plugin debug profesional seperti Query Monitor atau Debug Bar.

Bagaimana cara agar plugin saya kompatibel dengan berbagai versi WordPress?

Selama proses pengembangan, perhatikan pemberitahuan mengenai fungsi-fungsi yang telah ditinggalkan (deprecated) yang terdapat dalam dokumen resmi WordPress. Hindari menggunakan fungsi-fungsi yang telah ditandai sebagai “deprecated”. Dalam file utama plugin, hal ini dapat dilakukan dengan…Requires at least和Tested up toGunakan informasi di bagian header untuk menyatakan versi WordPress yang kompatibel dengan plugin Anda. Uji plugin Anda secara berkala di versi WordPress yang lebih baru, dan perhatikan log pembaruan inti (core updates) agar dapat menyesuaikan kode Anda tepat waktu.

Bagaimana cara menerbitkan plugin saya ke direktori plugin resmi WordPress?

Pertama-tama, Anda perlu memastikan bahwa plugin Anda sepenuhnya memenuhi spesifikasi pengembangan plugin resmi dan panduan pengiriman (submission guidelines). Hal ini mencakup kualitas kode, aspek keamanan, serta perjanjian lisensi (harus menggunakan GPLv2 atau versi yang lebih baru). Setelah itu, buatlah aplikasi untuk mendapatkan repositori SVN di WordPress.org, lalu kirimkan kode plugin Anda ke repositori tersebut.trunkMasukkan konten tersebut ke dalam direktori yang sesuai, lalu buat file atau folder yang diperlukan.readme.txtFile tersebut menggunakan format tertentu. Setelah melalui proses audit dan disetujui, plugin Anda akan muncul di direktori resmi.