Advertisement
  1. Code
  2. Creative Coding

Membuat Portofolio yang Dapat Difilter dengan WordPress dan jQuery

Scroll to top
Read Time: 17 min

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

Pelajari dalam tutorial ini bagaimana membuat Portofolio yang dapat difilter dengan jQuery terintegrasi dengan WordPress, ingat bahwa jenis portofolio ini dapat membuat perbedaan besar pada tema Anda!


Langkah 1: Pendahuluan

Anda dapat menggunakan kode dari tutorial ini dalam tema apa pun yang sudah Anda buat atau sedang Anda buat, kita akan mengikuti langkah-langkah sederhana dan dalam kasus saya, saya akan menggunakan tema Twenty Eleven default dan berjalan di WordPress 3.3. Oke, mari bekerja!

Oke, mari kita bekerja!Anda dapat menggunakan kode yang digunakan dalam tutorial ini dalam tema apa pun yang sudah Anda buat atau sedang Anda buat.


Langkah 2: Membuat Item Proyek di Admin

Kita harus membuat bagian di bilah Admin yang disebut Project, di bagian ini Anda akan membuat semua entri portofolio dengan masing-masing thumbnail dan tautan demo.

Buka file functions.php dan pada bagian akhirnya, mari kita buat fungsi untuk mendaftarkan item Project. (Anda dapat melihat fungsi lengkap di akhir langkah ini)

Dalam kode ini kita menggunakan fungsi add_action sehingga ketika WordPress mulai memuat, fungsi kita akan dipanggil.

Di dalam fungsi project_custom_init, tambahkan kode yang mendaftarkan Jenis Posting Kustom yang disebut Project.

Kode di atas akan menambahkan item pada menu Admin yang disebut Portofolio dan akan berada di bagian ini yang kita akan membuat semua item portofolio.

Sekarang, di dalam fungsi, mari tambahkan lebih banyak kode.

Perhatian pada argumen 'hierarchical' pada fungsi register_taxonomy, jika Anda mengetikkan true, Anda akan memiliki sistem seperti kategori untuk item portofolio Anda, tetapi jika Anda mengetikkan false, Anda akan memiliki sistem seperti tag. Saya lebih menyukai sistem gaya kategori.

Oh yeah! Fungsi project_custom_init() sudah selesai! Lihat di bawah untuk mendapatkan kode lengkap dari fungsi ini.

Jika Anda pergi ke Admin sekarang, Anda akan melihat item baru di menu bernama Portofolio seperti gambar di bawah ini:

Mari kita membuat fungsi baru yang akan memastikan pesan bagus ditampilkan ketika pengguna, misalnya, membuat item baru di portofolio atau sesuatu seperti ini.

Kode di bawah ini harus diketik di bawah fungsi terakhir kita dan bukan di dalamnya.

Fungsi ini membuat pesan kustom untuk saat pengguna memodifikasi posting portofolio, lihat contoh pesan pada gambar di bawah ini:

Anda dapat melihat bahwa hanya dengan kode ini Anda dapat menambahkan tag/kategori ke portofolio Anda dan membuat item portofolio baru! Tapi mari kita tambahkan lebih banyak fitur, ide bagus? Pasti!

Menambahkan Kotak Meta URL Demo

Pada langkah ini, kita akan menambahkan kotak meta pada layar pembuatan item portofolio tempat pengguna dapat menempelkan url ke situs web atau halaman lain.

Mari membuat tiga fungsi untuk menambahkan kotak meta ini di mana kita akan menyimpan URL untuk item portofolio. Kode berada di bawah fungsi terakhir yang kita buat.

Saya tidak akan menjelaskan secara rinci kode ini karena Anda dapat belajar tentang kotak meta dalam tutorial ini: Kotak Meta Kustom yang Dapat Digunakan Kembali atau hanya melakukan sedikit pencarian melalui Codex WordPress atau di Google.

Kode di atas hanya membuat satu kotak meta dengan satu field tempat pengguna dapat mengetikkan URL. Kita membutuhkan semua fungsi ini, yang pertama hanya menginisialisasi kotak meta, yang kedua adalah kode kotak meta, dan yang terakhir adalah fungsi untuk menyimpan data.

Ok! Setelah ini, kita bisa melanjutkan ke langkah berikutnya dan bekerja di front-end, karena back-end selesai! Kita kemudian akan menambahkan konten setelahnya.


Langkah 3: Membuat template Halaman Portofolio

Sekarang kita akan bekerja untuk menunjukkan entri portofolio kita kepada pengguna! Tapi pertama-tama mari membuat beberapa kategori dan kemudian tambahkan beberapa item ke portofolio.

Dalam tutorial ini saya akan menggunakan tata letak portofolio dua kolom, dengan beberapa penyesuaian pada markup dan CSS, Anda dapat membuat banyak tata letak!

Beberapa tips untuk membuat item portofolio

  • Buat tag/kategori terlebih dahulu
  • Di halaman "Add New Project" Anda akan memiliki editor seperti editor posting/halaman, lalu cukup ketik semua teks dan gambar yang akan dilihat pengguna Anda saat mereka mengklik tautan "More Details"
  • Untuk menambahkan thumbnail kita akan menggunakan Featured Image yang merupakan fitur WordPress default
  • Dalam tutorial ini saya akan menggunakan gambar dengan 400px x 160px (lebar dan tinggi), tetapi jangan ragu untuk menggunakan salah satu yang Anda suka dan yang sesuai dengan tata letak Anda
  • Gunakan http:// sebelum tautan pada kotak meta sehingga Anda tidak mendapatkan kesalahan 404 not found

Ok, hal pertama yang harus kita lakukan sekarang adalah membuat Template Halaman baru yang disebut "Portfolio 2 Columns", jadi mari kita lakukan!

Membuat Template Halaman

Pertama, duplikasi file page.php. Kemudian, ganti namanya menjadi page_portfolio_2c.php.

Kita perlu mengedit file baru ini dan menempelkan kode di bawah ini pada baris pertama file:

Ini akan menunjukkan opsi baru pada layar pembuatan halaman, tetapi ingat bahwa kode ini HARUS ditempelkan pada baris pertama file!

Sekarang hapus semua konten di dalam div konten, dalam tutorial ini, saya menggunakan tema Twenty Eleven dan setelah menghapus, saya memiliki kode ini di file saya:

Jika Anda menggunakan tema Anda sendiri, hapus semua baris yang mendapatkan konten dari halaman Anda, seperti the_content() misalnya. Kita akan membuat beberapa kode kustom, jadi jangan tinggalkan kode lain di sini, di halaman portofolio kita hanya butuh proyek Anda!

Sekarang, buka Admin WordPress dan buat Page baru bernama "Portofolio" dan jangan lupa pilih "Portfolio 2 Columns" di field Template, seperti gambar di bawah.

Cukup tambahkan judul dan biarkan isinya kosong, kita tidak membutuhkannya.

Jika Anda mencoba mengakses halamannya sekarang, Anda hanya akan mendapatkan header, footer, dan konten kosong. Jadi, mari tambahkan kehidupan ke portofolio yang dapat difilter!


Langkah 4: Portofolio Filterable jQuery

Mari kita bicara sedikit tentang plugin yang akan kita gunakan untuk membuat portofolionya.

Plugin

Dalam tutorial ini saya akan menggunakan plugin yang disebut Filterable, plugin ini dibuat oleh GetHifi.

Plugin ini ditulis tanpa mode kompatibilitas jQuery, jadi saya hanya mengubahnya dan versi yang berfungsi baik dengan WordPress ada di file Kode Sumber untuk tutorial ini.

Plugin ini agak tua, tepatnya, dari tahun 2009, tetapi ada di Lisensi MIT, jadi Anda dapat menggunakannya pada tema premium, situs komersial, dan di mana pun yang Anda suka.

Unduh saja skrip yang dimodifikasi yang ada di Kode Sumber (tautan di bagian atas tutorial) dan mari kita mulai! Jika Anda suka, kunjungi beranda untuk mendapatkan detail lebih lanjut tentangnya.

Cara kerja Filterable

Menggunakan Filterable sangat sederhana! Langkah pertama adalah menggunakan markup yang tepat, plugin mengharapkan markup seperti contoh di bawah ini:

Di sini kita memiliki item filter, ketika kita mengklik salah satu tautan ini, maka semua keajaiban akan terjadi. Penting: semua entri akan membutuhkan kelas dengan teks yang sama dalam atribut 'href' dan 'rel'.

Dan sekarang, kita memiliki markup item portofolio:

Penting: Yang penting di sini adalah semua item (li) harus berada di dalam (ul), dengan kata lain, harus dibungkus. Perhatikan bahwa kita menggunakan div juga, kita menggunakannya karena kita akan 'float' elemen li, jadi penting untuk memiliki pembungkus lain dan membersihkan div untuk menghindari masalah struktur yang rusak.

Setelah ini, kita harus memanggil skrip filterable dalam file functions.php dan menginisialisasi portofolio filterable dengan memanggil fungsi filterable(), seperti kode di bawah ini:

Tetapi untuk saat ini, kita akan menambahkan markup kustom kita di dalam li, tetapi, kita harus membuat semua filter dan nama kelas dengan PHP untuk mendapatkan semua kategori, entri portofolio dan semua detail lainnya dari WordPress! Mari bekerja!

Membuat Filter Portofolio

Mari kembali ke file page_portfolio_2c.php dan tulis filter portofolio. Kode sebenarnya adalah sesuatu seperti kode di bawah ini:

Kita perlu mendapatkan semua istilah/kategori dari WordPress, mengedit beberapa nama untuk digunakan di dalam atribut kelas dan mencetak ul untuk template yang diperlukan.

Kita akan mengetikkan kode berikut di dalam div #content:

Kode di atas akan menghasilkan ul dengan elemen default 'All', dan melakukan pengulangan pada istilah untuk mencetak semua kategori lain yang memiliki entri. Mari kita lakukan penjelasan yang lebih detail:

Pertama, kita membuat variabel yang disebut $terms, dan kita menggunakan fungsi get_terms() yang mengembalikan array dengan semua istilah. Sebagai parameter, fungsi ini membutuhkan string atau array string dengan nama taksonomi, kita melewati tagportfolio, itu adalah nama yang kita gunakan dalam file functions.php kita. Anda bisa mendapatkan info lebih rinci di bawah get_terms() di Codex WordPress.

Kemudian, kita membuat variabel yang disebut $count dan menggunakan fungsi count() untuk mendapatkan jumlah total elemen dalam array, kita mencetak markup default dan item All.

Setelah itu, kita memverifikasi jika variabel $count lebih besar dari nol, jika ya, kita memiliki setidaknya satu kategori dengan item untuk dicetak.

Di dalam if, kita membuat perulangan foreach untuk mendapatkan semua nilai array, dan membuat elemen li yang berbeda untuk setiap elemen dalam array $terms.

Di dalam foreach, kita membuat variabel yang disebut $termname untuk menyimpan nama term, ingat bahwa kita mengubah teks ke huruf kecil, karena variabel ini akan digunakan di dalam atribut kelas.
Kemudian, kita hanya mengganti spasi putih dengan sebuah - menggunakan fungsi str_replace, baris ini akan memungkinkan Anda untuk menggunakan kategori/istilah dengan lebih dari satu kata, seperti "WordPress Themes" misalnya.
Dan terakhir, kita mencetak elemen li dan menggunakan variabel kita untuk mencetak data di tempat yang tepat.

Jika Anda menguji sekarang, Anda akan melihat daftar kategori/istilah dengan nama yang Anda buat di Admin WordPress. Sekarang, mari kita kerjakan item-itemnya.

Menampilkan Item Portofolio

Sekarang mari tampilkan item portofolio, kita perlu melakukannya mengikuti template yang diperlukan yang ditunjukkan di atas.

Kita akan melakukannya hanya dengan menambahkan kode di bawah ini:

Banyak baris kode, bukan? Tapi jangan khawatir, saya akan menjelaskan kodenya untuk Anda.

Langkah pertama adalah membuat kueri kustom, kita melakukannya dengan fungsi WP_Query, saya meneruskan sebagai parameter jenis posting kustom "project", yang kita buat di file functions.php. Kueri ini akan mendapatkan semua proyek yang Anda buat.

Lalu, saya melakukan perulangan seperti biasanya dengan pameran posting, misalnya.

Di dalam while, kita melakukan proses yang sama yang digunakan pada pembuatan filter, tetapi di sini kita membuat array yang disebut links tempat kita akan menyimpan semua istilah dari posting. Perhatikan bahwa sekarang, di luar nama taksonomi kita mengirimkan ID posting di get_the_terms().

Kemudian, kita menggunakan join dan membuat string unik dengan semua elemen array, jika istilah posting adalah "WordPress" dan "Desain", variabel $tax akan sama dengan "wordpress desain", kita akan menggunakan ini untuk menambahkan kelas yang sesuai untuk memungkinkan portofolio dapat difilter.
Jika pos tidak memiliki istilah, kita hanya menetapkan $tax sama dengan string kosong.

Setelah ini, kita membuat variabel yang disebut $infos di mana kita akan mendapatkan url demo dari Custom Post Field yang dibuat dalam file functions.php

Kemudian, kita hanya mencetak markup template dan menggunakan fungsi seperti get_the_excerpt(), the_post_thumbnail (perhatikan bahwa Anda dapat mengubah dimensi agar sesuai dengan tata letak Anda, jika Anda misalnya, ingin membuat portofolio tiga kolom.)

Jika Anda memperbarui halaman, Anda akan melihat semua item yang tercantum, tetapi filter masih tidak berfungsi. Mari memperbaikinya!

Menggunakan Filterable di WordPress

Sekarang, mari gunakan plugin kita. Apakah Anda sudah mengunduhnya? Jika ya, salin dan tempel file filterable.js di dalam folder js/.

Dalam file functions.php, mari tambahkan perpustakaan jQuery ke tag 'head' terlebih dahulu. Untuk melakukannya, kita akan menggunakan fungsi kustom dan fungsi wp_enqueue_script.

Sekarang, kembali ke file page_portfolio_2c.php dan di bawah kode terakhir yang ditambahkan tetapi di dalam div konten, tambahkan kode berikut:

Ini hanya menautkan plugin ke halaman dan memanggil fungsi filterable() untuk membuat portofolio kita dapat difilter.

Kode Penuh


Langkah 5: Beberapa gaya

Sekarang kita telah mengkodekan semua yang kita butuhkan, mari menambahkan beberapa CSS ke file style.css kita, jika Anda memiliki file lain, tambahkan saja kodenya di sana.

Sekarang, jika Anda menguji lagi, Anda akan mendapatkan portofolio yang dapat difilter yang bagus! Wow, semua pekerjaan sudah selesai!


Kesimpulan

Dan selesai! Sekarang Anda tahu cara membuat portofolio yang dapat difilter yang menakjubkan dengan plugin jQuery gratis yang dapat Anda gunakan dalam pekerjaan apa pun yang Anda kerjakan.

Saya harap Anda menikmati kontennya, terima kasih banyak telah membaca!

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.