Bagaimana cara belajar mengembangkan plugin WordPress dari nol: panduan lengkap dan tutorial praktis.

Memahami arsitektur dasar plugin WordPress

Sebelum memulai pengembangan, Anda perlu memahami konsep-konsep dasar dan cara kerja plugin WordPress. Sebuah plugin pada dasarnya merupakan sekumpulan file PHP yang dapat memperluas fungsi-fungsi inti WordPress, dan biasanya mencakup dokumentasi, kode eksekusi, serta file sumber daya lainnya. Pengoperasian plugin tersebut sepenuhnya bergantung pada sistem Hook yang disediakan oleh WordPress.

Mengexplorasi struktur file standar untuk plugin

Sebuah plugin WordPress yang terstandarisasi umumnya mengikuti struktur direktori yang tertentu. File utama plugin, misalnya… my-first-plugin.phpHarus diletakkan di… /wp-content/plugins/ File ini terletak di dalam direktori utama atau salah satu direktori anaknya. File ini sangat penting karena berisi informasi header plugin, yang digunakan untuk memberitahu sistem WordPress tentang plugin yang Anda buat.

Sebuah direktori plugin yang tipikal dapat mencakup bagian-bagian berikut: file plugin utama, serta folder untuk menyimpan sumber daya statis seperti JavaScript dan CSS. assets/ Folder yang digunakan untuk file kelas PHP includes/ Daftar isi, yang digunakan untuk antarmuka pengguna (user interface). admin/ 和 public/ Folder, serta alat yang digunakan untuk menerjemahkan file. languages/ Daftar Isi. Struktur yang baik membantu dalam mengorganisir dan memelihara kode, terutama ketika fungsi plugin menjadi semakin kompleks.

推荐阅读 Pengembangan Plugin WordPress, Dari Pemula hingga Ahli: Panduan Lengkap untuk Membangun Fitur Kustom.。

Mengenal informasi header file plugin inti

Setiap plugin harus dimulai dengan metadata (Header) tertentu, yang tercantum dalam blok komentar PHP. Metadata ini merupakan kunci bagi WordPress untuk mengenali sebuah plugin. Format dasarnya adalah sebagai 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://www.example.com/my-first-plugin
 * Description: 这是一个简短描述，介绍插件功能的句子。
 * Version:     1.0.0
 * Author:      你的名字
 * Author URI:  https://www.example.com
 * License:     GPL v2 or later
 * Text Domain: my-first-plugin
 * Domain Path: /languages
 */

Di antaranya,Plugin Name Hal tersebut merupakan kebutuhan yang wajib dilengkapi; informasi lainnya bersifat opsional, namun disarankan untuk diisi. Terutama… Text Domain 和 Domain PathHal tersebut merupakan persiapan untuk mendukung internasionalisasi (dukungan berbagai bahasa) pada plugin. WordPress akan membaca informasi tersebut dan menampilkannya di halaman manajemen “plugin” di bagian belakang (backend).

Membangun lingkungan pengembangan lokal dan membuat plugin pertama

Sebelum memulai proses pengkodean, lingkungan pengembangan lokal yang terisolasi dan dapat diulang-ulang dengan cepat sangat penting. Hal ini dapat menghindari risiko yang mungkin timbul akibat pengujian langsung pada situs web yang berjalan di internet.

Mengonfigurasi rantai alat pengembangan lokal

Disarankan untuk menggunakan lingkungan integrasi server lokal, seperti Local by Flywheel, XAMPP, atau Laragon. Alat-alat ini memungkinkan Anda untuk menginstal PHP, MySQL, dan server web yang diperlukan oleh WordPress dengan satu klik saja. Selain itu, Anda juga memerlukan editor kode, seperti Visual Studio Code atau PHPStorm, yang menyediakan fitur penyorotan sintaks, saran kode, dan debugging. Pastikan versi PHP yang Anda gunakan kompatibel dengan server target; umumnya disarankan untuk menggunakan PHP 7.4 atau versi yang lebih baru.

Menulis dan mengaktifkan sebuah plugin sederhana

Sekarang, mari kita buat plugin fungsional pertama. /wp-content/plugins/ Dalam direktori tersebut, buatlah sebuah folder baru dengan nama… my-first-pluginDalam folder tersebut, buatlah sebuah file dengan nama my-first-plugin.php File tersebut.

推荐阅读 Panduan Utama Pengembangan Plugin WordPress: Membangun Plugin Pertama Anda dari Nol Hingga Selesai.。

Salin informasi header plugin yang disebutkan di bagian sebelumnya ke awal file ini. Selanjutnya, kita akan menambahkan sebuah fitur sederhana: menambahkan teks kustom secara otomatis di akhir isi artikel. Untuk ini, kita perlu menggunakan “filter” hook dari WordPress. Tambahkan kode berikut di bawah informasi header:

// 在文章内容后添加自定义文本
function myfp_add_footer_text( $content ) {
    // 仅对主循环中的单篇文章生效
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $custom_text = '<p><em>Terima kasih telah membaca! Artikel ini didukung oleh “My First Plugin”.</em></p>';
        $content .= $custom_text;
    }
    return $content;
}
// 将函数挂载到 ‘the_content’ 过滤器上
add_filter( 'the_content', 'myfp_add_footer_text' );

Setelah menyimpan file tersebut, masuk ke panel administrasi WordPress Anda, lalu kunjungi halaman “Plugin”. Anda seharusnya dapat melihat plugin baru dengan nama “My First Plugin”. Klik “Aktifkan” (Enable). Selanjutnya, lihat salah satu artikel di situs web Anda; Anda akan menemukan bahwa teks yang kami tambahkan muncul di bagian akhir isi artikel tersebut. Dengan demikian, plugin WordPress pertama Anda telah berhasil diaktifkan dan berfungsi dengan baik.

Menguasai teknologi inti dalam pengembangan plugin

Kemampuan ekspansi WordPress yang kuat didasarkan pada beberapa konsep inti, yaitu Hook, API Opsi (Options API), Tipe Artikel Kustom (Custom Post Types/CPT), dan operasi terhadap basis data. Memahami konsep-konsep ini merupakan dasar untuk pengembangan yang lebih lanjut.

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

Memahami secara mendalam tentang hook aksi (action hooks) dan hook filter

Sistem hook merupakan fondasi dalam pengembangan plugin WordPress, yang terdiri dari dua jenis: Action dan Filter. Hook tipe Action diaktifkan pada titik eksekusi tertentu (misalnya saat halaman dibuka atau saat artikel disimpan), dan memungkinkan Anda untuk melakukan berbagai tindakan, seperti menambahkan menu atau mengirim email. add_action() Fungsi tersebut digunakan untuk melakukan proses mounting (menghubungkan komponen tertentu ke sistem).

Misalnya, tambahkan sebuah halaman ke menu manajemen backend:

function myfp_add_admin_menu() {
    add_menu_page(
        '我的插件设置', // 页面标题
        '我的插件',     // 菜单标题
        'manage_options', // 权限
        'myfp-settings',  // 菜单slug
        'myfp_settings_page', // 回调函数，用于显示页面内容
        'dashicons-admin-generic', // 图标
        20
    );
}
add_action( 'admin_menu', 'myfp_add_admin_menu' );

Filter hooks memungkinkan Anda untuk “mengubah” data. Mereka berfungsi untuk menangkap data sebelum data tersebut digunakan (misalnya, ditampilkan di browser atau disimpan ke dalam database), sehingga Anda dapat memodifikasinya dan mengembalikan nilai yang baru. Hal ini digunakan dalam plugin pertama kami. the_content Hanya sebuah hook (pengait) untuk filter saja.

推荐阅读 Menganalisis WooCommerce secara mendalam: panduan lengkap untuk membangun situs e-commerce berkinerja tinggi dari nol.。

Menggunakan API opsi untuk menyimpan pengaturan plugin

Plugin biasanya perlu menyimpan beberapa konfigurasi, seperti kunci API, status pengaktifan (on/off), dan sebagainya. WordPress menyediakan fitur untuk hal tersebut. Options API Gunakan metode yang sederhana untuk memproses jenis data ini. Fungsi-fungsi inti yang terlibat meliputi: add_option(), get_option(), update_option() 和 delete_option()。

Buatlah halaman pengaturan yang sederhana untuk menggunakan fungsi-fungsi tersebut. Pertama-tama, definisikan fungsi callback untuk menu di atas. myfp_settings_page Untuk menampilkan sebuah formulir:

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 myfp_settings_page() {
    ?>
    <div class="wrap">
        <h1>Pengaturan plugin saya</h1>
        <form method="post" action="/id/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'myfp_settings_group' ); // 输出安全字段
            do_settings_sections( 'myfp-settings' );  // 输出设置部分
            submit_button(); // 输出提交按钮
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Kemudian, Anda perlu menggunakan… register_setting(), add_settings_section() 和 add_settings_field() Gunakan fungsi-fungsi tertentu untuk mendeklarasikan dan menginisialisasi field-field pengaturan tersebut. Proses ini akan menyimpan data dengan aman. wp_options Di dalam tabel.

Membangun contoh plugin praktis yang lengkap

Kita akan mengintegrasikan pengetahuan yang telah kita pelajari sebelumnya untuk membuat sebuah plugin yang sedikit lebih kompleks namun praktis: sebuah plugin “Perkiraan Waktu Pembacaan Artikel”. Plugin ini akan menampilkan perkiraan waktu pembacaan artikel di bawah judul artikel tersebut.

Membuat file utama plugin dan fungsi-fungsi fungsional

Buat folder baru untuk plugin. post-reading-time dan berkas utama post-reading-time.phpIsi informasi header plugin standar. Kemudian, kita membuat fungsi inti untuk menghitung waktu membaca.

function prt_calculate_reading_time( $post_id ) {
    // 获取文章内容
    $content = get_post_field( 'post_content', $post_id );
    // 清除HTML标签和短代码，只计算文字
    $text = strip_tags( strip_shortcodes( $content ) );
    // 计算字数（中英文混合场景的简单处理）
    $word_count = mb_strlen( $text, 'UTF-8' );
    // 假设平均阅读速度为每分钟300字（可根据需要调整）
    $reading_speed = 300;
    // 计算分钟数，至少1分钟
    $minutes = floor( $word_count / $reading_speed );
    if ( $minutes < 1 ) {
        $minutes = 1;
    }
    // 返回包含时间的字符串
    return sprintf( _n( '约 %d 分钟读完', '约 %d 分钟读完', $minutes, 'post-reading-time' ), $minutes );
}

Menampilkan konten di frontend yang terintegrasi dengan sistem manajemen di backend.

Selanjutnya, kita perlu memutuskan bagaimana cara menampilkan waktu tersebut. Cara yang umum digunakan adalah dengan menambahkannya ke dalam metadata artikel (di bawah judul artikel). the_content Hook tertentu yang disediakan oleh filter atau tema. Di sini, kita menggunakan hook aksi yang lebih sesuai. thesis_hook_before_post(Tergantung pada topiknya), atau dengan cara yang lebih umum, langsung memfilter isi artikel tersebut.

Untuk meningkatkan fleksibilitas, kami membuat sebuah kode singkat (Shortcode) dan sebuah alat kecil (Widget), serta menyediakan opsi pengaturan sederhana untuk mengontrol apakah fitur tersebut akan ditampilkan secara otomatis atau tidak.

Pertama-tama, daftarkan kode singkat Anda:

function prt_reading_time_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'id' => get_the_ID(),
    ), $atts, 'reading_time' );

$time_text = prt_calculate_reading_time( $atts['id'] );
    return '<span class="reading-time">'. $time_text .'</span>'php
add_shortcode('reading_time', 'prt_reading_time_shortcode');

Kemudian, kita dapat secara otomatis menambahkan hasil tersebut ke awal isi artikel (dengan menggunakan filter):

function prt_prepend_to_content( $content ) {
    if ( is_single() && get_option( 'prt_auto_display', '1' ) == '1' ) {
        $time_html = '<div class="post-reading-time">' . prt_calculate_reading_time( get_the_ID() ) . '</div>';
        $content = $time_html . $content;
    }
    return $content;
}
add_filter( 'the_content', 'prt_prepend_to_content' );

Anda juga perlu membuat sebuah opsi pengaturan di bagian backend. prt_auto_displayMemungkinkan pengguna untuk memilih apakah ingin mengaktifkan fitur penampilan otomatis. Dengan demikian, sebuah plugin yang memiliki fungsi yang lengkap dan struktur yang jelas telah selesai dibangun.

Menyimpulkan.

Dimulai dengan memahami arsitektur dasar plugin dan informasi di header file-nya, kami secara bertahap membangun lingkungan pengembangan, serta membuat plugin fungsional yang sederhana pertama. Dengan mempelajari lebih dalam tentang inti dari kefleksibelan WordPress, yaitu sistem hook (pautan), kami belajar cara mengintervensi proses eksekusi dan mengubah data tanpa perlu mengubah kode inti WordPress. Dengan menggunakan Options API, kami dapat membuat pengaturan yang dapat disimpan secara permanen untuk plugin. Akhirnya, dengan membuat contoh lengkap dari plugin “perkiraan waktu pembacaan artikel”, kami menggabungkan pengetahuan teoritis dengan praktik, mencakup seluruh proses pengembangan mulai dari penulisan logika fungsional, pembuatan kode singkat (shortcode), hingga integrasi dengan tampilan (frontend). Ingatlah bahwa pengembangan plugin yang berkualitas dimulai dengan perencanaan yang jelas, pematuhan terhadap standar pemrograman WordPress, serta selalu mengutamakan aspek keamanan, kinerja, dan pengalaman pengguna.

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja pengetahuan dasar yang diperlukan untuk mengembangkan plugin WordPress?

Anda perlu memiliki dasar pemrograman PHP yang kuat, karena kode plugin sebagian besar terdiri dari bahasa PHP. Selain itu, Anda perlu memahami dasar-dasar HTML, CSS, dan JavaScript untuk dapat mengelola tampilan dan interaksi di bagian frontend. Pemahaman tentang konsep-konsep dasar MySQL akan membantu Anda memahami cara WordPress menyimpan dan mengambil data. Yang paling penting, Anda harus terbiasa membaca dokumentasi pengembangan resmi WordPress (Codex) dan referensi untuk pengembang (Developer Reference).

Bagaimana cara memastikan bahwa plugin yang saya kembangkan aman?

Keamanan sangat penting. Selalu verifikasi dan bersihkan (sanitasi) input dari pengguna, serta eksekusi (escape) output yang dihasilkan. Gunakan mekanisme non-CE (Nonce) yang disediakan oleh WordPress untuk mencegah serangan jenis Cross-Site Request Forgery (CSRF). Saat membuat kueri ke basis data, pastikan untuk mengikuti prosedur yang benar. $wpdb Metode yang disediakan oleh kelas (seperti…) prepare()Gunakan mekanisme tertentu untuk mencegah serangan SQL injection. Hindari penggunaan fungsi-fungsi yang tidak aman. eval()Perbarui plugin Anda secara berkala untuk memperbaiki kerentanan yang sudah diketahui.

Di mana seharusnya plugin diletakkan?

Plugin WordPress harus ditempatkan di situs web. /wp-content/plugins/ Di dalam direktori tersebut, Anda dapat meletakkan file PHP utama dari plugin langsung di tingkat akar direktori. Namun, pendekatan yang lebih terstruktur adalah dengan membuat folder anak yang terpisah untuk setiap plugin, dan menempatkan semua file terkait (PHP, JS, CSS, gambar, dll.) di dalam folder anak tersebut. Dengan cara ini, struktur file akan lebih jelas dan dapat dihindari konflik dengan plugin lainnya.

Bagaimana cara menambahkan halaman pengaturan untuk plugin saya?

Menambahkan halaman pengaturan untuk sebuah plugin biasanya melibatkan beberapa langkah: Pertama-tama, gunakan… add_action( ‘admin_menu’, ‘your_function’ ) Hook tersebut mendaftarkan item menu administrasi baru atau sub-menu. Setelah itu, output kode HTML formulir halaman dalam fungsi callback. Selanjutnya, gunakan… register_setting()、add_settings_section() 和 add_settings_field() Gunakan fungsi API Settings untuk mendeklarasikan dan mengaitkan field-setting Anda. Fungsi ini akan secara otomatis menangani proses pemeriksaan hak akses, verifikasi non-CE (Common Encryption), serta penyimpanan opsi yang Anda pilih. Akhirnya, gunakan hasil pengaturan tersebut dalam formulir. settings_fields() 和 do_settings_sections() Fungsi tersebut digunakan untuk menghasilkan (mengeluarkan) informasi dari bidang-bidang (field) yang diperlukan.

Apa itu Hook (Kaitan/Pengait), dan mengapa itu sangat penting?

Hook (tambang) adalah titik khusus dalam kode inti WordPress yang memungkinkan plugin dan tema untuk “terhubung” (hook into) proses eksekusi kode tersebut. Hook terbagi menjadi dua jenis: Action Hook dan Filter Hook. Action Hook akan dieksekusi saat peristiwa tertentu terjadi, dan digunakan untuk menambahkan fitur baru. Filter Hook memungkinkan Anda memodifikasi data sebelum data tersebut digunakan atau disimpan. Sistem hook merupakan inti dari keandalan dan fleksibilitas WordPress; dengan sistem ini, pengembang dapat mengubah atau meningkatkan fungsi WordPress secara signifikan tanpa perlu mengubah file intinya, sehingga menjaga keaslian dan kemampuan WordPress untuk diperbarui (ditingkatkan versinya).