{"id":233795,"date":"2023-02-22T20:17:00","date_gmt":"2023-02-22T17:17:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233795"},"modified":"2022-11-11T12:27:16","modified_gmt":"2022-11-11T09:27:16","slug":"arendaja-juhend-wordpress-gutenbergi-kasutamine-esilehe-ja-sihtlehtede-jaoks","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/arendaja-juhend-wordpress-gutenbergi-kasutamine-esilehe-ja-sihtlehtede-jaoks\/","title":{"rendered":"Arendaja juhend: WordPress Gutenbergi kasutamine esilehe ja sihtlehtede jaoks"},"content":{"rendered":"\n

Selles postituses vaatleme, kuidas kasutada Gutenbergi redaktorit suurep\u00e4rase v\u00e4limusega ja kaasaegsete esilehtede v\u00f5i sihtlehtede loomiseks. Vaatame eelk\u00f5ige seda, kuidas saate arendajana oma teemakoodi selle toetamiseks kohandada. See juhend sobib suurep\u00e4raselt teile, kes soovivad Gutenbergi toetamiseks kohandada vanemat teemat v\u00f5i \u00f5ppida, kuidas arendada uusi Gutenbergi jaoks optimeeritud teemasid.<\/p>\n

Kui WordPress tutvustas versioonis WordPress 5.0 uut Gutenbergi redaktorit<\/a> (v\u00e4lja antud 2018. aasta detsembri paiku), muutis see enamasti eraldi lehe koostaja pistikprogrammi kasutamise tarbetuks. Gutenbergi redaktor annab WordPressi autorile palju paindlikkust ning v\u00f5imaluse luua rikkalikku sisu ja kujundusi, mis varem polnud lihtne \u2013 kui just teema v\u00f5i plugin neile nt l\u00fchikoodide abil funktsionaalsust ei pakkunud.<\/p>\n

Saate WordPressis Gutenbergi plokkide jaoks palju stiililahendusi, kuid teemaga veidi t\u00f6\u00f6d tehes ja plokkide kohta teadmisi saate Gutenbergi kogemusele palju rohkem lisada. Vaatame, kuidas!<\/p>\n

Laiade ja t\u00e4islaiuste plokkide lubamine<\/h2>\n

\"Arendaja<\/a><\/p>\n

Enamik plokke v\u00f5imaldab valida plokkide joondusi. Kui t\u00f6\u00f6tate Gutenbergis teemal, mis pole Gutenbergi jaoks v\u00e4lja t\u00f6\u00f6tatud, saate valida \u201eJoonda vasakule”, \u201eJoonda keskele” ja \u201eJoonda paremale” vahel.<\/p>\n

Aga kas teadsite, et tegelikult on veel kaks? \u00dclej\u00e4\u00e4nud kaks, "Wide Width" ja "Full Width" sobivad suurep\u00e4raselt esilehe v\u00f5i sihtlehe tegemiseks. Vaatame l\u00e4hemalt, kuidas optimeerida teie teema paigutust ja kujundust, et hiljem t\u00e4ielikult toetada laia ja t\u00e4islaiusega plokke. K\u00f5igepealt peate \u00fctlema WordPressile, et ta lisaks teie teemasse nende kahe ploki joonduse toe.<\/p>\n

Teiega \u00fchendatud funktsioonis after_setup_theme<\/code>helistage lihtsalt add_theme_support('align-wide')<\/code>. T\u00f5en\u00e4oliselt on teie teemas juba seadistamise funktsioon v\u00f5i kui mitte, lisage see oma teemasse functions.php<\/code>:<\/p>\n

add_action('after_setup_theme', function() {\n    add_theme_support('align-wide');\n});<\/code><\/pre>\n
Kui see kood on teie teemas aktiivne, peaksite n\u00fc\u00fcd saama kokku viis valikut plokkide joondamiseks. M\u00f5ne ploki, n\u00e4iteks veergude puhul saate ainult kaks uut.<\/p>\n
\"Arendaja<\/a><\/p>\n
Plokkide joondusi saab m\u00e4\u00e4rata teatud t\u00fc\u00fcpi plokkides \u2013 enamasti on see selline, mis toetab pesastatud plokke, st. plokk, mis v\u00f5imaldab lisada plokke sees. Sellised populaarsed plokid on kaas, veerud, kujutis, manustamisplokid ja nii edasi. Kaaneplokk on suurep\u00e4rane plokk esilehtede v\u00f5i sihtlehtede loomiseks, nagu n\u00e4eme kogu selle postituse jooksul.<\/p>\n
Katteploki kasutamine<\/h2>\n
Kaaneplokk on kindlasti parim plokk, kui soovite luua esilehte v\u00f5i sihtlehte, mis on jagatud osadeks. Katteploki sisse saate lisada mis tahes t\u00fc\u00fcpi plokke ja nii palju plokke, mida soovite. Katteplokiga saate m\u00e4\u00e4rata taustav\u00e4rvi, taustapildi v\u00f5i v\u00e4rvilise \u00fclekattega taustapildi.<\/p>\n
\"Arendaja<\/a><\/p>\n
Koos v\u00f5imalusega seada ploki reguleerimine laiale v\u00f5i t\u00e4islaiusele (nagu me eespool tegime), on katteplokk v\u00f5imas t\u00f6\u00f6riist. Saate luua lehe, kus kogu sisu asub t\u00e4islaiuses kaaneplokkides, millel on iga\u00fchel oma taustav\u00e4rv v\u00f5i taustpilt. Teema \u00f5ige stiili ja paigutusega on teil t\u00e4ielik kaasaegne esilehe koostaja.<\/p>\n
\"Arendaja<\/a><\/p>\n
WordPress 5.3-s tehti kaaneploki jaoks oluline t\u00e4iustus: sisemine HTML-i \u00fcmbris. See t\u00e4hendab, et kaaneplokil on jaotise enda jaoks \u00fcks HTML-element \u2013 \u200b\u200btaustav\u00e4rvi v\u00f5i taustapildiga ja seej\u00e4rel teine \u200b\u200bHTML-element, kus asub kogu sisu. Kombineerige see t\u00e4islaiuse ploki joondusega: stiilige v\u00e4limine element (taustav\u00e4rvi v\u00f5i pildiga), et see muutuks t\u00e4ielikult t\u00e4islaiuseks, ja seej\u00e4rel stiilige sisemine HTML-element koos sisuga nii, et see mahuks teie teema konteinerisse.<\/p>\n
Oletagem n\u00e4iteks, et teie teema maksimaalse laiusega konteiner on 1200 pikslit. T\u00f5en\u00e4oliselt on teil juba konkreetne HTML-klass, mis on kujundatud maksimaalse laiusega, tagades, et teie sisu ei liiguks ekraani suurusest s\u00f5ltumata lihtsalt t\u00e4islaiusele. Lisage oma maksimaalse laiusega stiil kaane sisemisele HTML-ile; klassi nimi wp-block-cover__inner-container<\/code>. N\u00e4iteks:<\/p>\n
.wp-block-cover-image.alignfull .wp-block-cover__inner-container, \n.wp-block-cover.alignfull .wp-block-cover__inner-container {\n    position: relative;\n    width: 100%;\n    max-width: 1200px;\n    padding: 0 20px;\n}<\/code><\/pre>\n
\u00dclaltoodud CSS-koodis sihin kahte kaanevanemaklassi. \u00dclemkaaneploki klass muutub olenevalt sellest, kas valite taustpildi v\u00f5i mitte. Taustapildiga katteplokid saavad klassi " wp-block-cover-image<\/code>" ja taustav\u00e4rviga katteplokid klassi " wp-block-cover<\/code>". Lisaks sihin ka ploki joonduse "T\u00e4islaius" klassiga " alignfull<\/code>". Ploki joondus "Lai laius" saab klassi " alignwide<\/code>". Lisage CSS, et sihtida ka seda ploki joondust \u2013 olenevalt sellest, mida soovite teha.<\/p>\n
Kui olete sellega m\u00e4ngima hakanud, v\u00f5ib teil olla probleeme teema \u00fcldise paigutusega. T\u00f5en\u00e4oliselt sunnib teie teema t\u00e4islaiusega kaaneplokke \u00fcldse t\u00e4islaiusele minemata. Vaatame seda j\u00e4rgmisena.<\/p>\n
Teema paigutus ja t\u00e4islaiuses stiil<\/h2>\n
Siiani oleme lisanud laiade ja t\u00e4islaiuste plokkide toe ning \u00f5ppinud kasutama ja optimeerima kaaneplokki, et see toimiks esilehe v\u00f5i sihtlehe jaotisena. Kuid enamiku teemade puhul v\u00f5ivad teie HTML ja paigutus takistada postituse sisu ilmumist t\u00e4islaiusele.<\/p>\n
T\u00f5en\u00e4oliselt on teie teemal parempoolne k\u00fclgriba \u00fche postituse v\u00f5i lehe vaates. T\u00f5en\u00e4oliselt on olemas t\u00e4iendavad HTML-i \u00fcmbrised, sealhulgas max-width konteineri element, mis takistab teie t\u00e4islaiusega plokkide tegelikku t\u00e4islaiust. T\u00f5en\u00e4oliselt on teie \u00fcmbristel ka \u00fcsna palju veerisid v\u00f5i polsterdust, mis j\u00e4llegi takistab t\u00e4islaiustel plokkidel ekraani servi t\u00e4ielikult puudutamast. Kuid peate tegema \u00fche postituse v\u00f5i lehe hea v\u00e4ljan\u00e4gemise postituste jaoks, kus kasutaja ei kasuta ka kaaneplokke. Laiade ja t\u00e4islaiuste plokkide toega Gutenbergi jaoks arendades peate arvestama oma \u00fcmbristega. K\u00f5ik s\u00f5ltub teie teema kujundusest, HTML-ist ja stiilist \u2013 kuid vaatame m\u00f5nda ideed selle lahendamiseks.<\/p>\n
\"Arendaja<\/a><\/p>\n
Hea lahendus oleks postitamisvalikute lisamine; kohandatud metaseaded postitustele ja lehtedele, mis m\u00f5jutavad selle lehe paigutust. Saate seadistada k\u00fclgriba peitmise v\u00f5i sundida postituse sisu t\u00e4ielikult t\u00e4islaiusele minema. Looge postituse s\u00e4tted k\u00e4sitsi, lisades metakaste, v\u00f5i kasutage selle protsessi h\u00f5lbustamiseks t\u00e4psemaid kohandatud v\u00e4lju .<\/a> Seej\u00e4rel laadite oma teemas postituse seaded ja k\u00e4sitlete vastavalt HTML-v\u00e4ljundit.<\/p>\n
Teised head postitusv\u00f5imalused on lehe pealkirja peitmine ja\/v\u00f5i esiletoodud pildi peitmine. See v\u00f5imaldab teil sisu luua tavap\u00e4raselt, kuid konkreetsete lehtede jaoks saate h\u00f5lpsasti seadistada sihtlehe t\u00e4ielikult t\u00e4islaiuste kaaneplokkidega. Tavalise lehepealkirja peitmisel saate luua parema v\u00e4limusega p\u00e4ise v\u00f5i tegevusele kutsuva jaotise, mis toimiks selle asemel lehe pealkirjana.<\/p>\n
Looge plokkide stiile<\/h2>\n
WordPressis on v\u00e4hetuntud funktsioon Gutenberg; plokid v\u00f5ivad olla erineva stiiliga. Tsitaadiploki abil saate n\u00e4ha ploki stiile t\u00f6\u00f6s. Lisage plokk oma redaktorisse ja vaadake inspektorit (parem k\u00fclgriba). Leiate teema "Stiilid" ja kaks v\u00f5imalust erinevate stiilide vahel.<\/p>\n
\"Arendaja<\/a><\/p>\n
Looge kohandatud stiile, mis muudavad esilehe ja sihtlehtede loomise lihtsamaks. Soovitan lisada v\u00e4hemalt 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\u00e4iendav polster.<\/p>\n
Esilehti luua proovides pange t\u00e4hele, mida peate korduvalt kohandama \u2013 see v\u00f5ib sobida h\u00e4sti plokistiili jaoks.<\/p>\n
Kohandatud plokistiilide lisamine on tegelikult v\u00e4ga lihtne ega n\u00f5ua Javascripti teadmisi. Kui soovite selle kohta rohkem teada saada, on mul selle kohta eraldi \u00f5petus.<\/p>\n
PS: Kui te ei n\u00e4e plokkide stiile, v\u00f5ib teie teemal seda puududa. Protsess on sama, mida tegime laiade ja t\u00e4islaiuste plokkide joondamiseks; konksus after_setup_theme<\/code>lisate add_theme_support('wp-block-styles')<\/code>:<\/p>\n
add_action('after_setup_theme', function() {\n    add_theme_support('wp-block-styles');\n});<\/code><\/pre>\n
Teemav\u00e4rvide kasutamine v\u00e4rvipaletina<\/h2>\n
Kui olete Gutenbergiga m\u00e4nginud, olete ilmselt m\u00e4rganud, et Gutenberg pakub teile teksti v\u00f5i taustav\u00e4rvi jaoks teatud v\u00e4rvide komplekti. N\u00e4iteks kaaneploki lisamisel palutakse teil valida v\u00e4rvipaletist v\u00e4rv.<\/p>\n
Teil on v\u00f5imalus kasutada v\u00e4rvivalijat, et valida v\u00f5i sisestada kuusnurkne v\u00e4rv t\u00e4pselt soovitud v\u00e4rvini. Sellele p\u00e4\u00e4sete juurde, kl\u00f5psates lingil "Kohandatud v\u00e4rv". Kuid kui kasutate oma teemas sama v\u00e4rvikomplekti ja soovite seda j\u00e4rjepidevana hoida, v\u00f5ib olla t\u00fclikas pidevalt meeles pidada ja iga kord samu kuueteistk\u00fcmnendv\u00e4rvikoode sisestada.<\/p>\n
\u00d5nneks v\u00f5imaldab WordPress Gutenberg teil m\u00e4\u00e4rata v\u00e4rvipaleti! See on veel \u00fcks add_theme_support()<\/code>, kus saate paletti lisada soovitud v\u00e4rvide massiivi. Funktsioonis, mis on \u00fchendatud funktsiooniga after_setup_theme<\/code>, tehke j\u00e4rgmist:<\/p>\n
add_theme_support('editor-color-palette', [\n    [\n        'name' => __('Main blue profile color', 'txtdomain'),\n        'slug' => 'blue-profile',\n        'color' => '#59BACC'\n    ],\n    [\n        'name' => __('Secondary green profile color', 'txtdomain'),\n        'slug' => 'secondary-profile',\n        'color' => '#58AD69'\n    ],\n]);<\/code><\/pre>\n
\u00dclaltoodud koodis lisame ‘ editor-color-palette<\/code>‘ jaoks teematoe ja funktsiooni teise parameetrina m\u00e4\u00e4ratleme k\u00f5igi soovitud v\u00e4rvide massiivi. Iga v\u00e4rv n\u00f5uab atribuute name<\/code>, slug<\/code>ja color<\/code>. name<\/code>on see, mis kuvatakse, kui h\u00f5ljutate kursorit paletis oleva v\u00e4rvi kohal. slug<\/code>on klassi nimi, mis lisatakse plokielemendile. Ja color<\/code>m\u00e4\u00e4rab teie v\u00e4rvi kuueteistk\u00fcmnendkoodi.<\/p>\n
\"Arendaja<\/a><\/p>\n
Pidage meeles, et peate oma CSS-i lisama stiile, mis sihivad k\u00f5iki neid klasse (m\u00e4\u00e4ratleb slug<\/code>). WordPress ei rakenda teie plokkidele automaatselt kuusnurkset v\u00e4rvi, kuigi me \u00fctleme WordPressile, mis v\u00e4rvikood on.<\/p>\n
N\u00e4iteks parempoolne pilt on minu v\u00e4rvipalett, mille olen selle saidi teema jaoks m\u00e4\u00e4ratlenud \u2013 valge piksli jaoks:<\/p>\n
Need on minu teemav\u00e4rvid ja 95% juhtudest kasutan \u00fchte neist v\u00e4rvidest \u2013 kas tausta v\u00f5i tekstiv\u00e4rvina. Harvadel juhtudel saan v\u00e4rvivalija v\u00e4lja t\u00f5mmata, kuid kui tavalised kahtlusalused on v\u00e4rvipaletis juba m\u00e4\u00e4ratletud, teeb elu palju lihtsamaks.<\/p>\n
N\u00f5uanne on alati lisada oma v\u00e4rvipaletti puhas must (#000000<\/code>) ja puhas valge (). #FFFFFF<\/code>T\u00f5en\u00e4oliselt on hea m\u00f5te kasutada ka \u00fchte v\u00f5i kahte helehalli v\u00e4rvi.<\/p>\n
Staatilise esilehe kasutamine ja esilehe malli optimeerimine<\/h2>\n
T\u00f5en\u00e4oliselt teate seda juba, aga ma mainin seda k\u00f5ike. WordPressis saate m\u00e4\u00e4rata staatilise lehe esileheks, valides Seaded> Lugemine.<\/p>\n
\"Arendaja<\/a><\/p>\n
Vaikimisi kuvatakse WordPressi esilehel k\u00f5ige v\u00e4rskemate postituste loend. Kui aga valite \u201eStaatiline leht" ja valite rippmen\u00fc\u00fcst lehe, kuvab WordPress selle lehe teie saidi esilehena.<\/p>\n
See on lihtne WordPressi saidi esilehe seadistamine. Valitud lehel saate luua esilehe, kasutades k\u00f5iki \u00fclalmainitud nippe. N\u00e4iteks v\u00f5ivad teil olla m\u00e4rkimata postituse valikud lehe pealkirja, k\u00fclgriba ja esiletoodud pildi kuvamiseks. Ja leht on t\u00e4ielikult \u00fcles ehitatud t\u00e4islaiuste kaaneplokkide ja sisuga. Kuid v\u00f5ite valida, kas postisuvandeid ei kasutata (peida k\u00fclgriba jne) ja luua nende asendamiseks v\u00f5i j\u00f5ustamiseks lihtsalt esilehe malli.<\/p>\n
Kui teie WordPress on esileheks seatud staatiliseks leheks, otsib WordPress front-page.php<\/code>teie teemast malli. Seda kasutatakse page.php<\/code>. See v\u00f5imaldab teil luua ja kohandada eraldi malli, mida kasutatakse ainult teie esilehe jaoks.<\/p>\n
Selles front-page.php<\/code>mallis saate juba m\u00e4\u00e4ratleda HTML-i tagamaks, et k\u00f5ik plokid l\u00e4heksid t\u00e4ielikult t\u00e4islaiusele, neil pole k\u00fclgriba, lehe pealkirja ega esiletoodud pilti. V\u00f5ib-olla soovite lihtsalt teha the_content()<\/code>lehe sisu t\u00e4ielikuks v\u00e4ljastamiseks.<\/p>\n
N\u00e4iteks see on see, mis mul selle saidi teemas on front-page.php<\/code>. Kui k\u00f5igis teistes mallides, n\u00e4iteks page.php<\/code>, on mul palju v\u00e4ljundeid k\u00fclgriba, postituse pealkirja ja muu jaoks, on see kogu minu silmuse ulatus front-page.php<\/code>:<\/p>\n
while (have_posts()): the_post();\n    the_content('');\nendwhile;<\/code><\/pre>\n
See on k\u00f5ik. Minu \u00fcmbris-HTML ja klassid tagavad, et postituse sisu on t\u00e4ielikult t\u00e4islaiuses.<\/p>\n
Pidage meeles, et see on hea lahendus, kui teie kui teema kasutaja m\u00f5istate, kuidas teie mallid t\u00f6\u00f6tavad. Tean, et kogu minu esilehel olev sisu peab olema t\u00e4ielikult pakitud kaaneplokkidesse. Toetun kaaneploki sisemisele konteineri HTML-ile, et minu sisu n\u00e4eks hea v\u00e4lja ja mahuks maksimaalse laiusega konteinerisse. Kui ma peaksin lisama lihtsa l\u00f5iguploki ilma \u00fcmbriskatteplokita, ei n\u00e4eks see hea v\u00e4lja, kuna selle k\u00fclgedel poleks polsterdust.<\/p>\n
Oma saidi p\u00e4ise muutmine esimeses kaaneplokis l\u00e4bipaistvaks<\/h2>\n
Kaasaegsete veebisaitide v\u00e4ga levinud funktsioon on esilehe p\u00e4ise l\u00e4bipaistvus. Kui kasutaja hakkab lehte alla kerima, muutub p\u00e4is fikseeritud stiiliks ja saab tausta. Kuid l\u00e4bipaistva p\u00e4ise hoidmine v\u00f5ib t\u00f5esti kena v\u00e4lja n\u00e4ha, kui n\u00e4eme esimese jaotise taga v\u00e4rve v\u00f5i pilti.<\/p>\n
Teen seda selle saidi esilehel<\/a>. Vaata! Lehe \u00fclaosas pole minu p\u00e4isel tausta ja see n\u00e4itab taga oleva lilla gradiendi sektsiooni tausta (kaaneplokk). Kui hakkate kerima, saab see kindla kindla tausta.<\/p>\n
Pidage meeles, et peate olema teadlik p\u00e4ise ja esimese kaane tausta v\u00e4rvidest. Kui teie p\u00e4is koosneb valgest logost ja valgetest men\u00fc\u00fc\u00fcksustest (nagu minu oma), ei saa te seda nippi kasutada heleda taustaga katteplokiga. See muudaks teie p\u00e4ise loetamatuks!<\/p>\n
Kui soovite seda teha, pidage meeles, et see n\u00f5uab natuke Javascripti teadmisi. Aga tegelikult on see v\u00e4ga lihtne. Ma k\u00e4sitlen teie jaoks p\u00f5hit\u00f5desid:<\/p>\n
Minu kogu p\u00e4iseelement on alati position: fixed<\/code>. Kuna ma tavaliselt ei taha, et mu sisu p\u00e4ise taha kaoks, olen lisanud kehaelemendile polsterduse, mis surub sisu p\u00e4ise alla. Lisasin aga reegli, et kui oleme esilehe malli juures, siis seda t\u00e4idist ei lisata. See tagab, et kehaosa ilmub p\u00e4ise taha ainult esilehel. Seej\u00e4rel sihin esilehe esimese kaaneploki ja lisan t\u00e4iendava polsterduse, et selle esimese ploki sisu ei j\u00e4\u00e4ks p\u00e4ise taha, andes sellele p\u00e4rast p\u00e4ist kena polstri.<\/p>\n
Ja siis lisasin jQuery abil v\u00e4ga lihtsa Javascripti koodi:<\/p>\n
$(window).scroll(function() {\n    if ($(window).scrollTop() >= 60) {\n        $('#header').addClass('navbar-fixed')\n    } else {\n        $('#header').removeClass('navbar-fixed');\n    }\n});<\/code><\/pre>\n
See kood lisab klassi ‘ navbar-fixed<\/code>‘, kui lehte keritakse lehek\u00fcljel rohkem kui 60 pikslit allapoole. Ja oma CSS-is sihin lihtsalt seda klassi ja lisan fikseeritud taustav\u00e4rvi. Ilma selle klassita on p\u00e4ise taust esilehel l\u00e4bipaistev.<\/p>\n
See on asja p\u00f5hit\u00f5ed. M\u00e4ngige CSS-iga \u2013 kohandage Javascripti tipppunkti ja kasutage n\u00e4iteks transition<\/code>atribuuti, et muuta taustav\u00e4rvi rakendamisel sujuvam \u00fcleminek.<\/p>\n
Suurep\u00e4rased plokid esilehtede ja sihtlehtede jaoks<\/h2>\n
WordPress pakub t\u00e4ielikku valikut plokke, mis on teile kasutamiseks valmis. M\u00f5ned neist on eriti kasulikud esilehe v\u00f5i sihtlehe loomisel. Kui olete juba tuttav k\u00f5igi saadaolevate plokkidega, teate t\u00f5en\u00e4oliselt neid juba.<\/p>\n