Hallo, catatan ini berisi tentang explorasi saya dalam membuat add-on untuk elementor. pada suatu kasus yang saya temui, saya ingin membuat sebuah slider yang dinamis untuk website client saya. sebenernya case ini mudah saja jika kita menggunakan elementor yang versi pro tetapi saat ini masih belum ada budget untuk berlangganan versi pro.
alhasil saya mencoba membaca dokumentasi dari elementor di link https://developers.elementor.com/docs/getting-started/first-addon/
untuk slider yang ingin saya buat adalah slider carousel yang ada pada twitter bootstrap, contoh nya seperti ini.
Selengkapnya kita bisa cek disini : https://getbootstrap.com/docs/5.3/components/carousel/#how-it-works
komponen pada slider kurang lebih seperti ini:
- Title
- Subtitle
- Image Slider
- Button Text
- Button URL
Pertama-tama yang akan saya buat dulu adalah CRUD data untuk membuat data Slidernya, untuk membuat data kostum seperti itu kita bisa memakai SCF ( Secure Custom Field : https://wordpress.org/plugins/secure-custom-fields/ ).
Setelah activate plugin, sekarang kita buat terlebih dahulu post type untuk Slider, untuk konfigurasinya kurang lebih seperti berikut
Setelah kita save, seharusnya akan muncul menu Sliders di sidebar admin kita.
Jika kita buka menu sliders, tampilannya akan seperti ini:
dan jika kita klik add new sliders, tampilannya akan seperti ini:
pada gambar diatas, hanya ada field Title dan Image akan tetapi pada pembahasan sebelumnya, kita ingin membuat slidernya dengan komponen seperti berikut:
- Title
- Subtitle
- Image Slider
- Button Text
- Button URL
untuk membuatnya kita bisa tambahkan custom field pada post type sliders yang sebelumnya kita buat, konfigurasinya seperti berikut:
Pada bagian settings, pastikan is equal to nya mengarah ke Sliders.
Kemudian kita save.
Saat kita klik add new sliders, harusnya tampilan akan berubah menjadi seperti berikut:
Sekarang Kita coba Isi data Sample nya. kemudian jika kita buka list All Sliders akan muncul seperti ini.
Pada penjelasan sebelumnya kita sudah membuat sebuah field seperti subtitle, button text dan button url, akan tetapi pada list all sliders ini field tersebut tidak muncul, untuk bisa menampilkan custom field tersebut ke dalam list, kita bisa menggunakan plugin tambahan seperti admin column, seperti berikut:
Setelah kita activate plugin Admin Columns, kita buka pada menu Settings -> Admin Columns, kemudian kita setting seperti ini.
Setting semua fieldnya, sehingga menjadi seperti ini:
Kemudian Save, lalu coba kita lihat page All Sliders, seharusnya tampilannya akan berubah menjadi seperti berikut:
Oke, sampai disini kita sudah membuat data untuk membuat sliders secara dinamis. selanjutnya kita akan membuat sebuah plugin / elementor add-on, supaya sliders bisa kita tampilkan di halaman website kita.