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

Buat Portofolio Quicksand Dengan WordPress

by
Read Time:20 minsLanguages:

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

Hari ini, Anda akan mengubah portofolio sederhana Anda menjadi sesuatu yang menakjubkan dengan keajaiban Quicksand oleh Razorjack.


Pengenalan

Pernah ingin menggunakan Quicksand plugin jQuery? Pernah mencoba mengimplementasikannya dengan WordPress? Tetapi, merasa mimpi buruk untuk melakukan keduanya? Baiklah, saya akan melalui panduan langkah-demi-langkah sederhana untuk membawa Anda dari tema WordPress kosong ke portofolio kustom yang indah dengan menggunakan Quicksand. Saya akan menggunakan tema khusus yang telah dipreteli untuk keperluan tutorial ini bersama dengan WordPress 3.0+.

Jadi buka editor teks favorit Anda dan mari kita mulai!


Langkah 1 Buat Jenis Posting

Dengan WordPress, kita dapat membuat jenis posting khusus dimana dapat mengelola semua konten. Kita akan membuat jenis pos kustom untuk menyimpan semua item portofolio di bagian admin khusus.

Untuk manajemen kode yang mudah, mari kita mulai dengan membuat folder bernama portofolio dan file PHP yang disebut portfolio-post-types.php (atau apa pun yang menurut Anda cocok).

Setelah Anda membuat file, mari tambahkan beberapa kode...

Mari kita mulai dengan membuat fungsi:

Sekarang kita telah membuat fungsi kosong, mari tambahkan beberapa kode untuk membuat fungsi ini melakukan sesuatu yang istimewa. Pertama, buat label untuk jenis posting khusus. Masukkan kode berikut dalam fungsi post_type:

Rincian kode yang baru saja ditulis:

Variabel 'label' adalah larik string yang mewakili jenis posting Anda, masing-masing string adalah teks yang merupakan output untuk fungsi tertentu.

  • name - Bentuk jamak dari nama jenis posting Anda.
  • singular_name - Bentuk tunggal dari nama jenis posting Anda.
  • rewrite - Menulis ulang permalink dengan format ini.
  • add_new - Item menu untuk menambahkan posting baru.
  • edit_item - Header ditampilkan saat mengedit posting.
  • new_item - Ditampilkan di menu favorit di header admin.
  • view_item - Ditampilkan di samping permalink pada layar edit posting.
  • search_items - Tombol teks untuk kotak pencarian pada layar edit tulisan.
  • not_found - Teks untuk ditampilkan ketika tidak ada posting ditemukan melalui pencarian di admin.
  • not_found_in_trash - Teks untuk ditampilkan ketika tidak ada posting di tempat sampah.
  • parent_item_colon - Digunakan sebagai label untuk posting induk pada layar edit posting. Hanya berguna untuk jenis posting hierarkis.

Selanjutnya, buat argumen untuk jenis posting khusus kita. Masukkan kode berikut ke dalam fungsi post_type:

  • labels - Array label untuk jenis posting ini.
  • public - Argumen Meta digunakan untuk menentukan nilai default untuk publicly_queriable, show_ui, show_in_nav_menus dan exclude_from_search.
  • publicly_queryable - Apakah queries jenis posting dapat dilakukan dari ujung depan.
  • show_ui - Apakah akan menghasilkan interface pengguna default untuk mengelola jenis posting ini.
  • query_var - Salah untuk mencegah permintaan, atau nilai string dari var permintaan untuk digunakan untuk jenis posting ini.
  • rewrite - Menulis ulang permalink dengan format ini.
  • capability_type - String yang digunakan untuk membangun kemampuan membaca, mengedit, dan menghapus.
  • hierarchical - Apakah jenis posting hirarkis. Mengizinkan orang tua ditentukan.
  • menu_position - Posisi dalam urutan menu jenis posting akan muncul di admin.
  • supports - Sebuah alias untuk memanggil add_post_type_support() secara langsung.

Baca lebih lanjut tentang add_post_type_support di WordPress Codex

Sekarang tipe posting kita sudah diatur dengan pengaturan, kita perlu mendaftarkan tipe posting. Kita mendaftarkan jenis posting dengan memasukkan kode berikut ke dalam fungsi post_type:

Format Output Jenis Posting Kustom

Kita sekarang telah membuat jenis pos kustom. Mari memformat output, sehingga kita bisa mendapatkan pesan yang ramah pengguna. Mulailah dengan membuat fungsi lain dalam file portfolio-post-type.php.

Apa yang baru saja kita lakukan adalah membuat fungsi bernama portfolio_messages yang mengambil argumen yang disebut $messages. Setelah ini, kita membuat variabel yang menyimpan array untuk semua pesan. Kita membiarkan "0" kosong dalam array karena kita mulai mengindeks pada 1 dengan pesan. Kemudian akhirnya kembalikan array ke fungsi kita.

Membuat Taxonomy

Akhirnya, kita perlu menciptakan taxonomy. Mulailah dengan membuat fungsi lain yang disebut portfolio_filter dan masukkan kode berikut:

Kita mulai dengan mendaftarkan taxonomy dan kemudian menerapkan taxonomy pada portofolio jenis pos kustom. Setelah ini, kita menerapkan pengaturan akhir taxonomy dan memasukkan label yang dibuat. Alasan membuat taxonomy adalah karena kita akan menggunakannya sebagai kunci referensi saat menyortir portofolio dengan Quicksand.

Sekarang semua jenis pos kustom selesai bersama dengan pemformatan yang benar dan taxonomy kita sendiri, akhirnya kita perlu menginisialisasi semua kode sehingga akan ditampilkan di admin. Mari kita mulai dengan menambahkan kode berikut di bagian bawah file kita:

Setelah memasukkan ini, kita perlu membuka file functions.php dan menyisipkan baris kode berikut:

Kita perlu memasukkan jenis portofolio khusus ke dalam file functions.php agar skrip dijalankan ketika fungsi-fungsi tema WordPress Anda dipanggil. Sekarang Anda akan melihat di panel admin Anda bagian berjudul Portofolio dengan 3 item sub-navigasi yang disebut "Portofolio", "Add Item", dan "Filter".


Langkah 2 Buat Halaman Portofolio

Sekarang kita telah menyelesaikan seluruh pengaturan portofolio , Kita perlu menampilkan item portofolio. Dimulai dengan membuat file PHP baru yang disebut portfolio.php. Pertama-tama mari tambahkan beberapa hal penting untuk pembuatan templat halaman:

Sekarang, kita telah membuat templat halaman dasar yang dibutuhkan untuk mengisi portofolio. Kita perlu membuat halaman pertama yang akan bertindak sebagai halaman Portofolio kita, jadi pergilah ke Pages -> Add New Baru di Dashboard kita. Di sisi kanan, Anda akan melihat kotak berjudul Page Attributes dengan drop-down Default Template, pilih template yang diinginkan yang ingin Anda gunakan dalam portofolio kasus kita harus dipilih dan kemudian pilih publish.

Tampilkan Filter

Sekarang, mari kita kembali mengedit template halaman Portofolio dan mulai memasukkan filter untuk portofolio. Pertama, kita mulai dengan membungkus filter dalam daftar yang tidak berurutan dan masing-masing kategori akan menjadi elemen dalam daftar kita.

Mari tambahkan beberapa PHP ke filter kita untuk secara otomatis menghasilkan kategori filter yang sedang digunakan dalam portofolio.

Apa yang dilakukan di sini adalah pertama-tama menginisialisasi taxonomy yang ingin didapatkan, dalam filter kasus. Kedua, siapkan penghitungan dengan kategori agar kita menambah setiap elemen dalam filter, dan kemudian terapkan pernyataan bersyarat untuk memeriksa apakah penghitungan yang ditetapkan kurang dari 0; artinya jika tidak ada kategori dalam filter atau tidak ada kategori yang ditetapkan untuk item portofolio, tidak ada yang akan dihasilkan. Jika ada kategori di filter, maka kita ingin mengubah output untuk setiap elemen.

Kita melakukan ini dengan baris berikut dalam segmen kode:

Kita membuat elemen daftar agar sesuai dengan daftar yang tidak diurut, dan kemudian mengatur "href" menjadi target kosong karena Quicksand akan menangani pengorganisasian konten, kemudian kita menetapkan nama kelas kami ke slug item portofolio untuk referensi yang konsisten, dan akhirnya menampilkan nama kategori dalam filter.

Tampilkan Item Portofolio

Cemerlang, kita sekarang menerapkan filter dinamis. Sekarang kita akan menampilkan item portofolio kita. Mari kita mulai menanyakan database untuk mendapatkan semua posting untuk jenis posting portofolio dan mengatur WordPress Loop. Kita mulai dengan menyiapkan objek WP_Query baru dan memberikan parameter yang benar.

Kita menetapkan objek WP_Query ke variabel sehingga kit dapat mereferensikan query ketika kita menginisialisasi Loop. Aatur jenis posting ke portofolio sehingga kita hanya menanyakan jenis posting kustom yang dibuat sebelumnya dan akhirnya mengatur posts_per_page menjadi -1. Kita menggunakan -1 sehingga tidak ada batasan tetap untuk jumlah posting per halaman, karena itu menampilkan semua item portofolio, jika mau, kita juga bisa memasukkan nomor apa pun dan hanya akan menampilkan jumlah item portofolio yang dimasukkan di sini.

Sekarang kita memiliki objek kueri yang dapat kita rujuk, mari atur Loop kita untuk menampilkan item portofolio kita. Kita mulai dengan memasukkan kode berikut:

Sebelum kita mulai memasukkan konten ke dalam loop kita, kita akan mengatur gambar unggulan. Buka file functions.php Anda dan kita akan menambahkan beberapa ukuran gambar fitur khusus untuk menjadi output untuk setiap item portofolio.

Mari kita periksa dulu apakah versi WordPress saat ini menangani fungsionalitas gambar unggulan, dan kemudian mengatur beberapa pengaturan umum agar berfungsi dengan benar. Kita menambahkan dukungan untuk thumbnail-post dan menetapkan ukuran default 56px x 56px.

Lalu kita ingin menambahkan ukuran thumbnail khusus sendiri. Masukkan kode berikut pada baris di bawah ini: set_post_thumbnail_size

Metode ini memungkinkan Anda untuk membuat ukuran thumbnail Anda sendiri dengan terlebih dahulu mengatur nama referensi untuk thumbnail, kemudian lebar dan tinggi dan akhirnya jika thumbnail harus memotong gambar agar sesuai dengan ukuran yang ditentukan. Anda dapat mengubah ukuran gambar unggulan Anda agar sesuai dengan tata letak Anda; dengan tujuan tutorial ini saya memiliki tata letak kotak 3 kolom.

Sekarang setelah kita menyiapkan Gambar Unggulan, kita akan kembali ke templat halaman portofolio dan menampilkan gambar item portofolio yang ditampilkan.

Karena organisasi untuk setiap item portofolio paling baik ditangani oleh daftar yang tidak berurutan, pertama-tama kita akan membuat satu dan kemudian menampilkan gambar unggulan yang baru saja disiapkan. Masukkan kode berikut di dalam Lingkaran WordPress Anda:

Kita awalnya memeriksa apakah tema mendukung fungsi thumbnail. Jika tema mendukung fitur ini maka itu akan menampilkan gambar fitur pada thumbnail khusus yang telah ditentukan sebelumnya. Setelah menampilkan gambar unggulan, kita kemudian menampilkan judul item Portofolio langsung di bawah gambar.

Hubungkan Item & Filter Portofolio

Kita perlu mengubah elemen yang berbeda dari setiap item daftar portofolio untuk memastikan bahwa referensi untuk masing-masing portofolio sesuai dengan kategori item yang ditugaskan. Untuk ini, pertama-tama kita perlu mendapatkan kategori dari taksonomi kita. Masukkan kode berikut dalam Loop Anda:

Selanjutnya, kita akan menambahkan beberapa atribut ke elemen daftar kita (li). Kita mulai dengan menambahkan id-data ke item daftar, untuk memberikan identitas unik untuk masing-masing item portofolio. Kita juga akan menambahkan data-type; ini akan bertindak sebagai referensi kita ke filter. Mari ganti elemen (li) daftar pembuka dengan kode berikut:

Kita menerapkan hitungan ke data-id, dan saat mengulangi setiap item, jumlah tersebut akan bertambah (kita akan segera menambahkan jumlah tersebut). Kemudian mengulangi setiap kategori dalam taxonomy dan menerapkan ekspresi reguler untuk menemukan spasi dan menggantinya dengan "-" untuk mencocokkan slug kategori dan akhirnya menempatkan ruang kosong di bagian akhir, sehingga dapat menerapkan lebih dari satu kategori ke item portofolio.

Akhirnya, kita akan memastikan bahwa menambah jumlah dan memberikan referensi unik untuk masing-masing item portofolio. Kita perlu menambahkan kode berikut sebelum mengakhiri loop:

Kode Akhir untuk Menampilkan Portofolio


Langkah 3 jQuery & Quicksand

Kita sedang membuat kemajuan sekarang, tetapi sebelum melanjutkan, harus membuka dan mengunduh beberapa skrip jQuery. Kita perlu mengunduh skrip berikut:

Kita juga perlu membuat file JavaScript untuk menangani semua jQuery khusus kita yang akan segera ditulis. Jadi mari kita buat file JavaScript kosong bernama jquery.custom.js. Sekarang kita memiliki semua skrip esensial kita, mari kita buka functions.php kita dan membuat fungsi kosong yang disebut register_js. Setelah kita memiliki fungsi kosong, kita akan menyisipkan skrip menggunakan metode wp_register_script dan wp_enqueue_script. Pertama, kita harus memeriksa bahwa kita tidak di admin untuk memastikan skrip hanya dimuat di ujung depan. Masukkan kode berikut ke dalam fungsi:

Pertama dengan wp_register_script menetapkan pegangan sebagai argumen pertama kita untuk referensi ketika membuat skrip, kemudian menambahkan tautan sumber ke skrip sebagai argumen kedua (ini berlaku untuk setiap pendaftaran skrip). Kita juga menentukan jquery sebagai ketergantungan untuk memuat versi jQuery yang disertakan WordPress ketika membuat skrip.

Setelah kita mendaftarkan semua skrip, kita kemudian membuatnya kembali dengan menggunakan wp_enqueue_script. Kita melewati semua pegangan yang digunakan saat mendaftar sebagai referensi untuk membuat skrip lebih jelas. Akhirnya, kita perlu menginisialisasi fungsi dengan menambahkan kode berikut dalam file functions.php:

Menulis Quicksand

Sekarang setelah kita memiliki semua skrip, kita dapat mulai menulis skrip khusus jQuery untuk penanganan Quicksand. Mari kita buka skrip jquery.custom.js dan mari kita atur lingkungan dengan memasukkan kode berikut:

Sekarang kita memiliki struktur skrip kita, kita akan membuat fungsi yang disebut portfolio_quicksand dan hanya mengeksekusi jika plugin Quicksand ada.

Saya akan memecah berikut ini menjadi langkah-langkah kecil bagi Anda untuk memahami semua yang terjadi saat membuat portofolio Quicksand. Mari kita mulai dengan mengatur variabel kita. Masukkan kode berikut ke fungsi portfolio_quicksand:

Kita akan lebih sering menggunakan variabel-variabel ini, jadi selalu merupakan cara yang baik untuk mendapatkan fondasi variabel yang solid. Selanjutnya kita akan menetapkan variabel kita:

Kita pertama-tama mengatur filter ke kelas daftar tidak berurutan dari templat halaman portofolio. Kedua, kita menyiapkan filterLink; ini akan bertindak sebagai item yang diklik dalam filter. Maka kita perlu menetapkan wadah item portofolio kita, dan akhirnya kita membutuhkan versi kloning wadah kita, untuk memanipulasi data dengan Quicksand.

Selanjutnya, kita akan menulis fungsi klik kita, jadi ketika pengguna memilih kategori wadah harus dimanipulasi dan output dari konten akan ditampilkan. Mari kita mulai dengan memanggil fungsi klik pada filterLink:

Sekarang mari kita menangani keadaan aktif elemen daftar. Kita mulai dengan terlebih dahulu menghapus kelas apa pun dengan status aktif saat ini, kemudian mencari melalui filter dan memisahkan filter menjadi item yang terpisah, dan akhirnya menerapkan kelas aktif ke item yang diklik (kategori):

Ini akan membantu ketika menata filter Anda, karena Anda akan dapat memberikan status active ketika pengguna telah memilih kategori.

Selanjutnya, kita akan menangani kondisi untuk pemfilteran data kami. Dimulai dengan terlebih dahulu memeriksa apakah semua telah dipilih. Jika semua telah dipilih maka tampilkan semua elemen dalam wadah, selain itu tampilkan item dalam wadah yang telah dipilih oleh filter.

Sebelumnya, ketika kita membuat templat halaman portofolio dan menetapkan data-type untuk masing-masing item portofolio, ini adalah tempat kita akan menggunakannya sebagai kunci referensi untuk menemukan data yang dipilih.

Akhirnya, kita memanggil metode Quicksand, dan meneruskan filteredItem dan semua opsi animasi:

Kode Final untuk Quicksand Kita


Langkah 4 Integrasi Lightbox (Ekstra Tambahan)

Luar biasa, Anda seharusnya sekarang memiliki portofolio Quicksand yang berfungsi penuh, tetapi jangan berhenti di situ. Saya akan menambahkan tambahan, ini benar-benar opsional tetapi bisa menjadi fitur favorit, dan itulah Lightbox. Kita akan menggunakan plugin jQuery yang disebut PrettyPhoto untuk integrasi Lightbox.

Hal pertama yang akan dilakukan adalah mengunduh plugin PrettyPhoto.

Setelah kita mengunduh file PrettyPhoto, pertama-tama kita akan menyalin gambar PrettyPhoto, yang akan berada di folder gambar dan kemudian Anda perlu menyalin folder berjudul PrettyPhoto ke dalam tema. Kita juga perlu menyalin CSS dan file JavaScript PrettyPhoto, jadi mari salin ke folder yang sesuai dalam tema.

Sekarang kita memiliki semua file kita di tempat, kita perlu menginisialisasi mereka dalam tema kita. Dalam file functions.php, kita akan membuat fungsi lain untuk menangani gaya dan kita akan memanggil fungsi ini register_css. Kemudian kita akan mendaftarkan gaya kita dan memberikan gaya, dengan demikian masukkan kode berikut ke file functions.php Anda:

Kita memiliki semua file di tempat dan mereka diinisialisasi oleh tema. Sekarang kita perlu memanfaatkan ini dan mengimplementasikan Lightbox ke dalam tema. Mari buka portfolio.php (templat halaman portofolio) kita dan tambahkan beberapa kode ke Gambar Unggulan.

Pertama, kita perlu mendapatkan gambar besar dari gambar unggulan yang telah ditetapkan. Ini kemudian akan bertindak sebagai gambar ukuran penuh ketika pengguna mengklik gambar dan PrettyPhoto memuat. Di dalam WordPress Loop, kita perlu memasukkan kode berikut:

Kode yang disisipkan akan menemukan posting saat ini di dalam loop dan menemukan sumber asli gambar dan kemudian menemukan versi fullsize gambar. Setelah kita mengembalikan gambar ukuran penuh, kita akan memaksa gambar untuk disimpan dalam indeks array 0. Ini digunakan untuk tidak menimpa atau menduplikasi dengan gambar ukuran penuh.

Setelah gambar ukuran penuh dapat diakses, kita sekarang akan menginisialisasi PrettyPhoto pada gambar unggulan. Kode berikut akan menautkan gambar fullsize ke gambar unggulan dari item portofolio dan meneruskan referensi ke PrettyPhoto, ganti kode tempat Anda membuat gambar unggulan Anda dengan yang berikut:

Hebat, kita sudah memiliki semua file dan skrip, kita telah mendapatkan gambar ukuran penuh untuk gambar unggulan dan kita telah merujuk gambar unggulan ke gambar ukuran penuh dengan PrettyPhoto. Selanjutnya, kita perlu menulis JavaScript untuk membuat Lightbox muncul dan berfungsi.

Mari kita kembali ke file jquery.custom.js kita dan membuat fungsi kosong lain untuk menangani PrettyPhoto:

Sekarang kita memiliki fungsi, kita akan menginisialisasi PrettyPhoto. Kita melakukan ini dengan menambahkan kode berikut dalam fungsi Lightbox:

Anda dapat membaca dokumentasi lengkap dari semua parameter yang akan diterima PrettyPhoto dalam penggunaan plugin di: PrettyPhoto jQuery Lightbox Clone

Jadi, semuanya sudah selesai! Implementasi Lightbox ke dalam tema WordPress Anda, tetapi tunggu, biarkan saya menebak ketika Anda mengklik filter dan menggunakan Quicksand; Lightbox tidak lagi berfungsi. Itu karena kita perlu mengubah skrip Quicksand dan mengirimkan satu lagi kode kecil untuk memastikan bahwa Lightbox berfungsi bahkan ketika kita memfilter portofolio kita.

Jadi mari kita perbaiki masalah kecil ini dengan menambahkan skrip berikut ke fungsi portfolio_quicksand kita dalam file jquery.custom.js:

Apa yang dilakukan di sini adalah memanggil plugin Quicksand sekali lagi dan meneruskan fungsi di dalam panggilan ini ke fungsi Lightbox. Jadi setiap kali Quicksand menyaring konten, fungsi Lightbox disebut menerapkan PrettyPhoto ke setiap gambar.


Langkah 5 Integrasi Pagination (Tambahan Tambahan)

Banyak orang suka menggunakan Quicksand, tetapi beberapa orang menyukai penggunaan Quicksand dan pagination dalam portofolio mereka. Ini adalah tambahan lain untuk membuat pagination dalam portofolio Anda. Saya akan menggunakan plugin WordPress: WP_PageNavi.

Pertama mari kita instal dan aktifkan plugin. Buka Plugin -> Add New halaman Baru di bagian admin dan cari WP_PageNavi, setelah ditemukan klik Install Now dan Activate Plugin setelah diinstal.

Sekarang setelah kita memiliki pengaturan plugin, mari kita buka templat halaman portofolio dan buat beberapa modifikasi pada file kita.

Pertama, kita perlu mengatur halaman kita untuk memungkinkan pagination. Kita melakukan ini dengan memasukkan segmen kode berikut sebelum meminta basis data:

Setelah pagination diinisialisasi, kita perlu memodifikasi kueri basis data. Kita ubah post_per_page menjadi angka untuk menampilkan jumlah posting maksimum yang akan ditampilkan pada setiap halaman. Kemudian kita meneruskan parameter baru ke halaman query dan merujuknya ke segmen kode yang memungkinkan untuk membuat halaman halaman, seperti yang ditunjukkan oleh kode berikut:

Hebat, kita memiliki portofolio dengan pagination. Kita hanya perlu beberapa kontrol untuk membantu dengan navigasi setiap halaman. Kode berikut memeriksa apakah plugin WP_PageNavi diinstal dan kemudian menginisialisasi wp_pagenavi dengan query database yang dilewatkan sebagai parameter. Kita kemudian mengatur ulang postdata dan semua konten diberi peringkat halaman dengan benar.

Itu dia! Anda akan memiliki portofolio yang berfungsi penuh dengan Quicksand, Lightbox, dan Pagination.


Kesimpulan

Beri diri Anda tepukan di punggung! Anda telah berhasil membuat portofolio Quicksand dengan WordPress. Semua kerja keras dilakukan dan Anda dapat menerapkannya dengan pekerjaan apa pun yang Anda kembangkan.

Saya ingin mengucapkan terima kasih yang BESAR terima kasih telah meluangkan waktu untuk membaca tutorial saya, saya harap ini membantu. Jangan ragu untuk meninggalkan komentar dan saya akan mencoba yang terbaik untuk membantu dan menjawabnya.

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.