Membuat Plugin Basic 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


        Silahkan membuat plugin wordpress dengan mengunjungi website https://wppb.me/, atau bisa juga mengikuti langkah lengkap di url https://baguspemrograman.blogspot.com/2022/10/membuat-plugin-melalui-text-editor-dan.html. 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. 
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

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  Pendapatan dan Pembiayaan  SSH dari WP-SIPD        Sebelum melakukan sin...
Baca selengkapnya

Dokumentasi SATSET ( Satu Data Terpadu Stunting, Kemiskinan Ekstrim, ATM, DTKS dan RTLH )

Gambar
Satu Data Terpadu Stunting, Kemiskinan Ekstrim, Aids  Tuberculosis  Malaria (ATM), Data Terpadu Kesejahteraan Sosial (DTKS) dan Rumah Tak Layak Huni (RTLH)  atau bisa disingkat dengan SATSET. Ruang Lingkup Penggunaan SATSET Ruang Lingkup Penggunaan Satset ini di bagi menjadi 2 jenis pengguna yaitu: Publik (Masyarakat Umum)  dapat melihat data yang ditampilkan di Satset tanpa harus login ke sistem, Administator  memiliki hak akses seperti pengguna publik dan SKPD ditambah dapat melakukan setting sistem secara keseluruhan. Penggunaan Publik (Masyarakat Umum) Halaman Homepage SATSET         Ini adalah tampilan awal dari aplikasi SATSET jika anda membuka website satset yang menampilkan beberapa menu satset yang memiliki fungsi berbeda-beda. berikut adalah panduan untuk menjalankan aplikasi di masing masing menu SATSET  Menu Peta Data Terpadu Halaman Menu Peta Satset   Menu Peta   Data berfungsi untuk memperlihatkan ...
Baca selengkapnya

Materi Quality Assurance ( QA )

Gambar
QA Introduction  Pada materi kali ini, kamu akan mengenal apa itu Software Quality Assurance. Output Pembelajaran Memahami ruang lingkup pekerjaan dari QA dalam sebuah pengembangan sebuah sistem Mengetahui pekerjaan dari QA Mengenal kaitan pola kerja QA dalam suatu tim developer A. Quality Assurance      Dalam mengelola kualitas produk atau layanan tentu melibatkan kegiatan perencanaan, pemenuhan, dan pemantauan. Quality Assurance berada di bawah aspek pemantauan disiplin yang merupakan proses atau tindakan untuk mengkonfirmasi apakah persyaratan kualitas perusahaan terpenuhi atau tidak.      QA berusaha untuk memberikan hasil yang konsisten melalui serangkaian proses dan prosedur standar yang secara sistematis memantau berbagai aspek produk atau layanan. Dengan audit reguler dan bentuk penilaian lainnya, QA mendeteksi dan memperbaiki masalah atau perbedaan yang berada di luar standar atau persyaratan yang terorganisir.      Konsep Quali...
Baca selengkapnya