Bagaimana Cara Menggunakan Query Loop di WordPress untuk Membuat Halaman Daftar Postingan?

Diterbitkan: 2021-11-20

Halaman posting blog menampilkan semua posting blog di situs WordPress Anda pada halaman terlepas dari kategori, jenis, tanggal diterbitkan, atau penulisnya. Pernahkah Anda melihat situs web yang pada dasarnya hanya posting blog dan artikel? Yah, itu pada dasarnya adalah halaman posting blog yang berfungsi sebagai beranda untuk situs web tersebut. Jenis situs web ini paling terlihat dengan situs web yang secara eksklusif menampilkan konten terkait berita. Selain itu, halaman daftar posting biasanya adalah apa yang Anda lihat saat membuka blog atau halaman berita di sebagian besar situs web. Jadi, bagaimana Anda bisa membuat salah satunya untuk situs web Anda sendiri?

Siapkan Halaman Posting Blog di WordPress

Jika Anda ingin mengatur halaman blog, Anda cukup membuat halaman di WordPress.

  • Buka dasbor admin situs web Anda dan pilih “Halaman > Tambah Baru”.
  • Masukkan judul untuk halaman. Di sebagian besar situs web seperti yang disebutkan sebelumnya, halaman ini akan dinamai "Blog" atau "Berita", Anda dapat menggunakan apa pun yang Anda suka.
  • Pastikan tidak ada konten di halaman dan publikasikan halaman kosong.
  • Sekarang, buka bagian "Pengaturan> Menulis" di panel admin WordPress Anda dan pilih halaman kosong sebagai "Halaman posting".
  • Simpan pengaturan Anda.

Anda dapat menyesuaikan jumlah posting yang muncul di halaman posting dan apakah akan menampilkan ringkasan atau konten lengkap untuk setiap posting.

Halaman daftar posting yang dirancang dikontrol melalui tema Anda dan Anda juga dapat menggunakan plugin pembuat halaman untuk membuat halaman posting yang terlihat khusus di situs Anda. Sekarang Anda mungkin bertanya-tanya, ketika ini adalah opsi default mengapa ada blok Query Loop terpisah yang tersedia di editor Gutenberg.

Blok Loop Kueri

WordPress merilis fitur baru yang sangat keren dalam versi 5.8, blok Query Loop. Tidak seperti halaman posting blog, Anda memiliki opsi penyesuaian untuk menyesuaikan tampilan dan berbagai fitur lainnya dengan blok loop kueri. Intinya, Anda dapat menggunakan blok loop kueri untuk dengan mudah membuat halaman daftar posting yang diisi dengan semua posting Anda yang ditata sesuai preferensi spesifik Anda dalam hal desain, perataan, dan struktur.

Loop kueri pada dasarnya adalah blok bersarang yang berisi, judul posting, konten posting, gambar unggulan posting, dll. Dan berfungsi persis seperti blok "Daftar Postingan". Dengan banyak pola blok yang terintegrasi ke dalam editor blok baru ini, Anda dapat dengan mudah membuat halaman portofolio, atau halaman yang penuh dengan posting favorit Anda, tanpa plugin pihak ketiga. Dengan panduan ini, kami akan memandu Anda melalui semua langkah yang terlibat dalam menyiapkan halaman posting dan menggunakan blok loop kueri untuk mengisi halaman dengan posting blog di situs WordPress Anda.

Untuk tujuan latihan ini, kami menyarankan Anda sudah memiliki setidaknya beberapa posting di situs web Anda sebelum Anda membuat halaman daftar posting Anda. Juga, pastikan Anda menggunakan editor blok Gutenberg dan bukan editor Klasik yang lama.

Tambahkan Blok Loop Kueri

  • Klik pada (+) Add Block inserter dan pilih blok Query Loop seperti yang ditunjukkan pada gambar di bawah ini. Untuk menemukan blok Query Loop, Anda harus mengklik Browse all , lalu gulir ke bagian Theme dari Block inserter. Atau, Anda dapat mengetikkan “/query loop” di blok paragraf baru untuk melakukan hal yang sama.
Tambahkan Blok Loop Kueri
Tambahkan Blok Loop Kueri

Menyesuaikan Blok Loop Kueri

Setelah menambahkan blok loop kueri ke halaman Anda, secara default, blok akan mengisi halaman Anda dengan posting terbaru. Namun, untuk tujuan membuat halaman posting, Anda dapat mengubah jumlah posting yang akan ditampilkan. Editor blok Query Loop akan menawarkan kepada Anda berbagai opsi tata letak dalam bentuk pola blok untuk dipilih dan disesuaikan. Opsi tata letak yang berbeda dapat dilihat dalam bentuk korsel atau format kisi.

Opsi Tata Letak pada Blok Loop Kueri
Opsi Tata Letak pada Blok Loop Kueri

Pola Desain Blok Loop Kueri

Pilih satu di antara dua format tampilan, carousel, atau grid, berdasarkan tampilan desain yang Anda sukai di bagian atas blok loop di halaman daftar posting Anda. Anda harus menggunakan tombol Pilih jika Anda memutuskan untuk menggunakan tampilan korsel atau memilih salah satu opsi yang tersedia jika formulir kisi adalah format tampilan pilihan Anda.

Pola Query Loop yang disediakan oleh WordPress secara default adalah:

  • Standar
  • Gambar di kiri
  • Gambar dan judul kecil
  • kisi-kisi
  • Judul Besar
  • Mengimbangi

Untuk tujuan demonstrasi, kami telah memutuskan untuk menggunakan pola desain Standar yang ditunjukkan di bawah ini dengan format tampilan korsel. Sebaliknya, Anda juga dapat memilih untuk memulai dari Blank , dan memilih salah satu dari empat variasi yang sesuai dengan kebutuhan spesifik Anda, dan menyesuaikan lebih lanjut dari sana.

Memilih pola Query Loop
Memilih pola Query Loop

Opsi Blok Loop Kueri

Seperti disebutkan sebelumnya, loop kueri terdiri dari blok bersarang yang dapat diatur ulang, ditambahkan, disejajarkan, dan seterusnya. Hal baiknya adalah ketika Anda menyesuaikan dan membuat perubahan pada satu blok, hal yang sama akan diterapkan pada semua blok dengan tipe yang sama. Seperti yang ditunjukkan pada tangkapan layar di bawah, Anda dapat menggunakan bilah alat atas untuk membuat modifikasi berikut pada blok posting Anda:

  • Width: Mengubah lebar berbagai elemen di blok Query Loop. Dari toolbar atas, Anda dapat membuat posting dengan lebar penuh atau lebar lebar. Opsi lebar lebar akan memperluas blok di luar ukuran konten sementara opsi lebar penuh akan memperluas blok Loop Kueri untuk menutupi seluruh lebar layar Anda.
  • Alignment: Mengubah perataan berbagai elemen di blok Query Loop. Anda memiliki opsi untuk memilih pengaturan perataan mulai dari kiri ke tengah hingga sisi kanan halaman.
  • Susunan: Anda dapat mengatur ulang elemen blok Query Loop seperti yang Anda inginkan dengan menggunakan penggerak seperti yang ditunjukkan di bawah ini.
Menata Ulang Elemen pada Query Loop Block
Menata Ulang Elemen pada Query Loop Block
  • Warna: Anda dapat menerapkan berbagai macam opsi warna melalui opsi pengaturan Blok dari blok yang telah Anda pilih.
  • Tambahkan Blok: Anda juga dapat menambahkan elemen baru ke blok Anda seperti penulis posting atau kutipan jika Anda ingin melakukannya.

Bilah Alat Blok Loop Kueri

Di bilah alat blok Query Loop, Anda akan menemukan tombol Pengaturan Tampilan , yang ketika diklik akan membuka popup yang memungkinkan Anda memilih berapa banyak posting yang akan ditampilkan.

  • Item per halaman: Jumlah posting untuk ditampilkan dalam blok Query Loop
  • Offset: Jumlah posting yang ingin Anda lewati
  • Halaman maksimum untuk ditampilkan: Membatasi berapa banyak posting yang ingin Anda tampilkan

Pilih jumlah posting yang ingin Anda tampilkan di halaman daftar posting Anda. Disarankan agar halaman daftar posting menampilkan semua posting di situs web. Dengan demikian, mereka mungkin tidak berada di halaman yang sama dan dapat ditampilkan di beberapa halaman menggunakan pagination.

Setelan Bilah Alat Teratas pada Loop Kueri
Setelan Bilah Alat Teratas pada Loop Kueri

Pada toolbar Blok Kueri, Anda juga dapat beralih antara Tampilan Daftar atau Tampilan Kisi jika Anda ingin menampilkan posting Anda dalam format daftar bertumpuk atau sebagai kisi, masing-masing di samping yang lain.

Melihat Format Query Loop
Melihat Format Query Loop

Terkait: Top 5 plugin blok Gutenberg untuk WordPress.

Editor Blok Putaran Kueri

Dengan menggunakan fitur dan pengubah khusus di editor blok Query Loop, Anda akan dapat membuat perubahan pada pengaturan warna, menerapkan filter khusus posting, serta mengubah urutan posting di halaman daftar posting Anda. Jika seandainya Anda tidak melihat editor blok, klik ikon "roda gigi" di sebelah tombol terbitkan untuk membuka bilah sisi editor di sisi kanan layar Anda.

  • Opsi warna pada editor blok Loop Kueri akan memengaruhi seluruh blok Kueri, tetapi Anda juga dapat menyesuaikan elemen individual di dalam blok dengan memilihnya secara khusus dan membuat perubahan yang berlaku melalui bilah sisi editornya. Editor blok Query Loop menyediakan opsi penyesuaian warna berikut di dalam blok:
    • Warna teks: Memungkinkan Anda membuat perubahan warna pada teks yang terdapat di dalam loop Kueri. Di sini, Anda memiliki opsi untuk memilih salah satu warna prasetel dari menu, memilih warna khusus dari palet, atau menambahkan kode warna tertentu pilihan Anda.
    • Warna latar belakang: Ini akan memengaruhi warna keseluruhan latar belakang blok. Di sini, Anda dapat memilih warna preset, memilih warna khusus, menambahkan kode warna tertentu, atau menggunakan opsi warna gradien juga. Anda dapat melihat bagaimana penggunaan opsi warna gradien telah memengaruhi blok kueri pada tangkapan layar yang disediakan di bawah ini.
    • Warna tautan : Opsi warna ini mengontrol warna tautan apa pun di salah satu kiriman yang ada di blok kueri. Opsi ini memiliki variasi warna yang sama persis seperti opsi warna teks.
Pilihan Warna pada Query Loop
Pilihan Warna pada Query Loop
  • Di bilah sisi editor blok Loop Kueri, Anda akan menjalankan kueri Warisan dari opsi templat . Opsi ini dapat diaktifkan dan dinonaktifkan, bergantung pada apakah Anda ingin menyesuaikan kueri tempat loop dibuat. Jika Anda mengaktifkannya, opsi penyesuaian tertentu akan disembunyikan, tetapi, jika Anda menonaktifkannya, opsi penyesuaian lainnya akan muncul seperti:
    • Kolom: Ini akan menjadi bilah seret yang memungkinkan Anda memilih jumlah kolom tempat Anda ingin menampilkan posting Anda. Opsi ini hanya akan muncul jika tampilan kisi dipilih sebagai lawan dari tampilan daftar.
    • Dipesan berdasarkan: Anda dapat memesan kiriman di halaman daftar kiriman dengan salah satu kriteria berikut:
      • Terbaru hingga Terlama, ini adalah opsi pesanan default
      • Terlama hingga Terbaru
      • Abjad, A sampai Z
      • Abjad, Z sampai A
    • Postingan tempel: Dengan menggunakan opsi ini, postingan blog dapat ditempatkan di bagian atas halaman depan postingan, tetap di sana hingga postingan tempel yang lebih baru diterbitkan. Anda dapat menyertakan, mengecualikan, atau hanya menampilkan postingan tempel.
  • Anda juga akan menemukan opsi Filter di bilah samping editor blok Loop Kueri, opsi yang akan membantu Anda menyesuaikan lebih lanjut terkait pos yang ditampilkan. Opsi ini tidak akan terlihat jika Anda mengaktifkan kueri Warisan dari opsi templat . Untuk membuat filter untuk menampilkan posting di halaman daftar posting Anda, Anda dapat bermain-main dengan opsi berikut.
    • Kategori: Anda harus membuat daftar kategori kiriman yang ingin Anda sertakan. Harap diingat bahwa Anda harus menetapkan posting Anda ke dalam kategori yang berbeda agar filter ini berfungsi.
    • Penulis: Anda dapat menggunakan filter ini jika Anda hanya ingin menampilkan blog yang ditulis oleh penulis tertentu di halaman indeks Anda.
    • Kata Kunci: Jika Anda ingin memfilter posting berdasarkan kata kunci apa pun yang mungkin disertakan dalam posting, gunakan opsi filter ini.
  • Terakhir, Anda juga akan menemukan opsi Pengaturan Lanjutan yang memungkinkan Anda menambahkan kelas CSS khusus yang dapat digunakan untuk menyesuaikan gaya blok sesuai preferensi spesifik Anda. Anda juga dapat menetapkan elemen HTML jika Anda mau. Namun, jika Anda tidak memiliki latar belakang pengembangan web front-end, kami sarankan Anda membiarkan opsi ini apa adanya dan menggunakan opsi penyesuaian blok lainnya untuk menata blok loop kueri Anda.

Dan di sana Anda memilikinya! Anda dapat menggunakan opsi berbeda yang disebutkan di atas di blok Query Loop untuk membuat halaman posting untuk mencantumkan berbagai posting di situs WordPress Anda dan menyesuaikannya sesuai keinginan Anda. Jika diperlukan, Anda dapat menetapkan halaman posting sebagai blog Anda atau menggunakannya sebagai blog terpisah dengan parameter tertentu.