Tässä postauksessa tarkastellaan, miten Gutenberg-editoria voidaan käyttää upeiden ja nykyaikaisten etusivujen tai aloitussivujen luomiseen. Tarkastelemme erityisesti, kuinka sinä kehittäjänä voit muokata teemakoodiasi tukemaan tätä. Tämä opas on täydellinen sinulle, joka haluat muokata vanhaa teemaa tukemaan Gutenbergiä tai oppia kehittämään uusia Gutenbergille optimoituja teemoja.
Kun WordPress esitteli uuden Gutenberg-editorin WordPress 5.0:ssa (julkaistu noin joulukuussa 2018), se teki enimmäkseen erillisen sivunrakennuslaajennuksen käyttämisen tarpeettomaksi. Gutenberg-editori antaa WordPressin kirjoittajalle paljon joustavuutta ja mahdollisuuden luoda rikasta sisältöä ja designia, mikä ei ollut ennen helppoa – ellei teema tai laajennus tarjonnut toiminnallisuutta esim. lyhytkoodeilla.
Saat paljon tyyliä Gutenberg-lohkoille WordPressissä, mutta tekemällä hieman työtä teemasi kanssa ja tuntemalla lohkoja voit lisätä Gutenberg-kokemukseen paljon enemmän. Katsotaanpa miten!
Mahdollistaa leveät ja täysleveät lohkot
Useimmissa lohkoissa voit valita lohkojen kohdistuksen. Kun työskentelet Gutenbergissä teemassa, jota ei ole kehitetty Gutenbergille, voit valita "Align Left", "Align Center" ja "Align Right" välillä.
Mutta tiesitkö, että niitä on itse asiassa kaksi muuta? Kaksi muuta, "Wide Width" ja "Full Width" ovat täydellisiä etusivun tai aloitussivun tekemiseen. Tarkastellaan myöhemmin tarkemmin, kuinka voit optimoida teemasi asettelun ja suunnittelun tukemaan täysin leveitä ja täysleveitä lohkoja. Ensin sinun on kehotettava WordPressiä lisäämään tuki näille kahdelle lohkokohdistukselle teemaasi.
Sinuun kytketyssä toiminnossa after_setup_themesoita yksinkertaisesti add_theme_support('align-wide'). Sinulla on luultavasti jo "asetus"-toiminto teemassasi, tai jos ei, lisää tämä teemaasi functions.php:
add_action('after_setup_theme', function() {
add_theme_support('align-wide');
});Kun tämä koodi on aktiivinen teemassasi, sinun pitäisi nyt saada yhteensä viisi vaihtoehtoa lohkojen kohdistuksille. Joillekin lohkoille, esimerkiksi Columnsille, saat vain kaksi uutta.
On olemassa tiettyjä lohkotyyppejä, joissa voit asettaa lohkokohdistuksia – useimmiten ne ovat sellaisia, jotka tukevat sisäkkäisiä lohkoja, esim. lohko, jonka avulla voit lisätä lohkoja sisään. Tällaisia suosittuja lohkoja ovat kansi, sarakkeet, kuva, upotuslohkot ja niin edelleen. Kansilohko on loistava lohko etusivujen tai aloitussivujen rakentamiseen, kuten näemme tässä viestissä.
Kansilohkon käyttäminen
Kansilohko on ehdottomasti paras lohko, kun haluat rakentaa etusivun tai aloitussivun, joka on jaettu osiin. Voit lisätä minkä tahansa lohkon ja niin monta lohkoa kuin haluat kansilohkon sisään. Kansilohkolla voit asettaa taustavärin, taustakuvan tai taustakuvan väripeittokuvalla.
Yhdessä mahdollisuuteen asettaa lohkon säätö leveäksi tai täysleveäksi (kuten teimme edellä), Cover block on tehokas työkalu. Voit luoda sivun, jossa kaikki sisältö on täysleveissä kansilohkoissa, joissa jokaisella on oma taustaväri tai taustakuva. Teeman oikean tyylin ja asettelun avulla saat täydellisen modernin etusivun rakentajan.
WordPress 5.3:ssa Cover-lohkoon tuli tärkeä parannus: sisäinen HTML-kääre. Tämä tarkoittaa, että Cover-lohkossa on yksi HTML-elementti itse osiolle – sen taustaväri tai taustakuva ja sitten toinen HTML-elementti, jossa kaikki sisältö sijaitsee. Yhdistä tämä täysleveän lohkokohdistukseen: muotoile ulompi elementti (taustavärin tai kuvan kanssa) niin, että se tulee täysin täysleveäksi, ja muotoile sitten sisempi HTML-elementti sisällön kanssa niin, että se sopii teemasi säilöön.
Oletetaan esimerkiksi, että teemallasi on 1 200 kuvapisteen enimmäisleveyssäiliö. Sinulla on luultavasti jo tietty HTML-luokka, joka on tyylitelty enimmäisleveydellä, mikä varmistaa, että sisältösi ei yksinkertaisesti leviä koko leveydelle näytön koosta riippumatta. Lisää enimmäisleveystyylisi kannen sisäiseen HTML-koodiin; luokan nimi wp-block-cover__inner-container. Esimerkiksi:
.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;
}Yllä olevassa CSS-koodissa kohdistan kahteen Cover-yläluokkaan. Pääkansilohkoluokka muuttuu sen mukaan, valitsetko taustakuvan vai et. Taustakuvalla varustetut kansilohkot saavat luokan " wp-block-cover-image" ja peitelohkot, joissa on taustaväri, luokan " wp-block-cover". Lisäksi kohdistan lohkokohdistuksen "Full Width" luokassa " alignfull". "Wide Width" -lohkokohdistus saa luokan " alignwide". Lisää CSS kohdistaaksesi myös tämän lohkon kohdistuksen – riippuen siitä, mitä haluat tehdä.
Jos olet alkanut leikkiä tämän kanssa, olet saattanut kohdata ongelmia teeman yleisen asettelun kanssa. Teemasi todennäköisesti pakottaa täysleveät Cover-lohkot olemaan täysleveänä. Katsotaanpa tätä seuraavaksi.
Teeman asettelu ja koko leveä muotoilu
Tähän mennessä olemme lisänneet tuen leveille ja täysleveille lohkoille ja oppineet käyttämään ja optimoimaan Cover-lohkoa toimimaan etusivun tai aloitussivun osina. Useimmissa teemoissa HTML-koodisi ja asettelusi voivat kuitenkin estää viestisi sisällön leviämisen täysleveyteen.
Teemallasi on luultavasti oikea sivupalkki yksittäisessä viestissä tai sivunäkymässä. On luultavasti muita HTML-kääreitä, mukaan lukien max-width-säiliöelementti, joka estää täysleveäsi lohkojasi menemästä täysleveäksi. Kääreissäsi on luultavasti myös reilut marginaalit tai pehmusteet, jotka taas estävät täysleveät lohkot koskettamasta kokonaan näytön reunoja. Mutta sinun on saatava yksittäinen viesti tai sivu näyttämään hyvältä viesteissä, joissa käyttäjä ei käytä myös kansilohkoja. Sinun on otettava huomioon kääreesi, kun kehität Gutenbergille tukea leveille ja täysleveille lohkoille. Kaikki riippuu teemasi suunnittelusta, HTML:stä ja tyylistä – mutta katsotaanpa ideoita tämän ratkaisemiseksi.
Hyvä ratkaisu olisi lisätä postivaihtoehtoja; mukautetut meta-asetukset viesteille ja sivuille, jotka vaikuttavat kyseisen sivun asetteluun. Voit tehdä asetuksen piilottaaksesi sivupalkin tai pakottaaksesi viestisi sisällön muuttumaan kokonaan täysleveäksi. Luo viestiasetukset manuaalisesti lisäämällä metalaatikoita tai käytä Advanced Custom Fields -toimintoa helpottaaksesi tätä prosessia. Ja sitten teemassasi haet viestiasetukset ja käsittelet HTML-tulostusta vastaavasti.
Muita hyviä postausvaihtoehtoja ovat sivun otsikon piilottaminen ja/tai esitellyn kuvan piilottaminen. Näin voit luoda sisältöä normaalisti, mutta tietyille sivuille voit helposti määrittää aloitussivun kokonaan täysleveillä kansilohkoilla. Piilota sivun vakiootsikko voit luoda paremman näköisen otsikon tai toimintakehotusosion, joka toimii sen sijaan sivun otsikona.
Luo lohkotyylejä
WordPressissä on vähän tunnettu ominaisuus Gutenberg; lohkoilla voi olla erilaisia tyylejä. Voit nähdä lohkotyylejä toiminnassa lainauslohkon avulla. Lisää lohko editorissasi ja katso Inspectoria (oikea sivupalkki). Löydät aiheen "Tyylit" ja kaksi vaihtoehtoa eri tyylien välillä.
Luo mukautettuja tyylejä, jotka helpottavat etu- ja aloitussivujen luomista. Suosittelen ainakin lisäämään mukautettuja lohkotyylejä Otsikko-lohkoon, jotta voit tehdä mukautettuja tyylejä keskeyttämättä otsikoita tavallisille viesteille. Luo lohkotyyli osioiden otsikoille, joissa on erittäin suuri fontti ja lisätäyttö.
Kun yrität luoda etusivuja, pane merkille, mitä sinun on mukautettava toistuvasti – tämä voi sopia hyvin lohkotyyliin.
Mukautettujen lohkotyylien lisääminen on todella helppoa, eikä se vaadi Javascriptin tuntemusta. Minulla on erillinen opetusohjelma tämän tekemiseen, jos haluat oppia lisää tästä.
PS: Jos et näe lohkotyylejä, teemasi ei ehkä tue tätä. Prosessi on sama kuin teimme leveiden ja täysleveiden lohkojen kohdistuksissa; koukkuun after_setup_themelisäät add_theme_support('wp-block-styles'):
add_action('after_setup_theme', function() {
add_theme_support('wp-block-styles');
});Teemavärien käyttäminen väripalettina
Jos olet leikkinyt Gutenbergin kanssa, olet todennäköisesti huomannut, että Gutenberg tarjoaa sinulle tietyn värivalikoiman tekstille tai taustavärille. Esimerkiksi kansilohkon lisääminen kehottaa sinua valitsemaan värin väripaletista.
Sinulla on mahdollisuus käyttää värinvalitsinta valitaksesi tai syöttääksesi kuusivärisen tarkan haluamasi värin. Pääset tähän napsauttamalla linkkiä "Mukautettu väri". Mutta jos käytät samoja värejä teemassasi ja haluat pitää sen johdonmukaisena, voi olla hankalaa muistaa ja kirjoittaa samat hex-värikoodit joka kerta.
Onneksi WordPress Gutenberg antaa sinun määrittää väripaletin! Tämä on jälleen yksi add_theme_support(), jossa tarjoat joukon värejä, jotka haluat palettiin. Toimi funktioon, joka on koukussa after_setup_theme, tee näin:
Yllä olevaan koodiin lisäämme teematuen ‘ editor-color-palette‘:lle, ja funktion toiseksi parametriksi määritämme joukon kaikkia haluamiasi värejä. Jokainen väri vaatii määritteet name, slugja color. namenäkyy, kun siirrät hiiren värin päälle paletissa. slugon luokan nimi, joka lisätään lohkoelementtiin. Ja colormäärittää värisi heksadesimaalikoodin.
Muista, että sinun on lisättävä tyylejä CSS-kohdistukseen jokaiseen näistä luokista (määrittää slug). WordPress ei käytä automaattisesti hex-väriä lohkoihisi, vaikka kerromme WordPressille, mikä värikoodi on.
Esimerkkinä oikealla oleva kuva on väripalettini, jonka olen määritellyt tämän sivuston teemaa varten – A White Pixel:lle:
Nämä ovat teemaväri ja 95 % tapauksista käytän jotakin näistä väreistä – joko tausta- tai tekstivärinä. Harvoissa tapauksissa voin vetää värivalitsimen esiin, mutta tavanomaisten epäiltyjen määrittäminen väripaletissa tekee elämästä paljon helpompaa.
Vinkki on, että lisäät aina puhdasta mustaa (#000000) ja puhdasta valkoista (#FFFFFF) väripalettiisi. On luultavasti myös hyvä idea yksi tai kaksi vaaleanharmaata väriä.
Staattisen etusivun käyttäminen ja etusivun mallin optimointi
Tiedät varmaan jo tämän, mutta mainitsen sen kuitenkin. WordPressissä voit asettaa staattisen sivun etusivuksi siirtymällä kohtaan Asetukset > Lukeminen.
Oletuksena WordPressin etusivulla näkyy luettelo uusimmista viesteistä. Mutta jos valitset "Staattinen sivu" ja valitset sivun pudotusvalikosta, WordPress näyttää tämän sivun sivustosi etusivuna.
Tämä on vaivaton WordPress-sivustosi etusivun luominen. Valitulla sivulla voit rakentaa etusivun käyttämällä kaikkia yllä mainittuja temppuja. Sinulla voi esimerkiksi olla valitsemattomia viestivaihtoehtoja sivun otsikon, sivupalkin ja esitellyn kuvan näyttämiseksi. Ja sivu on täysin rakennettu täysleveillä kansilohkoilla ja sisällöllä. Voit kuitenkin valita, ettet valitse postausvaihtoehtojen (piilota sivupalkki jne.) reittiä ja yksinkertaisesti tehdä etusivun mallipohja, joka korvaa tai pakottaa nämä.
Kun WordPress on asetettu staattiseksi sivuksi etusivuksi, WordPress etsii mallia front-page.phpteemastasi. Tätä käytetään page.php. Näin voit luoda ja säätää erillisen mallin, jota käytetään vain etusivullesi.
Tässä front-page.phpmallissa voit jo määrittää HTML:n varmistaaksesi, että kaikki lohkot menevät täysin täysleveäksi, ettei niissä ole sivupalkkia, sivun otsikkoa tai esiteltyä kuvaa. Haluat ehkä vain the_content()tulostaa sivun sisällön kokonaan.
Esimerkiksi tämä on mitä minulla on tämän sivuston teemassa front-page.php. Kun taas kaikissa muissa malleissa, kuten page.php, minulla on runsaasti tulosteita sivupalkille, viestin otsikolle ja niin edelleen, tämä on silmukani koko laajuus front-page.php:
while (have_posts()): the_post();
the_content('');
endwhile;Se siitä. Käärittävä HTML-koodini ja luokat varmistavat, että julkaisun sisältö on täysin täysleveä.
Muista, että tämä on hyvä ratkaisu, jos sinä teeman käyttäjänä ymmärrät, miten mallipohjasi toimivat. Tiedän, että kaiken etusivullani olevan sisällön on oltava kokonaan kääritty kansipalikoiden sisään. Luotan Cover-lohkon sisempään säilön HTML-koodiin varmistaakseni, että sisältöni näyttää hyvältä ja putoaa suurimman leveyden säilöön. Jos lisäisin yksinkertaisen kappalelohkon ilman käärettä, se ei näyttäisi hyvältä, koska sen sivuilta puuttuisi pehmuste.
Tee sivustosi otsikosta läpinäkyvä ensimmäisestä kansilohkosta
Hyvin yleinen ominaisuus nykyaikaisilla verkkosivuilla on otsikon läpinäkyvyys etusivulla. Kun käyttäjä alkaa vierittää sivua alaspäin, otsikko muuttuu kiinteään tyyliin ja saa taustan. Mutta läpinäkyvän otsikon pitäminen voi näyttää todella hyvältä, kun näemme värit tai kuvan ensimmäisen osan takana.
Teen tämän tämän sivuston etusivulla. Katso! Sivun yläreunassa otsikollani ei ole taustaa, ja se näyttää takana olevan violetin gradienttiosan (kansilohkon) taustan. Kun aloitat vierityksen, se saa kiinteän kiinteän taustan.
Muista, että sinun on oltava tietoinen otsikon ja ensimmäisen kannen taustan väreistä. Jos otsikkosi koostuu valkoisesta logosta ja valkoisista valikkokohdista (kuten omani), et voi käyttää tätä temppua Cover-lohkon kanssa, jossa on vaalea tausta. Se tekisi otsikostasi lukukelvottoman!
Jos haluat tehdä tämän, muista, että se vaatii hieman Javascript-tietoa. Mutta se on itse asiassa todella yksinkertaista. Käyn sinulle perusasiat läpi:
Koko otsikkoelementtini on aina position: fixed. Koska en yleensä halua sisällöni katoavan otsikon taakse, olen lisännyt body-elementtiin pehmusteen, joka työntää sisällön alas otsikon alle. Olen kuitenkin lisännyt säännön, että jos olemme etusivun mallissa, tätä täyttöä ei lisätä. Tämä varmistaa, että vain etusivulla runko-osa näkyy otsikon takana. Kohdistan sitten etusivun ensimmäiseen Cover-lohkoon ja lisään ylimääräisen toppauksen varmistaakseni, että tämän ensimmäisen lohkon sisältö ei osu ylätunnisteen taakse – antaen sille mukavan hyvän täytön otsikon jälkeen.
Ja sitten olen lisännyt hyvin yksinkertaisen Javascript-koodin jQueryn avulla:
Tämä koodi lisää luokan " navbar-fixed", kun sivua vieritetään yli 60 kuvapistettä alaspäin. Ja CSS:ssäni kohdistan yksinkertaisesti tähän luokkaan ja lisään kiinteän taustavärin. Ilman tätä luokkaa otsikon tausta on läpinäkyvä etusivulla.
Siinä sen perusasiat. Pelaa CSS:llä – säädä Javascriptin "kärkikohtaa" ja käytä esimerkiksi transitionominaisuutta tasaisen siirtymisen tekemiseen, kun taustaväriä käytetään.
Upeita lohkoja etusivuille ja aloitussivuille
WordPress tarjoaa täyden valikoiman lohkoja valmiina käytettäväksi. Jotkut niistä ovat erityisen hyödyllisiä etusivua tai aloitussivua luotaessa. Jos olet jo tutustunut kaikkiin saatavilla oleviin lohkoihin, tiedät luultavasti jo niistä.
- Sarakkeet. Lohko, joka sallii sisäkkäiset lohkot, mikä tarkoittaa, että voit lisätä lohkoja jokaisen sarakkeen sisään. Voit lisätä sarakkeita myös kansilohkoon. Täydellinen sisällön jäsentämiseen sarakkeisiin. Voit päättää sarakkeiden lukumäärän ja kunkin sarakkeen leveyden. Ne voivat kaikki olla yhtä leveitä tai mukautettuja leveyksiä.
- Ryhmä. Toinen lohko, joka sallii sisäkkäiset lohkot. Erinomainen värillisen taustan asettamiseen useiden muiden lohkojen ympärille (kuten otsikko ja muutama kappale).
- Painike. Ei ole etusivua ilman painikkeita. Painikkeet sopivat erinomaisesti toimintakehotuksiin ja ohjaamaan vierailijat haluamaasi paikkaan. Voit muokata painikkeen ulkoasua ja muotoilua. Yhdistä tämä painikkeiden mukautettujen lohkotyylien kanssa!
- Välikappale. Jos sinusta tuntuu, että osioissasi ei ole tilaa, lisää välikappale – se on yksinkertaisesti tilaa ilman sisältöä. Voit määrittää välilevyn korkeuden.
- Erotin. Samanlainen kuin Spacer-lohko, mutta lisää mukavan linjan. Toinen vaihtoehto sisällön selkeään erottamiseen. Mukauta rivin suunnittelua teemasi CSS:ssä tai lisää mukautettuja lohkotyylejä.
- Galleria. Erinomainen kuvien esittelyyn. Tukee täyden leveyden lohkojen kohdistusta, joten voit luoda etusivullesi täysleveän kuvagallerian.
- Media & Teksti. Mukava helppo tapa kohdistaa kuva tai media tekstin viereen. Saattaa olla joissakin tapauksissa parempi vaihtoehto kuin sarakkeet.
- Upotus: Youtube ++. WordPress tarjoaa joukon upotteita medialle. Voit esimerkiksi saada etusivullesi toiston täysleveän Youtube-videon.
- Widgetit: Hakukenttä, uusimmat viestit, kalenteri++. WordPress tarjoaa mukavia oletussisältöelementtejä. Jos haluat näyttää luettelon viimeaikaisista viesteistä tai hakupalkin aloitussivullasi, tee se.
Jos kuitenkin sinusta tuntuu, että sinulla ei ole lohkoja tehdäksesi mitä haluat, ratkaisu on luoda omia mukautettuja lohkoja.
Mukautettujen lohkojen luominen
Hyvin yleinen etusivun tai aloitussivun ominaisuus on "pikakuvake" -elementti. jossa valitset viestin tai sivun, ja se tulostaa viestiin linkittävän lohkon, joka sisältää esitellyn kuvan, viestin otsikon, mahdollisesti katkelman. Tätä kirjoitettaessa standardi WordPressissä ei ollut tällaista vaihtoehtoa. Sinun on tehtävä tämä pikakuvake manuaalisesti itse lisäämällä manuaalisesti sama suositeltu kuva kuin viesti, kirjoittamalla manuaalisesti viestin otsikko ja ote ja käärittävä kaikki linkkiin.
Muita esimerkkejä lohkoista, jotka ovat erittäin hyödyllisiä etusivun ja aloitussivun rakentamisessa, ovat liukusäätimet / karusellit, hintavertailutaulukot ja suosittelut.
Tällaisten lohkojen optimoimiseksi sinun on joko löydettävä lisäosa, joka antaa sinulle tämän (en ole tutkinut tätä vaihtoehtoa), tai tehdä ne itse. Omien mukautettujen lohkojen tekeminen vaatii huomattavaa Javascriptin ja Reactin tuntemusta sekä paljon koodausta. Suosittelen siirtymään tälle tielle, jos olet tosissasi WordPress-kehittäjä.
Jos olet kiinnostunut oppimaan luomaan mukautettuja lohkoja Gutenbergille, minulla on opetusohjelmasarja, joka käy tämän läpi yksityiskohtaisesti.
Voit myös valita helpomman reitin ja ostaa Advanced Custom Fields Pron (ACF). Tämän laajennuksen avulla voit luoda mukautettuja Gutenberg-lohkoja ilman Javascript-tietoa. Hallitset vain lohkojen PHP-lähtöä ja annat ACF:n käsitellä Javascript-osan. Muista kuitenkin, että tämä luo teemasi riippuvuuden lisensoidusta laajennuksesta.
Johtopäätös
Toivon, että tämä viesti on auttanut sinua kehittämään taitojasi ja tietojasi WordPress Gutenbergin avulla! Tätä kirjoitettaessa ei todellakaan ollut tietoa ja kokemusta teeman optimoinnista Gutenbergiin. Minun oli erityisen vaikea löytää jotain etusivun kauniista rakentamisesta. Joten tämän olen oppinut paljon kokeilemalla ja leikkimällä.