Best Praktis Membuat Plugin Wordpress

 


Saat artikel ini dibuat, posisi CMS (Content Management System) Wordpress adalah yang paling banyak digunakan di dunia. Mudahnya menggunakan wordpress dan fiturnya yang berlimpah sangat memanjakan para pemilik website dalam mengelola situsnya. Setiap tahun versi wordpress selalu ada update terbaru, biasanya juga dibarengi dengan release theme baru sesuai tahun releasenya. Seperti pada tahun 2021 ini, wordpress sudah merelease theme resminya https://id.wordpress.org/themes/twentytwentyone/.

Dari semua kelebihan tersebut, kadang pengguna tetap saja memelukan fitur tambahan untuk memenuhi kebutuhannya yang beragam. Wordpress menyedikan berbagai macam plugin yang bisa diinstall sesuai keperluan. Developer dari seluruh penjuru dunia ikut meramaikan fitur wordpress dengan mengembangkan berbagai macam thema dan plugin. Teman-teman dapat mencari plugin wordpress di https://id.wordpress.org/plugins/.

Saat ini ada 59.205 plugin gratis yang bisa diinstall dari situs resmi wordpress tersebut. Sedangkan untuk theme resmi yang ada di wordpress ada 8.874 tema gratis. Data ini masih belum termasuk theme dan plugin berbayar yang sengaja dibuat oleh developer untuk fitur premium.

Sesuai judul artikel ini, kita langsung saja ke pembahasan inti. Bagaimana cara terbaik membuat plugin wordpress versi penulis. Secara umum teman-teman bisa mempelajari cara membuat plugin dari situs resmi wordpress di https://developer.wordpress.org/plugins/. Tapi untuk mempersingkat waktu, berikut ini adalah tahapan-tahapannya:

1. Membuat Basic Plugin Dengan Plugin Generator Online


Saya biasanya membuat plugin wordpress dengan mengunjungi website https://wppb.me/. Pada website tersebut kita tinggal memasukan data sebagai berikut:
  • Plugin Name adalah nama plugin kita.
  • Plugin Slug adalah nama folder sekaligus nama unik plugin yang akan dibuat. Bagian ini sangat penting dibandingkan dari inputan lainnya, karena semua fungsi dan file akan dibuat berdasarkan inputan di plugin slug ini.
  • Plugin Uri adalah alamat website plugin kita. Biasanya saya isi dengan alamat repository plugin. Misalkan alamat repo githubnya
  • Author Name adalah nama pembuat plugin. Bisa nama pribadi atau tim kerja.
  • Author Email adalah alamat email
  • Author Uri adalah alamat website developernya
Isikan semua data pada form tersebut dan klik tombol Build Plugin. Otomatis akan terdownload file .zip yang berisi folder dan file yang kita butuhkan untuk pengembangan plugin selanjutnya.


Sebagai contoh file hasil download dari generator plugin bisa dicek di https://github.com/agusnurwanto/wp-bl/tree/wp-bl. Berikut sedikit keterangan fungsi dari masing-masing folder dan file:
  • admin adalah folder yang berisi file untuk pengembangan fitur di dasboard wordpress. Seperti membuat menu baru, menambahkan metadata pada post page dll.
  • includes adalah folder yang berisi configurasi untuk menjalankan fungsi yang sudah dibuat di folder admin dan public.
  • languages adalah folder bahasa, misalkan kita mau membuat plugin dengan multi bahasa. Saya sendiri belum pernah menggunakan fitur ini.
  • public adalah folder yang berisi file untuk pengembangan fitur halaman yang diakses oleh user umum diluar dari dasboard wordpress.
  • wp-bl.php adalah file utama yang pertama kali akan di jalankan saat plugin sudah diaktifkan. Nama file ini sesuai dengan nama folder plugin hasil dari inputa Plugin Slug yang sudah diterangkan sebelumnya. Di dalam file ini terdapat configurasi nama plugin, nama developer dll.

2. Install Carbon Field Untuk Custom Fields Toolkit

Dokumentasi lengkap terkait cara menggunakan carbon field bisa dilihat di https://docs.carbonfields.net/. Kita perlu menambahkan library carbon field di plugin yang sudah dibuat. Lakukan installasi carbon fields dengan download file zip dari https://carbonfields.net/zip/latest/.


Struktur carbon fields plugin seperti gambar di atas. Bisa juga dicek di https://github.com/agusnurwanto/wp-bl/tree/carbonfield. Untuk menggabungkan fitur carbon field dengan wp-bl atau plugin yang sudah kita buat maka perlu tahapan sebagai berikut:
  1. Copy folder core dan vendor pada existing plugin
  2. Tambahkan kode dibawah ini pada file utama plugin, dalam kasus ini di file wp-bl.php
    • // ============== https://carbonfields.net/ ================
    • if(!defined('Carbon_Fields_Plugin\PLUGIN_FILE')){
    • define( 'Carbon_Fields_Plugin\PLUGIN_FILE', __FILE__ );
    • define( 'Carbon_Fields_Plugin\RELATIVE_PLUGIN_FILE', basename( dirname( \Carbon_Fields_Plugin\PLUGIN_FILE ) ) . '/' . basename( \Carbon_Fields_Plugin\PLUGIN_FILE ) );
    • }

    • add_action( 'after_setup_theme', 'carbon_fields_boot_plugin' );
    • if(!function_exists('carbon_fields_boot_plugin')){
    • function carbon_fields_boot_plugin() {
    • if ( file_exists( __DIR__ . '/vendor/autoload.php' ) ) {
    • require( __DIR__ . '/vendor/autoload.php' );
    • }
    • \Carbon_Fields\Carbon_Fields::boot();
    • if ( is_admin() ) {
    • \Carbon_Fields_Plugin\Libraries\Plugin_Update_Warning\Plugin_Update_Warning::boot();
    • }
    • }
    • }
    • // ============== https://carbonfields.net/ ================
  3. Untuk menambahkan menu theme option pada dashboard wordpress maka perlu menambahkan kode di bawah ini pada file admin > class-wp-bl-admin.php
    • use Carbon_Fields\Container;
    • use Carbon_Fields\Field;
  4. Tambahkan kode di bawah ini untuk meregister action carbon_fields_register_fields
    • $this->loader->add_action( 'carbon_fields_register_fields', $plugin_admin, 'crb_attach_wp_bl_options' );
  5. Buat function baru di file admin > class-wp-bl-admin.php
    • public function crb_attach_wp_bl_options() {
    • $basic_options_container = Container::make( 'theme_options', __( 'CRB Options' ) )
    • ->set_page_menu_position( 4 )
    •         ->add_fields( array(
    •         Field::make( 'text', 'crb_wp_bl_text', 'Carbon field type text' )
    •             ->set_default_value('ini default value')
    •     ) );
    • }
  6. Untuk detail lengkap terkait container type theme option bisa cek di https://docs.carbonfields.net/learn/containers/theme-options.html

3. Install HTML Aset Dari AdminLTE



Dokumentasi lengkap terkait cara menggunakan HTML aset dari AdminLTE bisa dilihat di https://github.com/ColorlibHQ/AdminLTE. Untuk menambahkan library CSS dan javascript dari adminlte, copy folder dist dan plugin kemudian paster pada folder public.

Sebagai contoh, kita akan membuat satu page dengan asset adminlte. Berikut ini tahapannya:
  1. Buat file baru bisa di admin > partials atau public > partials sesuai kondisi. Sebagai contoh saya membuat file admin > partials > wp-bl-adminlte-chart-page.php. Di file ini saya mencopy kode content yang ada pada asset adminlte pages > charts > chartjs.html
  2. Buat variable global WP_BL_PLUGIN_URL di file wp-bl.php untuk menentukan plugin url. Ini akan digunakan untuk memanggil file aset adminlte.
    • define( 'WP_BL_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
  3. Kita akan menggunakan fitur shortcode dari wordpress untuk menampilkan halaman wp-bl-adminlte-chart-page.php di salah satu page wordpress.
  4. Jika kita menggunakan theme astra, kita perlu menambahkan beberapa style CSS pada file public > css > wp-bl-public.css untuk merewrite style dari astra theme.

4. Install Ultimate Member Plugin Untuk Manajemen User Role


Dalam sebuah aplikasi biasanya selalu ada settingan user role untuk membedakan hak ases antar pengguna. Ada banyak plugin diwordpress yang bisa digunakan untuk mengakomodir task ini. Yang biasanya saya gunakan adalah plugin Ultimate Member.

Catatan:

Komentar

Posting Komentar

Postingan populer dari blog ini

SIPD Chrome Extension untuk Migrasi Data dari SIPD ke SIMDA PINK Th. Anggaran 2022

Gambar
1. Siapkan Server untuk tempat backup DB lokal menggunakan WP-SIPD Sangat disarankan menggunakan hardware PC server untuk menginstall web server yang akan digunakan untuk migrasi data. Penggunaan hardware akan berpengaruh pada kecepatan saat melakukan singkronisasi. Sebaiknya juga menggunakan domain dan IP publik agar aplikasi bisa diakses dari internet. Hal ini akan mempermudah dikemudian hari untuk melakukan singkronisasi dari manapun. Pastikan web server aplikasi wp-sipd dapat terhubung dengan jaringan dari server database sql server simda. Berikut langkah-langkah install WP-SIPD pada PC server windows: Download xampp dengan php versi 7.xx, jangan menggunakan versi 8.xx karena saat ini driver odbc belum support. File dapat didownload di  https://www.apachefriends.org/download.html . Selain XAMPP dapat menggunakan web server lain sesuai kebutuhan. Yang terpenting adalah modul PHP dan database MYSQL Edit file php.ini yang bisa diakses melalui control panel XAMPP. Klik menu Config ...
Baca selengkapnya

FMIS Chrome Extension untuk Integrasi Data SIPD ke FMIS

Gambar
Aplikasi fmis chrome extension dapat diinstall dari  https://github.com/agusnurwanto/fmis-chrome-extension . Secara garis besar alur proses datanya adalah dari aplikasi SIPD data akan disingkronkan ke database lokal wp-sipd menggunakan sipd-chrome-extension . Data yang ada di database wp-sipd kemudian akan ditarik atau disingkronkan ke FMIS menggunakan fmis-chrome-extension . Untuk proses intallasi wp-sipd dan sipd chrome extension bisa melihat artikel berikut  https://smkasiyahhomeschooling.blogspot.com/2021/12/sipd-chrome-extension-untuk-migrasi.html . Di bawah ini adalah progress pengembangan aplikasi fmis-chrome-extension dan cara penggunaannya. Mari kita kembangkan bersama aplikasi opensource ini untuk Indonesia yang lebih baik. Terimakasih, semoga bermanfaat dan selalu diberi keberkahan. Amin... 1. Singkronisasi Data Struktur SSH dari WP-SIPD Sebelum melakukan singkronisasi data SSH, pastikan data master SSH sudah disingkronisasikan dari SIPD ke database lokal wp-sipd....
Baca selengkapnya

Materi Pemrogramman Web Dasar

Gambar
  Artikel ini dibuat untuk melengkapi pembuatan materi pemrograman web dasar. Materi versi google slide bisa dilihat melalui link  https://rtikmagetan.or.id/mp1 . Semoga dengan adanya artikel ini dapat membantu penulis serta peserta dalam melakukan praktek pembelajaran web programming. Pendahuluan Sebelum masuk ke persiapan teknis, hal pertama yang perlu disiapkan adalah mental yang kuat . Dalam dunia pemrograman kamu tidak akan pernah selesai belajar karena luas dan cepatnya perkembangan di bidang keilmuan ini. Di lain sisi, sebagai seorang programmer kita juga akan bertanggung jawab dengan data-data penting yang diamanahkan untuk diolah. Kemampuan programming ini bisa saja disalah gunakan untuk kegiatan negatif seperti hacking atau peretasan data . Termasuk untuk mendukung kegiatan-kegiatan ilegal lainnya . Pastikan kamu punya laptop sendiri untuk fasilitas belajar. Karena sebagai pelajar kamu perlu mendatangi guru atau tempat pelatihan, sehingga diperlukan hardware yang m...
Baca selengkapnya