Tambahkan Tata Letak Masonry dan Grid ke Situs WordPress Anda dengan Hanya CSS
Diterbitkan: 2014-07-09Pernah ingin meramaikan bagaimana posting Anda ditampilkan di halaman beranda dan arsip WordPress Anda?
Bagaimana jika Anda dapat menampilkan posting Anda menggunakan pendekatan masonry (Pinterest) atau mungkin tata letak kotak, semua hanya dengan menambahkan potongan CSS?
Tidak ada plugin, shortcode, perubahan template, menetapkan halaman sebagai halaman rumah. Hanya CSS murni.
Lanjutkan membaca, atau lompat ke depan menggunakan tautan ini:
- Persiapan untuk Menambahkan Tata Letak Masonry dan Grid ke Situs Anda
- Memberikan Postingan Anda Tampilan Pinterest Masonry
- Meletakkan Postingan Dalam Kotak
- Menambahkan CSS Khusus ke Situs Anda
Persiapan untuk Menambahkan Tata Letak Masonry dan Grid ke Situs WordPress Anda
Solusi ini murni didasarkan pada CSS dan oleh karena itu, tidak mengherankan, mereka sangat bergantung pada mark-up HTML di situs Anda untuk bekerja tanpa modifikasi.
CSS yang digunakan telah dirancang (dan diuji) dengan tema default. Ini berarti bahwa CSS memiliki beberapa harapan:
- Kelas ada pada elemen tubuh yang menggambarkan jenis halaman (misalnya beranda, blog, arsip, pencarian)
- Daftar posting adalah kumpulan elemen artikel, lengkap dengan header yang dibungkus dengan div dengan id konten
Jika Anda menggunakan tema default maka Anda akan dapat menggunakan CSS tanpa modifikasi. Bahkan jika tidak, Anda mungkin menemukan bahwa tema Anda menggunakan markup yang cukup mirip sehingga Anda masih dapat menggunakan CSS apa adanya. Misalnya, tema Eighties menggunakan markup yang hampir sama dengan tema default.
Jika tema Anda tidak menggunakan markup yang sama – cara termudah untuk mengetahuinya adalah dengan memeriksa sumber halaman untuk kelas dan id yang dirujuk dalam CSS – maka Anda masih dapat menggunakan CSS, Anda hanya perlu mengubah kelas dan id untuk mencocokkan markup Anda.
Memilih Tempat Menerapkan Penataan
Anda dapat memutuskan bahwa Anda hanya ingin menerapkan gaya yang Anda pilih ke halaman tertentu.
WordPress membuatnya sangat mudah karena menerapkan kelas khusus halaman ke elemen tubuh seperti blog, beranda, arsip, dan pencarian, jadi Anda hanya perlu mengkodekan CSS Anda untuk setiap kelas yang relevan.
Misalnya, jika Anda ingin menerapkan gaya hanya ke halaman beranda, maka CSS Anda akan terlihat seperti:
body.blog article { styles go here... }
Untuk menerapkan gaya ke halaman beranda dan halaman arsip (kategori):
body.blog article, body.archive article { styles go here... }
Untuk menerapkan gaya hanya pada hasil pencarian:
body.blog search { styles go here... }
Sekali lagi, ini tergantung pada tema Anda mengikuti rekomendasi tema WordPress.
Kompatibilitas Peramban
Menjadi CSS3, teknik ini tidak akan berfungsi di semua platform dan browser.
Saya telah menguji dan mengonfirmasi bahwa mereka berfungsi di Chrome dan Safari versi terbaru (keduanya di OS X) dan di iOS (5+). Berbagai situs web CSS juga menyarankan bahwa IE10 juga tidak akan memiliki masalah.
Di luar browser ini (termasuk IE9), jarak tempuh Anda akan bervariasi tetapi perlu diingat bahwa fallback adalah gaya Anda saat ini, sehingga pengunjung yang menggunakan browser lama tidak akan melihat perbedaan apa pun.
Jika Anda menemukan gaya bekerja dengan sukses pada platform yang tidak disebutkan (terutama Windows), beri tahu kami di komentar.
Cukup dari penafian, mari kita lihat cara merapikan daftar posting Anda.
Memberikan Postingan Anda Tampilan Pinterest Masonry
Ada banyak tema WordPress dan beberapa plugin yang menampilkan posting dalam format batu bergaya Pinterest. Tetapi dengan CSS3, Anda cukup menambahkan beberapa gaya tambahan ke situs WordPress Anda dan mendapatkan efek yang sama.
Solusi ini, terinspirasi oleh posting Rahul Arora di W3Bits, didasarkan pada dukungan CSS3 untuk properti kolom . Properti ini akan membagi konten di seluruh jumlah kolom yang ditentukan dan sementara pembuatannya kemungkinan lebih terinspirasi oleh gagasan mengalirkan teks melintasi kolom dengan gaya koran, properti ini juga berguna untuk tata letak pasangan bata.
/* Masonry Custom CSS */
/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/* Masonry bricks or child elements */
body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}
body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}
Dalam tata letak default, posting ditampilkan sebagai elemen artikel yang dibungkus dalam div dengan id konten.
CSSnya:
1. Menyetel jumlah kolom pada #content wrapper menggunakan properti column-count – dalam hal ini 4. Ini juga menyetel kolom-celah . Anda akan melihat penggunaan -moz- dan -webkit- untuk Firefox dan Safari.
2. Mengubah elemen artikel menjadi batu bata, menggunakan inline-block dan mengatur lebar menjadi 100%.
3. Memastikan bahwa tajuk halaman dan navigasi berada di "baris"-nya sendiri dengan menetapkan bahwa elemen-elemen ini menjangkau semua kolom
Agar semuanya tetap rapi, Anda mungkin juga mempertimbangkan untuk menambahkan yang berikut ini:
/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}
h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}
Ini hanya menempatkan margin di sekitar konten dan memastikan bahwa kata-kata panjang dalam judul tidak membuang pemformatan (berguna untuk tema apa pun, tidak hanya di sini).
Menjadikannya Responsif
Salah satu kelemahan dengan pendekatan kolom adalah cepat menurun karena ukuran layar semakin kecil.
Apa yang ingin kami lakukan adalah memanipulasi jumlah kolom sehingga elemen artikel mendapatkan jumlah real estat layar yang masuk akal untuk mempertahankan integritas bata dan daya tarik visual. Jadi, mari tambahkan beberapa kueri media untuk mengubah jumlah kolom berdasarkan ukuran layar:
@media only screen and (max-width : 1024px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 768px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 480px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
Seperti yang Anda lihat, kita hanya perlu mengubah properti jumlah kolom (dan turunannya) untuk setiap kueri.
4 breakpoint ini, 3 di antaranya akan berfungsi di semua platform (cukup ubah ukuran jendela browser Anda untuk melihatnya berpengaruh) dan 1 yang khusus untuk tablet dalam mode potret.
Inilah gaya pasangan bata di iPad dan iPhone:
Anda dapat (dan harus), tentu saja, melangkah lebih jauh dan menambahkan lebih banyak gaya ke batu bata untuk meningkatkan daya tarik visual tetapi hanya 3 pernyataan CSS untuk mengubah daftar posting Anda menjadi dinding pasangan bata cukup mengesankan!
Meletakkan Postingan Dalam Kotak
Jika Anda menyukai lebih banyak keseragaman dan keteraturan daripada yang disediakan oleh pasangan bata, maka Anda mungkin tertarik untuk meletakkan posting Anda dalam kotak.
Kisi-kisi sangat, sangat mudah untuk diterapkan tetapi pasti bekerja paling baik ketika gambar-gambar yang ditampilkan semuanya berukuran sama, jika tidak, Anda dapat berakhir dengan banyak spasi putih yang mengisi "sel" yang lebih pendek.
Kali ini CSS bahkan lebih pendek, hanya mengandalkan penataan elemen artikel :
/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}
Itu saja yang mutlak diperlukan. Sekali lagi, kami menggunakan inline-block dan memastikan bahwa konten artikel (judul, gambar unggulan, kutipan) disejajarkan secara vertikal.
Properti penting adalah lebar karena ini menentukan jumlah "kolom". Saya telah menggunakan 32,5% sebagai nilai awal (menggunakan 33% dapat menyebabkan pembungkus prematur) yang akan menyediakan 3 kolom. Jelas, jika Anda menginginkan 4 kolom maka Anda akan menggunakan 24,5%, 5 kolom 19,5%, dll.
Menambahkan Responsiveness
Sama seperti gaya pasangan bata kami, kisi-kisi harus responsif jika ingin mempertahankan keefektifannya.
Karena properti lebarlah yang menentukan jumlah kolom, maka properti itulah yang akan diubah di berbagai kueri media.
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 768px) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 480px) {
body.blog article, body.archive article {
width: 100%;
}
}
Hanya 3 pertanyaan kali ini karena saya hanya memulai dengan 3 kolom. Jika Anda memutuskan untuk memulai dengan lebih banyak kolom maka Anda mungkin ingin menambahkan breakpoint max-width: 1024px untuk mengatur lebar menjadi 32,5% (3 kolom).
Ini akan mengakibatkan:
- 2 kolom pada tablet dalam mode potret
- 2 kolom ketika ukuran layar adalah lebar maksimum 768px
- 1 kolom ketika ukuran layar adalah lebar maksimum 480px
Breakpoint ini akan mencakup tablet dan smartphone dan mengubah ukuran jendela browser.
Berikut tata letak grid di iPad dan iPhone:
Kisi-kisi, sedikit lebih teratur daripada pasangan bata tetapi benar-benar membutuhkan konsistensi dan ketelitian dalam hal ukuran gambar unggulan untuk menjadi yang paling efektif.
Menambahkan CSS Khusus ke Situs Anda
Ada sejumlah opsi untuk menyuntikkan CSS khusus pilihan Anda ke situs WordPress Anda. Jika tema Anda tidak menyertakan kemampuan untuk menambahkan CSS khusus, maka pilihan Anda adalah:
- Tema Anak – buat tema anak dan tambahkan CSS ke lembar gaya
- Plugin – tambahkan gaya yang Anda pilih ke file CSS baru dan buat plugin yang menggunakan fungsi wp-enqueue-style, mungkin berdasarkan halaman yang dibuat, untuk mengantrekan file baru
- Edit lembar gaya tema saat ini – jangan, sungguh, jangan
- Gunakan plugin CSS khusus – ada sejumlah plugin yang memungkinkan Anda menambahkan CSS khusus ke situs Anda melalui antarmuka admin WordPress (plugin Simple Custom CSS yang bernama tepat adalah salah satu plugin tersebut)
Saya suka menggunakan plugin Custom CSS. Ini cepat dan mudah diatur, membuat pengujian menjadi mudah dan sama cepat dan mudahnya untuk menghapus CSS dari situs WordPress Anda (hapus editor atau hapus instalan plugin).
CSS, Jalan Menuju WordPress Zen
CSS Zen Garden yang luar biasa telah membuktikan selama bertahun-tahun bahwa tampilan dan nuansa situs dapat diubah secara substansial tanpa satu perubahan pun pada markup tetapi dengan mengubah CSS.
Meskipun tidak mendekati level yang sama, kedua teknik ini membuktikan bahwa mengubah tampilan dan nuansa situs WordPress Anda juga sepenuhnya mungkin tanpa perlu mengubah template, menggunakan kode pendek, atau mengembangkan tema anak.
Hanya sedikit CSS.
Catatan Editor: Posting ini telah diperbarui untuk akurasi dan relevansi. [Awal Diterbitkan: Juli 2014 / Direvisi: Februari 2022]
Tag: