Gutenberg WordPress [Bagian 7]: Membuat Daftar Postingan di Beranda

Jika Anda telah selesai membuat bagian logo partner, untuk melengkapi homepage pada tutorial Gutenberg WordPress ini, Anda perlu membuat post list pada homepage.

Bagian post adalah bagian dari homepage yang berisi kumpulan postingan tertentu yang telah dipublikasikan di blog. Daftar ini dapat berisi daftar postingan blog terbaru, postingan yang paling banyak dibaca, atau postingan yang sedang tren.

Pada tutorial ini, kami menggunakan nama Berita Terbaru untuk bagian tersebut atau Anda dapat memberikan nama yang sesuai dengan kebutuhan Anda, seperti yang terlihat pada gambar hasil akhir pembuatan post section di bawah ini.

Hasil akhir dari daftar postingan di Homepage yang dibuat menggunakan editor Gutenberg.

Lalu, bagaimana cara membuat post section di WordPress menggunakan Gutenberg editor? Secara umum, ada tiga langkah di bawah ini yang perlu Anda ikuti!

Langkah 1: Membuat Query Loop (Perulangan Query)

Untuk mulai membuat bagian postingan, Anda perlu membuat Query Loop, yaitu sebuah blok yang menampilkan postingan dengan parameter yang dapat disesuaikan.

Silakan buka Homepage yang telah Anda isi dengan Header, Footer, Slider, dan Logo Partner. Kemudian, pada bagian bawah, klik di mana saja untuk memunculkan blok Paragraph. Selanjutnya, ikuti langkah-langkah di bawah ini:

1. Buka tab List View untuk memudahkan pengaturan blok.
   
2. Klik di bagian bawah, klik [+] > pilih blok Heading. Selanjutnya, isi judulnya. Kami membuat judul Berita Terbaru.
   
3. Pada bagian List View , klik pada tiga titik pada blok heading > pilih opsi Insert After.
   
4. Pada blok yang ditambahkan, klik [+] > ketik query pada kotak pencarian > pilih Query Loop > pada blok Query Loop, klik Choose.
5. Setelah itu, pilih salah satu pola di bagian Pilih pola. Gulir ke bawah dan pilih pola Grid. Kemudian, Anda akan melihat blok Post Template muncul di dalam blok Query Loop.

Konsep membuat query loop mirip dengan membuat tema WordPress bagian-3: PerulanganKueri. Namun, pada pembuatan tema WordPress bagian-3, prosesnya dilakukan secara manual menggunakan coding.

Langkah 2: Menambahkan Postingan ke Query Loop

Pada langkah ini, Anda perlu menambahkan postingan yang telah dipublikasikan ke dalam query loop. Anda tidak perlu membuat postingan baru karena Anda telah membuat postingan dummy menggunakan plugin FakerPress saat membuat header sebelumnya.

Untuk menambahkan postingan ke dalam loop kueri dan melakukan pengaturan sederhana, kita akan menggunakan blok (1) Post Featured Image, (2) blok Categories, (3) blok Post Author, dan (4) blok Post Date. Berikut ini cara melakukannya:

1. Klik pada blok Post Title dan klik tiga titik > pilih opsi Insert before > klik [+] > ketik feature di kotak pencarian > pilih blok Post Featured Image.
   
2. Klik tiga titik pada blok Post Featured Image > pilih opsi Insert After. Blok Paragraph akan secara otomatis ditambahkan di bawah blok Post Featured Image.
   
3. Klik [+] > ketik categories di kotak pencarian > pilih blok Categories.
   
4. Klik blok Post Title lalu klik tiga titik > pilih Insert After.
   
5. Klik [+] > ketik row di kotak pencarian > pilih blok Row untuk menambahkan dua blok secara berdampingan.
   
6. Pada baris pertama, klik [+] > ketik author di kotak pencarian > pilih blok Post Author.
   
7. Hapus foto penulis dengan mengklik Settings > lalu nonaktifkan tombol Show avatar.
   
8. Selanjutnya, klik pada blok Row > klik [+] > ketik tanggal posting di kotak pencarian > pilih blok Post Date.
   
9. Hapus blok Post Excerpt dan Tanggal Posting dengan mengklik tiga titik > pilih Remove blok. Kedua blok ini adalah blok default dari pola yang telah dipilih sebelumnya.
   

Langkah 3: Pengaturan Akhir untuk Daftar Postingan

Pada langkah ini, kita perlu melakukan beberapa penyesuaian pada bagian postingan yang sudah selesai agar terlihat lebih teratur. Selain itu, kita akan menambahkan pagination untuk memudahkan pengguna menavigasi postingan lainnya. Berikut adalah langkah-langkahnya:

1. Gabungkan blok Heading dan Query loop dengan mengklik tiga titik > pilih opsi Group . Ini akan membantu menyederhanakan proses pengaturan.
   
2. Klik pada blok Group yang berisi Query Loop, lalu ubah Layout Wide menjadi 1200.
   
3. Selanjutnya, buka blok Query Loop dan pilih Post Title. Pada Pengaturan, klik Style, dan di bawah Typography, pilih ukuran M (Medium). Anda juga dapat memilih ukuran yang sesuai dengan kebutuhan Anda.
   
4. Klik pada blok Perulangan Query dan di Pengaturan, nonaktifkan sakelar Inherit query from template (mewarisi kueri dari template). Jika masih diaktifkan, postingan tidak akan ditampilkan di Beranda.
   
5. Klik pada blok Group yang berisi Query Loop > sesuaikan lebar blok menggunakan toolbar dengan memilih Wide width dengan ukuran yang telah ditetapkan sebelumnya.
   
6. Pada List View, klik pada blok Post Template > klik pada tiga titik > dan pilih opsi Insert after. Hal ini dilakukan untuk menambahkan blok Pagination.
   
7. Klik pada blok Paragraph yang ada > klik tanda [+] > ketik pagination di kotak pencarian, dan pilih blok Pagination. Blok ini digunakan untuk membuat tombol navigasi ke daftar halaman lain.
   
8. Selesai. Selanjutnya, simpan dengan mengklik Save draft.

Setelah menyelesaikan semua langkah pembuatan dan pengaturan bagian post di homepage, hasil akhirnya terlihat seperti ini:

Kesimpulan

Demikianlah tutorial keenam dari seri Gutenberg WordPress yang berfokus pada cara membuat daftar postingan di beranda. Bagian ini berfungsi sebagai etalase untuk menampilkan beberapa artikel menarik yang dapat menarik perhatian pengguna ketika mereka mengunjungi halaman utama.

Selanjutnya, Anda dapat menambahkan bagian Galeri pada Homepage. Bagian ini menampilkan beberapa gambar yang dapat menarik perhatian pengunjung, yang berpotensi meningkatkan keterlibatan pengguna di situs web.

Namun, perlu diingat bahwa antarmuka yang dibuat menggunakan Gutenberg mungkin tidak sepenuhnya memenuhi preferensi spesifik Anda. Jika Anda menginginkan website dengan fungsionalitas dan desain yang dipersonalisasi, percayakan kepada Tim Tonjoo.

Kami telah menangani berbagai proyek website, mulai dari korporasi besar hingga startup, seperti Telkom, Astra International, Hello Health Group, dan Hipwee.

Mari diskusikan ide dan kebutuhan website Anda melalui informasi kontak Tonjoo, dan kami akan membantu mewujudkannya!

Updated on July 17, 2024 by Hanif Mufid