✅ WEB ja WordPressi uudised, teemad, pistikprogrammid. Siin jagame näpunäiteid ja parimaid veebisaidi lahendusi.

Arendaja juhend: WordPress Gutenbergi kasutamine esilehe ja sihtlehtede jaoks

16

Selles postituses vaatleme, kuidas kasutada Gutenbergi redaktorit suurepärase välimusega ja kaasaegsete esilehtede või sihtlehtede loomiseks. Vaatame eelkõige seda, kuidas saate arendajana oma teemakoodi selle toetamiseks kohandada. See juhend sobib suurepäraselt teile, kes soovivad Gutenbergi toetamiseks kohandada vanemat teemat või õppida, kuidas arendada uusi Gutenbergi jaoks optimeeritud teemasid.

Kui WordPress tutvustas versioonis WordPress 5.0 uut Gutenbergi redaktorit (välja antud 2018. aasta detsembri paiku), muutis see enamasti eraldi lehe koostaja pistikprogrammi kasutamise tarbetuks. Gutenbergi redaktor annab WordPressi autorile palju paindlikkust ning võimaluse luua rikkalikku sisu ja kujundusi, mis varem polnud lihtne – kui just teema või plugin neile nt lühikoodide abil funktsionaalsust ei pakkunud.

Saate WordPressis Gutenbergi plokkide jaoks palju stiililahendusi, kuid teemaga veidi tööd tehes ja plokkide kohta teadmisi saate Gutenbergi kogemusele palju rohkem lisada. Vaatame, kuidas!

Laiade ja täislaiuste plokkide lubamine

Arendaja juhend: WordPress Gutenbergi kasutamine esilehe ja sihtlehtede jaoks

Enamik plokke võimaldab valida plokkide joondusi. Kui töötate Gutenbergis teemal, mis pole Gutenbergi jaoks välja töötatud, saate valida „Joonda vasakule”, „Joonda keskele” ja „Joonda paremale” vahel.

Aga kas teadsite, et tegelikult on veel kaks? Ülejäänud kaks, "Wide Width" ja "Full Width" sobivad suurepäraselt esilehe või sihtlehe tegemiseks. Vaatame lähemalt, kuidas optimeerida teie teema paigutust ja kujundust, et hiljem täielikult toetada laia ja täislaiusega plokke. Kõigepealt peate ütlema WordPressile, et ta lisaks teie teemasse nende kahe ploki joonduse toe.

Teiega ühendatud funktsioonis after_setup_themehelistage lihtsalt add_theme_support('align-wide'). Tõenäoliselt on teie teemas juba seadistamise funktsioon või kui mitte, lisage see oma teemasse functions.php:

add_action('after_setup_theme', function() { add_theme_support('align-wide'); });

Kui see kood on teie teemas aktiivne, peaksite nüüd saama kokku viis valikut plokkide joondamiseks. Mõne ploki, näiteks veergude puhul saate ainult kaks uut.

Arendaja juhend: WordPress Gutenbergi kasutamine esilehe ja sihtlehtede jaoks

Plokkide joondusi saab määrata teatud tüüpi plokkides – enamasti on see selline, mis toetab pesastatud plokke, st. plokk, mis võimaldab lisada plokke sees. Sellised populaarsed plokid on kaas, veerud, kujutis, manustamisplokid ja nii edasi. Kaaneplokk on suurepärane plokk esilehtede või sihtlehtede loomiseks, nagu näeme kogu selle postituse jooksul.

Katteploki kasutamine

Kaaneplokk on kindlasti parim plokk, kui soovite luua esilehte või sihtlehte, mis on jagatud osadeks. Katteploki sisse saate lisada mis tahes tüüpi plokke ja nii palju plokke, mida soovite. Katteplokiga saate määrata taustavärvi, taustapildi või värvilise ülekattega taustapildi.

Arendaja juhend: WordPress Gutenbergi kasutamine esilehe ja sihtlehtede jaoks

Koos võimalusega seada ploki reguleerimine laiale või täislaiusele (nagu me eespool tegime), on katteplokk võimas tööriist. Saate luua lehe, kus kogu sisu asub täislaiuses kaaneplokkides, millel on igaühel oma taustavärv või taustpilt. Teema õige stiili ja paigutusega on teil täielik kaasaegne esilehe koostaja.

Arendaja juhend: WordPress Gutenbergi kasutamine esilehe ja sihtlehtede jaoks

WordPress 5.3-s tehti kaaneploki jaoks oluline täiustus: sisemine HTML-i ümbris. See tähendab, et kaaneplokil on jaotise enda jaoks üks HTML-element – ​​taustavärvi või taustapildiga ja seejärel teine ​​HTML-element, kus asub kogu sisu. Kombineerige see täislaiuse ploki joondusega: stiilige välimine element (taustavärvi või pildiga), et see muutuks täielikult täislaiuseks, ja seejärel stiilige sisemine HTML-element koos sisuga nii, et see mahuks teie teema konteinerisse.

Oletagem näiteks, et teie teema maksimaalse laiusega konteiner on 1200 pikslit. Tõenäoliselt on teil juba konkreetne HTML-klass, mis on kujundatud maksimaalse laiusega, tagades, et teie sisu ei liiguks ekraani suurusest sõltumata lihtsalt täislaiusele. Lisage oma maksimaalse laiusega stiil kaane sisemisele HTML-ile; klassi nimi wp-block-cover__inner-container. Näiteks:

.wp-block-cover-image.alignfull .wp-block-cover__inner-container, .wp-block-cover.alignfull .wp-block-cover__inner-container { position: relative; width: 100%; max-width: 1200px; padding: 0 20px; }

Ülaltoodud CSS-koodis sihin kahte kaanevanemaklassi. Ülemkaaneploki klass muutub olenevalt sellest, kas valite taustpildi või mitte. Taustapildiga katteplokid saavad klassi " wp-block-cover-image" ja taustavärviga katteplokid klassi " wp-block-cover". Lisaks sihin ka ploki joonduse "Täislaius" klassiga " alignfull". Ploki joondus "Lai laius" saab klassi " alignwide". Lisage CSS, et sihtida ka seda ploki joondust – olenevalt sellest, mida soovite teha.

Kui olete sellega mängima hakanud, võib teil olla probleeme teema üldise paigutusega. Tõenäoliselt sunnib teie teema täislaiusega kaaneplokke üldse täislaiusele minemata. Vaatame seda järgmisena.

Teema paigutus ja täislaiuses stiil

Siiani oleme lisanud laiade ja täislaiuste plokkide toe ning õppinud kasutama ja optimeerima kaaneplokki, et see toimiks esilehe või sihtlehe jaotisena. Kuid enamiku teemade puhul võivad teie HTML ja paigutus takistada postituse sisu ilmumist täislaiusele.

Tõenäoliselt on teie teemal parempoolne külgriba ühe postituse või lehe vaates. Tõenäoliselt on olemas täiendavad HTML-i ümbrised, sealhulgas max-width konteineri element, mis takistab teie täislaiusega plokkide tegelikku täislaiust. Tõenäoliselt on teie ümbristel ka üsna palju veerisid või polsterdust, mis jällegi takistab täislaiustel plokkidel ekraani servi täielikult puudutamast. Kuid peate tegema ühe postituse või lehe hea väljanägemise postituste jaoks, kus kasutaja ei kasuta ka kaaneplokke. Laiade ja täislaiuste plokkide toega Gutenbergi jaoks arendades peate arvestama oma ümbristega. Kõik sõltub teie teema kujundusest, HTML-ist ja stiilist – kuid vaatame mõnda ideed selle lahendamiseks.

Arendaja juhend: WordPress Gutenbergi kasutamine esilehe ja sihtlehtede jaoks

Hea lahendus oleks postitamisvalikute lisamine; kohandatud metaseaded postitustele ja lehtedele, mis mõjutavad selle lehe paigutust. Saate seadistada külgriba peitmise või sundida postituse sisu täielikult täislaiusele minema. Looge postituse sätted käsitsi, lisades metakaste, või kasutage selle protsessi hõlbustamiseks täpsemaid kohandatud välju . Seejärel laadite oma teemas postituse seaded ja käsitlete vastavalt HTML-väljundit.

Teised head postitusvõimalused on lehe pealkirja peitmine ja/või esiletoodud pildi peitmine. See võimaldab teil sisu luua tavapäraselt, kuid konkreetsete lehtede jaoks saate hõlpsasti seadistada sihtlehe täielikult täislaiuste kaaneplokkidega. Tavalise lehepealkirja peitmisel saate luua parema välimusega päise või tegevusele kutsuva jaotise, mis toimiks selle asemel lehe pealkirjana.

Looge plokkide stiile

WordPressis on vähetuntud funktsioon Gutenberg; plokid võivad olla erineva stiiliga. Tsitaadiploki abil saate näha ploki stiile töös. Lisage plokk oma redaktorisse ja vaadake inspektorit (parem külgriba). Leiate teema "Stiilid" ja kaks võimalust erinevate stiilide vahel.

Arendaja juhend: WordPress Gutenbergi kasutamine esilehe ja sihtlehtede jaoks

Looge kohandatud stiile, mis muudavad esilehe ja sihtlehtede loomise lihtsamaks. Soovitan lisada vähemalt kohandatud ploki stiilid pealkirjaplokki, et saaksite luua kohandatud stiile ilma tavaliste postituste pealkirju katkestamata. Looge jaotiste pealkirjadele plokistiil, millel on eriti suur font ja täiendav polster.

Esilehti luua proovides pange tähele, mida peate korduvalt kohandama – see võib sobida hästi plokistiili jaoks.

Kohandatud plokistiilide lisamine on tegelikult väga lihtne ega nõua Javascripti teadmisi. Kui soovite selle kohta rohkem teada saada, on mul selle kohta eraldi õpetus.

PS: Kui te ei näe plokkide stiile, võib teie teemal seda puududa. Protsess on sama, mida tegime laiade ja täislaiuste plokkide joondamiseks; konksus after_setup_themelisate add_theme_support('wp-block-styles'):

add_action('after_setup_theme', function() { add_theme_support('wp-block-styles'); });

Teemavärvide kasutamine värvipaletina

Kui olete Gutenbergiga mänginud, olete ilmselt märganud, et Gutenberg pakub teile teksti või taustavärvi jaoks teatud värvide komplekti. Näiteks kaaneploki lisamisel palutakse teil valida värvipaletist värv.

Teil on võimalus kasutada värvivalijat, et valida või sisestada kuusnurkne värv täpselt soovitud värvini. Sellele pääsete juurde, klõpsates lingil "Kohandatud värv". Kuid kui kasutate oma teemas sama värvikomplekti ja soovite seda järjepidevana hoida, võib olla tülikas pidevalt meeles pidada ja iga kord samu kuueteistkümnendvärvikoode sisestada.

Õnneks võimaldab WordPress Gutenberg teil määrata värvipaleti! See on veel üks add_theme_support(), kus saate paletti lisada soovitud värvide massiivi. Funktsioonis, mis on ühendatud funktsiooniga after_setup_theme, tehke järgmist:

Ülaltoodud koodis lisame ‘ editor-color-palette‘ jaoks teematoe ja funktsiooni teise parameetrina määratleme kõigi soovitud värvide massiivi. Iga värv nõuab atribuute name, slugja color. nameon see, mis kuvatakse, kui hõljutate kursorit paletis oleva värvi kohal. slugon klassi nimi, mis lisatakse plokielemendile. Ja colormäärab teie värvi kuueteistkümnendkoodi.

Arendaja juhend: WordPress Gutenbergi kasutamine esilehe ja sihtlehtede jaoks

Pidage meeles, et peate oma CSS-i lisama stiile, mis sihivad kõiki neid klasse (määratleb slug). WordPress ei rakenda teie plokkidele automaatselt kuusnurkset värvi, kuigi me ütleme WordPressile, mis värvikood on.

Näiteks parempoolne pilt on minu värvipalett, mille olen selle saidi teema jaoks määratlenud – valge piksli jaoks:

Need on minu teemavärvid ja 95% juhtudest kasutan ühte neist värvidest – kas tausta või tekstivärvina. Harvadel juhtudel saan värvivalija välja tõmmata, kuid kui tavalised kahtlusalused on värvipaletis juba määratletud, teeb elu palju lihtsamaks.

Nõuanne on alati lisada oma värvipaletti puhas must (#000000) ja puhas valge (). #FFFFFFTõenäoliselt on hea mõte kasutada ka ühte või kahte helehalli värvi.

Staatilise esilehe kasutamine ja esilehe malli optimeerimine

Tõenäoliselt teate seda juba, aga ma mainin seda kõike. WordPressis saate määrata staatilise lehe esileheks, valides Seaded> Lugemine.

Arendaja juhend: WordPress Gutenbergi kasutamine esilehe ja sihtlehtede jaoks

Vaikimisi kuvatakse WordPressi esilehel kõige värskemate postituste loend. Kui aga valite „Staatiline leht" ja valite rippmenüüst lehe, kuvab WordPress selle lehe teie saidi esilehena.

See on lihtne WordPressi saidi esilehe seadistamine. Valitud lehel saate luua esilehe, kasutades kõiki ülalmainitud nippe. Näiteks võivad teil olla märkimata postituse valikud lehe pealkirja, külgriba ja esiletoodud pildi kuvamiseks. Ja leht on täielikult üles ehitatud täislaiuste kaaneplokkide ja sisuga. Kuid võite valida, kas postisuvandeid ei kasutata (peida külgriba jne) ja luua nende asendamiseks või jõustamiseks lihtsalt esilehe malli.

Kui teie WordPress on esileheks seatud staatiliseks leheks, otsib WordPress front-page.phpteie teemast malli. Seda kasutatakse page.php. See võimaldab teil luua ja kohandada eraldi malli, mida kasutatakse ainult teie esilehe jaoks.

Selles front-page.phpmallis saate juba määratleda HTML-i tagamaks, et kõik plokid läheksid täielikult täislaiusele, neil pole külgriba, lehe pealkirja ega esiletoodud pilti. Võib-olla soovite lihtsalt teha the_content()lehe sisu täielikuks väljastamiseks.

Näiteks see on see, mis mul selle saidi teemas on front-page.php. Kui kõigis teistes mallides, näiteks page.php, on mul palju väljundeid külgriba, postituse pealkirja ja muu jaoks, on see kogu minu silmuse ulatus front-page.php:

while (have_posts()): the_post(); the_content(''); endwhile;

See on kõik. Minu ümbris-HTML ja klassid tagavad, et postituse sisu on täielikult täislaiuses.

Pidage meeles, et see on hea lahendus, kui teie kui teema kasutaja mõistate, kuidas teie mallid töötavad. Tean, et kogu minu esilehel olev sisu peab olema täielikult pakitud kaaneplokkidesse. Toetun kaaneploki sisemisele konteineri HTML-ile, et minu sisu näeks hea välja ja mahuks maksimaalse laiusega konteinerisse. Kui ma peaksin lisama lihtsa lõiguploki ilma ümbriskatteplokita, ei näeks see hea välja, kuna selle külgedel poleks polsterdust.

Oma saidi päise muutmine esimeses kaaneplokis läbipaistvaks

Kaasaegsete veebisaitide väga levinud funktsioon on esilehe päise läbipaistvus. Kui kasutaja hakkab lehte alla kerima, muutub päis fikseeritud stiiliks ja saab tausta. Kuid läbipaistva päise hoidmine võib tõesti kena välja näha, kui näeme esimese jaotise taga värve või pilti.

Teen seda selle saidi esilehel. Vaata! Lehe ülaosas pole minu päisel tausta ja see näitab taga oleva lilla gradiendi sektsiooni tausta (kaaneplokk). Kui hakkate kerima, saab see kindla kindla tausta.

Pidage meeles, et peate olema teadlik päise ja esimese kaane tausta värvidest. Kui teie päis koosneb valgest logost ja valgetest menüüüksustest (nagu minu oma), ei saa te seda nippi kasutada heleda taustaga katteplokiga. See muudaks teie päise loetamatuks!

Kui soovite seda teha, pidage meeles, et see nõuab natuke Javascripti teadmisi. Aga tegelikult on see väga lihtne. Ma käsitlen teie jaoks põhitõdesid:

Minu kogu päiseelement on alati position: fixed. Kuna ma tavaliselt ei taha, et mu sisu päise taha kaoks, olen lisanud kehaelemendile polsterduse, mis surub sisu päise alla. Lisasin aga reegli, et kui oleme esilehe malli juures, siis seda täidist ei lisata. See tagab, et kehaosa ilmub päise taha ainult esilehel. Seejärel sihin esilehe esimese kaaneploki ja lisan täiendava polsterduse, et selle esimese ploki sisu ei jääks päise taha, andes sellele pärast päist kena polstri.

Ja siis lisasin jQuery abil väga lihtsa Javascripti koodi:

See kood lisab klassi ‘ navbar-fixed‘, kui lehte keritakse leheküljel rohkem kui 60 pikslit allapoole. Ja oma CSS-is sihin lihtsalt seda klassi ja lisan fikseeritud taustavärvi. Ilma selle klassita on päise taust esilehel läbipaistev.

See on asja põhitõed. Mängige CSS-iga – kohandage Javascripti tipppunkti ja kasutage näiteks transitionatribuuti, et muuta taustavärvi rakendamisel sujuvam üleminek.

Suurepärased plokid esilehtede ja sihtlehtede jaoks

WordPress pakub täielikku valikut plokke, mis on teile kasutamiseks valmis. Mõned neist on eriti kasulikud esilehe või sihtlehe loomisel. Kui olete juba tuttav kõigi saadaolevate plokkidega, teate tõenäoliselt neid juba.

  • Veerud. Plokk, mis võimaldab pesastatud plokke, mis tähendab, et saate igasse veergu lisada mis tahes plokke. Saate lisada veerge ka kaaneploki sisse. Ideaalne sisu struktureerimiseks veergudes. Saate määrata veergude arvu ja iga veeru laiuse. Need võivad kõik olla võrdse laiusega või kohandatud laiusega.
  • Rühm. Teine plokk, mis lubab pesastatud plokke. Suurepärane värvilise tausta määramiseks hunniku muude plokkide ümber (nt pealkiri ja paar lõiku).
  • Nupp. Pole ühtegi esilehte ilma nuppudeta. Nupud sobivad suurepäraselt tegevusele kutsumiseks ja külastajate suunamiseks sinna, kuhu soovite. Saate kohandada nupu välimust ja kujundust. Kombineerige see nuppude kohandatud plokistiilidega!
  • Vahetükk. Kui tunnete, et teie jaotistes napib ruumi, lisage vaheplokk – see on lihtsalt ruum ilma sisuta. Saate määrata vahetüki kõrguse.
  • Eraldaja. Sarnane Spacer-plokiga, kuid lisab kena joone. Teine võimalus sisu selgeks eraldamiseks. Kohandage oma teema CSS-i rea kujundust või lisage kohandatud plokistiile.
  • Galerii. Suurepärane piltide esitlemiseks. Toetab täislaiusega plokkide joondust, nii et saate luua oma esilehel täislaiuse pildigalerii.
  • Meedia ja tekst. Mõnus lihtne viis pildi või meedia teksti kõrvale joondamiseks. Mõnel juhul võib see olla parem valik kui veerud.
  • Manustused: Youtube ++. WordPress pakub meediumi jaoks palju manustusi. Näiteks saate oma esilehel esitada täislaiuses Youtube’i video.
  • Vidinad: otsinguväli, viimased postitused, kalender++. WordPress pakub mõningaid toredaid vaikesisuelemente. Kui soovite kuvada oma sihtlehel viimaste postituste loendit või otsinguriba, tehke seda.

Kui aga tunnete, et teil pole soovitud toimimiseks plokke, on lahendus luua oma kohandatud plokid.

Kohandatud plokkide loomine

Väga levinud funktsioon esilehel või sihtlehel on "otsetee" element; kus valite postituse või lehe ja see väljastab postitusele lingiploki, mis sisaldab esiletoodud pilti, postituse pealkirja ja võib-olla ka väljavõtet. Selle kirjutamise ajal standardses WordPressis sellist valikut polnud. Peaksite selle otsetee ise käsitsi tegema, sisestades käsitsi postitusega sama esiletõstetud pildi, sisestades käsitsi postituse pealkirja ja väljavõtte ning pakkima kõik lingiks.

Esilehe ja sihtlehe loomisel väga kasulikud plokkide näited on liugurid/karussellid, hinnavõrdlustabelid ja iseloomustused.

Seda tüüpi plokkide jaoks optimeerimiseks peate kas leidma pistikprogrammi, mis seda pakub (ma pole seda võimalust uurinud) või tegema need ise. Oma kohandatud plokkide loomine nõuab olulisi teadmisi Javascripti ja Reacti kohta ning palju kodeerimist. Soovitan seda teed minna, kui kavatsete tõsiselt olla WordPressi arendaja.

Kui olete huvitatud Gutenbergi jaoks kohandatud plokkide loomise õppimisest, on mul õpetusesari, mis seda üksikasjalikult läbib.

Võite valida ka lihtsama marsruudi ja osta Advanced Custom Fields Pro (ACF). Selle pistikprogrammi abil saate luua kohandatud Gutenbergi plokke ilma Javascripti teadmisteta. Saate lihtsalt juhtida plokkide PHP väljundit ja lasta ACF-il käsitleda Javascripti osa. Kuid pidage meeles, et see loob teie teema sõltuvuse litsentsitud pistikprogrammist.

Järeldus

Loodan, et see postitus on aidanud teil oma oskusi ja teadmisi WordPress Gutenbergiga edasi arendada! Selle kirjutamise ajal puudus tõesti teave ja kogemused, kuidas oma teemat Gutenbergi järgi optimeerida. Mul oli eriti raske leida midagi selle kohta, kuidas esileht kenasti üles ehitada. Nii et seda olen õppinud palju katsetades ja ringi mängides.

See veebisait kasutab teie kasutuskogemuse parandamiseks küpsiseid. Eeldame, et olete sellega rahul, kuid saate soovi korral loobuda. Nõustu Loe rohkem