Jika kita menelusuri Direktori tema WordPress, sebagian besar tema menampilkan gambar sampul. Ini adalah fitur dalam permintaan populer. Tren halaman sampul benar bahkan di blokir direktori tema screenshot juga.
Mari kita perhatikan contoh berikut dari Dua puluh dua puluh (tema klasik) yang mencakup a templat sampul yang dapat digunakan untuk menampilkan baik dalam satu posting dan halaman, di mana gambar unggulan posting ditampilkan di bagian atas yang membentang di layar browser, dengan judul posting dan meta data lain yang diinginkan di bawah. Template sampul memungkinkan pembuatan konten yang menonjol dari batasan tradisional dalam menampilkan konten.
Membuat template sampul saat ini membutuhkan penulisan kode PHP seperti yang ditangkap di sini di Dua puluh Dua puluh templat sampul tema default. Jika kita melihat template-parts/content-cover.php file, itu berisi kode untuk menampilkan konten saat cover-template digunakan.
Dengan demikian, tidak mungkin membuat halaman sampul yang disesuaikan jika Anda tidak memiliki pengetahuan mendalam tentang PHP. Bagi banyak pengguna WordPress biasa, satu-satunya pilihan adalah menggunakan plugin seperti Custom Post Type UI seperti yang dijelaskan di video singkat ini.
Tutup bagian dalam tema blok
Sejak Wordpress 5.8, penulis tema dapat membuat templat khusus (seperti posting tunggal, penulis, kategori, dan lainnya) dengan bagian pahlawan teratas menggunakan blokir editor blok penutup dan dibundel ke dalam tema mereka dengan kode minimal atau tanpa kode.
Sebelum menyelami bagaimana bagian sampul besar teratas dibuat dalam templat tema blok, mari kita lihat secara singkat dua tema blok Dua Puluh Dua Puluh Dua dan Wabi oleh Rich Tabor (ulasan lengkap di sini).
Di balik layar, Twenty Twenty-Two mengimplementasikan header besar oleh menambahkan gambar tersembunyi yang disimpan sebagai pola dalam header-dark-large bagian. Sedangkan pada tema Wabi, warna background header besar dalam satu postingan diimplementasikan dengan aksen warna latar belakang dan blok pengatur jarak setinggi 50px (baris: 5-9). Warna aksen diatur oleh assets/js/accent-colors.js file.
Banyak orang lain memilih untuk membuat bagian sampul atas dengan menggunakan blok penutup, yang memungkinkan pengguna mengubah warna latar belakang dan menambahkan gambar statis dari Pustaka Media atau mengunggah dari perangkat media – tanpa menulis kode apa pun. Dengan pendekatan ini, gambar dari posting blok gambar unggulan harus ditambahkan secara manual ke setiap posting jika Anda ingin posting menampilkan gambar sebagai gambar latar belakang dalam satu posting.
Tutup Blok dengan gambar unggulan pos dinamis
WordPress 6.0 tersedia keren lainnya blok sampul gambar unggulan fitur, yang memungkinkan penggunaan gambar unggulan dari setiap posting atau halaman sebagai gambar latar belakang di blok sampul.
Dalam berikut video pendek, Insinyur Automattic mendiskusikan penambahan gambar unggulan untuk menutupi blok dengan contoh dari Archaeo tema:
Blok gambar termasuk blok gambar unggulan pos dapat disesuaikan lebih lanjut menggunakan duotone warna dalam theme.json seperti yang dibahas dalam singkat ini Menghubungkan Titik Video YouTube (Anne McCarthy dari Automattic).
Contoh kasus penggunaan (Wei, Mode Terang)
Jika kita menelusuri gambar thumbnail di blokir direktori tema, kami melihat sebagian besar dari mereka menyertakan bagian header sampul besar. Jika kita menggali file template mereka, mereka menggunakan blok sampul dengan latar belakang gambar statis.
Beberapa tema yang dikembangkan baru-baru ini menggunakan blok sampul dengan latar belakang gambar fitur posting dinamis (misalnya, Archeo, Wei, Frost, Bright Mode, dll.). Tinjauan singkat tentang fitur baru tersedia di video GitHub singkat ini.
Menggabungkan fitur warna aksen dinamis dari Wabi tema dengan sampul dan posting blok gambar unggulan, Rich Tabor lebih jauh mengembangkan kreativitasnya dalam yang baru Wei tema (ulasan lengkap tersedia di sini) untuk menampilkan gambar sampul dinamis dari satu pos.
Dalam posting pengumuman Wei-nya, Kaya Tabor menulis: “Di balik layar, itu single.html template menggunakan blok Sampul yang memanfaatkan gambar unggulan kiriman. Kemudian duotone diterapkan oleh skema warna yang ditetapkan ke pos. Dengan cara ini, hampir semua gambar akan terlihat bagus”.
Jika Anda ingin menggali lebih dalam blok penutup tajuk tema Wei dan mempelajari cara membuatnya sendiri, berikut adalah video pendek dari Frank Klein (Kursus Pengembangan WP) yang menjelaskan langkah demi langkah cara pembuatannya.
Mirip dengan tema Wei, Brian Gardner juga memanfaatkan blok sampul dengan blok gambar unggulan pos di terbarunya Mode Cerah tema untuk menampilkan konten yang menonjol dengan warna-warna cerah.
Brian memberi tahu WPTavern: “dia paling suka tentang temanya adalah cara Blok Sampul digunakan halaman tunggal. Ini menarik gambar unggulan ke dalam blok Cover dan juga menawarkan gaya blok khusus untuk opsi bayangan dan ketinggian penuh. […] Saya merasa seolah-olah ini benar-benar menghadirkan apa yang mungkin dengan WordPress modern.”
Untuk lebih jelasnya, ini dia situs demo dan ulasan lengkap tentang tema Mode Cerah Brian.
Merancang tata letak yang kompleks dengan editor blok
Baru-baru ini, WordPress meluncurkan editor blok baru yang dirancang beranda pendaratan dan halaman download. Pengumuman menarik reaksi campuran dari para pembacanya, termasuk dari Matt Mullenweg (Automattic) yang mengomentari 33 hari yang dibutuhkan untuk merancang dan meluncurkan “halaman sederhana”. Kamu dapat menemukan tambahan di belakang layar diskusi di sini.
Sebagai tanggapan, Jamie Marsland dari Pootlepress membuat video YouTube ini di mana ia mereproduksi beranda yang hampir sama dalam waktu hampir 20 menit.
Mengomentari video Marsland, Sarah Gooding dari WP Travern menulis: “Dia adalah apa yang bisa digambarkan sebagai pengguna yang kuat dengan editor blok. Dia dapat dengan cepat mengacak baris, kolom, dan grup, menyesuaikan padding dan margin seperlunya, dan menetapkan setiap bagian warna yang sesuai untuk desain. Pada titik ini, ini bukan sesuatu yang bisa dilakukan oleh kebanyakan pengguna WordPress rata-rata.”
Meskipun editor blok telah berkembang jauh, masih ada masalah yang berkembang bagi sebagian besar pengembang tema dan pengguna biasa untuk membuat dan mendesain tata letak yang kompleks dengannya.
Menambahkan peningkatan ke blok TT2 Gopher
Di bagian ini, saya akan memandu Anda melalui bagaimana saya menambahkan perangkat tambahan ke Tema TT2 Gopher Blocks yang saya rujuk di artikel saya sebelumnya. Terinspirasi oleh blok sampul dari tema yang saya jelaskan sebelumnya, saya ingin menambahkan tiga templat sampul (penulis, kategori, dan sampul tunggal) ke tema.
Saat menjelajahi situs web, kami melihat dua jenis header sampul. Header yang paling banyak diamati adalah bagian sampul yang digabungkan dengan header situs (judul situs dan navigasi atas) ke dalam blok sampul (misalnya, Dua Puluh Dua Puluh, Dua Puluh Dua Puluh Dua, Wei, Wabi, Frost, Mode Cerah, dll.). Kami juga menemukan bagian penutup tajuk yang tidak menyatu dengan tajuk situs dan diposisikan tepat di bawahnya, seperti ini BBC Future situs web. Untuk tema blok TT2 Gopher, saya memilih yang terakhir.
Membuat pola header sampul
Pertama, mari kita buat pola header sampul untuk template penulis, tunggal, dan lainnya (kategori, tag) menggunakan blok sampul. Kemudian kita akan mengubahnya menjadi pola (seperti yang dijelaskan disini sebelumnya) dan panggil pola sampul header masing-masing ke dalam template.
Jika Anda terbiasa bekerja dengan editor blok, rancang bagian header Anda menggunakan blok sampul di editor situs, lalu ubah kode header sampul menjadi pola. Namun, jika Anda tidak terbiasa dengan editor FSE, maka cara termudah adalah menyalin pola dari direktori pola dalam sebuah posting, buat modifikasi yang diperlukan dan ubah menjadi sebuah pola.
Dalam saya artikel Trik CSS sebelumnya, saya membahas secara rinci tentang membuat dan menggunakan pola blok. Berikut adalah ikhtisar singkat dari alur kerja yang saya gunakan untuk membuat pola header sampul posting tunggal:
Pola tajuk sampul pos tunggal
Langkah 1: Menggunakan antarmuka FSE, mari buat file kosong baru dan mulai membangun struktur blok seperti yang ditunjukkan pada panel kiri.
Atau, ini dapat dilakukan di postingan atau halaman terlebih dahulu, lalu salin dan tempel markup ke dalam file pola, kemudian.
Langkah 2: Selanjutnya, untuk mengubah markup di atas menjadi sebuah pola, pertama-tama kita harus menyalin markup kodenya dan menempelkannya ke yang baru /patterns/header-single-cover.php di editor kode kami. Kita juga harus menambahkan markup header file pola yang diperlukan (misalnya, judul, siput, kategori, penyisip, dll.).
Berikut adalah seluruh kode dari /patterns/header-single-cover.php File:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Langkah 3: Untuk demo ini, saya telah menggunakan gambar ini dari direktori foto sebagai pengisi gambar latar belakang, dan menerapkan Tengah malam warna duoton. Untuk menggunakan gambar unggulan pos secara dinamis, kita harus menambahkan "useFeaturedImage":true di blok penutup dengan mengganti tautan gambar pengisi di atas tepat sebelum "dimRatio":50 sehingga baris 10 akan terlihat seperti berikut:
Atau, gambar pengisi juga dapat diubah dengan mengklik menggantikan dan memilih Gunakan gambar unggulan opsi:
Sekarang, pola sampul tajuk harus terlihat di panel penyisip pola untuk digunakan di mana saja di templat, posting, dan halaman.
Header sampul arsip
Terinspirasi oleh posting WP Tavern ini dan panduan langkah demi langkah untuk membuat header template penulis, saya ingin membuat header sampul yang serupa dan menambahkan ke tema TT2 Gopher juga.
Pertama, mari kita buat pola header sampul arsip untuk author.html template juga, mengikuti alur kerja di atas. Dalam hal ini, saya membuat ini di halaman kosong baru, dengan menambahkan blok (seperti yang ditunjukkan di bawah ini dalam tampilan daftar):
Di latar belakang untuk sampul, saya menggunakan gambar yang sama yang digunakan dalam sampul tajuk pos tunggal.
Karena kami ingin menampilkan biografi penulis singkat di blok penulis, pernyataan biografi juga harus ditambahkan ke halaman profil pengguna, atau ruang kosong akan ditampilkan di front-end.
Berikut ini adalah kode markup dari header-author-cover, bahwa kita akan menggunakan pola, pada langkah selanjutnya:
Published by:
Untuk menutupi markup menjadi a header-author-cover pattern, kita harus menambahkan markup header file pola yang diperlukan seperti yang dijelaskan sebelumnya. Dengan mengedit header-author-cover.php pattern, kita dapat membuat sampul header serupa untuk tag, taksonomi, dan template khusus lainnya.
Grafik header-category-cover.php pola untuk saya category.html template tersedia di GitHub.
Membuat Template dengan blok penutup header
Wordpress 6.0 dan baru-baru ini Gutenberg 13.7 fitur pembuatan template yang diperluas ke dalam editor blok, sehingga memungkinkan banyak pengguna WordPress, tanpa pengetahuan yang mendalam tentang pengkodean, untuk membuat template khusus mereka.
Untuk informasi lebih rinci dan kasus penggunaan, berikut adalah catatan penyesuaian menyeluruh oleh Justin Tadlock.
Blokir editor memungkinkan pembuatan berbagai jenis template, termasuk template sampul. Mari kita ikhtisar secara singkat bagaimana menggabungkan blok penutup dan posting blok gambar unggulan dengan UI template baru memudahkan untuk membuat berbagai jenis template kustom sampul bahkan tanpa atau keterampilan pengkodean rendah.
Membuat template menjadi lebih mudah dengan Gutenberg 13.7. Cara membuat template blok dengan kode dan di editor situs dijelaskan dalam Buku pegangan tema dan dalam artikel saya sebelumnya.
Template penulis dengan blok sampul
Markup atas (bagian tajuk) dari author.html template ditunjukkan di bawah ini (baris 6):
...
...
...
... Berikut adalah screenshot dari header sampul untuk author.html dan category.html template:
Seluruhnya kode untuk kedua template tersedia di GitHub.
Pos tunggal dengan blok sampul
Untuk menampilkan blok sampul di pos tunggal kami, kami harus memanggil header-cover-single pattern di bawah bagian header (baris 3):
....
....
....Berikut adalah tangkapan layar yang menunjukkan tampilan ujung depan dari pos tunggal dengan bagian sampul tajuk:
Seluruhnya single-cover.html template tersedia di GitHub.
Anda dapat menemukan tutorial panduan langkah-demi-langkah tambahan tentang membuat bagian posting header pahlawan dan menggunakan blok sampul latar belakang gambar unggulan pos on WP Tavern dan Pengeditan Situs Lengkap website.
Di sana Anda memilikinya!
Sumber yang Bermanfaat
Blok sampul gambar unggulan
Postingan Blog
Meskipun tema blok, secara umum, adalah mendapatkan banyak penolakan dari anggota komunitas WordPress, menurut pendapat saya, mereka adalah masa depan WordPress, juga. Dengan tema blok, penulis tema amatir, tanpa keterampilan pengkodean yang mendalam dan penguasaan bahasa PHP dan JavaScript, sekarang dapat membuat tema dengan tata letak yang kompleks dengan bagian sampul pahlawan seperti yang dijelaskan dalam artikel ini dikombinasikan dengan pola dan variasi gaya.
Sebagai pengguna awal Gutenberg, saya sangat senang dengan alat bertema baru seperti buat tema blok plugin dan lainnya yang memungkinkan penulis tema untuk mencapai yang berikut langsung dari UI editor blok tanpa menulis kode apa pun:
- (i) membuat
- (ii) timpa file tema dan ekspor
- (iii) menghasilkan tema kosong atau anak, dan
- (iv) memodifikasi dan menyimpan variasi gaya dari tema saat ini
Selain itu, iterasi terbaru dari plugin Gutenberg memungkinkan pengaktifan tipografi cair dan keselarasan tata letak dan kontrol gaya lainnya hanya menggunakan theme.json file tanpa JavaScript dan sederet aturan CSS.
Terima kasih telah membaca dan membagikan komentar dan pemikiran Anda di bawah ini!