Cara Menggunakan Tata Letak Kotak untuk Menampilkan Posting WordPress Anda

Apakah Anda ingin menampilkan posting WordPress Anda dalam format grid?

Saat menyajikan konten Anda di WordPress, tata letak kisi memberi Anda opsi tambahan. Ini mungkin berguna saat mendesain halaman kustom. Kami akan mengajari Anda cara cepat menampilkan posting WordPress Anda dalam gaya grid di mana saja di situs Anda dalam artikel ini.

Kapan Anda membutuhkan tata letak grid WordPress?

Setiap tema WordPress mendukung gaya posting blog vertikal klasik, yang bekerja dengan baik untuk sebagian besar situs web. Namun, gaya ini mungkin memakan banyak ruang, terutama jika Anda memiliki banyak artikel. Jika Anda membuat beranda khusus untuk blog Anda, Anda mungkin ingin menggunakan gaya kisi untuk memamerkan konten terbaru Anda.

Ini akan memungkinkan Anda untuk menambahkan lebih banyak hal ke halaman rumah Anda. Selanjutnya, kisi pos Anda akan menonjolkan foto unggulan Anda, membuatnya lebih menarik secara estetika dan dapat diklik. Kotak pos juga dapat digunakan untuk menampilkan portofolio kreatif Anda dan bentuk materi unik lainnya.

Menggunakan editor blok, buat tata letak kotak pos WordPress.

Menggunakan editor blok WordPress, Anda dapat dengan mudah menampilkan posting dan thumbnail Anda dalam pengaturan grid pos. Anda dapat membuat kisi Anda sendiri menggunakan blok kisi pos bawaan.

Buka halaman yang ingin Anda ubah, lalu klik tombol 'Plus' add block, cari 'Query Loop', lalu klik blokir untuk menambahkannya.

Blok ini menggabungkan loop posting Anda ke halaman Anda.

Kemudian, di bagian atas blok, pilih 'Mulai Kosong' untuk membuat kisi pos.

Bergantung pada jenis informasi yang ingin Anda tampilkan dengan kisi pos Anda, Anda memiliki beberapa opsi.

Kami akan menggunakan 'Gambar, Tanggal, dan Judul', tetapi Anda dapat melakukan apa pun yang Anda inginkan.

Kemudian, arahkan mouse ke gambar dan pilih opsi 'Tampilan Kotak'.

Ini mengubah daftar Anda menjadi kotak posting.

Informasi yang ditampilkan kemudian dapat disesuaikan.

Pertama, kami akan menghapus pagination di bagian bawah blok. Cukup klik dan pilih menu opsi 'Tiga Titik'.

Lalu, pilih 'Hapus Pagination'.

Ini akan menghapus elemen dari blok secara otomatis.

Demikian pula, Anda dapat menghapus tanggal dari posting atau meninggalkan informasi posting tambahan untuk pembaca Anda.

Setelah itu, kami akan menambahkan tautan ke thumbnail postingan dan judul postingan.

Cukup klik thumbnail kiriman Anda dan alihkan tombol 'Link to Post' di kotak opsi sebelah kanan.

Kemudian, untuk judul posting Anda, ulangi prosesnya.

Setelah selesai, klik tombol 'Perbarui' atau 'Terbitkan' untuk memublikasikan kisi pos Anda.

Anda sekarang dapat melihat kisi posting WordPress baru Anda dengan mengunjungi situs web WordPress Anda.

Kemudian, untuk judul posting Anda, ulangi prosesnya. Setelah selesai, klik tombol 'Perbarui' atau 'Terbitkan' untuk memublikasikan kisi pos Anda. Anda sekarang dapat melihat kisi posting WordPress baru Anda dengan mengunjungi situs web WordPress Anda.

Dengan menambahkan kode ke WordPress, Anda dapat membuat tata letak kotak pos WordPress.

Pendekatan ini memerlukan pemahaman dasar tentang cara memasukkan kode ke WordPress. Sebelum Anda mulai menambahkan kode, Anda harus terlebih dahulu menetapkan ukuran gambar baru untuk kisi pos Anda.

Selanjutnya, cari file tema WordPress yang akan Anda tambahkan potongan kodenya. Anda dapat, misalnya, memasukkannya ke dalam file single.php Anda sehingga ditampilkan di bagian bawah semua artikel Anda. Anda juga dapat membuat template halaman Anda sendiri untuk menampilkan tata letak grid posting blog Anda dengan thumbnail.

Setelah itu, Anda dapat mulai menambahkan kode ke WordPress. Kami akan memecah contoh kode bagian demi bagian karena sangat panjang. Untuk memulai, masukkan potongan kode berikut ke dalam file template tema Anda.

 <?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?>

Kueri post loop diatur di baris kode ini. Jika Anda suka, Anda dapat mengubah variabel 'posting per halaman' untuk menampilkan lebih banyak posting per halaman.

Kemudian, di file template tema Anda, rekatkan cuplikan kode berikut.

 <?php //Show the left hand side column if($counter == 1) : ?> <div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <?php //Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <div class="clear"></div> <?php $counter = 0; endif; ?>

Baris kode ini menghasilkan dua kolom untuk artikel kita, menampilkan judul dan gambar posting. Itu juga menghasilkan kelas CSS, yang akan kita gaya nanti. Ini juga mengacu pada 'posting gambar', yang harus diganti dengan nama ukuran gambar yang Anda buat sebelumnya.

Kemudian, pada akhirnya, tambahkan potongan kode berikut.

 <?php $counter++; endwhile; //Post Navigation code goes here endif; ?>

Sepotong kode ini hanya menutup loop. Ini juga memungkinkan Anda untuk menambahkan navigasi posting, tetapi karena sebagian besar pemilik situs web menggunakan plugin yang berbeda untuk ini, kami tidak menyertakannya untuk menghindari konflik kode.

Berikut tampilan seluruh cuplikan kode.

 <div> <?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?> <?php //Show the left hand side column if($counter == 1) : ?> <div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <?php //Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <div class="clear"></div> <?php $counter = 0; endif; ?> <?php $counter++; endwhile; //Pagination can go here if you want it. endif; ?> </div>

Untuk memastikan bahwa kisi pos Anda ditampilkan dengan benar, tambahkan CSS berikut ke situs web Anda.

 #gridcontainer{ margin: 20px 0; width: 100%; } #gridcontainer h2 a{ color: #77787a; font-size: 13px; } #gridcontainer .griditemleft{ float: left; width: 278px; margin: 0 40px 40px 0; } #gridcontainer .griditemright{ float: left; width: 278px; } #gridcontainer .postimage{ margin: 0 0 10px 0; }

Jelajahi efek dari berbagai pemilih CSS pada berbagai komponen loop posting Anda dengan bereksperimen.

Kami harap artikel ini bermanfaat dalam mengajari Anda cara menampilkan posting WordPress Anda dalam gaya kotak.