Kui me sirvime WordPressi teemakataloog, on enamikul teemadel esitletud kaanepildid. See on populaarne funktsioon. Kaanelehe trend on tõsi isegi blokeerida teemade kataloog ka ekraanipilte.
Vaatleme järgmist näidet Kakskümmend kakskümmend (klassikaline teema), mis sisaldab a kaane mall mida saab kasutada nii ühe postituse kui ka lehe kuvamiseks, kus postituse esiletõstetud pilt kuvatakse ülaosas, mis ulatub üle brauseri ekraani, koos postituse pealkirja ja muude soovitud metaandmetega allpool. Kaanemallid võimaldavad luua sisu, mis eristub tavapärastest sisu kuvamise piirangutest.
Kaanemallide loomine nõuab praegu PHP-koodi kirjutamist, nagu siin on jäädvustatud Twenty Twenty vaiketeema kaanemall. Kui vaatame template-parts/content-cover.php faili, sisaldab see faili kood sisu kuvamiseks, kui cover-template kasutatakse.
Seega ei ole võimalik luua kohandatud tiitellehte, kui te ei oma PHP-st sügavaid teadmisi. Paljude tavaliste WordPressi kasutajate jaoks on ainus võimalus kasutada pistikprogrammi sarnast Custom Post Liik UI nagu on kirjeldatud punktis see lühike video.
Plokkide teemade kaanelõiked
Alates WordPress 5.8, saavad teema autorid luua kohandatud malle (nt üks postitus, autor, kategooria ja muud), millel on top kangelane, kasutades blokeeri redaktor kaaneplokk ja komplekteeritud nende teemadesse minimaalse koodiga või ilma koodita.
Enne kui sukelduda sellesse, kuidas luuakse plokkideemade mallides ülemisi suuri kaanelõike, vaatame lühidalt kahte plokiteema Kakskümmend kakskümmend kaks ja wabi autor Rich Tabor (täielik ülevaade siin).
Kulisside taga rakendab Twenty Twenty-Two suure päise mustrina salvestatud peidetud pildi lisamine aasta header-dark-large osad. Seevastu Wabi teema puhul rakendatakse ühe postituse suurt päise taustavärvi aktsent taustavärvid ja 50 piksli kõrgusega vaheplokk (read: 5-9). Aktsentvärve haldab assets/js/accent-colors.js faili.
Paljud teised otsustasid luua ülemise kaane osa kasutades katteplokk, mis võimaldas kasutajatel muuta taustavärvi ja lisada staatilise pildi Media Libraryst või laadida üles meediumiseadmetest – ilma koodi kirjutamata. Selle lähenemisviisiga pildid saidilt postita esiletõstetud pildiplokk tuli igale postitusele käsitsi lisada, kui soovite, et postitus oleks üksikute postituste taustpildina.
Katteplokid dünaamilise postitusega esiletoodud pildiga
WordPress 6.0 tegi kättesaadavaks veel ühe laheda esiletõstetud kujutise kaaneplokid funktsioon, mis võimaldab kasutada mis tahes postituse või lehe esiletõstetud pilti kaaneploki taustpildina.
Järgnevalt lühike video, Automattici insenerid arutavad plokkide katmiseks esiletõstetud piltide lisamist näite abil Archeo Teema:
Pildiplokki, sealhulgas postituses esiletoodud pildiplokki, saab selle abil täiendavalt kohandada duotone värv sisse theme.json nagu selles lühitükis arutatakse Punktide ühendamine YouTube'i video (Automaticu Anne McCarthy).
Kasutage juhtumi näiteid (Wei, Hele režiim)
Kui sirvime pisipilte rakenduses blokeerida teemade kataloog, näeme, et enamik neist sisaldab suuri kaanepäise sektsioone. Kui süveneme nende mallifailidesse, kasutavad nad staatilise pilditaustaga kaaneplokke.
Mõned hiljuti välja töötatud teemad kasutavad kaaneplokke dünaamilise postituse esiletõstetud pildi taustaga (nt Archeo, Wei, Frost, Bright Mode jne). Lühiülevaade uuest funktsioonist on saadaval aadressil see lühike GitHubi video.
Dünaamiliste aktsentvärvide funktsioonide kombineerimine wabi Teema koos kaane ja postituse esiletõstetud pildiplokkidega laiendab Rich Tabor oma loovust veelgi Wei teema (täielik ülevaade on saadaval siin) dünaamiliste kaanepiltide kuvamiseks ühest postitusest.
Oma Wei teate postituses Rich Tabor kirjutab: “Kaadri taga, single.html mall kasutab kaaneplokki, mis kasutab postituse esiletoodud pilti. Seejärel rakendatakse kakstooni postitusele määratud värviskeemi järgi. Nii näeb peaaegu iga pilt hea välja.
Kui soovite süveneda Wei teema päise kaaneplokki ja õppida oma loomist, siis siin on lühike video Alates Fränk Klein (WP arenduskursused), kes selgitab samm-sammult, kuidas see loodi.
Sarnaselt Wei teemaga Brian Gardner kasutab ka kaaneplokki koos postituse esiletoodud pildiplokiga Hele režiim teema silmapaistva sisu kuvamiseks erksad värvid.
Brian rääkis WPTavernile: "Ta armastab kõige rohkem seda, kuidas kaaneplokki kasutatakse üksikud lehed. See tõmbab esiletõstetud pildi kaaneplokki ning pakub ka kohandatud ploki stiile varjude ja täiskõrguste valikute jaoks. […] Mulle tundub, et see näitab tõesti seda, mis tänapäeva WordPressiga võimalik on.
Üksikasjalikuma teabe saamiseks on siin see demo saidi ja Briani Bright Mode teema täielik ülevaade.
Keeruliste paigutuste kujundamine plokiredaktoriga
Hiljuti käivitas WordPress uue plokiredaktori kodulehe maandumine ja lae leht. Teadaanne äratas vastakaid reaktsioone oma lugejatelt, sealhulgas alates Matt Mullenweg (Automattic), kes kommenteeris sellise "lihtsa lehe" kujundamiseks ja käivitamiseks kulunud 33 päeva. Võite leida täiendavad lavatagused arutelud siin.
Vastuseks lõi Jamie Marsland Pootlepressist see YouTube'i video kus ta reprodutseerib peaaegu 20 minutiga peaaegu identse kodulehe.
Marslandi videot kommenteerides, Sarah Gooding WP Travernist kirjutab: „Teda võib kirjeldada kui plokiredaktoriga võimsat kasutajat. Ta saab ridu, veerge ja rühmi kiiresti segada, kohandades vastavalt vajadusele polsterdust ja veerisid ning määrata igale jaotisele kujundusele vastava värvi. Praegu ei saa seda enamik keskmiseid WordPressi kasutajaid teha.
Kuigi plokiredaktor on jõudnud kaugele, on enamikul teemaarendajatel ja tavakasutajatel endiselt üha rohkem valupunkte, et luua ja kujundada sellega keerulisi paigutusi.
TT2 Gopheri plokkidele täienduse lisamine
Selles jaotises tutvustan teile, kuidas lisasin täiustusi Teema TT2 Gopher Blocks millele viitasin oma eelmises artiklis. Varem kirjeldatud teemade kaaneplokkidest inspireerituna soovisin teemale lisada kolm kaanemalli (autor, kategooria ja ühekaaneline).
Veebisaite sirvides märkame kahte tüüpi kaanepäiseid. Enamasti vaadeldav päis on kaaneosa, mis on segatud saidi päisega (saidi pealkiri ja ülemine navigeerimine) kaaneplokiks (nt Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode jne). Leiame ka päise kaaneosa, mis ei ole saidi päisega segatud ja asub selle all, näiteks see BBC tulevik veebisait. TT2 Gopheri plokkide teema puhul valisin viimase.
Kaane päise mustrite loomine
Kõigepealt loome autori-, üksik- ja muude (kategooriate, siltide) mallide jaoks kaane päise mustrid kaaneplokkide abil. Seejärel teisendame need mustriteks (nagu kirjeldatud siin varem) ja kutsuge mallidesse vastavad päisekaane mustrid.
Kui tunnete plokiredaktoriga töötamist, kujundage oma päise sektsioon saidiredaktoris kaaneplokkide abil ja seejärel teisendage kaane päise kood mustriteks. Kui te aga FSE redaktoriga tuttav ei ole, on lihtsaim viis mustrid kopeerida mustrite kataloog postituses tehke vajalikud muudatused ja teisendage see mustriks.
Minu eelmine artikkel CSS-Tricks, arutasin üksikasjalikult plokimustrite loomist ja kasutamist. Siin on lühike ülevaade töövoost, mida ma ühe postituse kaane päise mustri loomiseks kasutan:
Ühe postituse kaane päise muster
Samm 1: Kasutades FSE liidest, loome uue tühja faili ja alustame ehitusploki struktuuri loomist, nagu on näidatud vasakpoolsel paneelil.
Teise võimalusena võib seda teha esmalt postituses või lehel ning seejärel kopeerida ja kleepida märgistus hiljem mustrifaili.
Samm 2: järgmiseks, et ülaltoodud märgistus mustriks varjata, peaksime esmalt kopeerima selle koodimärgistuse ja kleepima uude /patterns/header-single-cover.php meie koodiredaktoris. Peaksime lisama ka vajaliku mustrifaili päise märgistuse (nt pealkiri, slug, kategooriad, sisestaja jne).
Siin on kogu kood /patterns/header-single-cover.php faili:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Samm 3: Selle demo jaoks olen kasutanud see pilt fotode kataloogist täiteaine taustpildina ja rakendas kesköö kahetooniline värv. Postitusega esiletoodud pildi dünaamiliseks kasutamiseks peaksime lisama "useFeaturedImage":true kaaneplokis, asendades ülaltoodud täitepildi lingi vahetult enne "dimRatio":50 nii, et rida 10 peaks välja nägema järgmine:
Teise võimalusena saab täitepilti muuta ka klõpsates asendama ja valides Kasutage esiletõstetud pilti võimalust:
Nüüd peaksid päise kaanemustrid olema nähtavad mustrite sisestamise paneelil, et neid saaks kasutada kõikjal mallides, postitustes ja lehtedel.
Arhiivikaane päised
Inspireeritud see WP Taverni postitus ja samm-sammuline ülevaade autorimalli päise loomiseks, tahtsin luua sarnase kaanepäise ja lisada ka TT2 Gopheri teemasse.
Kõigepealt loome arhiivikaane päise mustri author.html ka malli, järgides ülaltoodud töövoogu. Sel juhul loon selle uuele tühjale lehele, lisades plokke (nagu allpool loendivaates näidatud):
Kaane taustal kasutasin sama pilti, mida kasutasin ühe postituse päise kaanel.
Kuna soovime autoriplokil kuvada lühikest autori biograafiat, tuleks kasutaja profiililehele lisada ka elulookirjeldus, vastasel juhul kuvatakse esiotsas tühi koht.
Järgmine on märgistuskood header-author-cover, et kasutame järgmises etapis mustrit:
Published by:
Märgistuse varjamiseks a header-author-cover muster, peaksime lisama vajaliku mustrifaili päise märgistuse, nagu varem kirjeldatud. Redigeerides header-author-cover.php muster, saame luua sarnaseid päisekatteid siltide, taksonoomia ja muude kohandatud mallide jaoks.
. header-category-cover.php muster minu jaoks category.html mall on saadaval GitHubis.
Päise kaaneplokkidega mallide loomine
WordPress 6.0 ning hiljutine Gutenberg 13.7 laiendatud mallide loomise funktsioonid plokiredaktorisse, võimaldades paljudel WordPressi kasutajatel luua kohandatud malle ilma sügavate kodeerimisalaste teadmisteta.
Täpsema teabe ja kasutusjuhtude saamiseks leiate siit a Justin Tadlocki põhjalik kohandamismärkus.
Blokeeri redaktor võimaldab luua erinevat tüüpi malle, sealhulgas kaanemalle. Anname lühiülevaate, kuidas kombineerida katteplokk ja postita esiletõstetud pildiplokk uue malli kasutajaliidese abil on lihtne luua erinevat tüüpi kohandatud kaanemalle isegi siis, kui kodeerimisoskus puudub või puudub.
Mallide loomine on Gutenberg 13.7 abil oluliselt lihtsamaks tehtud. Kuidas luua plokimalle koodidega ja saidi redaktoris on kirjeldatud Teema käsiraamat ja minu eelmine artikkel.
Autori mall kaaneplokiga
Ülemine (päise jaotis) märgistus author.html mall on näidatud allpool (rida 6):
...
...
...
... Siin on ekraanipildid kaanepäistest author.html ja category.html mallid:
Kogu mõlema malli kood on saadaval GitHubis.
Üks post katteplokiga
Kaaneploki kuvamiseks ühes postituses peame helistama numbrile header-cover-single pattern päise jaotise all (rida 3):
....
....
....Siin on ekraanipilt, mis näitab ühe postituse esiotsa vaadet koos päise kaaneosaga:
Kogu single-cover.html mall on saadaval GitHubis.
Täiendavaid samm-sammulisi õpetusi leiate a loomise kohta kangelase päise postituse jaotis ja kasutades postituse esiletõstetud pildi tausta katteplokke on WP kõrts ja Täielik saidi redigeerimine kodulehel.
Seal on see!
Kasulikud ressursid
Esiletõstetud kujutise kaaneplokk
Blogi postitused
Kuigi plokkide teemad üldiselt on WordPressi kogukonna liikmetelt palju tagasilööke, minu arvates, need on WordPressi tulevik, ka. Plokkiteemade abil saavad amatöörteemade autorid ilma sügavate kodeerimisoskuste ja PHP- ja JavaScripti keelte valdamiseta luua keeruka paigutusega teemasid koos kangelase kaaneosaga, nagu on kirjeldatud selles artiklis koos mustrid ja stiili variatsioonid.
Varase Gutenbergi kasutajana ei saaks ma olla rohkem põnevil selliste uute teematööriistadega nagu luua ploki teema plugin ja muud, mis võimaldavad teema autoritel saavutada järgmist otse plokiredaktori kasutajaliidesest ilma koodi kirjutamata:
- (I) looma
- (ii) kirjutage teemafailid üle ja eksportige
- (iii) looge tühi või alamteema ja
- (iv) muuta ja salvestada praeguse teema stiilivariatsiooni
Lisaks võimaldavad Gutenbergi pistikprogrammi hiljutised iteratsioonid lubada vedel tüpograafia ja paigutuse joondused ja muud stiililised juhtelemendid, kasutades ainult theme.json fail ilma JavaScripti ja rea CSS-i reegliteta.
Täname, et lugesite ja jagate allpool oma kommentaare ja mõtteid!