Panduan Memulai Pengembangan Plugin WordPress: Membangun Modul Fungsi Kustom Pertama Anda dari Nol.

Mengapa perlu mengembangkan plugin kustom?

Di ekosistem WordPress, plugin merupakan inti untuk memperluas fungsionalitas situs web. Meskipun ada ribuan plugin siap pakai di pasaran, mengembangkan plugin kustom dapat memberikan keuntungan unik. Saat kebutuhan Anda sangat spesifik, atau kombinasi plugin yang ada terlalu berat dan tidak efisien, plugin yang disesuaikan adalah solusi terbaik. Plugin kustom dapat sepenuhnya sesuai dengan logika bisnis Anda, menghindari potensi konflik yang mungkin terjadi saat menggunakan beberapa plugin, dan biasanya memberikan kinerja yang lebih baik daripada plugin umum dari kumpulan multifungsi. Yang lebih penting, dengan mengembangkannya sendiri, Anda dapat sepenuhnya mengontrol kualitas kode dan keamanannya.

Dari sudut pandang pembelajaran, memahami mekanisme pengembangan plugin adalah langkah penting untuk menguasai WordPress secara mendalam. Ini memungkinkan Anda beralih dari “pengguna” menjadi “pencipta”, sehingga Anda dapat lebih fleksibel dalam menangani berbagai kebutuhan kustomisasi dan bahkan membangun fondasi yang kuat untuk pengembangan produk atau pengembangan karier di masa mendatang.

Persiapan: Menyiapkan lingkungan pengembangan.

Sebelum mulai menulis kode, sangat penting memiliki lingkungan pengembangan yang stabil dan terisolasi. Ini tidak hanya akan melindungi situs web produksi Anda, tetapi juga memungkinkan Anda untuk menguji dan men-debug dengan bebas.

Konfigurasi lingkungan pengembangan lokal.

Disarankan untuk menggunakan paket perangkat lunak server lokal, seperti Local by Flywheel, XAMPP, atau MAMP. Alat-alat ini akan mensimulasikan lingkungan server web (Apache/Nginx, MySQL, PHP) di komputer Anda, memungkinkan Anda untuk mengembangkan secara offline. Setelah instalasi selesai, buat situs WordPress baru sebagai “kotak pasir” Anda.

Pilihan editor kode.

Sebuah editor kode yang kuat dapat sangat meningkatkan efisiensi pengembangan. Visual Studio Code saat ini merupakan pilihan yang sangat populer, ringan, gratis, dan memiliki berbagai ekstensi, seperti penyorotan sintaks khusus untuk PHP dan WordPress, saran kode, dan alat debugging. PHPStorm adalah lingkungan pengembangan terintegrasi (IDE) yang kuat lainnya, yang menyediakan analisis kode dan fungsi refaktoring yang lebih mendalam.

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

\nStruktur file dasar plugin.

Plugin WordPress paling sederhana hanya bisa berupa file PHP utama. Namun, plugin standar biasanya memiliki struktur file dan direktori yang jelas. Di dalam direktori instalasi WordPress lokal Anda wp-content/plugins Di dalam folder tersebut, buat folder baru untuk plugin Anda, misalnya my-first-pluginfolder ini akan menampung semua file plugin.

Membangun plugin pertamamu, “Hello Admin”.”

Kami akan membuat plugin bernama “Hello Admin”, yang fungsinya sangat sederhana: menampilkan pesan selamat datang khusus di bagian atas dasbor admin WordPress. Contoh ini mencakup elemen-elemen inti dari pengembangan plugin: file utama, hook, dan fungsi dasar.

\nMembuat file plugin utama.

Di folder plugin kamu. my-first-plugin Di dalam, buat sebuah nama yang disebut my-first-plugin.php Ini adalah file dokumen. Ini adalah file entri plugin. Buka itu, dan pertama-tama tambahkan komentar informasi plugin standar di bagian atas file. Komentar-komentar ini diperlukan oleh WordPress untuk mengenali plugin.

<?php
/**
 * Plugin Name:       Hello Admin
 * Plugin URI:        https://yourwebsite.com/hello-admin
 * Description:       一个简单的插件，用于在管理后台显示欢迎信息。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * Text Domain:       hello-admin
 */

\nMenggunakan hook untuk menambahkan fungsionalitas.

Mekanisme inti WordPress adalah “hook”, yang memungkinkan Anda “memasang” kode Anda pada titik waktu tertentu. Ini terutama terbagi menjadi dua jenis: Action Hooks dan Filter Hooks. Untuk menampilkan konten di dasbor admin, kita perlu menggunakan Action Hooks.

Saat memuat bagian atas dasbor admin, WordPress menyediakan fitur bernama admin_notices Kait aksi. Kita dapat melakukannya melalui add_action() Fungsi tersebut akan memasang fungsi kustom kami ke hook ini.

Di bawah komentar file utama, tambahkan kode berikut:

// 钩子函数：在管理后台显示通知
function hello_admin_display_message() {
    // 确保只对管理员显示，使用 current_user_can() 检查权限
    if ( current_user_can( 'manage_options' ) ) {
        echo '<div class="notice notice-success is-dismissible"><p>Selamat kembali, administrator! Ini adalah plugin “Hello Admin” yang telah Anda buat sendiri, dan sedang berjalan.</p></div>';
    }
}
// 将我们的函数挂载到 ‘admin_notices’ 这个动作钩子上
add_action( 'admin_notices', 'hello_admin_display_message' );

\nPengujian dan aktivasi.

Simpan file. Sekarang, masuk ke dasbor administrasi situs WordPress lokal Anda (biasanya /wp-adminNavigasi ke menu “Plugins”, dan Anda seharusnya bisa melihat “Hello Admin” dalam daftar plugin. Klik “Aktifkan”. Setelah diaktifkan, segarkan halaman dasbor, dan Anda akan melihat kotak pesan sukses berwarna hijau di bagian atas halaman, yang menampilkan pesan selamat datang yang Anda definisikan. Ini menunjukkan bahwa plugin pertama Anda telah berhasil dijalankan!

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 opsi yang dapat dikonfigurasi untuk plugin.

Sebuah plugin yang hanya menampilkan informasi tetap memiliki fungsionalitas terbatas. Selanjutnya, kami membuatnya dapat dikonfigurasi, memungkinkan administrator untuk menyesuaikan pesan yang akan ditampilkan melalui halaman pengaturan. Ini melibatkan pembuatan halaman menu administrasi, memproses data formulir, dan menggunakan API opsi untuk menyimpan data.

\nMembuat halaman menu administrasi.

Kita perlu menambahkan halaman pengaturan di backend administrasi. Ini dapat dilakukan dengan menggunakan add_menu_page() 或 add_submenu_page() Implementasi fungsi. Kami terus menambahkan kode di file utama plugin.

Pertama, buat fungsi untuk menghasilkan konten HTML halaman pengaturan, dan daftarkan item menu:

// 创建插件设置页面
function hello_admin_add_settings_page() {
    add_options_page(
        'Hello Admin 设置', // 页面标题
        'Hello Admin',      // 菜单标题
        'manage_options',   // 所需权限
        'hello-admin',      // 菜单slug
        'hello_admin_render_settings_page' // 用于渲染页面的回调函数
    );
}
add_action( 'admin_menu', 'hello_admin_add_settings_page' );
// 渲染设置页面的HTML
function hello_admin_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Hello Admin – Pengaturan</h1>
        <form method="post" action="/id/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'hello_admin_settings_group' ); // 设置组名称
            do_settings_sections( 'hello-admin' ); // 页面slug
            submit_button(); // 提交按钮
            ?>
        <input type="hidden" name="trp-form-language" value="id"/></form>
    </div>
    \n&lt;?php
}

Pengaturan pendaftan, bidang, dan penyimpanan data.

Selanjutnya, kita perlu menggunakan Settings API WordPress untuk mendaftar, memvalidasi, dan menyimpan opsi kita secara aman. Buat fungsi lain, dan dalam admin_init Jalankan itu di atas kait.

// 初始化设置
function hello_admin_settings_init() {
    // 注册一个设置，将其存储在 wp_options 表中
    register_setting( 'hello_admin_settings_group', 'hello_admin_custom_message', 'sanitize_text_field' );
// 在页面上添加一个设置区域（可以省略，此处为清晰而加）
    add_settings_section(
        'hello_admin_section',
        '自定义消息设置',
        null, // 可选的区域描述回调函数
        'hello-admin'
    );
// 在区域中添加一个字段
    add_settings_field(
        'hello_admin_message_field',
        '欢迎消息',
        'hello_admin_message_field_callback',
        'hello-admin',
        'hello_admin_section'
    );
}
add_action( 'admin_init', 'hello_admin_settings_init' );
// 渲染消息输入字段
function hello_admin_message_field_callback() {
    $message = get_option( 'hello_admin_custom_message', '欢迎回来，管理员！' ); // 获取已保存的值，没有则用默认值
    echo '<input type="text" name="hello_admin_custom_message" value="' . esc_attr( $message ) . '" class="regular-text" />'; echo '
    echo '<p class="description">Masukkan pesan selamat datang yang ingin Anda tampilkan di panel administrasi.</p>';
}

Modifikasi fungsi tampilan untuk menggunakan opsi konfigurasi.

Akhirnya, kita perlu memodifikasi fungsi tampilan notifikasi yang asli. hello_admin_display_message()\n, biarkan itu dipilih dari opsi database. hello_admin_custom_message Di sini, kita membaca konten dari file, bukan mengkodenya secara manual.

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 hello_admin_display_message() {
    if ( current_user_can( 'manage_options' ) ) {
        $custom_message = get_option( 'hello_admin_custom_message', '欢迎回来，管理员！' ); // 获取自定义消息
        if ( ! empty( $custom_message ) ) {
            echo '<div class="notice notice-success is-dismissible"><p>'`. esc_html($custom_message)`.'</p></div>';
        }
    }
}

Sekarang, simpan semua perubahan. Kembali ke dasbor WordPress, Anda akan melihat “Hello Admin” di bawah menu “Pengaturan”. Masuk ke halaman tersebut, ubah pesan dan simpan. Segarkan dasbor, dan Anda akan melihat pesan yang ditampilkan telah berubah menjadi konten yang baru saja Anda atur. Dengan demikian, plugin kustomisasi dengan fungsi konfigurasi dasar telah selesai.

Praktik Terbaik Pengembangan Plugin dan Langkah-Langkah Selanjutnya

Setelah fungsi dasar terimplementasi, mengikuti praktik terbaik akan membuat plugin Anda lebih profesional, lebih aman, dan lebih mudah dirawat.

Keamanan adalah prioritas utama: selalu verifikasi, escapekan, dan bersihkan input pengguna. Gunakan fungsi yang disediakan oleh WordPress, seperti esc_html(), esc_attr(), sanitize_text_field(), wp_nonce_field() Dll. Jangan pernah langsung mempercayai data yang berasal dari pengguna atau database.

Organisasi kode dan komentar: Saat fungsionalitas plugin bertambah, pisahkan kode menjadi kelas atau file yang berbeda. Penggunaan pemrograman berorientasi objek (OOP) dapat meningkatkan penggunaan kembali dan organisasi kode. Tambahkan komentar yang jelas untuk fungsi dan kelas Anda, ini sangat penting untuk Anda di masa mendatang dan calon kolaborator.

Kesiapan internasional: Jika plugin Anda direncanakan untuk dirilis secara publik, itu harus mendukung internasionalisasi (i18n). Ini berarti Anda perlu menggunakan __() 或 _e() Fungsi tersebut mengemas semua string yang menghadap pengguna dan mengatur Domain Teks. Dengan cara ini, orang lain dapat menerjemahkan plugin Anda ke bahasa lain.

Pertimbangan kinerja: Hanya muat sumber daya plugin Anda (CSS, JavaScript) saat diperlukan. Gunakan kondisi dengan bijak untuk menghindari memuat skrip yang hanya dibutuhkan di latar belakang di setiap halaman. Optimalkan kueri database dan gunakan API Transients WordPress secara bijak untuk caching.

Explore lebih dalam: Setelah Anda menguasai dasar-dasarnya, Anda dapat menjelajahi topik yang lebih maju, seperti membuat tipe posting kustom (CPT) dan taksonomi kustom, menambahkan kode pendek (Shortcode), mengembangkan widget kustom, mengintegrasikan REST API, atau membuat blok yang dapat diseret-seret (Block) untuk plugin Anda.

Menyimpulkan.

Melalui panduan ini, Anda telah menyelesaikan seluruh proses membangun plugin WordPress kustom yang lengkap dari nol. Anda telah mempelajari konsep-konsep dasar pengembangan plugin, termasuk struktur file, sistem hook inti, dan cara menggunakan Settings API untuk membuat halaman konfigurasi yang aman. Plugin “Hello Admin” ini, meski sederhana, mengandung pola inti pengembangan plugin: mendeklarasikan plugin, memasang fungsionalitas, memproses data, dan menampilkan hasil. Dengan menguasai dasar-dasar ini, Anda memiliki kunci untuk menjelajahi kemampuan ekstensi WordPress yang luas lebih lanjut. Ingatlah bahwa terus belajar, mengikuti praktik terbaik, dan berani melakukan praktik langsung adalah cara terbaik untuk meningkatkan keterampilan pengembangan plugin Anda.

FAQ - Pertanyaan yang Sering Diajukan.

Berapa banyak file yang dibutuhkan minimal untuk sebuah plugin WordPress?

Plugin dengan fungsionalitas paling sederhana hanya dapat terdiri dari satu file PHP utama. Selama file tersebut berisi anotasi informasi header plugin yang benar, WordPress akan dapat mengenali dan mengaktifkannya. Namun, seiring dengan meningkatnya kompleksitas fungsionalitas, untuk mengatur kode dengan lebih baik, biasanya akan dibagi menjadi beberapa file, seperti file JavaScript dan CSS terpisah, atau file kelas PHP yang dibagi berdasarkan modul fungsionalitas.

Apa perbedaan antara hook aksi add_action dan hook filter add_filter?

Kait Aksi (Action Hooks) digunakan untuk menjalankan sebuah kode atau fungsi pada momen tertentu, tanpa mengharapkan nilai kembali, melainkan hanya “melakukan sesuatu”. Misalnya, mengirim surel setelah artikel dipublikasikan.

Filter Hooks digunakan untuk memodifikasi data. Ini menerima nilai input dan diharapkan mengembalikan nilai yang dimodifikasi. Misalnya, mengubah konten judul artikel sebelum ditampilkan di browser. Perbedaan utamanya adalah: Aksi adalah eksekusi, sedangkan Filter adalah modifikasi dan pengembalian nilai.

Bagaimana cara menyimpan input pengguna ke database dengan aman?

Pastikan untuk menggunakan fungsi API opsi yang disediakan oleh WordPress, sepertiupdate_option()和register_setting()。register_setting()Fungsi memungkinkan Anda menentukan fungsi panggilan balik pembersihan (sepertisanitize_text_field(n) diproses secara otomatis sebelum data disimpan. Jangan pernah menggunakannya secara langsung.$wpdbAtau, pernyataan SQL dapat digunakan untuk memasukkan data pengguna yang belum diproses, yang dapat mengakibatkan kerentanan keamanan serius (seperti injeksi SQL).

Saat mengembangkan plugin, bagaimana cara menghindari konflik dengan plugin lain?

Praktik pengkodean yang baik adalah kunci untuk menghindari konflik. Tambahkan awalan unik untuk semua fungsi, kelas, variabel, dan nama opsi Anda. Misalnya, gunakanhello_admin_display_messageDan bukan yang biasa.display_message.Bungkus gaya CSS dan kode JavaScript Anda dalam kelas atau pemilih ID tertentu. Saat menambahkan hook, pastikan fungsi panggilan balik Anda hanya berjalan dalam kondisi yang Anda butuhkan (misalnya, periksa halaman saat ini atau izin pengguna).