Jos selaamme WordPressin teemahakemisto, suurin osa teemoista esittelee kansikuvia. Se on suosittu ominaisuus. Kansisivutrendi on totta jopa lohkoteeman hakemisto myös kuvakaappauksia.
Tarkastellaan seuraavaa esimerkkiä Kaksikymmentä kaksikymmentä (klassinen teema), joka sisältää a kansimalli jota voidaan käyttää näyttämään sekä yksittäisessä viestissä että sivulla, jossa julkaisun esittelykuva näkyy yläreunassa, joka ulottuu selainnäytön poikki, ja tekstin otsikko ja muut halutut metatiedot alla. Kansimallien avulla voit luoda sisältöä, joka erottuu perinteisistä sisällön näyttämisen rajoituksista.
Kansimallien luominen vaatii tällä hetkellä PHP-koodin kirjoittamisen sellaisena kuin se on tallennettu tässä Twenty Twenty -oletusteeman kansimalli. Jos katsomme template-parts/content-cover.php tiedosto, se sisältää koodi sisällön näyttämiseen, kun cover-template käytetään.
Näin ollen ei ole mahdollista luoda mukautettua kansilehteä, jos sinulla ei ole syvällistä PHP-tuntemusta. Monille tavallisille WordPress-käyttäjille ainoa vaihtoehto on käyttää laajennusta Mukautetun postityypin käyttöliittymä kuten kohdassa tämä lyhyt video.
Peitä osiot lohkoteemoissa
Koska WordPress 5.8, teeman kirjoittajat voivat luoda mukautettuja malleja (kuten yksittäinen viesti, kirjoittaja, luokka ja muut), joissa on huippusankariosio käyttämällä estä editori kansilohko ja yhdistetty niiden teemoihin minimaalisella tai ilman koodia.
Ennen kuin sukeltaa siihen, kuinka suurimpien kansiosien luominen lohkoteemamalleissa luodaan, katsotaanpa lyhyesti kahta lohkoteemaa Kaksikymmentäkaksikymmentäkaksi ja wabi kirjoittanut Rich Tabor (koko arvostelu tätä).
Kulissien takana Twenty Twenty-Two toteuttaa suuren otsikon lisäämällä kuvioksi tallennettu piilotettu kuva vuonna header-dark-large osat. Sen sijaan Wabi-teemassa yhden viestin suuren otsikon taustaväri on toteutettu korostusvärit ja 50 pikselin korkeus välikappale (rivit: 5-9). Korostusvärejä hallitsee assets/js/accent-colors.js tiedosto.
Monet muut päättivät luoda yläkansiosan käyttämällä kansilohko, jonka avulla käyttäjät voivat vaihtaa taustaväriä ja lisätä staattisen kuvan mediakirjastosta tai ladata medialaitteista – ilman koodin kirjoittamista. Tällä lähestymistavalla kuvia lähetä suositeltu kuvalohko piti lisätä manuaalisesti kuhunkin yksittäiseen viestiin, jos halusit postauksen näkyvän taustakuvana yksittäisissä viesteissä.
Kansilohkot dynaamisella postauksella
WordPress 6.0 toi saataville uuden hienon esillä olevat kuvan kansilohkot ominaisuus, joka mahdollistaa minkä tahansa viestin tai sivun esittelykuvan käytön taustakuvana kansilohkossa.
Seuraavassa lyhyt video, Automattic-insinöörit keskustelevat esittelykuvien lisäämisestä lohkojen peittämiseen esimerkin avulla Archaeo teema:
Kuvalohkoa, joka sisältää post-suositeltu kuvalohkon, voidaan mukauttaa edelleen käyttämällä duotone väri theme.json kuten tässä lyhennelmässä on käsitelty Yhdistää pisteet YouTube-video (Automaticin Anne McCarthy).
Käytä tapausesimerkkejä (Wei, Kirkas tila)
Jos selaamme pikkukuvia lohkoteeman hakemistoNäemme, että suurin osa niistä sisältää suuria kansiotsikkoosia. Jos kaivamme heidän mallitiedostoihinsa, he käyttävät kansilohkoja, joissa on staattinen taustakuva.
Joissakin äskettäin kehitetyissä teemoissa käytetään kansilohkoja dynaamisen postauksen taustakuvan kanssa (esim. Archeo, Wei, Frost, Bright Mode jne.). Lyhyt katsaus uudesta ominaisuudesta on saatavilla osoitteessa tämä lyhyt GitHub-video.
Dynaamisten korostusvärien ominaisuuksien yhdistäminen wabi Teeman kansi- ja postauskuvalohkoilla Rich Tabor laajentaa luovuuttaan uudessa Wei teema (koko arvostelu saatavilla tätä) näyttääksesi dynaamiset kansikuvat yhdestä viestistä.
Wei-ilmoitusviestissään Rich Tabor kirjoittaa: "Kuissien takana, single.html malli käyttää kansilohkoa, joka hyödyntää viestin esittelykuvaa. Sitten kaksisävyä sovelletaan viestiin määritetyn väriteeman mukaan. Tällä tavalla melkein mikä tahansa kuva näyttää hyvältä."
Jos haluat kaivaa syvemmälle Wei-teeman otsikon kansilohkoon ja oppia luomaan omasi, tässä on lyhyt video alkaen Frenk Klein (WP Development Courses), joka selittää vaihe vaiheelta, kuinka se luotiin.
Samanlainen kuin Wei-teema, Brian Gardner käyttää myös kansilohkoa, jossa on post-suositeltu kuvalohko hänen äskettäin Kirkas tila teema, jolla voit näyttää erottuvan sisällön eloisat värit.
Brian kertoi WPTavernille: "Hän pitää eniten siitä, miten Cover Blockia käytetään yksittäisiä sivuja. Se vetää esitellyn kuvan Cover-lohkoon ja tarjoaa myös mukautettuja lohkotyylejä varjoille ja täyskorkeuksille. […] Minusta tuntuu, että tämä todella esittelee sen, mitä nykyaikaisella WordPressillä on mahdollista.
Jos haluat lisätietoja, tässä on se demo-sivusto ja täydellinen arvostelu Brianin Bright Mode -teemasta.
Monimutkaisten asettelujen suunnittelu lohkoeditorilla
Äskettäin WordPress julkaisi uuden lohkoeditorin laskeutumisetusivulle ja ladata sivu. Ilmoitus herätti ristiriitaisia reaktioita lukijoiltaan, mukaan lukien Matt Mullenweg (Automattic), joka kommentoi 33 päivää, joka kului tällaisen "yksinkertaisen sivun" suunnitteluun ja käynnistämiseen. Voit löytää lisää kulissien takana olevia keskusteluja täällä.
Vastauksena Pootlepressin Jamie Marsland loi tämä YouTube-video jossa hän toistaa lähes identtisen kotisivun lähes 20 minuutissa.
Kommentoi Marsland-videota, Sarah Gooding WP Travernistä kirjoittaa: "Häntä voisi kuvailla lohkoeditorin tehokäyttäjäksi. Hän voi nopeasti sekoittaa rivejä, sarakkeita ja ryhmiä, säätää täyttöjä ja marginaaleja tarpeen mukaan ja määrittää jokaiselle osalle vastaavan värin suunnittelua varten. Tässä vaiheessa useimmat tavalliset WordPress-käyttäjät eivät voi tehdä tätä."
Vaikka lohkoeditori on edennyt pitkälle, useimmat teeman kehittäjät ja tavalliset käyttäjät saavat yhä enemmän ongelmia luoda ja suunnitella sen avulla monimutkaisia asetteluja.
Lisätään parannus TT2 Gopher -lohkoihin
Tässä osiossa opastan sinua, kuinka lisäsin parannuksia TT2 Gopher Blocks -teema johon viittasin edellisessä artikkelissani. Aiemmin kuvailemieni teemojen kansilohkojen innoittamana halusin lisätä teemaan kolme kansimallia (tekijä, luokka ja yksikantinen).
Selatessamme verkkosivustoja huomaamme kahdenlaisia kansiotsikoita. Useimmiten havaittu otsikko on kansiosio, joka on sekoitettu sivuston otsikkoon (sivuston otsikko ja ylänavigointi) kansilohkoon (esim. Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode jne.). Löydämme myös otsikon kansiosan, jota ei ole sekoitettu sivuston otsikkoon ja joka on sijoitettu juuri sen alle, kuten tämä BBC Future verkkosivusto. TT2 Gopher blocks -teeman osalta valitsin jälkimmäisen.
Kannen otsikkokuvioiden luominen
Luodaan ensin kansiotsikkomallit tekijä-, yksittäis- ja muille (luokat, tagit) malleille käyttämällä kansilohkoja. Sitten muunnamme ne kuvioiksi (kuten on kuvattu täällä aiemmin) ja kutsu vastaavat otsikon kansikuviot malleihin.
Jos olet tottunut työskentelemään lohkoeditorin kanssa, suunnittele otsikkoosio käyttämällä kansilohkoja sivustoeditorissa ja muunna sitten kansiotsikkokoodi malleiksi. Jos et kuitenkaan tunne FSE-editoria, helpoin tapa on kopioida kuvioita sovelluksesta kuvioiden hakemisto postauksessa, tee tarvittavat muutokset ja muunna se kuvioksi.
Minun edellinen CSS-Tricks -artikkeli, Keskustelin yksityiskohtaisesti lohkokuvioiden luomisesta ja käyttämisestä. Tässä on lyhyt katsaus työnkulkuun, jota käytän yksittäisen viestikannen otsikkokuvion luomiseen:
Yhden pylvään kannen otsikkokuvio
Vaihe 1: Luodaan FSE-käyttöliittymän avulla uusi tyhjä tiedosto ja aloitetaan rakennuspalikkarakenne vasemman paneelin osoittamalla tavalla.
Vaihtoehtoisesti tämä voidaan tehdä ensin viestissä tai sivulla ja kopioida ja liittää sitten merkintä kuviotiedostoon myöhemmin.
Vaihe 2: Seuraavaksi, jotta yllä oleva merkintä voidaan peittää kuvioksi, meidän tulee ensin kopioida sen koodimerkintä ja liittää se uuteen /patterns/header-single-cover.php koodieditorissamme. Meidän tulisi myös lisätä vaaditut mallitiedoston otsikkomerkinnät (esim. otsikko, slug, luokat, lisäys jne.).
Tässä on koko koodi /patterns/header-single-cover.php tiedosto:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Vaihe 3: Olen käyttänyt tätä demoa varten tämä kuva valokuvahakemistosta täyteaineena taustakuvana ja käytti Keskiyö kaksisävyinen väri. Jotta voisimme käyttää postitse esiteltyä kuvaa dynaamisesti, meidän pitäisi lisätä "useFeaturedImage":true kansilohkossa korvaamalla yllä oleva täytekuvalinkki juuri ennen "dimRatio":50 siten, että rivin 10 pitäisi näyttää tältä:
Vaihtoehtoisesti voit myös muuttaa täytekuvaa napsauttamalla korvata ja valitsemalla Käytä esiteltyä kuvaa vaihtoehto:
Nyt ylätunnisteen kansikuvioiden pitäisi olla näkyvissä kuvioiden lisäyspaneelissa, jotta niitä voidaan käyttää missä tahansa malleissa, viesteissä ja sivuilla.
Arkiston kansiotsikot
Innoittamana tämä WP Tavern -postaus ja vaiheittaisen opastuksen tekijämallin otsikon luomiseksi, halusin luoda samanlaisen kansiotsikon ja lisätä myös TT2 Gopher -teemaan.
Luodaan ensin arkiston kannen otsikkokuvio author.html myös mallin noudattamalla yllä olevaa työnkulkua. Tässä tapauksessa luon tämän uudelle tyhjälle sivulle lisäämällä lohkoja (kuten alla luettelonäkymässä näkyy):
Kannen taustalla käytin samaa kuvaa, jota käytin yhden postauksen otsikkokannessa.
Koska haluamme näyttää lyhyen tekijän elämäkerran kirjoittajalohkossa, käyttäjäprofiilisivulle tulee myös lisätä elämäkertalausunto tai muuten käyttöliittymään tulee tyhjä tila.
Seuraava on merkintäkoodi header-author-cover, jota käytämme kuviota seuraavassa vaiheessa:
Published by:
Voit peittää merkinnän a header-author-cover kuvio, meidän pitäisi lisätä vaadittu kuviotiedoston otsikkomerkintä, kuten aiemmin on kuvattu. Muokkaamalla header-author-cover.php mallia, voimme luoda samanlaisia otsikkokansia tunnisteille, taksonomialle ja muille mukautetuille malleille.
- header-category-cover.php malli minulle category.html malli on saatavilla GitHubissa.
Mallien luominen otsikon kansilohkoilla
WordPress 6.0 ja viimeaikainen Gutenberg 13.7 Laajennetut mallien luontiominaisuudet lohkoeditoriin, jolloin monet WordPress-käyttäjät voivat luoda omia mallejaan ilman syvällistä koodaustaitoa.
Tässä on tarkempia tietoja ja käyttötapauksia Justin Tadlockin perusteellinen mukautusmuistiinpano.
Estä editori mahdollistaa erityyppisten mallien luomisen, mukaan lukien kansimallit. Katsotaanpa lyhyesti yhdistämistä kansilohko ja lähetä suositeltu kuvalohko uuden mallipohjaisen käyttöliittymän ansiosta on helppo luoda erityyppisiä mukautettuja kansimalleja, vaikka koodaustaidot eivät ole lainkaan tai heikosti.
Mallien luominen on tehty paljon helpommaksi Gutenberg 13.7:lla. Kuinka luoda lohkomalleja koodien kanssa ja sivuston editorissa on kuvattu kohdassa Teeman käsikirja ja edellinen artikkeli.
Tekijämalli kansilohkolla
Ylä (otsikkoosio) -merkintä author.html malli näkyy alla (rivi 6):
...
...
...
... Tässä on kuvakaappauksia kansien otsikoista author.html ja category.html mallit:
Koko koodi molemmille malleille on saatavilla GitHubissa.
Yksi pylväs kansilohkolla
Jotta voimme näyttää kansilohkon yksittäisessä viestissämme, meidän on soitettava header-cover-single pattern otsikkoosion alla (rivi 3):
....
....
....Tässä on kuvakaappaus, joka näyttää yksittäisen viestin edestä katsottuna otsikon kansiosan kanssa:
Koko single-cover.html malli on saatavilla GitHubissa.
Löydät lisää vaiheittaisia esittelyohjeita a sankariotsikkoviestiosio ja käyttämällä postitse esiteltyjen kuvien taustakansilohkoja on WP Taverna ja Koko sivuston muokkaus -sivustolta.
Siellä sinulla on se!
hyödyllisiä linkkejä
Suositeltu kuvan kansilohko
Blogiviestejä
Vaikka lohkoteemat yleensä ovat saada paljon WordPress-yhteisön jäseniä, minun mielestäni, ne ovat WordPressin tulevaisuus, myös. Lohkateemojen avulla amatööriteemojen kirjoittajat voivat nyt luoda teemoja, joissa on monimutkaisia asetteluja ja joissa on tässä artikkelissa kuvattu kansiosio yhdistettynä kuviot ja tyylimuunnelmia.
Varhaisena Gutenberg-käyttäjänä en voisi olla innoissani uusista teematyökaluista, kuten luo lohkoteema laajennus ja muut, joiden avulla teeman tekijät voivat saavuttaa seuraavat asiat suoraan lohkoeditorin käyttöliittymästä kirjoittamatta mitään koodia:
- (I) luoda
- (ii) Korvaa teematiedostot ja vie
- (iii) luoda tyhjä tai alatason teema ja
- (iv) muokata ja tallentaa nykyisen teeman tyylimuunnelmaa
Lisäksi Gutenberg-laajennuksen viimeaikaiset iteraatiot mahdollistavat sen käyttöönoton nestemäinen typografia ja asettelun tasaukset ja muut tyylilliset säätimet käyttämällä vain theme.json tiedosto ilman JavaScriptiä ja riviä CSS-sääntöjä.
Kiitos, että luit ja jaat kommenttisi ja ajatuksesi alla!
