Advertisement
  1. Code
  2. WordPress

Tip Cepat: Mengintegrasikan Colorbox ke Shortcode [Gallery] Bawaan

Scroll to top
Read Time: 2 min

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Shortcode [gallery] bawaan itu bagus, tapi tidak sangat bagus. Di tip cepat ini, kita akan mempercantiknya dengan jQuery.

Shortcode [gallery] tidak sangat bagus. Anda tidak dapat menonaktifkan CSS standarnya, Anda tidak dapat menambahkan atau mengedit kelas CSS, Anda tidak dapat mengedit atribut default (yang sebenarnya merupakan masalah umum shortcode)... Meskipun hal ini tidak mengganggu mayoritas pengembang WordPress, orang aneh seperti saya bisa mengeluh! :)

Dalam tip cepat ini, kita akan menyingkirkan halaman lampiran gambar dan membiarkan pengunjung situs kitami menavigasi melalui gambar dalam kotak modal jQuery.


Salah satu Plugin jQuery Lightbox Terbaik yang Tersedia: ColorBox

Dengan kurang dari 5KB (ter-gzip) dan berbagai dukungan browser (yang bahkan termasuk IE6), Colorbox adalah plugin lightbox jQuery favorit saya.

Seperti yang Anda lihat dari halaman plugin, ia memiliki banyak pengaturan, metode dan pengait sehingga Anda dapat menyesuaikannya sesuka Anda. Ini juga memiliki 5 tema berbasis CSS yang rapi.

Unduh paket dan ekstrak colorbox.min.js dan salah satu dari 5 tema (file colorbox.css dan folder "images") ke dalam folder bernama "colorbox" dan unggah folder itu ke tema WordPress Anda. Tambahkan kode berikut di akhir file colorbox.min.js sebelum mengunggah:


Shortcode-Ception: Membangun Shortcode yang Menggunakan Shortcode Lain

Saya tahu bahwa ini akan menjadi sedikit aneh, tetapi tampaknya ini adalah cara yang paling bersih. Kita akan membuat shortcode [jgallery].

Tip dalam Tip Cepat: Jika Anda berencana untuk mengubah semua shortcode galeri dalam posting Anda setelah membuat shortcode [jgallery], saya sarankan menggunakan plugin Search Regex untuk mencari/mengganti [gallery] dengan [jgallery].

Seperti biasa, kita akan mulai dengan membuat fungsi basis shortcode:

Selanjutnya, kita akan menambahkan pada file CSS dan JS. Jangan lupa, jQuery akan ditambahkan secara otomatis (jika belum), dengan menentukan bahwa script Colorbox bergantung padanya.

Semuanya sudah siap, kecuali kita perlu menggunakan shortcode [gallery] di dalam fungsi ini. Kita akan menggunakan fungsi do_shortcode() dan mengembalikan shortcode [gallery link="file"]:

Semua selesai! Setelah menambahkan fungsi ini ke dalam file functions.php dari tema Anda, Anda dapat mulai menggunakan shortcode [jgallery] dengan segera. Beri tahu kami pendapat Anda di komentar di bawah. Nikmatilah! :)

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.