Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Plugins

Cara Membuat Plugin Galeri Gambar Instan untuk WordPress

by
Read Time:48 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Fadil Abdillah (you can also view the original English article)

Pelajari cara membuat plugin galeri foto yang dibuat secara otomatis dan sederhana dengan navigasi thumbnail untuk WordPress. Hasil akhirnya adalah galeri yang sederhana dan menarik dengan navigasi thumbnail yang dibuat secara otomatis setiap kali Anda mengunggah gambar ke pos atau halaman. Tidak ada pengaturan khusus, tidak ada opsi untuk dikonfigurasi, tidak ada rintangan untuk melewatinya - itu sudah berfungsi!


Pengenalan

Berikut ini adalah pratinjau dari apa yang akan kita ciptakan:


Menggunakan Galeri Instan untuk WordPress

Sebelum kita masuk ke kode, mari kita cepat melihat betapa mudahnya galeri ini digunakan. Bagi Anda yang hanya ingin mengambil kode dan menggunakannya, bagian ini akan menunjukkan cara melakukannya.

Bagi mereka yang ingin belajar cara membuat galeri ini, masih bagus untuk memahami cara kerjanya sebelum memulai pengkodean. Jadi, mari kita periksa!

Galeri Instan: Panduan Mulai Cepat 2-Menit

1. Mulailah dengan Post atau Halaman kosong sederhana di WordPress. Tekan tombol 'Unggah / Masukkan Media'.

2. Selanjutnya, unggah beberapa gambar ke Pos atau Halaman. Cukup seret dan lepaskan gambar Anda ke dalam kotak.

3. Saat gambar Anda selesai diunggah, Anda akan mendapatkan daftar gambar dan propertinya. Anda dapat menyeret dan menjatuhkan gambar untuk mengatur ulang mereka di layar ini. Galeri Instan menghormati urutan menu yang Anda atur di peramban media WordPress, sehingga pemesanan ulang gambar di sini akan mengatur ulang mereka di galeri.

4. Jika Anda ingin mengubah properti gambar, seperti Judul, Caption atau Keterangan, maka Anda dapat melakukannya seperti biasanya. Dalam inkarnasi saat ini, Galeri Instan menampilkan Judul gambar di Galeri di antara gambar utama dan thumbnail.

Mengapa menampilkan Judul dan bukan informasi lainnya? Seperti yang Anda lihat dari gambar, WordPress secara otomatis mengisi Judul gambar (menggunakan nama file gambar) segera setelah Anda mengunggahnya. Sesuai dengan tema pembuatan Galeri Instan yang cepat dan mudah digunakan, saya ingin menggunakan bidang yang WordPress isi secara otomatis.

5. Akhirnya, kembali ke Post atau Halaman Anda dan masukkan shortcode [instant_gallery] di area konten. Tekan simpan, dan kemudian pergi melihat halaman Anda. Itu dia!

Jadi, hanya itu saja. Tujuan Galeri Instan adalah menjadi cara tercepat dan termudah untuk membuat galeri gambar dengan mengunggah gambar ke Pos atau Halaman di WordPress. Jika Anda pikir itu akan berguna bagi Anda, maka lanjutkan dan ambil file dan bersenang-senang!

Anda akan membuat galeri gambar WordPress yang indah dan sederhana dalam sekejap!

Mari kita lihat lagi produk yang sudah jadi:

Sekarang, jika Anda tertarik untuk mempelajari bagaimana Galeri Instan dibuat, baik untuk meningkatkan keterampilan Anda sebagai pembuat kode, atau untuk membangun Galeri Instan dan membuatnya lebih baik, maka teruslah membaca!


Membuat Galeri Instan

Seperti kebanyakan proyek WordPress, kami akan menggunakan HTML, CSS, PHP, dan sedikit JavaScript untuk mencapai tujuan kami.

Kami akan melanjutkan dengan cara berikut:

  1. HTML - Mulailah dengan markup dan isi dengan konten statis
  2. WordPress / PHP - Secara dinamis mengisi markup kami dengan konten
  3. JavaScript - Menerapkan perilaku untuk menukar gambar
  4. CSS - Lengkapi tampilan dan nuansa dengan CSS

Langkah 1 Markup

Markup untuk galeri kami sangat sederhana. Kami hanya memiliki elemen yang mengandung utama yang mencakup seluruh galeri (#instant-gallery), panel konten utama yang berisi gambar utama kami dan judulnya (#ig-main), dan kemudian area navigasi thumbnail (#ig-thumbs).

Navigasi kami adalah daftar yang tidak diurutkan dan setiap item daftar berisi gambar thumbnail.

Untuk mempermudah, kami hanya akan menggunakan tiga thumbnail placeholder dalam versi HTML statis. Di bagian selanjutnya kita akan menggunakan PHP untuk secara dinamis menghasilkan thumbnail sebanyak yang kita butuhkan.

Jika kami memeriksa markup kami sekarang, kami akan mendapatkan sesuatu yang terlihat seperti ini (hanya menampilkan dua thumbnail untuk menjaga ukuran gambar turun):

Jadi, itulah markup dasar. HTML yang tidak terlalu menarik, tetapi sederhana dan bersih adalah fondasi hampir semua hal yang kami lakukan di web, jadi sebaiknya Anda meluangkan waktu untuk melakukannya dengan benar.


Langkah 2 WordPress dan PHP

Sekarang mari masuk ke bagian WordPress dari tutorial. Ini mungkin bagian yang paling menarik bagi Anda, pembaca Wptuts +.

Mari kita mulai dengan berpikir secara konseptual tentang apa yang ingin kita capai. Tujuannya di sini adalah memiliki galeri gambar yang dihasilkan secara otomatis dari gambar apa pun yang diunggah ke pos atau halaman tertentu.

Untuk mencapai hal ini, kita perlu mengetahui hal-hal berikut:

  • Posting atau halaman apa yang kita pakai?
  • Adakah gambar yang terlampir pada halaman ini? Jika demikian, mari kita dapatkan mereka dan beberapa informasi tentang mereka.
  • Kemudian, untuk gambar pertama, kami ingin menampilkannya di galeri, bersama dengan teks atau teks deskriptif.
  • Kemudian, untuk semua gambar (termasuk yang pertama), kami ingin menampilkannya sebagai thumbnail di bawah galeri.
  • Gambar pertama juga harus disorot untuk menunjukkan bahwa saat ini dipilih.

Dengan konsep umum di pikiran, mari kita lihat kode markup dari Langkah 1, sekarang dimasukkan dengan kode WordPress dan PHP yang kita butuhkan untuk mendapatkan informasi yang kita inginkan. Ada cukup banyak terjadi di sini, jadi mari kita pisahkan menjadi bagian-bagian yang lebih kecil yang sesuai dengan daftar di atas.


Langkah 2.1: Siapkan Query

Di sini kita melakukan dua hal utama:

Pertama, kami menyiapkan variabel Post global ($post) sehingga kami dapat memiliki akses ke data yang relevan tentang posting kami.

Kedua, kami membuat serangkaian argumen ($args) yang menentukan jenis informasi yang ingin kami ambil. Khususnya, kita perlu mendapatkan gambar yang dilampirkan ke pos saat ini. Kami juga akan mendapatkan semuanya, dan mengembalikannya dengan urutan yang sama seperti yang muncul di galeri WordPress.

Lihat komentar di cuplikan kode di atas untuk melihat baris mana yang sesuai dengan parameter mana.


Langkah 2.2: Ambil Gambar

Di sini kami menggunakan fungsi get_posts WordPress untuk mengambil gambar yang sesuai dengan kriteria kami sebagaimana didefinisikan dalam $args. Kami kemudian menyimpan hasil dalam variabel yang disebut $attachments.

Selanjutnya, kita periksa untuk melihat apakah $attachments ada. Jika variabel ini kosong (seperti halnya ketika posting atau halaman Anda tidak memiliki gambar yang melekat padanya), maka tidak ada kode lebih lanjut yang akan dieksekusi. Jika $attachments memang memiliki konten, maka kita lanjutkan ke langkah berikutnya.

Selanjutnya, kami menginisialisasi variabel counter sederhana sehingga kami dapat melacak gambar mana kami berada. Kami melakukan ini karena ada hal-hal tertentu yang ingin kami hasilkan hanya pertama kali melalui loop kami (seperti markup galeri utama). Ini juga memberi kami sarana untuk menetapkan ID unik untuk setiap thumbnail di navigasi jika kita mau.

Kemudian kami membuka loop yang akan melangkah melalui masing-masing gambar kami.


Langkah 2.3: Area Galai Utama

Di sini kami menggunakan variabel counter kami untuk menentukan berapa kali kami melewati loop kami. Jika ini adalah pertama kalinya, $counter akan sama dengan nol, dan blok kode di atas akan dieksekusi. Kode ini menyiapkan elemen struktural utama galeri dan mengisi bagian gambar utama dengan gambar besar pertama. Hal ini hanya perlu terjadi satu kali. Untuk perjalanan selanjutnya melalui loop, $counter akan lebih besar dari nol dan blok kode ini akan dilewati.

Ok, jadi apa yang sebenarnya terjadi di sana? Kami sudah melihat bagian HTML di Langkah 1, jadi mari kita fokus pada kode PHP yang mendiami area galeri utama.

Pada bagian pertama di sini, kami mendefinisikan berbagai parameter seperti yang kami lakukan pada Langkah 2.1. Namun kali ini, alih-alih parameter untuk kueri, kami menetapkan parameter untuk fungsi WordPress bernama wp_get_attachment_image.

Fungsi ini mengambil lampiran saat ini (gambar kita saat ini), mengembalikan ukuran penuh gambar (sebagai lawan dari ukuran yang lebih kecil seperti Thumbnail; kita akan membahasnya nanti), dan menerapkan atribut ke tag HTML gambar yang sesuai ke argumen yang ditentukan dalam array $default_attr. Tag 'alt' dan 'title' dari gambar didefinisikan seperti yang Anda harapkan, dan gambar diberi ID dari #ig-hero sehingga kita dapat dengan mudah menargetkannya dengan CSS.

Akhirnya, kita output judul gambar lagi, kali ini sebagai Judul yang muncul di bawah gambar. Secara default, WordPress menetapkan Judul gambar agar sama dengan nama file gambar yang diunggah. Jadi, ketika Anda menggunakan teknik ini, (1) pastikan nama file dari gambar yang Anda unggah adalah sesuatu yang ingin Anda tampilkan pada tampilan slide Anda, (2) edit bidang Judul dari gambar saat Anda mengunggahnya, atau ( 3) beri komentar bagian kode ini agar judul tidak ditampilkan dalam slideshow sama sekali.


Langkah 2.4: Navigasi Thumbnail

Sekarang mari kita lihat lebih dekat pada navigasi thumbnail. Di bagian atas blok kode ini kami telah mengulangi pembukaan daftar #ig-thumbs untuk membantu Anda menyesuaikan diri Anda dalam kode. Dengan titik referensi tersebut, mari kita lihat pada daftar yang sebenarnya.

Anda akan melihat bahwa kami menggunakan sedikit cuplikan PHP untuk menampilkan variabel $count, plus satu, untuk memberikan setiap item daftar ID uniknya sendiri. Ini akan memberi kita satu derajat lagi kendali atas daftar item dengan CSS, haruskah kita menginginkannya. Kami menggunakan $count+1 sehingga kami tidak harus memulai dari nol.

Di dalam daftar item, ada pernyataan kondisional yang memeriksa sekali lagi iterasi loop mana kita berada. Seperti yang telah kami lakukan beberapa kali sebelumnya, kami sedang mengatur array; Namun, kali ini adalah atribut untuk gambar thumbnail. Perbedaannya di sini adalah bahwa kita menetapkan parameter yang sedikit berbeda untuk array tergantung pada apakah kita berada di perjalanan pertama melalui loop atau tidak.

Kami selalu memberikan thumbnail kelas 'jempol', tetapi pada perjalanan pertama melalui loop, kami juga memberikan thumbnail pertama kelas 'terpilih'. Ini adalah sesuatu yang akan kami targetkan dengan CSS nanti untuk memberikan pengalaman pengguna yang konsisten.

Setelah $thumb_attr atribut ditetapkan, kita menggunakan wp_get_attachment_image lagi untuk menampilkan gambar. Hal utama yang perlu diperhatikan saat ini adalah bahwa kita meraih versi thumbnail dari gambar, bukan ukuran penuh dari gambar yang kita ambil di atas.

Kemudian, karena kita berada di ujung loop kita, kita menaikkan counter kita dan memulai loop lagi. Setelah kami kehabisan semua lampiran gambar kami, kami akan menekan ujung loop. Ketika ini terjadi, kami menutup daftar tidak berurutan, kemudian seluruh kontainer galeri, dan kemudian pernyataan kondisional PHP kami.


Langkah 2.5: Tambahkan Shortcode

It's great telah dikodekan galeri gambar kami, tetapi itu lebih baik jika kita dapat menampilkan galeri gambar kami! Pada titik ini, kita masih tidak memiliki cara untuk benar-benar menunjukkan output pada Post atau Halaman WordPress. Kami akan memperbaikinya sekarang, dan untungnya langkah ini mudah!

Rasanya senang mendapat kemenangan cepat yang bagus setelah blok kode besar dari Langkah 2.4. Di sini kami hanya mendefinisikan shortcode yang sangat sederhana sehingga kami dapat menambahkan galeri ke posting atau halaman WordPress kami.

Ini mengambil fungsi kami, yang disebut 'instant_gallery' yang didefinisikan di atas, dan membuat shortcode baru dengan nama yang identik. Kami kemudian dapat memasukkan galeri ke posting atau halaman kami menggunakan shortcode [instant_gallery].

Ada banyak artikel mendalam tentang shortcode di luar sana, termasuk beberapa yang bagus di sini di Wptuts +. Jika Anda baru mengenal shortcode, berikut adalah beberapa poin awal yang baik:


Langkah 2.6: Kumpulkan Pikiran Kita

Wah! Oke, jadi itu semua kode untuk galeri itu sendiri. Kode yang telah kami tulis sejauh ini akan mengambil daftar lampiran gambar dari posting atau halaman WordPress saat ini dan kemudian secara otomatis menghasilkan galeri sesuai dengan markup yang kami berikan. Kode pendek kemudian memberi kami cara mudah untuk memasukkan galeri kami ke pos atau halaman kami.

Jika kami mengunggah beberapa gambar mengagumkan dari kuda laut dan ubur-ubur dan kemudian memeriksa hasil kami, inilah yang akan kami miliki saat ini:

Dari sudut pandang WordPress, kami telah melakukan apa yang perlu kami lakukan. Tanpa JavaScript, bagaimanapun, galeri tidak akan benar-benar melakukan apa-apa. Tanpa CSS, tidak akan terlihat bagus juga. Jadi, luangkan waktu sebentar untuk mencerna apa yang telah kami lakukan sejauh ini, dan kemudian kami akan melanjutkan ke langkah selanjutnya di mana kami membuat galeri kami menjadi hidup!


Langkah 3 JavaScript

Seperti yang Anda harapkan, Galeri Instan bergantung pada keajaiban jQuery untuk mencapai tingkat dasar interaktivitas yang diperlukan. Sebenarnya ada dua bagian untuk ini. Yang pertama adalah memuat pustaka jQuery ke dalam tema kita dengan benar, dan yang kedua adalah kode jQuery yang sebenarnya yang akan menciptakan perilaku yang kita butuhkan (yaitu, menukar gambar dan judul gambar ketika thumbnail diklik).

Kedua bagian ini menawarkan kesempatan yang baik untuk menggunakan beberapa wawasan dan praktik terbaik WordPress, jadi jika Anda baru bekerja dengan jQuery dalam konteks WordPress, beri perhatian khusus!


Langkah 3.1: Menggunakan Enqueue Script untuk Memuat jQuery di WordPress

Seperti yang Anda ketahui, jQuery (serta banyak pustaka JavaScript lainnya) datang dengan pre-loaded dengan WordPress. Demi kesederhanaan, kami akan menggunakan versi jQuery yang disertakan dengan WordPress untuk contoh ini.

Ini adalah kesempatan yang baik untuk menggunakan fungsi wp_enqueue_script WordPress. Ini adalah cara yang 'benar' untuk memuat skrip di WordPress. Ini memastikan bahwa skrip dimuat di tempat dan waktu yang tepat saat WordPress dijalankan, dan bahwa konflik dihindari.

Fungsi wp_enqueue_script dapat membingungkan, tetapi untungnya ada banyak artikel bagus tentangnya di luar sana. Berikut adalah beberapa sumber daya yang berguna tentang wp_enqueue_script:

Perhatikan bahwa kami melampirkan fungsi ini ke hook WordPress 'wp_enqueue_scripts' yang memuat semua skrip yang telah diantrekan oleh 'wp_enqueue_script'. Perbedaan halus di sana, tetapi itu penting!

Berikut ini catatan penting tentang wp_enqueue_scripts dari WP Codex:

hook wp_enqueue_scripts (bukan hook init yang banyak referensi artikel), kami menghindari mendaftarkan jQuery alternatif pada halaman admin, yang akan menyebabkan pengeditan pos (di antara hal-hal lain) untuk putus setelah upgrade sering.


Langkah 3.2: Menggunakan jQuery untuk Membawa Galeri Instan ke Kehidupan

Sekarang kita bisa melanjutkan ke kode jQuery yang menggerakkan pertukaran gambar dan judul. Kita hanya perlu beberapa baris kode untuk mencapai ini. Beberapa dari Anda di luar sana yang berpengalaman dalam jQuery bahkan mungkin dapat menyarankan beberapa cara yang lebih efisien untuk menyelesaikan pekerjaan!

Seperti yang kita lakukan dengan kode WordPress pada Langkah 2, mari kita berjalan melalui konsep ini sebelum kita masuk ke kode itu sendiri. Saat kami mengeklik thumbnail, kami ingin beberapa hal terjadi:

  • Pertama dan yang paling penting, kami ingin menukar gambar yang ada di posisi pahlawan utama untuk gambar besar lainnya - gambar yang sesuai dengan gambar mini yang kami klik.
  • Kedua, kami ingin mengganti judul gambar lama dengan yang sesuai dengan gambar baru. Kami akan melakukan ini dengan mengambil keuntungan dari skema penamaan file WordPress. Kami akan berbicara tentang bagaimana melakukannya dalam beberapa saat.
  • Ketiga, kami ingin menyoroti thumbnail yang sesuai dengan gambar besar kami pada waktu tertentu. Seperti yang kita lihat pada Langkah 2.4 di atas, cara kami menetapkan ini adalah dengan kelas 'terpilih' pada thumbnail saat ini.
  • Akhirnya, ketika gambar baru dipilih, kami menghapus kelas 'terpilih' dari semua gambar, dan kemudian menambahkannya kembali ke thumbnail yang baru dipilih.

Jadi, dengan mengingat tindakan utama tersebut, mari kita lihat seperti apa tampilan ini di jQuery:

Untungnya, kode jQuery relatif sederhana, dan sesuai dengan baik untuk daftar tindakan yang diperlukan di atas.

Kode ini cukup terdokumentasi dengan baik, jadi jika Anda tidak memahami suatu baris, komentar akan membantu. Meski begitu, mari kita jquery jQuery, baris demi baris (menyisihkan generik 'fungsi wrapper' dari (function ($) {}) yang akan kita diskusikan sebentar lagi).

Garis yang memulai $('ig-thumbs').delegate adalah apa yang mendefinisikan ruang lingkup fungsi kita. Dikatakan, setiap kali seseorang mengklik objek gambar (img) di dalam sebuah wadah dengan ID #ig-thumbs, kemudian jalankan tindakan dalam fungsi tersebut.

Baris berikutnya, yang dimulai dengan $('#ig-hero'), menangani pertukaran aktual dari gambar kita saat ini untuk gambar besar yang sesuai dengan thumbnail yang diklik. Dalam fungsi jQuery ini, thumbnail yang diklik disebut sebagai 'this' karena itu adalah subjek dari aksi 'klik'; itu adalah hal yang diklik dan memicu fungsi.

Metode untuk menyelesaikan pertukaran gambar memanfaatkan skema penamaan file WordPress. Misalnya: Saat Anda mengunggah gambar yang disebut my-image.jpg, WordPress akan membuat beberapa ukuran berbeda dari gambar itu. Satu ukuran yang dibuat secara otomatis adalah ukuran 'Miniatur' yang, secara default, persegi 150x150 dipotong dari gambar asli Anda. WordPress akan menamai file ini my-image-150x150.jpg. Ini hanya menambahkan '-150x150' ke akhir nama file Anda, tepat sebelum ekstensi file.

Jadi, jika kita ingin mengganti versi thumbnail dari sebuah gambar dengan versi ukuran penuh dari gambar itu, maka kita hanya perlu menghapus '-150x150' dari nama file. Inilah yang dilakukan jQuery kami untuk menukar gambar.

Jika kita ingin mengganti thumbnail dengan ukuran gambar yang berbeda, tetapi bukan gambar berukuran penuh, kita perlu mengetahui dimensi dari ukuran lain itu, dan kemudian kita bisa mengubah dimensi. Sebagai contoh, jika kita ingin mengganti my-image-150x150.jpg untuk gambar berukuran Medium 600x300, maka kita hanya akan menggunakan kode jQuery untuk menukar '-150x150' dengan '-600x300', dan kita akan menjadi pergi dengan my-image-600x300.jpg.

Selanjutnya, dengan baris yang dimulai $('#ig-thumbs li img'), kami hanya menghapus kelas CSS 'terpilih' dari semua thumbnail, dan kemudian baris di bawah yang menambahkan kelas 'terpilih' ke 'ini '; yaitu gambar yang diklik.

Akhirnya, dengan garis yang dimulai $('#ig-title'), kita mengganti Judul gambar lama dengan gambar baru. Baris ini mengambil isi dari elemen yang mengandung dengan ID dari #ig-title

Langkah 3.3: Menggunakan jQuery dalam Konteks WordPress

Sekarang, karena kami melakukan semua operasi ini dalam konteks WordPress, kami harus menyadari detail penting tentang bagaimana WordPress memuat jQuery.

WordPress menjalankan jQuery di 'no conflict mode' sehingga tidak menimbulkan konflik dengan pustaka JavaScript lainnya. Dalam istilah praktis, ini berarti bahwa pintasan $ berguna yang biasa digunakan di jQuery tidak akan berfungsi di WordPress secara default.

Untungnya, topik ini sudah dibahas panjang lebar. Jika Anda tertarik untuk mempelajari lebih lanjut tentang alasan untuk ini, Chris Coyier memiliki artikel bagus tentang Menggali Ke WordPress yang membahas masalah ini dengan tepat. Untuk keperluan artikel ini, kita hanya perlu membungkus fungsi jQuery kita dalam fungsi umum untuk mengaktifkan kembali penggunaan shortcut $ dalam cuplikan kode kita.

Akhirnya kami menambahkan kode ini menggunakan hook bawaan di WordPress - wp_footer - untuk memuat skrip dengan benar dan hanya setelah sisa halaman dimuat.

Dengan jQuery di tempat, mari kita lihat apa yang kita miliki sejauh ini. Sekarang galeri kami bersifat interaktif, dan mengeklik salah satu gambar mini dengan benar menggantikan gambar utama dan judul yang sesuai. Dalam contoh gambar di bawah ini, Anda dapat melihat bahwa kami telah mengeklik thumbnail kedua dan gambar utama dan judulnya telah diganti seperti yang kami harapkan.

Jadi, itu berhasil, tetapi masih tidak terlihat bagus. Untungnya, kita dapat merapikan beberapa CSS dasar. Dan itulah yang akan kami lakukan di langkah selanjutnya.


Langkah 4 CSS

Langkah 4.1: CSS untuk Galeri Instan

Sekarang akhirnya saatnya untuk menciptakan kreasi kami dan membuatnya lebih mirip galeri gambar yang sebenarnya. Karena fokus utama dari tutorial ini adalah pada fungsi WordPress dan jQuery, saya menyimpan CSS untuk galeri ini sangat sederhana. Berikut kode CSS untuk galeri:

Tidak ada yang terlalu rumit tentang CSS kami. Hanya pemilih dan gaya dasar yang diperlukan untuk membuat galeri. Jika Anda ingin memodifikasi CSS untuk membuat galeri Anda sedikit lebih mewah, saya telah menyediakan semua pemilih yang Anda perlukan untuk melakukannya.

Satu hal yang perlu diperhatikan di sini adalah saya telah membatasi ukuran thumbnail menjadi 75x75 daripada ukuran 150x150 di mana kami mengambilnya dari WordPress. Ukuran 150x150 sedikit terlalu besar untuk selera saya; Saya suka gambar mini yang lebih kecil sehingga Anda dapat memuat lebih banyak di bawah galeri. Jika Anda ingin menggunakan ukuran yang berbeda, yang harus Anda lakukan hanyalah mengubah lebar dan tinggi gambar thumbnail pada dua baris yang ditandai pada CSS.


Langkah 4.2: Menggunakan Gaya Enqueue untuk Memuat CSS di WordPress

Mungkin lebih menarik daripada CSS itu sendiri adalah cara yang kami gunakan untuk memuatnya. Kami hanya bisa melakukan tag tautan sederhana dan menghubungkannya ke header kami menggunakan hook wp_head, tetapi ada cara yang lebih baik.

Mengambil petunjuk dari fungsi enqueue_script yang kita gunakan untuk memuat jQuery, kita dapat menggunakan fungsi yang serupa, wp_enqueue_style, untuk memuat style sheet kita. Seperti enqueue_script, ini adalah cara yang lebih disukai untuk memuat stylesheet di WordPress. Adalah baik untuk mempraktekkan teknik-teknik ini bahkan dengan proyek-proyek sederhana seperti ini karena ini memungkinkan Anda untuk fokus pada pemahaman teknik dan mengapa itu bekerja tanpa khawatir tentang debugging sejumlah besar kode. Ada kepuasan tertentu dalam melakukan sesuatu yang sederhana dengan sangat baik!

Jadi begitulah cara Anda menggunakan wp_enqueue_style. Sangat mirip dengan enqueue_script. Anda akan melihat bahwa ada perintah lain di sini juga: wp_register_style. Fungsi ini hanya mendaftarkan file CSS dengan WordPress untuk digunakan nanti dengan wp_enqueue_style.

Sekarang galeri foto kami akhirnya terlihat sebagus fungsinya!


Semua bersama Sekarang

Lihat produk jadi:

Ini terlihat sangat sederhana, dan itulah yang kami inginkan. Inti dari galeri ini adalah menjadi cara termudah dan tercepat untuk secara otomatis menghasilkan galeri gambar dari gambar yang diunggah ke halaman posting WordPress, tidak lebih!

Silakan periksa demo langsung Galeri Instan untuk WordPress di situs web pribadi saya.

Kode yang sudah selesai terlalu panjang untuk ditampilkan di sini secara lengkap, jadi silakan mengunduh file sumber (di bagian atas artikel) dan lihat sendiri semuanya.


Kesimpulan

Kami baru saja membuat galeri gambar instan dengan navigasi thumbnail untuk WordPress!

Sepanjang tutorial ini saya telah melakukan yang terbaik untuk menggabungkan praktik-praktik yang baik dalam segala hal mulai dari markup yang jelas, CSS semantik, dan bahkan cara stylesheet dan javascript dimuat. Jika Anda bermain bersama dan mengerjakan langkah-langkahnya, saya harap Anda belajar satu atau dua teknik baru. Jika Anda baru saja di sini untuk menyelesaikan kode, saya harap Anda merasa berguna dan bahwa Anda dapat menggunakannya dengan percaya diri dan dengan pengetahuan bahwa Anda menggunakan beberapa kode sederhana yang dibuat dengan cinta.

Seperti halnya semua proyek pengkodean, selalu ada cara untuk melakukan perbaikan. Jika Anda bisa memikirkan cara apa pun untuk membuat kode ini lebih baik atau lebih kuat, saya menyambut setiap dan semua umpan balik yang membangun di komentar!

Saya juga menyambut semua saran tentang cara meningkatkan plugin dan membuatnya lebih kuat atau elegan. Namun saya tidak terlalu tertarik untuk membuatnya lebih rumit atau menambahkan banyak fitur. Ada banyak galeri gambar berfitur lengkap di luar sana, dan saya ingin yang ini tetap sederhana dan memenuhi satu tujuan yang sangat spesifik.

Akhirnya, saya ingin mengucapkan terima kasih kepada Japh Thomson karena telah memberi saya kesempatan untuk menulis untuk Wptuts +, dan berterima kasih kepada Envato karena telah membangun komunitas pendidikan yang hebat di web. Yang terpenting, terima kasih telah membaca!

Saya mengharapkan umpan balik Anda, beri tahu saya di komentar jika Anda menggunakan Galeri Instan di salah satu situs web Anda!

Learn how to create a simple, automatically generated image gallery plugin with thumbnail navigation for WordPress. The end result is a simple, attractive gallery with thumbnail navigation that is created automatically whenever you upload images to a post or page. No special settings, no options to configure, no hoops to jump through – it just works!

Introduction

Here is a preview of what we will be creating:

Using Instant Gallery for WordPress

Before we get into the code, let's take a quick look at how easy this gallery is to use. For those of you who just want to grab the code and use it, this section will show you how to do that.

For those that want to learn how to create this gallery, it is still good to get a sense of how it works before we start coding. So, let's check it out!

Instant Gallery: The 2-Minute Quick-Start Guide

1. Start with a simple, blank Post or Page in WordPress. Hit the "Upload/Insert Media" button.

2. Next, upload some images to the Post or Page. Just drag and drop your images into the box.

3. When your images finish uploading, you'll get a list of the images and their properties. You can drag and drop the images to re-order them on this screen. Instant Gallery respects the menu order that you set up in the WordPress media browser, so re-ordering the images here will re-order them on the gallery.

4. If you want to change any properties of the image, such as the Title, Caption or Description, then you can do that just like you normally would. In its current incarnation, Instant Gallery displays the image Title in the Gallery in between the main image and the thumbnails.

Why display the Title and not the other information? As you can see from the image, WordPress automatically fills out the Title of the image (using the image's filename) as soon as you upload it. In keeping with the theme of making Instant Gallery as fast and easy to use as possible, I wanted to use the field that WordPress fills out automatically.

5. Finally, go back to your Post or Page and enter the [instant_gallery] shortcode in the content area. Hit save, and then go view your page. That's it!

So, that's all there is to it. The purpose of Instant Gallery is to be the fastest, easiest way to create an image gallery by uploading images to a Post or Page in WordPress. If you think that will be useful to you, then go ahead and grab the files and have fun!

You'll be creating beautifully simple WordPress image galleries in an instant!

Let's take one more look at the finished product:

Now, if you are interested in learning how Instant Gallery was created, either to improve your skills as a coder, or to build upon Instant Gallery and make it better, then please keep reading!

Creating Instant Gallery

As with most WordPress projects, we'll be using HTML, CSS, PHP, and a little bit of JavaScript to accomplish our goal.

We will proceed in the following way:

  1. HTML – Start with markup and fill it with static content
  2. WordPress / PHP – Dynamically populate our markup with content
  3. JavaScript – Apply the behavior to swap the images
  4. CSS – Complete the look and feel with CSS

Step 1 The Markup

The markup for our gallery is very simple. We just have a main containing element that encompasses the entire gallery (#instant-gallery), the primary content panel that contains our main image and its title (#ig-main), and then the thumbnail navigation area (#ig-thumbs).

Our navigation is an unordered list and each list item contains a thumbnail image.

For simplicity, we will just use three placeholder thumbnails in the static HTML version. In the next section we will use PHP to dynamically generate as many thumbnails as we need.

If we check out our markup now, we'll get something that looks like this (just showing two thumbnails to keep the image size down):

So, that's the basic markup. Not too exciting, but simple, clean HTML is the foundation of just about everything we do on the web so it's worth taking the time to get it right.

Step 2 The WordPress and PHP

Now let's get into the WordPress part of the tutorial. This may be the most exciting part for you Wptuts+ readers.

Let's start by thinking conceptually about what we want to accomplish. The goal here is to have an image gallery automatically generated from any images that are uploaded to a given post or page.

In order to accomplish this, we need to know the following:

  • What post or page are we on?
  • Are there any images attached to this page? If so, let's get them and some information about them.
  • Then, for the first image, we want to display it in the gallery, along with a caption or descriptive text.
  • Then, for all of the images (including the first) images, we want to display them as thumbnails below the gallery.
  • The first image should also be highlighted to show that it is currently selected.

With that general concept in mind, let's take a look at the markup code from Step 1, now infused with the WordPress and PHP code we need to get the information we want. There is a fair amount going on here, so let's break it down into smaller sections that correspond with the list above.

Step 2.1: Prepare the Query

Here we are doing two main things:

First, we set up the global Post variable ($post) so we can have access to the relevant data about our post.

Second, we set up an array of arguments ($args) that define the kind of information we want to retrieve. Specifically, we need to get images that are attached to the current post. We're also going to get all of them, and return them in the same order they appear in the WordPress gallery.

See the comments in the code snippet above to see which lines correspond to which parameters.

Step 2.2: Retrieve the Images

Here we are using the WordPress get_posts function to retrieve the images that match our criteria as defined in $args. We are then storing the results in a variable called $attachments.

Next, we check to see if $attachments exists. If this variable is empty (as will be the case when your post or page has no images attached to it), then no further code will execute. If $attachments does have content, then we move on to the next step.

Next, we initialize a simple counter variable so we can keep track of which image we are on. We do this because there are certain things we'll want to output only the first time through our loop (such as the main gallery markup). It also gives us a means to assign unique IDs to each thumbnail in the navigation if we would like.

Then we open the loop that will step through each of our images.

Step 2.3: Main Galley Area

Here we use our counter variable to determine how many times we have been through our loop. If this is the first time, $counter will be equal to zero, and the block of code above will be executed. This code sets up the main structural elements of the gallery and populates the main image section with the first large image. This stuff only needs to happen once. For subsequent trips through the loop, $counter will be greater than zero and this block of code will be skipped.

Ok, so what's actually going on in there? We've already looked at the HTML part in Step 1, so let's focus on the PHP code that inhabits the main gallery area.

In the first section here, we define an array of parameters just like we did in Step 2.1. This time, however, instead of parameters for a query, we are setting parameters for a WordPress function called wp_get_attachment_image.

This function grabs the current attachment (our current image), returns the full size of the image (as opposed to a smaller size such as the Thumbnail; we'll get into that later), and applies attributes to the image HTML tag that correspond to the arguments defined in the $default_attr array. The "alt" and "title" tags of the image are defined as you would expect, and the image is given an ID of #ig-hero so that we can easily target it with CSS.

Finally, we output image title again, this time as the Title which appears below the image. By default, WordPress sets the image Title to be equal to the filename of the uploaded image. So, when you use this technique, either (1) make sure the filenames of the images you upload are something you would like to have displayed on your slideshow, (2) edit the Title field of the images when you upload them, or (3) comment this part of the code out so that the title does not display in the slideshow at all.

Step 2.4: Thumbnail Navigation

Now let's take a closer look at the thumbnail navigation. At the top of this block of code we've repeated the opening of the #ig-thumbs list to help you orient yourself in the code. With that reference point in mind, let's look at the actual list items themselves.

You'll notice that we are using a little snippet of PHP to output the $count variable, plus one, to give each list item its own unique ID. This will give us just one more degree of control over the list items with CSS, should we want it. We use $count+1 so that we don't have to start at zero.

Inside the list item, there is a conditional statement that checks one more time which iteration of the loop we are on. As we have done a few times before, we are setting an array; however, this time it is an attribute for the thumbnail images. The difference here is that we are setting slightly different parameters for the array depending on if we are on the first trip through the loop or not.

We always give the thumbnail a class of "thumb", but on the first trip through the loop we also give the first thumbnail a class of "selected". This is something we will target with CSS later on in order to provide a consistent user experience.

Once the $thumb_attr attributes are set, we use wp_get_attachment_image again to output the image. The main thing to note this time is that we are grabbing the thumbnail version of the image instead of the full size of the image that we grabbed above.

Then, since we are at the end of our loop, we increment our counter and begin the loop again. Once we've exhausted all of our image attachments, we'll hit the end of the loop. When this happens, we close the unordered list, then the whole gallery container, and then our PHP conditional statements.

Step 2.5: Add the Shortcode

It's great have coded up our image gallery, but it is even better if we can display our image gallery! At this point, we still don't have any way to actually show the output on a WordPress Post or Page. We're going to fix that right now, and fortunately this step is easy!

It feels good to have a nice quick win after the big block of code from Step 2.4. Here we're just defining a very simple shortcode so that we will be able to add the gallery to our WordPress posts or pages.

This takes our function, called 'instant_gallery' which is defined above, and creates a new shortcode with an identical name. We can then insert the gallery into our posts or pages using the shortcode [instant_gallery].

There are plenty of in-depth articles about shortcodes out there, including some good ones right here on Wptuts+. If you are new to shortcodes, here are some good starting points:

Step 2.6: Gather Our Thoughts

Whew! Ok, so that's all the code for the gallery itself. The code we've written so far will retrieve a list of image attachments from the current WordPress post or page and then automatically generate a gallery according to the markup we provided. The shortcode then gives us a convenient way to insert our galleries into our posts or pages.

If we upload some awesome images of seahorses and jellyfish and then check our results, here is what we will have at this point:

From a WordPress point of view, we have done what we need to do. Without JavaScript, however, the gallery won't actually do anything. Without CSS, it won't look very good, either. So, let's take a minute to digest what we've done so far, and then we will move on to the next step where we make our gallery come alive!

Step 3 The JavaScript

As you might expect, Instant Gallery relies on the magic of jQuery to achieve the basic level of interactivity that it requires. There are actually two parts to this. The first is loading the jQuery library into our theme correctly, and the second is the actual jQuery code which will create the behavior we need (namely, swapping images and image titles when a thumbnail is clicked).

Both of these parts offer a good opportunity to employ some insights and WordPress best practices, so if you are new to working with jQuery in the context of WordPress, pay special attention!

Step 3.1: Using Enqueue Script to Load jQuery in WordPress

As you may know, jQuery (as well as many other JavaScript libraries) come pre-loaded with WordPress. For the sake of simplicity, we will use the version of jQuery included with WordPress for this example.

This is a good opportunity to use the WordPress wp_enqueue_script function. This is the "right" way to load scripts in WordPress. It ensures that the scripts are loaded at the proper place and time as WordPress executes, and that conflicts are avoided.

The wp_enqueue_script function can be confusing, but fortunately there are plenty of good articles about it out there. Here are some useful resources about wp_enqueue_script:

Notice that we attach this function to the WordPress hook "wp_enqueue_scripts" which loads all the scripts that have been enqueued by "wp_enqueue_script". Subtle difference there, but it is important!

Here is an important note about wp_enqueue_scripts from the WP Codex:

wp_enqueue_scripts hook (instead of the init hook which many articles reference), we avoid registering the alternate jQuery on admin pages, which will cause post editing (amongst other things) to break after upgrades often.

Step 3.2: Using jQuery to Bring Instant Gallery to Life

Now we can move on to the jQuery code that powers the swapping of images and titles. We only need a few lines of code to accomplish this. Some of you out there who are well versed in jQuery may even be able to suggest some more efficient ways to get the job done!

As we did with the WordPress code in Step 2, let's walk through this conceptually before we get into the code itself. When we click on a thumbnail, we want a few things to happen:

  • First and most importantly, we want to swap out the existing image in the main hero position for another large image – the one that corresponds to the thumbnail we clicked on.
  • Second, we want to replace the title of the old image with the one that corresponds to the new image. We will do this by taking advantage of the WordPress file naming scheme. We will talk about how to do that in just a moment.
  • Third, we want to highlight the thumbnail corresponding to our large image at any given time. As we saw in Step 2.4 above, the way we designate this is with a class of 'selected' on the current thumbnail.
  • Finally, when a new image is chosen, we remove the class of 'selected' from all images, and then add it back again to the newly selected thumbnail.

So, with those key actions in mind, let's see what this looks like in jQuery:

Fortunately, the jQuery code is relatively simple, and corresponds nicely to our bullet list of required actions above.

The code is pretty well-documented, so if you don't understand a line, the comments should help. Even so, let's break down the jQuery, line by line (leaving aside the generic "wrapper function" of ( function ($) { } ) which we will discuss in a moment).

The line that begins $('#ig-thumbs').delegate is what defines the scope of our function. It is saying, whenever someone clicks on an image object (img) inside a container with an ID of #ig-thumbs, then execute the actions within the function.

The next line, which begins $('#ig-hero'), handles the actual swapping of our current image for the large image that corresponds to the thumbnail that was clicked. In this jQuery function, the thumbnail that was clicked is referred to as "this" because it was the subject of the action "click"; it is the thing that was clicked upon and triggered the function.

The method for accomplishing the image swap takes advantage of the WordPress file naming scheme. For example: When you upload an image called my-image.jpg, WordPress will create several different sizes of that image. One automatically created size will be a "Thumbnail" size which is, by default, a 150x150 square cropped out of your original image. WordPress will name this file my-image-150x150.jpg. It simply adds a "-150x150" to the end of your filename, right before the file extension.

So, if we want to replace a thumbnail version of an image with the full-sized version of that image, then we just have to remove the "-150x150" from the filename. This is what our jQuery is doing to swap the images.

If we wanted to replace the thumbnail with a different size of the image, but not the full sized image, we would need to know the dimensions of that other size, and then we could just switch the dimensions. For example, if we wanted to switch out my-image-150x150.jpg for a Medium sized image of 600x300, then we would just use the jQuery code to swap the "-150x150" with a "-600x300", and we would be left with my-image-600x300.jpg.

Next, with the line that begins $('#ig-thumbs li img'), we just remove the CSS class of "selected" from all of the thumbnails, and then the line below that adds the class of "selected" to "this"; that is, the image that was clicked.

Finally, with the line that begins $('#ig-title'), we switch the Title of the old image with that of the new image. This line takes the contents of a containing element with an ID of #ig-title

Step 3.3: Using jQuery in the Context of WordPress

Now, since we are performing all of these operations within the context of WordPress, we should be aware of an important detail about how WordPress loads jQuery.

WordPress runs jQuery in "no conflict mode" so as to avoid conflicts with other JavaScript libraries. In practical terms this means that the useful $ shortcut commonly used in jQuery won't work in WordPress by default.

Fortunately, this topic has been discussed at length already. If you are interested in learning more about the reasons for this, Chris Coyier has a great article on Digging Into WordPress that addresses precisely this issue. For the purposes of this article, we just need to wrap our jQuery function in a generic function to re-enable use of the $ shortcut within our code snippet.

Finally we add this code using a built in WordPress hook – wp_footer – to load the script correctly and only after the rest of the page has loaded.

With the jQuery in place, let's take a look at what we have so far. Now our gallery is interactive, and clicking on one of the thumbnails correctly replaces the main image and corresponding title. In the example image below, you can see that we've clicked on the second thumbnail and both the main image and its title have been replaced as we would expect.

So, it works, but it still doesn't look very good. Fortunately, we can tidy things up with some basic CSS. And that's just what we'll do in the next step.

Step 4 The CSS

Step 4.1: CSS for Instant Gallery

Now it is finally time to style our creation and make it look more like an actual image gallery. Since the major focus of this tutorial was on the WordPress and jQuery functionality, I've kept the CSS for this gallery extremely simple. Here is the CSS code for the gallery:

There is nothing too complicated about our CSS. Just the basic selectors and styles necessary to create the gallery. If you want to modify the CSS to make your gallery a bit more fancy, I have provided all of the selectors you would need to do so.

One thing to notice here is that I've constrained the size of the thumbnails to 75x75 instead of the 150x150 size at which we retrieved them from WordPress. The 150x150 size is a little too large for my tastes; I like the smaller thumbnails so you can fit more under the gallery. If you want to use a different size, all you have to do is change the width and height of the thumbnail images on the two lines marked on the CSS.

Step 4.2: Using Enqueue Style to Load CSS in WordPress

Perhaps more interesting than the CSS itself is the manner that we use to load it. We could just do a simple link tag and hook it into our header using the wp_head hook, but there is a better way.

Taking a hint from the enqueue_script function that we used to load jQuery, we can use a similar function, wp_enqueue_style, to load our style sheet. As with enqueue_script, this is the preferred way to load stylesheets within WordPress. It is good to practice these techniques even with simple projects such as this because it allows you to focus on understanding the technique and why it works without worrying about debugging massive amounts of code. There is a certain satisfaction in doing something simple very well!

So that is how you use wp_enqueue_style. Very similar to enqueue_script. You'll notice that there is another command in here as well: wp_register_style. This function simply registers a CSS file with WordPress for later use with wp_enqueue_style.

Now our image gallery finally looks as good as it functions!

All Together Now

Check out the finished product:

It looks very simple, and that's exactly what we want. The point of this gallery is to be the simplest, fastest way to automatically generate an image gallery from images uploaded to a WordPress post of page, nothing more!

Please feel free to check out a live demo of Instant Gallery for WordPress on my personal website.

The completed code is too long to display here in full, so please feel free to download the source files (at the top of the article) and have a look at everything on your own.

Conclusion

We have just created an instant image gallery with thumbnail navigation for a WordPress!

Throughout this tutorial I've done my best to incorporate good practices on everything from clear markup, semantic CSS, and even the way stylesheets and javascript are loaded. If you played along and worked through the steps, then I hope you learned a new technique or two. If you are just here for the finished code, I hope you find it useful and that you can use it confidently and with the knowledge that you are using some simple code that was made with love.

As with all coding projects, there are always ways to make improvements. If you can think of any way to make this code better or more robust, I welcome any and all constructive feedback in the comments!

I also welcome any and all suggestions on how to improve the plugin and make it more powerful or elegant. I am not very interested, however, in making it more complicated or adding a bunch of features. There are lots of full featured image galleries out there already, and I would like this one to remain simple and fulfil one very specific purpose.

Finally, I would like to thank Japh Thomson for giving me the opportunity to write for Wptuts+, and thank Envato for building a great educational community on the web. Most importantly, thank you for reading!

I look forward to your feedback, please let me know in the comments if you use Instant Gallery on any of your websites!

Advertisement
Did you find this post useful?
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.