Če pobrskamo po Imenik WordPress, večina tem prikazuje naslovne slike. To je funkcija, ki je priljubljena. Trend na naslovnici velja tudi za blokiraj imenik tem tudi posnetke zaslona.
Oglejmo si naslednji primer iz Dvajset dvajset (klasična tema), ki vključuje a naslovna predloga ki se lahko uporablja za prikaz tako v eni objavi kot na strani, kjer je predstavljena slika objave prikazana na vrhu, ki se razteza čez zaslon brskalnika, z naslovom objave in drugimi želenimi metapodatki spodaj. Naslovne predloge omogočajo ustvarjanje vsebine, ki izstopa od tradicionalnih omejitev prikazovanja vsebine.
Ustvarjanje naslovnih predlog trenutno zahteva pisanje kode PHP, kot je zajeta tukaj v Predloga naslovnice privzete teme Twenty Twenty. Če pogledamo na template-parts/content-cover.php datoteka, vsebuje Koda za prikaz vsebine, ko je cover-template se uporablja.
Zato ni mogoče ustvariti naslovnice po meri, če nimate poglobljenega znanja o PHP. Za mnoge običajne uporabnike WordPressa je edina možnost uporaba vtičnika like Uporabniški vmesnik po meri kot je opisano v ta kratek video.
Pokrijte razdelke v blok temah
Od leta WordPress 5.8, lahko avtorji tem ustvarijo predloge po meri (kot so posamezna objava, avtor, kategorija in druge) z glavnim razdelkom junakov z uporabo urejevalnik blokov naslovni blok in združeni v njihove teme z minimalno kodo ali brez nje.
Preden se poglobimo v to, kako so ustvarjeni zgornji veliki naslovni odseki v predlogah tem blokov, si na kratko oglejmo dve temi blokov Dvaindvajset in wabi avtor Rich Tabor (celoten pregled tukaj).
V zakulisju Twenty Twenty-Two izvede velik udarec z glavo dodajanje skrite slike, shranjene kot vzorec v header-dark-large deli. Medtem ko je v temi Wabi velika barva ozadja glave v eni objavi implementirana z poudarjene barve ozadja in blok distančnika višine 50 slikovnih pik (vrstice: 5-9). Poudarjene barve upravlja assets/js/accent-colors.js Datoteka.
Številni drugi so se odločili za ustvarjanje zgornjega naslovnega dela z uporabo pokrovni blok, ki je uporabnikom omogočal spreminjanje barve ozadja in dodajanje statične slike iz medijske knjižnice ali nalaganje iz medijskih naprav – brez pisanja kode. S tem pristopom slike iz objavi blok predstavljenih slik je bilo treba dodati ročno v vsako posamezno objavo, če ste želeli imeti prikazano sliko objave kot sliko ozadja v posameznih objavah.
Bloki na naslovnici z dinamično podobo objave
WordPress 6.0 je dal na voljo še eno zanimivost predstavljeni slikovni naslovni bloki funkcija, ki omogoča uporabo predstavljene slike katere koli objave ali strani kot slike ozadja v naslovnem bloku.
V nadaljevanju kratek video, inženirji Automattic razpravljajo o dodajanju predstavljenih slik za pokrivanje blokov s primerom iz Arheo Tema:
Slikovni blok, vključno s predstavljenim slikovnim blokom, je mogoče dodatno prilagoditi z uporabo duotone barva v theme.json kot je obravnavano v tem kratkem Povezovanje pik YouTube video (Anne McCarthy iz Automattic).
Primeri uporabe (Wei, Svetel način)
Če brskamo po sličicah v blokiraj imenik tem, vidimo, da jih večina vključuje velike naslovne razdelke. Če se poglobimo v njihove datoteke s predlogami, uporabljajo naslovne bloke s statično sliko ozadja.
Nekatere nedavno razvite teme uporabljajo naslovne bloke z ozadjem slike dinamične objave (npr. Archeo, Wei, Frost, Bright Mode itd.). Kratek pregled nove funkcije je na voljo v ta kratek videoposnetek GitHub.
Značilnosti kombiniranja dinamičnih poudarjenih barv wabi temo z naslovnico in objavo predstavljenih slikovnih blokov, Rich Tabor dodatno širi svojo ustvarjalnost v svojem novem Wei tema (na voljo celoten pregled tukaj) za prikaz dinamičnih naslovnih slik iz ene objave.
V svoji objavi Wei, Piše Rich Tabor: »V zakulisju, single.html predloga uporablja naslovni blok, ki izkorišča prikazano sliko objave. Nato se dvojni ton uporabi z barvno shemo, ki je dodeljena stebru. Tako bo skoraj vsaka slika videti v redu.
Če se želite poglobiti v naslovni blok teme Wei in se naučiti, kako ustvariti svojega, je tukaj kratek video iz Fränk Klein (WP Development Courses), ki korak za korakom pojasnjuje, kako je bil ustvarjen.
Podobno kot tema Wei, Brian Gardner uporablja tudi naslovni blok z objavo predstavljenega slikovnega bloka v svojem nedavnem Svetel način tema za prikaz izstopajoče vsebine žive barve.
Brian je povedal WPTavernu: »Najbolj mu je všeč način uporabe naslovnega bloka posamezne strani. Predstavljeno sliko potegne v naslovni blok in ponuja tudi prilagojene sloge blokov za sence in možnosti polne višine. […] Počutim se, kot da to resnično predstavlja, kaj je mogoče s sodobnim WordPressom.«
Za več podrobnosti, tukaj je demo stran in celoten pregled Brianove teme Bright Mode.
Oblikovanje kompleksnih postavitev z urejevalnikom blokov
Pred kratkim je WordPress predstavil nov urejevalnik blokov ciljna domača stran in stran za prenos. Objava pritegnila mešane reakcije od svojih bralcev, tudi od Matt Mullenweg (Automattic), ki je komentiral 33 dni, potrebnih za oblikovanje in lansiranje tako "preproste strani". Lahko najdeš dodatne razprave v zakulisju tukaj.
Kot odgovor je ustvaril Jamie Marsland iz Pootlepressa ta videoposnetek YouTube kjer v skoraj 20 minutah reproducira skoraj enako domačo stran.
Komentiranje videa Marsland, Piše Sarah Gooding iz WP Travern: »On je tisto, kar bi lahko opisali kot naprednega uporabnika urejevalnika blokov. Hitro lahko premeša vrstice, stolpce in skupine, po potrebi prilagodi oblazinjenje in robove ter vsakemu razdelku dodeli ustrezno barvo za oblikovanje. Na tej točki to ni nekaj, kar bi lahko naredila večina povprečnih uporabnikov WordPressa.«
Čeprav je urejevalnik blokov že daleč napredoval, še vedno obstajajo vedno večje težave pri večini razvijalcev tem in običajnih uporabnikov pri ustvarjanju in oblikovanju kompleksnih postavitev z njim.
Dodajanje izboljšave blokom TT2 Gopher
V tem razdelku vam bom povedal, kako sem dodal izboljšave v Tema TT2 Gopher Blocks ki sem jih omenil v prejšnjem članku. Po navdihu blokov naslovnic iz tem, ki sem jih opisal prej, sem temi želel dodati tri predloge naslovnic (avtor, kategorija in ena naslovnica).
Med brskanjem po spletnih straneh opazimo dve vrsti naslovnic. Najpogosteje opažena glava je razdelek naslovnice, ki se zlije z glavo mesta (naslov spletnega mesta in zgornja navigacija) v blok naslovnice (npr. Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode itd.). Najdemo tudi naslovni del glave, ki ni pomešan z glavo spletnega mesta in je nameščen tik pod njim, kot je ta BBC prihodnost Spletna stran. Za temo TT2 Gopher blocks sem se odločil za slednjo.
Ustvarjanje vzorcev naslovne glave
Najprej ustvarimo vzorce naslovnih glav za avtorske, posamezne in druge (kategorije, oznake) predloge z uporabo naslovnih blokov. Nato jih bomo pretvorili v vzorce (kot je opisano tukaj prej) in prikličite ustrezne vzorce pokrovov glave v predloge.
Če ste seznanjeni z delom z urejevalnikom blokov, oblikujte razdelek glave z uporabo naslovnih blokov v urejevalniku spletnega mesta in nato pretvorite kodo naslovne glave v vzorce. Če pa niste seznanjeni z urejevalnikom FSE, potem je najlažji način kopiranje vzorcev iz imenik vzorcev v objavi naredite potrebne spremembe in jo pretvorite v vzorec.
V moji prejšnji članek CSS-Tricks, sem podrobno razpravljal o ustvarjanju in uporabi vzorcev blokov. Tukaj je kratek pregled delovnega toka, ki ga uporabljam za ustvarjanje vzorca glave naslovnice posamezne objave:
Vzorec glave naslovnice ene objave
korak 1: Z uporabo vmesnika FSE ustvarimo novo prazno datoteko in začnimo graditi strukturo blokov, kot je prikazano na levi plošči.
Druga možnost je, da to najprej storite v objavi ali na strani, nato pa pozneje kopirate in prilepite oznako v datoteko z vzorcem.
korak 2: Nato, če želimo zgornjo oznako skriti v vzorec, moramo najprej kopirati njeno oznako kode in jo prilepiti v novo /patterns/header-single-cover.php v našem urejevalniku kode. Dodati bi morali tudi zahtevano oznako glave vzorčne datoteke (npr. naslov, polž, kategorije, vstavljalec itd.).
Tukaj je celotna koda /patterns/header-single-cover.php datoteka:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
korak 3: Za to predstavitev sem uporabil ta slika iz imenika fotografij kot polnilno sliko ozadja in uporabil Midnight dvobarvna barva. Za dinamično uporabo predstavljene slike objave bi morali dodati "useFeaturedImage":true v naslovnem bloku tako, da zamenjate zgornjo povezavo do polnilne slike tik pred "dimRatio":50 tako da bi morala biti vrstica 10 videti takole:
Druga možnost je, da sliko za polnjenje spremenite tudi s klikom Zamenjaj in izbiro Uporabite predstavljeno sliko možnost:
Zdaj bi morali biti vzorci pokrovov glave vidni na plošči za vstavljanje vzorcev za uporabo kjer koli v predlogah, objavah in straneh.
Naslovi naslovnic arhiva
Navdih ta objava v gostilni WP in navodila po korakih za ustvarjanje glave avtorske predloge, želel sem ustvariti podobno glavo naslovnice in dodati temi TT2 Gopher.
Najprej ustvarimo vzorec glave naslovnice arhiva za author.html tudi predlogo, pri čemer upoštevajte zgornji potek dela. V tem primeru to ustvarjam na novi prazni strani z dodajanjem blokov (kot je prikazano spodaj v pogledu seznama):
V ozadju naslovnice sem uporabil isto sliko kot v naslovnici glave posamezne objave.
Ker bi radi v avtorskem bloku prikazali kratko biografijo avtorja, je treba na stran s profilom uporabnika dodati tudi biografsko izjavo, sicer bo v sprednjem delu prikazan prazen prostor.
Sledi označevalna koda za header-author-cover, da bomo uporabili vzorec v naslednjem koraku:
Published by:
Če želite prikriti oznako v a header-author-cover vzorec, bi morali dodati zahtevano oznako glave datoteke z vzorcem, kot je opisano prej. Z urejanjem header-author-cover.php vzorec, lahko ustvarimo podobne pokrove glav za oznake, taksonomijo in druge predloge po meri.
O header-category-cover.php vzorec za mojo category.html Predloga je na voljo na GitHubu.
Ustvarjanje predlog z naslovnimi bloki glave
WordPress 6.0 in nedavno Gutenberg 13.7 razširjene funkcije za ustvarjanje predlog v urejevalnik blokov, kar mnogim uporabnikom WordPressa brez poglobljenega znanja o kodiranju omogoča ustvarjanje svojih prilagojenih predlog.
Za podrobnejše informacije in primere uporabe je tukaj a temeljita opomba o prilagajanju Justina Tadlocka.
Urejevalnik blokov omogoča ustvarjanje različnih vrst predlog, vključno s predlogami naslovnic. Oglejmo si na kratko način kombiniranja pokrovni blok in objavi blok predstavljenih slik z novim uporabniškim vmesnikom predloge omogoča preprosto ustvarjanje različnih vrst predlog po meri naslovnic tudi brez ali z nizkim znanjem kodiranja.
Ustvarjanje predlog je postalo veliko lažje z Gutenbergom 13.7. Kako ustvariti predloge blokov s kodami in v urejevalniku strani je opisano v Tematski priročnik in moj prejšnji članek.
Avtorska šablona z naslovnim blokom
Oznaka na vrhu (razdelek glave). author.html predloga je prikazana spodaj (vrstica 6):
...
...
...
... Tukaj so posnetki zaslona glav naslovnic za author.html in category.html predloge:
Celoten koda za obe predlogi je na voljo na GitHubu.
Enojni drog s pokrivnim blokom
Za prikaz naslovnice v naši eni objavi moramo poklicati header-cover-single pattern pod razdelkom glave (3. vrstica):
....
....
....Tukaj je posnetek zaslona, ki prikazuje sprednji pogled na posamezno objavo z naslovnim delom glave:
Celoten single-cover.html Predloga je na voljo na GitHubu.
Najdete lahko dodatne vadnice po korakih za ustvarjanje razdelek naslovne objave junaka in z uporabo blokov naslovnice ozadja s prikazano sliko on Gostilna WP in Celotno urejanje spletnega mesta spletne strani.
Tam imaš!
Koristni viri
Predstavljen slikovni naslovni blok
Objave na blogu
Čeprav blokovske teme na splošno so člani skupnosti WordPress veliko nasprotujejo, po mojem mnenju, so prihodnost WordPressa, tudi. Z blokovnimi temami lahko amaterski avtorji tem, brez poglobljenih veščin kodiranja in obvladovanja jezikov PHP in JavaScript, zdaj ustvarjajo teme s kompleksnimi postavitvami z glavnim naslovnim delom, kot je opisano v tem članku, v kombinaciji z vzorci in stilske variacije.
Kot zgodnji uporabnik Gutenberga ne bi mogel biti bolj navdušen nad novimi orodji za oblikovanje tem, kot je ustvari temo bloka vtičnik in drugi, ki avtorjem tem omogočajo, da dosežejo naslednje neposredno iz uporabniškega vmesnika urejevalnika blokov brez pisanja kode:
- (I) ustvarjajo
- (ii) prepisati datoteke s temo in izvoziti
- (iii) ustvariti prazno ali podrejeno temo in
- (iv) spremenite in shranite različico sloga trenutne teme
Poleg tega nedavne ponovitve vtičnika Gutenberg omogočajo omogočanje tekoča tipografija in poravnave postavitve in druge slogovne kontrole z uporabo samo theme.json datoteka brez JavaScripta in vrstice pravil CSS.
Hvala za branje in delite svoje komentarje in misli spodaj!
