Cara menyesuaikan templat penutup tema WordPress Block dengan imej ciri pos dinamik

templat penutup dinamik dalam tema WordPress: Gunakan blok imej yang dipaparkan untuk meningkatkan pengalaman pengguna

Banyak tema WordPress mempunyai imej penutup, yang merupakan ciri yang popular. Trend ini juga terbukti dalam tangkapan skrin katalog tema blok.

Mengambil Twenty Twenty Tema sebagai contoh, ia mengandungi templat penutup yang boleh digunakan dalam artikel dan halaman tunggal. Imej -imej yang diketengahkan artikel akan dipaparkan di bahagian atas, merangkumi keseluruhan skrin penyemak imbas, dengan tajuk artikel dan metadata lain di bawah. Templat penutup membolehkan penciptaan kandungan yang berbeza dari cara tradisional untuk memaparkan kandungan.

Pada masa ini, mewujudkan templat penutup memerlukan menulis kod PHP, seperti templat penutup untuk dua puluh dua tema lalai. Dalam fail

, ia mengandungi kod untuk memaparkan kandungan apabila menggunakan templat penutup. template-parts/content-cover.php

Untuk pengguna WordPress biasa yang tidak mahir dalam PHP, satu -satunya pilihan ialah menggunakan plugin seperti UI jenis post adat, seperti yang ditunjukkan dalam video.

blok penutup dalam tema blok

Bermula dengan WordPress 5.8, penulis topik boleh menggunakan blok penutup editor blok untuk membuat templat tersuai (seperti jawatan tunggal, penulis, kategori, dll.) Dan masukkannya dalam topik tanpa menulis atau hanya sedikit kod.

Sebelum menyelam bagaimana untuk membuat blok perlindungan besar dalam templat tema blok, mari kita lihat dua tema blok dua puluh dua puluh dua dan Wabi oleh Rich Tabor.

Dua puluh dua puluh dua melaksanakan tajuk besar dengan menambahkan imej tersembunyi sebagai penyimpanan skema di bahagian

. Dalam tema Wabi, warna latar belakang besar-besaran satu artikel dicapai dengan menekankan warna latar belakang dan blok selang ketinggian 50px. Menekankan warna diuruskan oleh header-dark-large fail. assets/js/accent-colors.js

Banyak tema lain memilih untuk menggunakan blok penutup untuk membuat blok penutup atas, yang membolehkan pengguna menukar warna latar belakang dan menambah imej statik tanpa menulis sebarang kod. Dengan cara ini, jika anda ingin menggunakan imej pilihan artikel sebagai imej latar belakang satu artikel, anda mesti menambah imej secara manual ke setiap artikel tunggal.

Blok penutup dengan Artikel Dinamik Gambar Pilihan

WordPress 6.0 menyediakan ciri blok penutup gambar yang menarik yang membolehkan penggunaan gambar -gambar yang diketengahkan dari mana -mana artikel atau halaman sebagai imej latar belakang blok penutup.

Dalam video pendek di bawah ini, jurutera automattic membincangkan cara menambah imej yang dipaparkan ke blok penutup dan menunjukkannya dengan tema Archeo sebagai contoh:

Blok gambar yang mengandungi imej khas artikel boleh disesuaikan dengan menggunakan warna dua nada dalam

. theme.json

kes pengguna (wei, mod cerah)

Apabila melayari imej kecil dalam direktori tema blok, kita melihat bahawa kebanyakan imej mengandungi blok tajuk perlindungan besar. Jika anda menggali lebih mendalam ke dalam fail templat mereka, anda akan melihat bahawa mereka menggunakan blok penutup dengan latar belakang imej statik.

Beberapa topik yang baru dibangunkan menggunakan blok penutup dengan latar belakang artikel dinamik yang dipaparkan imej (mis., Archeo, Wei, Frost, Mode Bright, dll.). Gambaran ringkas mengenai ciri baru ini boleh didapati dalam video GitHub.

Rich Tabor menggabungkan ciri -ciri warna aksen dinamik tema WABI dengan penutup dan pos blok imej yang dipaparkan, terus mengembangkan kreativiti beliau dalam topik barunya untuk memaparkan imej perlindungan dinamik dari satu jawatan.

Dalam artikel pengumuman Wei, Rich Tabor menulis: "Latar belakang adegan, template

menggunakan blok penutup yang mengambil kesempatan daripada imej-imej yang dipaparkan single.html Jika anda ingin melihat lebih mendalam pada blok penutup tajuk tema Wei dan belajar bagaimana untuk membuat blok penutup anda sendiri, berikut adalah video pendek dari Fränk Klein (Kursus Pembangunan WP) yang menerangkan proses penciptaannya dengan langkah.

Sama seperti tema WEI, Brian Gardner juga menggunakan blok penutup dengan blok imej yang dipaparkan dalam tema Mod Bright baru -baru ini untuk menunjukkan kandungan yang menarik dan warna -warna cerah.

Brian memberitahu WPTAVER: "Tema kegemarannya adalah bagaimana blok penutup digunakan pada satu halaman.

Untuk maklumat lanjut, sila lawati laman web demo mereka dan semakan penuh tema Mod Brian Brian.

susun atur kompleks reka bentuk menggunakan editor blok

Baru -baru ini, WordPress mengeluarkan editor blok baru untuk merancang halaman rumah masuk dan halaman muat turun. Pengumuman itu mencetuskan pelbagai reaksi dari pembaca, termasuk Matt Mullenweg dari Automatik, yang mengulas mengenai 33 hari yang diperlukan untuk merekabentuk dan menerbitkan "halaman mudah" sedemikian. Anda boleh mencari perbincangan lain di belakang layar di sini.

Sebagai tindak balas, Jamie Marsland dari Pootlepress mencipta video YouTube ini, dan dia mencipta semula laman utama yang hampir sama dalam hampir 20 minit.

WP Travern's Sarah Gooding mengulas mengenai video Marsland, "Dia boleh dikatakan sebagai pengguna veteran editor blok.

Walaupun editor blok telah membuat kemajuan yang besar, masih terdapat beberapa kesukaran dengan membuat dan merancang susun atur kompleks untuk kebanyakan pemaju tema dan pengguna purata.

Tambah peningkatan ke blok TT2 Gopher

Dalam bahagian ini, saya akan membimbing anda melalui cara menambah peningkatan kepada tema Blok TT2 Gopher yang saya nyatakan dalam jawatan terdahulu saya. Diilhamkan oleh blok penutup dalam tema yang diterangkan sebelum ini, saya ingin menambah tiga templat penutup (pengarang, kategori, dan penutup halaman tunggal) kepada tema.

Apabila melayari laman web, kami akan melihat dua jenis tajuk perlindungan. Tajuk yang paling biasa ialah blok penutup bersatu dengan tajuk laman web (tajuk tapak dan navigasi teratas) ke dalam blok penutup (mis., Dua puluh dua puluh, dua puluh dua, Wei, Wabi, Frost, Mode Bright, dll.). Kami juga akan mendapati bahawa blok penutup tajuk tidak digabungkan dengan tajuk laman web, tetapi terletak terus di bawahnya, seperti laman web BBC Future. Untuk tema Blok TT2 Gopher, saya memilih yang terakhir.

Buat mod tajuk penutup

Pertama, mari buat corak tajuk penutup untuk pengarang, artikel tunggal, dan templat lain (kategori, label) menggunakan blok penutup. Kami kemudian menukarnya kepada corak dan memanggil corak penutup tajuk yang sepadan ke dalam templat.

Jika anda sudah biasa dengan editor blok, reka bentuk blok tajuk anda dengan blok penutup dalam editor tapak dan menukar kod tajuk penutup ke corak. Walau bagaimanapun, jika anda tidak biasa dengan editor FSE, cara yang paling mudah adalah menyalin corak dari direktori corak dalam artikel, membuat pengubahsuaian yang diperlukan, dan kemudian menukarnya kepada corak.

Dalam artikel CSS-Tricks sebelumnya, saya membincangkan secara terperinci penciptaan dan penggunaan corak blok. Berikut adalah gambaran keseluruhan aliran kerja untuk mencipta corak tajuk penutup artikel tunggal:

Mod Title Cover Artikel Tunggal

Langkah 1 : Menggunakan antara muka FSE, marilah kita membuat fail kosong baru dan mula membina struktur blok yang ditunjukkan di panel kiri.

Sebagai alternatif, ini boleh dilakukan terlebih dahulu dalam artikel atau halaman, dan kemudian menyalin dan tampal markup ke dalam fail skema.

Langkah 2 : Seterusnya, untuk menukar tanda di atas ke dalam mod, kita harus terlebih dahulu menyalin tanda kodnya dan tampalnya ke dalam fail baru dalam editor kod. Kami juga harus menambah tag tajuk fail skema yang diperlukan (mis., Tajuk, slug, kategori, Inserter, dan lain -lain). /patterns/header-single-cover.php

Berikut adalah kod lengkap fail

: /patterns/header-single-cover.php

<?php /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
<div style="margin-top:0px;margin-bottom:0px;min-height:50vh">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%"   style="max-width:90%">
    <div>
        <div>
            <div>


                <p>|</p>


            </div>


        </div>
    </div>
</div>

Langkah 3 : Untuk demonstrasi ini, saya menggunakan imej ini dari direktori foto sebagai imej latar belakang yang mengisi dan menggunakan warna Midnight dua nada. Untuk menggunakan imej yang dipaparkan secara dinamik, kita harus menambah sebelum dimRatio:50 dengan menggantikan pautan imej isi yang disebutkan di atas supaya garis 10 kelihatan seperti ini: "useFeaturedImage":true

<code></code>

Sebagai alternatif, anda juga boleh menukar imej isi dengan mengklik

dan memilih untuk menggunakan pilihan imej yang diketengahkan: Sekarang, mod penutup tajuk harus dilihat dalam panel memasukkan mod dan boleh digunakan di mana saja dalam templat, artikel, dan halaman.

Tajuk penutup arkib Diilhamkan oleh artikel WP Tavern ini dan langkah demi langkah untuk mewujudkan tajuk template pengarang, saya ingin membuat tajuk penutup yang sama dan menambahkannya ke topik TT2 Gopher.

Pertama, mari kita buat corak tajuk perlindungan arkib untuk templat author.html, mengikuti alur kerja di atas. Dalam kes ini, saya menciptanya dalam halaman kosong baru dengan menambahkan blok (seperti yang ditunjukkan dalam paparan senarai di bawah):

Di latar belakang penutup, saya menggunakan imej yang sama yang digunakan di sampul tajuk post.

Kerana kami ingin memaparkan profil pengarang pendek di blok pengarang, kami harus menambah pernyataan biografi ke halaman profil pengguna, jika tidak, akhir depan akan menunjukkan ruang kosong.

Berikut adalah kod tag untuk header-author-cover yang akan kita gunakan sebagai corak:

<?php /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
<div style="margin-top:0px;margin-bottom:0px;min-height:50vh">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%"   style="max-width:90%">
    <div>
        <div>
            <div>


                <p>|</p>


            </div>


        </div>
    </div>
</div>

Untuk menukar tag ke mod header-author-cover, kita harus menambah tag tajuk fail corak yang diperlukan seperti yang diterangkan sebelumnya. Dengan mengedit mod header-author-cover.php, kita boleh membuat tajuk penutup yang sama untuk label, taksonomi, dan templat tersuai lain.

Mod

header-category-cover.php boleh didapati di GitHub dalam templat category.html saya.

Buat templat menggunakan blok penutup

WordPress 6.0 dan yang paling baru-baru ini Gutenberg 13.7 memperluaskan keupayaan penciptaan templat ke dalam editor blok, begitu banyak pengguna WordPress kini boleh membuat templat tersuai mereka walaupun tanpa pengetahuan pengekodan yang mendalam.

Untuk maklumat lanjut dan gunakan kes, lihat Arahan Penyesuaian Komprehensif Justin Tadlock.

Editor Blok membolehkan penciptaan pelbagai jenis templat, termasuk templat penutup. Mari kita menggariskan secara ringkas bagaimana untuk menggabungkan blok penutup dan menyiarkan blok imej yang dipaparkan dengan UI templat baru untuk dengan mudah membuat pelbagai jenis templat tersuai tanpa atau dengan sedikit kemahiran pengekodan.

Membuat templat lebih mudah dengan Gutenberg 13.7. Cara membuat templat blok dalam kod dan di editor tapak diterangkan dalam Manual Topik dan dalam jawatan terdahulu saya.

Templat pengarang dengan blok penutup

Tanda atas (blok tajuk) templat adalah seperti berikut (baris 6): author.html

<code></code>

Berikut adalah tangkapan skrin tajuk penutup

dan author.html templat: category.html

Kod lengkap untuk kedua -dua templat ini boleh didapati di GitHub.

artikel tunggal dengan blok penutup

Untuk memaparkan blok penutup dalam satu artikel, kita mesti memanggil mod (baris 3):

Ini adalah tangkapan skrin yang menunjukkan pandangan depan satu jawatan dengan blok penutup tajuk: header-cover-single Kod penuh untuk template

<code><div style="min-height:200px">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159750414.jpeg" class="lazy" alt="" data-object-fit="cover" data-object-position="50% 75%"   style="max-width:90%">
    <div>
        <div>
            <div style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem">


                <div>
                    <div>
                        <p>Published by:</p>


                    </div>



                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>
</code>

boleh didapati di GitHub.

Anda boleh menemui lebih banyak tutorial langkah demi langkah langkah-langkah untuk membuat blok post tajuk wira dan menggunakan blok penutup latar belakang imej yang dipaparkan pada

WP Tavern single-cover.html dan laman web penyuntingan tapak penuh.

itu sahaja!

Sumber Berguna

Blok penutup gambar yang dipaparkan

• artikel yang dipaparkan Blok gambar (sokongan WordPress)
• Gunakan gambar yang dipaparkan artikel dengan Blok penutup YouTube (Dave on WP)
• tutorial langkah demi langkah pada blok penutup (sokongan WordPress)
• Blok penutup yang dipaparkan dan masa depan data mengikat ke blok WordPress sejagat (WP Tavern)
• Sesuaikan susun atur artikel tunggal dengan WordPress Gutenberg (Pootlepress)
• dinamikkan blok penutup dan tambahkan pengikatan imej yang dipaparkan #39658 (github)

Posts blog

• Blok penutup yang dipaparkan dan masa depan data mengikat ke blok WordPress sejagat (wptavern)
• Tinggalkan Kesan: Cara Menggunakan Blok Untuk Membina Tajuk Hero Artikel (WPTAVern)
• Penambahbaikan editor teras: Gunakan lebih banyak pilihan templat untuk penyesuaian yang lebih mendalam (buat teras WordPress)

Walaupun tema blok telah diboikot oleh ahli -ahli komuniti WordPress secara umum, saya fikir mereka juga masa depan WordPress. Menggunakan tema blok, walaupun tanpa kemahiran pengekodan mendalam dan penguasaan bahasa PHP dan JavaScript, penulis tema amatur kini boleh menggunakan blok penutup wira yang digabungkan dengan corak dan gaya gaya yang diterangkan dalam artikel ini untuk membuat tema dengan susun atur yang kompleks.

Sebagai pengguna Gutenberg awal, saya sangat teruja dengan alat tema baru (seperti create block theme plugin, dll) yang membolehkan pengarang tema melaksanakan fungsi berikut secara langsung dari UI Editor Blok tanpa menulis sebarang kod:

• (i) Buat
• (ii) Timpa fail tema dan eksport
• (iii) menjana tema kosong atau sub-tema, dan
• (iv) Ubah suai dan simpan variasi gaya tema semasa

Di samping itu, versi terkini plugin Gutenberg membolehkan tipografi dan penjajaran susun atur yang lancar dan kawalan gaya lain yang akan diaktifkan menggunakan fail theme.json (tiada JavaScript dan satu baris peraturan CSS yang diperlukan).

Terima kasih kerana membaca, sila kongsi komen dan pemikiran anda di bawah!

Atas ialah kandungan terperinci Cara menyesuaikan templat penutup tema WordPress Block dengan imej ciri pos dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!