Cara Menambahkan Filter Posting ke Situs WordPress Anda dengan Mudah

Permintaan yang sering saya temui adalah kemampuan untuk memungkinkan pengguna memfilter, atau mengurutkan, posting di bagian depan situs web mereka.

Mungkin pengguna ingin melihat postingan berdasarkan abjad, atau mungkin hanya melihat postingan dengan thumbnail? Ini sudah masuk akal untuk posting biasa tetapi bisa lebih bermakna dalam hal produk, foto, atau jenis konten lainnya.

Dalam Proyek WordPress Akhir Pekan hari ini, saya akan memberi Anda ikhtisar singkat tentang bagaimana Anda dapat menerapkan fitur seperti ini dalam tema Twenty Fifteen. Mari kita retak!

• Membuat Tema Anak
• Membuat Kontrol
• Memodifikasi Query
• Formulir yang Lebih Cerdas
• Perilaku WordPress
• Kesimpulan

Membuat Tema Anak

Seperti biasa, Anda membutuhkan tema anak. Kami memiliki panduan untuk tema anak di sini di WPMU DEV, saya sarankan untuk membaca jika Anda tidak terbiasa dengan tema anak.

Membuat Kontrol

Mari tambahkan tiga kontrol: satu untuk mengurutkan kiriman, satu untuk mengatur arah pengurutan dan satu lagi untuk hanya menampilkan kiriman dengan gambar mini.

Langkah pertama adalah menyalin index.php tema induk ke tema anak kita.

Buka file index.php di tema anak Anda dan rekatkan HTML berikut di bawah wadah utama (yang seharusnya ada di baris 20):

Dan inilah tampilannya di front-end:

Seperti yang Anda lihat, kami kekurangan sedikit gaya. Mari kita selesaikan itu dengan menambahkan beberapa gaya ke lembar gaya:

Reaksi yang sering saya dengar dari pendatang baru terhadap pemrograman adalah: “bagaimana dia tahu bahwa ini adalah gaya yang akan membuatnya menyatu dengan tema?”

Solusinya cukup sederhana: Saya curang. Saya menggunakan alat pengembang di Chrome untuk memeriksa elemen artikel biasa. Dalam hal ini, saya melihat bagaimana elemen mendapatkan bayangan kotak dan marginnya dan saya hanya menerapkan aturan ini ke elemen saya sendiri.

Memodifikasi Query

Mari kita pilih "urutkan berdasarkan judul," "naik" dan "postingan dengan thumbnail" dan kirimkan formulir. Anda seharusnya benar-benar melihat perubahan tanpa melakukan apa pun pada kode.

Untuk mengetahui alasannya, mari kita periksa URL-nya. Seharusnya seperti ini:

 http://domainanda.com/?orderby=post_title&order=DESC&thumbnail=only_thumbnail

Informasi kecil dapat dipanggil kembali dalam skrip PHP kami menggunakan variabel $_GET . WordPress sudah mengetahui apa arti parameter order dan orderby dan menggunakannya dalam kueri default. Alhasil, jika kita hanya perlu memesan dan memesan arah sebenarnya kita sudah selesai semua.

Itu semua bagus, tapi sekali lagi, bagaimana saya tahu ini? Saya bisa menggunakan "order_by" sebagai parameter alih-alih "orderby." Dalam hal ini WordPress tidak menangkap niat kami. Saya telah melihat dokumentasi WP_Query di Codex WordPress di mana ada banyak parameter, banyak di antaranya dapat digunakan di URL.

Sekarang, mari kita terapkan parameter thumbnail postingan kita. Sebuah postingan memiliki thumbnail jika memiliki metadata dengan kunci _thumbnail_id terkait dengannya. Kami perlu mengubah kueri kami untuk memastikan hal ini diperhitungkan. Mari lakukan ini sekarang dengan query_posts() .

Tempel kode berikut di atas fungsi get_header() di bagian atas file:

Kami menggabungkan parameter kueri asli dengan parameter baru kami sendiri, yang menghasilkan kumpulan posting yang berbeda. Formulir kami sekarang berfungsi tetapi tidak mengingat pilihan kami. Mari kita perbaiki dengan menulis ulang formulir kita dan menggunakan beberapa PHP.

Formulir yang Lebih Cerdas

Selain mencantumkan semua opsi urutan berdasarkan pemilih, kami memerlukan cara untuk menunjukkan mana yang dipilih. Jika kita melakukan ini tanpa loop maka akan terlihat seperti ini:

Apakah Anda mengerti semua itu? Saya tidak menyalahkan Anda! Dalam setiap opsi, kami memeriksa apakah nilai yang dipilih saat ini sama dengan nilai opsi. Jika ya, kami menampilkan properti yang dipilih. Mari kita buat ini jauh lebih bersih dengan satu lingkaran:

Ini sedikit lebih lama tetapi hanya karena kami memiliki tiga opsi. Ini adalah format yang jauh lebih baik untuk mengelola segala jenis seleksi. Mari kita perluas ini ke seluruh formulir:

Semua selesai. Formulir sekarang harus mengingat pilihan kami berdasarkan variabel $_GET di URL.

Perilaku WordPress

Ingat bagaimana saya menyebutkan bahwa saya tahu untuk menggunakan "pesanan" dan "pesanan" karena saya melihat dokumentasi WP_Query? Ini adalah praktik yang baik, tetapi dapat menyebabkan hasil yang tidak terduga. Temukan slug dari kategori yang Anda miliki, katakanlah kategori ini adalah "wordpress."

Sekarang gunakan URL berikut: http://yourwebsite.com/?category_name=wordpress. Anda akan melihat arsip kategori Anda, mencantumkan semua posting WordPress Anda. Ini baik-baik saja, tetapi kami memiliki dua masalah:

Jika Anda mengaktifkan permalink cantik (yang seharusnya), halaman telah dialihkan ke URL baru, kemungkinan besar http://yourwebsite.com/category/wordpress. Filter kami tidak akan terlihat karena file archive.php menangani tampilan ini, bukan index.php . Selain itu, nama kategori kami tidak diteruskan sebagai parameter URL sehingga kami perlu menggunakan beberapa tipuan tambahan untuk membuat filter kami berfungsi.

Cara pintas untuk membuat ini berfungsi adalah dengan sengaja tidak menggunakan parameter yang sama dengan yang digunakan WordPress. Anda dapat meneruskan nama kategori menggunakan parameter catname di URL karena WordPress tidak akan memahaminya. Anda kemudian dapat memasukkan ini ke kueri menggunakan nama parameter yang benar. Sesuatu seperti ini:

Alternatifnya adalah menggunakan fungsi alih-alih mengeluarkan formulir kami di index.php apa adanya. Anda perlu mendeteksi kategori dari kueri WordPress itu sendiri dan menampilkan pilihan saat ini berdasarkan itu.

Kesimpulan

Menambahkan filter Anda sendiri tidak terlalu sulit tetapi membutuhkan sedikit mengutak-atik. Dalam kasus kami, Anda mungkin ingin memastikan pagination dihapus ketika urutan diatur ke acak. Itu bisa diganti dengan tombol "tampilkan lebih banyak keacakan", yang hanya memuat ulang halaman.

Semoga artikel ini memberi Anda dasar-dasar bagaimana Anda dapat melakukannya sendiri dan Anda akan dapat membuat filter yang Anda butuhkan.

• proyek wordpress akhir pekan