Panduan Dasar Pengembangan Plugin WordPress: Membangun Ekstensi Fungsi Pertama Anda Dari Nol

Preparasi dan pengaturan lingkungan.

Sebelum memulai menulis kode, Anda memerlukan lingkungan pengembangan yang sesuai. Ini mencakup instalasi WordPress secara lokal dan sebuah editor kode. Alat-alat seperti XAMPP, MAMP, Local by Flywheel, atau Laragon direkomendasikan untuk membangun lingkungan server lokal dengan cepat. Pastikan bahwa lingkungan Anda menggunakan versi PHP yang lebih baru (disarankan versi 7.4 atau lebih) serta MySQL/MariaDB.

Selanjutnya, Anda perlu memahami struktur dasar dari plugin WordPress. File inti dari sebuah plugin adalah sebuah file PHP utama, di mana nama file dan nama direktorinya dapat disesuaikan. Namun, file tersebut harus memuat sebuah komentar header plugin khusus yang digunakan untuk memberitahu WordPress tentang keberadaan plugin Anda. Anda dapat menemukan file tersebut di direktori instalasi WordPress. wp-content/plugins Buatlah sebuah folder baru di dalam folder tersebut, misalnya… my-first-plugin。

Dalam folder ini, buatlah file plugin utama Anda, misalnya dengan nama “main_plugin.py”. my-first-plugin.phpPada awal file ini, harus terdapat komentar informasi plugin yang standar.

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

Buatlah file plugin pertamamu.

Sekarang, mari kita mulai membuat kerangka dasar dari plugin tersebut. Di dalam direktori plugin Anda, buka file PHP utama, lalu tuliskan informasi header plugin standar 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:       我的第一个插件
 * 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 merupakan kunci bagi WordPress untuk mengenali sebuah plugin. Di dalamnya,Plugin Name Ini merupakan kolom wajib (required field); kolom lainnya bersifat opsional (optional). Setelah Anda menyimpan file tersebut, Anda dapat melihat plugin baru ini di halaman “Plugins” di panel administrasi WordPress, dan kemudian mengaktifkannya. Saat ini, plugin ini belum memiliki fitur apa pun.

Menambahkan sebuah fitur sederhana ke plugin

Fungsi paling sederhana adalah menambahkan menu manajemen khusus di panel administrasi situs web. Kita akan menggunakan… add_action Function mounted to admin_menu Aksi ini tergantung pada hook tersebut.

Di dalam file plugin utama, setelah blok komentar, tambahkan kode berikut:

// 在管理菜单中添加一个顶级菜单
function mfp_add_admin_menu() {
    add_menu_page(
        '我的第一个插件设置', // 页面标题
        '我的插件',           // 菜单标题
        'manage_options',     // 权限要求
        'my-first-plugin',    // 菜单 slug
        'mfp_settings_page',  // 回调函数，用于输出页面内容
        'dashicons-admin-generic', // 图标（可选）
        6                     // 菜单位置（可选）
    );
}
add_action('admin_menu', 'mfp_add_admin_menu');

// 定义设置页面的回调函数
function mfp_settings_page() {
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <p>Selamat datang di halaman pengaturan untuk plugin pertama saya!</p>
        <form method="post" action="/id/options.php/" data-trp-original-action="options.php">
            <?php
            // 后续可以在这里添加设置字段
            ?>
            <p class="submit">
                <input type="submit" name="submit" id="submit" class="button button-primary" value="Simpan perubahan.">
            </p>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Kode ini membuat sebuah menu utama baru bernama “My Plugins” (Pemasanganku), dan ketika diklik, pengguna akan dibawa ke halaman pengaturan yang sederhana. Di sini, teknik tertentu digunakan untuk membuat menu tersebut dan halaman pengaturannya. add_menu_page Fungsi tersebut digunakan untuk mendaftarkan menu, serta mendefinisikan sebuah fungsi pemanggil balik (callback function). mfp_settings_page Ini digunakan untuk merender konten halaman.

推荐阅读 Panduan Dasar Pengembangan Plugin WordPress: Membangun Plugin Fungsional Pertama Anda Dari Nol。

Menggunakan hook dan filter untuk memperluas fungsionalitas

Keunggulan utama WordPress terletak pada arsitektur plugin-nya, yang terutama diwujudkan melalui Action Hooks dan Filter Hooks. Action Hooks memungkinkan Anda untuk menjalankan kode kustom pada saat-saat tertentu, sedangkan Filter Hooks memungkinkan Anda untuk memodifikasi data.

Menggunakan action hook untuk menambahkan catatan kaki (footnote) pada halaman

Misalkan kita ingin menambahkan teks kustom secara otomatis di akhir setiap artikel di situs web. Hal ini dapat dilakukan dengan cara “menggantungkan” (mounting) kode tertentu ke dalam sistem pengelolaan artikel tersebut. the_content Fungsi ini diimplementasikan menggunakan hook filter. Perlu diperhatikan bahwa meskipun namanya “filter”, sebenarnya… the_content Biasanya digunakan untuk memodifikasi konten yang akan ditampilkan dalam artikel.

// 在文章内容末尾添加自定义文本
function mfp_append_text_to_content($content) {
    // 确保只在主循环的单篇文章页面添加
    if (is_single() && in_the_loop() && is_main_query()) {
        $custom_text = '<p><em>Artikel ini disajikan untuk Anda oleh “My First Plugin”.</em></p>';
        $content .= $custom_text;
    }
    return $content;
}
add_filter('the_content', 'mfp_append_text_to_content');

Fungsi ini mfp_append_text_to_content Menerima isi artikel asli. $contentSetelah memeriksa kondisi konteks (memastikan bahwa halaman tersebut merupakan halaman artikel yang terpisah), tambahkan teks kustom ke bagian akhir konten, lalu kembalikan konten yang telah dimodifikasi. add_filter Daftarkanlah ke… the_content Kait (hook).

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

Membuat opsi plugin yang dapat dikonfigurasi

Sebuah plugin yang praktis umumnya memerlukan beberapa opsi yang dapat dikonfigurasi oleh pengguna. WordPress menyediakan API pengaturan untuk menangani dan mengelola opsi tersebut dengan aman. Kita akan menambahkan sebuah bidang teks sederhana ke halaman pengaturan yang telah ada sebelumnya.

Pertama-tama, kita perlu mendaftarkan sebuah pengaturan (setting) dan menambahkannya ke halaman menu yang sudah ada.

// 初始化插件设置
function mfp_settings_init() {
    // 注册一个新的设置到 “reading” 组（或自定义组）
    register_setting('mfp_plugin_settings', 'mfp_custom_message');

// 在现有页面内添加一个设置区域
    add_settings_section(
        'mfp_section_id',
        '自定义消息设置',
        'mfp_section_callback',
        'my-first-plugin'
    );

// 向该区域添加一个字段
    add_settings_field(
        'mfp_field_id',
        '页脚消息',
        'mfp_field_callback',
        'my-first-plugin',
        'mfp_section_id'
    );
}
add_action('admin_init', 'mfp_settings_init');

// 区域描述回调函数
function mfp_section_callback() {
    echo '<p>Di sini Anda dapat mengonfigurasi pesan yang akan ditampilkan oleh plugin di bagian akhir artikel.</p>';
}

// 字段输出回调函数
function mfp_field_callback() {
    // 从数据库中获取已保存的选项值
    $message = get_option('mfp_custom_message', '本文由“我的第一个插件”为您呈现。');
    echo '<input type="text" name="mfp_custom_message" value="' . esc_attr($message) . '" class="regular-text">'; echo '
    echo '<p class="description">Masukkan pesan yang ingin Anda tampilkan di akhir setiap artikel.</p>';
}

Kemudian, diperlukan untuk memodifikasi definisi yang telah dibuat sebelumnya. mfp_settings_page Fungsi tersebut digunakan untuk menampilkan nilai dari field yang telah diatur dalam formulir.

推荐阅读 Dari Pemula Hingga Ahli: Panduan Lengkap dan Tutorial Praktis Pengembangan Plugin WordPress。

// 更新后的设置页面回调函数
function mfp_settings_page() {
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <form method="post" action="/id/options.php/" data-trp-original-action="options.php">
            <?php
            // 输出设置字段、安全随机数和设置组
            settings_fields('mfp_plugin_settings');
            do_settings_sections('my-first-plugin');
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Terakhir, perbarui fungsi yang sebelumnya digunakan untuk menambahkan teks, agar dapat menggunakan opsi-opsi yang dapat dikonfigurasi.

function mfp_append_text_to_content($content) {
    if (is_single() && in_the_loop() && is_main_query()) {
        // 从选项中获取自定义消息，如果不存在则使用默认值
        $custom_text = get_option('mfp_custom_message', '本文由“我的第一个插件”为您呈现。');
        if (!empty($custom_text)) {
            $content .= '<p><em>'`. wp_kses_post($custom_text)`.'</em></p>';
        }
    }
    return $content;
}

Internasionalisasi plugin dan persiapan untuk penerbitan

Agar plugin dapat digunakan oleh pengguna di seluruh dunia, internasionalisasi merupakan langkah yang penting. Hal ini melibatkan penggunaan bidang teks (text fields) dan fungsi penerjemahan (translation functions) untuk mengatur semua string yang terlihat oleh pengguna.

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 fungsi penerjemahan untuk membungkus teks tersebut.

Anda perlu mengubah semua string yang dihasilkan oleh plugin menjadi format yang diinginkan. echo Tekst yang dikembalikan oleh fungsi “atau” (`or`) perlu dibungkus menggunakan fungsi terjemahan yang spesifik. Fungsi yang paling umum digunakan adalah… () Digunakan untuk menerjemahkan dan mengembalikan sebuah string, serta… esc_html__() Digunakan untuk menerjemahkan dan mengubah kode HTML menjadi format yang dapat ditampilkan dengan benar di berbagai perangkat.

Modifikasi contoh kode sebelumnya:

// 在管理菜单中添加一个顶级菜单（国际化版本）
function mfp_add_admin_menu() {
    add_menu_page(
        __('我的第一个插件设置', 'my-first-plugin'), // 页面标题
        __('我的插件', 'my-first-plugin'),           // 菜单标题
        'manage_options',
        'my-first-plugin',
        'mfp_settings_page',
        'dashicons-admin-generic',
        6
    );
}
add_action('admin_menu', 'mfp_add_admin_menu');

// 区域描述回调函数（国际化版本）
function mfp_section_callback() {
    echo '<p>' . esc_html__('在这里配置插件在文章末尾显示的消息。', 'my-first-plugin') . '</p>';
}

Pada saat yang sama, diperlukan untuk memuat bidang teks. Setelah blok komentar di dalam file utama plugin, tambahkan kode untuk memuat file terjemahan:

// 加载插件文本域
function mfp_load_textdomain() {
    load_plugin_textdomain('my-first-plugin', false, dirname(plugin_basename(__FILE__)) . '/languages/');
}
add_action('plugins_loaded', 'mfp_load_textdomain');

Menyiapkan paket kompresi plugin

Sebelum mengeluarkan atau membagikan plugin, Anda perlu membuat sebuah paket distribusi yang bersih. Pastikan bahwa direktori plugin Anda berisi semua file yang diperlukan, dan hindari menyertakan file-file yang tidak relevan atau tidak diperlukan. .git File folder, log files, atau file konfigurasi IDE, dan konten lain yang tidak relevan. Umumnya, sebuah paket plugin terkecil seharusnya hanya mencakup:
1. 主插件 PHP 文件。
2. 一个可选的 readme.txt File tersebut mematuhi standar format WordPress.org dan digunakan untuk ditampilkan dalam direktori plugin.
3. 一个包含翻译文件的 /languages Folder (jika ada).
4. 其他必需的 JavaScript、CSS 或图片资源文件夹。

Kompresi seluruh folder plugin menjadi file ZIP, sehingga file tersebut dapat diinstal melalui fitur “Upload Plugin” di panel administrasi WordPress, atau dikirimkan ke direktori plugin resmi WordPress.

Menyimpulkan.

Dengan panduan ini, kita telah menyelesaikan proses inti pengembangan plugin WordPress: mulai dari persiapan lingkungan, membuat file utama yang dilengkapi dengan header plugin standar, hingga menambahkan fitur menggunakan action dan filter hook, kemudian membuat halaman opsi yang dapat dikonfigurasi dengan API pengaturan, serta mempelajari dasar-dasar internasionalisasi. Semua ini memberikan dasar yang kuat bagi Anda untuk membuat plugin yang lebih kompleks dan lebih praktis. Ingatlah bahwa struktur kode yang baik, pematuhan terhadap standar pengkodean WordPress, serta pemahaman yang mendalam tentang sistem hook-nya, merupakan kunci untuk menjadi seorang pengembang plugin yang handal.

FAQ - Pertanyaan yang Sering Diajukan.

Apa dasar pemrograman yang diperlukan untuk mengembangkan plugin WordPress dengan kode ###?

Anda perlu memiliki pengetahuan dasar tentang pemrograman PHP, karena inti WordPress dan pluginnya sebagian besar ditulis menggunakan PHP. Pemahaman dasar tentang HTML, CSS, dan JavaScript juga sangat membantu, terutama ketika Anda perlu menyesuaikan antarmuka pengelolaan atau interaksi pengguna di bagian frontend. Memahami konsep-konsep dasar WordPress, seperti artikel, halaman, kategori, dan hook, juga sangat penting.

Apa nama file utama dari plugin tersebut?

Tidak ada persyaratan wajib. File utama dapat berupa nama file PHP yang valid apa saja, tetapi umumnya disarankan untuk menggunakan nama yang sama dengan nama direktori plugin. Misalnya, jika nama direktorinya adalah… my-super-pluginMaka, file utama dapat diberi nama… my-super-plugin.phpKuncinya terletak pada komentar header plugin di bagian atas file tersebut; WordPress menggunakan informasi yang terdapat dalam komentar tersebut untuk melakukan prosesnya. Plugin Name: Untuk mengidentifikasi plugin tersebut.

Bagaimana cara mendebug kode plugin saya?

Ada berbagai cara untuk mendeteksi dan memperbaiki masalah (debug) pada plugin. Pertama-tama, pastikan bahwa Anda telah mengikuti langkah-langkah yang benar dalam penggunaan plugin tersebut. wp-config.php Aktifkan mode debug WordPress di dalam file tersebut. WP_DEBUG Konstanta diatur ke trueIni akan menampilkan kesalahan PHP, peringatan, dan pemberitahuan di halaman web. Selain itu, fitur tersebut juga dapat digunakan untuk… error_log() Fungsi tersebut menulis informasi debug ke log kesalahan server, atau menggunakan alat debug yang lebih canggih seperti plugin Query Monitor, yang dapat menyediakan informasi terperinci mengenai kueri database, hook, kesalahan PHP, dan lainnya.

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

Untuk mengunggah plugin ke direktori plugin resmi WordPress.org, Anda perlu terlebih dahulu mendaftarkan akun di WordPress.org, kemudian mengirimkan plugin Anda untuk ditinjau. Kode plugin Anda harus mengikuti lisensi GNU GPL, dan harus mencakup berkas dengan format yang benar. readme.txt File: Tim pemeriksaan akan memeriksa kualitas kode, keamanan, serta kesesuaian dengan pedoman direktori. Setelah proses pemeriksaan selesai, Anda akan mendapatkan sebuah repositori SVN yang digunakan untuk mengelola dan memperbarui versi plugin Anda.