{"id":233780,"date":"2023-02-22T20:13:00","date_gmt":"2023-02-22T17:13:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233780"},"modified":"2022-11-11T12:21:17","modified_gmt":"2022-11-11T09:21:17","slug":"kehittaejaen-opas-wordpress-gutenbergin-kaeyttoe-etusivulla-ja-aloitussivuilla","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/kehittaejaen-opas-wordpress-gutenbergin-kaeyttoe-etusivulla-ja-aloitussivuilla\/","title":{"rendered":"Kehitt\u00e4j\u00e4n opas: WordPress Gutenbergin k\u00e4ytt\u00f6 etusivulla ja aloitussivuilla"},"content":{"rendered":"\n

T\u00e4ss\u00e4 postauksessa tarkastellaan, miten Gutenberg-editoria voidaan k\u00e4ytt\u00e4\u00e4 upeiden ja nykyaikaisten etusivujen tai aloitussivujen luomiseen. Tarkastelemme erityisesti, kuinka sin\u00e4 kehitt\u00e4j\u00e4n\u00e4 voit muokata teemakoodiasi tukemaan t\u00e4t\u00e4. T\u00e4m\u00e4 opas on t\u00e4ydellinen sinulle, joka haluat muokata vanhaa teemaa tukemaan Gutenbergi\u00e4 tai oppia kehitt\u00e4m\u00e4\u00e4n uusia Gutenbergille optimoituja teemoja.<\/p>\n

Kun WordPress esitteli uuden Gutenberg-editorin<\/a> WordPress 5.0:ssa (julkaistu noin joulukuussa 2018), se teki enimm\u00e4kseen erillisen sivunrakennuslaajennuksen k\u00e4ytt\u00e4misen tarpeettomaksi. Gutenberg-editori antaa WordPressin kirjoittajalle paljon joustavuutta ja mahdollisuuden luoda rikasta sis\u00e4lt\u00f6\u00e4 ja designia, mik\u00e4 ei ollut ennen helppoa \u2013 ellei teema tai laajennus tarjonnut toiminnallisuutta esim. lyhytkoodeilla.<\/p>\n

Saat paljon tyyli\u00e4 Gutenberg-lohkoille WordPressiss\u00e4, mutta tekem\u00e4ll\u00e4 hieman ty\u00f6t\u00e4 teemasi kanssa ja tuntemalla lohkoja voit lis\u00e4t\u00e4 Gutenberg-kokemukseen paljon enemm\u00e4n. Katsotaanpa miten!<\/p>\n

Mahdollistaa leve\u00e4t ja t\u00e4ysleve\u00e4t lohkot<\/h2>\n

\"Kehitt\u00e4j\u00e4n<\/a><\/p>\n

Useimmissa lohkoissa voit valita lohkojen kohdistuksen. Kun ty\u00f6skentelet Gutenbergiss\u00e4 teemassa, jota ei ole kehitetty Gutenbergille, voit valita "Align Left", "Align Center" ja "Align Right" v\u00e4lill\u00e4.<\/p>\n

Mutta tiesitk\u00f6, ett\u00e4 niit\u00e4 on itse asiassa kaksi muuta? Kaksi muuta, "Wide Width" ja "Full Width" ovat t\u00e4ydellisi\u00e4 etusivun tai aloitussivun tekemiseen. Tarkastellaan my\u00f6hemmin tarkemmin, kuinka voit optimoida teemasi asettelun ja suunnittelun tukemaan t\u00e4ysin leveit\u00e4 ja t\u00e4ysleveit\u00e4 lohkoja. Ensin sinun on kehotettava WordPressi\u00e4 lis\u00e4\u00e4m\u00e4\u00e4n tuki n\u00e4ille kahdelle lohkokohdistukselle teemaasi.<\/p>\n

Sinuun kytketyss\u00e4 toiminnossa after_setup_theme<\/code>soita yksinkertaisesti add_theme_support('align-wide')<\/code>. Sinulla on luultavasti jo "asetus"-toiminto teemassasi, tai jos ei, lis\u00e4\u00e4 t\u00e4m\u00e4 teemaasi functions.php<\/code>:<\/p>\n

add_action('after_setup_theme', function() {\n    add_theme_support('align-wide');\n});<\/code><\/pre>\n
Kun t\u00e4m\u00e4 koodi on aktiivinen teemassasi, sinun pit\u00e4isi nyt saada yhteens\u00e4 viisi vaihtoehtoa lohkojen kohdistuksille. Joillekin lohkoille, esimerkiksi Columnsille, saat vain kaksi uutta.<\/p>\n
\"Kehitt\u00e4j\u00e4n<\/a><\/p>\n
On olemassa tiettyj\u00e4 lohkotyyppej\u00e4, joissa voit asettaa lohkokohdistuksia \u2013 useimmiten ne ovat sellaisia, jotka tukevat sis\u00e4kk\u00e4isi\u00e4 lohkoja, esim. lohko, jonka avulla voit lis\u00e4t\u00e4 lohkoja sis\u00e4\u00e4n. T\u00e4llaisia \u200b\u200bsuosittuja lohkoja ovat kansi, sarakkeet, kuva, upotuslohkot ja niin edelleen. Kansilohko on loistava lohko etusivujen tai aloitussivujen rakentamiseen, kuten n\u00e4emme t\u00e4ss\u00e4 viestiss\u00e4.<\/p>\n
Kansilohkon k\u00e4ytt\u00e4minen<\/h2>\n
Kansilohko on ehdottomasti paras lohko, kun haluat rakentaa etusivun tai aloitussivun, joka on jaettu osiin. Voit lis\u00e4t\u00e4 mink\u00e4 tahansa lohkon ja niin monta lohkoa kuin haluat kansilohkon sis\u00e4\u00e4n. Kansilohkolla voit asettaa taustav\u00e4rin, taustakuvan tai taustakuvan v\u00e4ripeittokuvalla.<\/p>\n
\"Kehitt\u00e4j\u00e4n<\/a><\/p>\n
Yhdess\u00e4 mahdollisuuteen asettaa lohkon s\u00e4\u00e4t\u00f6 leve\u00e4ksi tai t\u00e4ysleve\u00e4ksi (kuten teimme edell\u00e4), Cover block on tehokas ty\u00f6kalu. Voit luoda sivun, jossa kaikki sis\u00e4lt\u00f6 on t\u00e4ysleveiss\u00e4 kansilohkoissa, joissa jokaisella on oma taustav\u00e4ri tai taustakuva. Teeman oikean tyylin ja asettelun avulla saat t\u00e4ydellisen modernin etusivun rakentajan.<\/p>\n
\"Kehitt\u00e4j\u00e4n<\/a><\/p>\n
WordPress 5.3:ssa Cover-lohkoon tuli t\u00e4rke\u00e4 parannus: sis\u00e4inen HTML-k\u00e4\u00e4re. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 Cover-lohkossa on yksi HTML-elementti itse osiolle \u2013 sen taustav\u00e4ri tai taustakuva ja sitten toinen HTML-elementti, jossa kaikki sis\u00e4lt\u00f6 sijaitsee. Yhdist\u00e4 t\u00e4m\u00e4 t\u00e4ysleve\u00e4n lohkokohdistukseen: muotoile ulompi elementti (taustav\u00e4rin tai kuvan kanssa) niin, ett\u00e4 se tulee t\u00e4ysin t\u00e4ysleve\u00e4ksi, ja muotoile sitten sisempi HTML-elementti sis\u00e4ll\u00f6n kanssa niin, ett\u00e4 se sopii teemasi s\u00e4il\u00f6\u00f6n.<\/p>\n
Oletetaan esimerkiksi, ett\u00e4 teemallasi on 1\u00a0200 kuvapisteen enimm\u00e4isleveyss\u00e4ili\u00f6. Sinulla on luultavasti jo tietty HTML-luokka, joka on tyylitelty enimm\u00e4isleveydell\u00e4, mik\u00e4 varmistaa, ett\u00e4 sis\u00e4lt\u00f6si ei yksinkertaisesti levi\u00e4 koko leveydelle n\u00e4yt\u00f6n koosta riippumatta. Lis\u00e4\u00e4 enimm\u00e4isleveystyylisi kannen sis\u00e4iseen HTML-koodiin; luokan nimi wp-block-cover__inner-container<\/code>. Esimerkiksi:<\/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
Yll\u00e4 olevassa CSS-koodissa kohdistan kahteen Cover-yl\u00e4luokkaan. P\u00e4\u00e4kansilohkoluokka muuttuu sen mukaan, valitsetko taustakuvan vai et. Taustakuvalla varustetut kansilohkot saavat luokan " wp-block-cover-image<\/code>" ja peitelohkot, joissa on taustav\u00e4ri, luokan " wp-block-cover<\/code>". Lis\u00e4ksi kohdistan lohkokohdistuksen "Full Width" luokassa " alignfull<\/code>". "Wide Width" -lohkokohdistus saa luokan " alignwide<\/code>". Lis\u00e4\u00e4 CSS kohdistaaksesi my\u00f6s t\u00e4m\u00e4n lohkon kohdistuksen \u2013 riippuen siit\u00e4, mit\u00e4 haluat tehd\u00e4.<\/p>\n
Jos olet alkanut leikki\u00e4 t\u00e4m\u00e4n kanssa, olet saattanut kohdata ongelmia teeman yleisen asettelun kanssa. Teemasi todenn\u00e4k\u00f6isesti pakottaa t\u00e4ysleve\u00e4t Cover-lohkot olemaan t\u00e4ysleve\u00e4n\u00e4. Katsotaanpa t\u00e4t\u00e4 seuraavaksi.<\/p>\n
Teeman asettelu ja koko leve\u00e4 muotoilu<\/h2>\n
T\u00e4h\u00e4n menness\u00e4 olemme lis\u00e4nneet tuen leveille ja t\u00e4ysleveille lohkoille ja oppineet k\u00e4ytt\u00e4m\u00e4\u00e4n ja optimoimaan Cover-lohkoa toimimaan etusivun tai aloitussivun osina. Useimmissa teemoissa HTML-koodisi ja asettelusi voivat kuitenkin est\u00e4\u00e4 viestisi sis\u00e4ll\u00f6n levi\u00e4misen t\u00e4ysleveyteen.<\/p>\n
Teemallasi on luultavasti oikea sivupalkki yksitt\u00e4isess\u00e4 viestiss\u00e4 tai sivun\u00e4kym\u00e4ss\u00e4. On luultavasti muita HTML-k\u00e4\u00e4reit\u00e4, mukaan lukien max-width-s\u00e4ili\u00f6elementti, joka est\u00e4\u00e4 t\u00e4ysleve\u00e4si lohkojasi menem\u00e4st\u00e4 t\u00e4ysleve\u00e4ksi. K\u00e4\u00e4reiss\u00e4si on luultavasti my\u00f6s reilut marginaalit tai pehmusteet, jotka taas est\u00e4v\u00e4t t\u00e4ysleve\u00e4t lohkot koskettamasta kokonaan n\u00e4yt\u00f6n reunoja. Mutta sinun on saatava yksitt\u00e4inen viesti tai sivu n\u00e4ytt\u00e4m\u00e4\u00e4n hyv\u00e4lt\u00e4 viesteiss\u00e4, joissa k\u00e4ytt\u00e4j\u00e4 ei k\u00e4yt\u00e4 my\u00f6s kansilohkoja. Sinun on otettava huomioon k\u00e4\u00e4reesi, kun kehit\u00e4t Gutenbergille tukea leveille ja t\u00e4ysleveille lohkoille. Kaikki riippuu teemasi suunnittelusta, HTML:st\u00e4 ja tyylist\u00e4 \u2013 mutta katsotaanpa ideoita t\u00e4m\u00e4n ratkaisemiseksi.<\/p>\n
\"Kehitt\u00e4j\u00e4n<\/a><\/p>\n
Hyv\u00e4 ratkaisu olisi lis\u00e4t\u00e4 postivaihtoehtoja; mukautetut meta-asetukset viesteille ja sivuille, jotka vaikuttavat kyseisen sivun asetteluun. Voit tehd\u00e4 asetuksen piilottaaksesi sivupalkin tai pakottaaksesi viestisi sis\u00e4ll\u00f6n muuttumaan kokonaan t\u00e4ysleve\u00e4ksi. Luo viestiasetukset manuaalisesti lis\u00e4\u00e4m\u00e4ll\u00e4 metalaatikoita tai k\u00e4yt\u00e4 Advanced Custom Fields<\/a> -toimintoa helpottaaksesi t\u00e4t\u00e4 prosessia. Ja sitten teemassasi haet viestiasetukset ja k\u00e4sittelet HTML-tulostusta vastaavasti.<\/p>\n
Muita hyvi\u00e4 postausvaihtoehtoja ovat sivun otsikon piilottaminen ja\/tai esitellyn kuvan piilottaminen. N\u00e4in voit luoda sis\u00e4lt\u00f6\u00e4 normaalisti, mutta tietyille sivuille voit helposti m\u00e4\u00e4ritt\u00e4\u00e4 aloitussivun kokonaan t\u00e4ysleveill\u00e4 kansilohkoilla. Piilota sivun vakiootsikko voit luoda paremman n\u00e4k\u00f6isen otsikon tai toimintakehotusosion, joka toimii sen sijaan sivun otsikona.<\/p>\n
Luo lohkotyylej\u00e4<\/h2>\n
WordPressiss\u00e4 on v\u00e4h\u00e4n tunnettu ominaisuus Gutenberg; lohkoilla voi olla erilaisia \u200b\u200btyylej\u00e4. Voit n\u00e4hd\u00e4 lohkotyylej\u00e4 toiminnassa lainauslohkon avulla. Lis\u00e4\u00e4 lohko editorissasi ja katso Inspectoria (oikea sivupalkki). L\u00f6yd\u00e4t aiheen "Tyylit" ja kaksi vaihtoehtoa eri tyylien v\u00e4lill\u00e4.<\/p>\n
\"Kehitt\u00e4j\u00e4n<\/a><\/p>\n
Luo mukautettuja tyylej\u00e4, jotka helpottavat etu- ja aloitussivujen luomista. Suosittelen ainakin lis\u00e4\u00e4m\u00e4\u00e4n mukautettuja lohkotyylej\u00e4 Otsikko-lohkoon, jotta voit tehd\u00e4 mukautettuja tyylej\u00e4 keskeytt\u00e4m\u00e4tt\u00e4 otsikoita tavallisille viesteille. Luo lohkotyyli osioiden otsikoille, joissa on eritt\u00e4in suuri fontti ja lis\u00e4t\u00e4ytt\u00f6.<\/p>\n
Kun yrit\u00e4t luoda etusivuja, pane merkille, mit\u00e4 sinun on mukautettava toistuvasti \u2013 t\u00e4m\u00e4 voi sopia hyvin lohkotyyliin.<\/p>\n
Mukautettujen lohkotyylien lis\u00e4\u00e4minen on todella helppoa, eik\u00e4 se vaadi Javascriptin tuntemusta. Minulla on erillinen opetusohjelma t\u00e4m\u00e4n tekemiseen, jos haluat oppia lis\u00e4\u00e4 t\u00e4st\u00e4.<\/p>\n
PS: Jos et n\u00e4e lohkotyylej\u00e4, teemasi ei ehk\u00e4 tue t\u00e4t\u00e4. Prosessi on sama kuin teimme leveiden ja t\u00e4ysleveiden lohkojen kohdistuksissa; koukkuun after_setup_theme<\/code>lis\u00e4\u00e4t 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\u00e4rien k\u00e4ytt\u00e4minen v\u00e4ripalettina<\/h2>\n
Jos olet leikkinyt Gutenbergin kanssa, olet todenn\u00e4k\u00f6isesti huomannut, ett\u00e4 Gutenberg tarjoaa sinulle tietyn v\u00e4rivalikoiman tekstille tai taustav\u00e4rille. Esimerkiksi kansilohkon lis\u00e4\u00e4minen kehottaa sinua valitsemaan v\u00e4rin v\u00e4ripaletista.<\/p>\n
Sinulla on mahdollisuus k\u00e4ytt\u00e4\u00e4 v\u00e4rinvalitsinta valitaksesi tai sy\u00f6tt\u00e4\u00e4ksesi kuusiv\u00e4risen tarkan haluamasi v\u00e4rin. P\u00e4\u00e4set t\u00e4h\u00e4n napsauttamalla linkki\u00e4 "Mukautettu v\u00e4ri". Mutta jos k\u00e4yt\u00e4t samoja v\u00e4rej\u00e4 teemassasi ja haluat pit\u00e4\u00e4 sen johdonmukaisena, voi olla hankalaa muistaa ja kirjoittaa samat hex-v\u00e4rikoodit joka kerta.<\/p>\n
Onneksi WordPress Gutenberg antaa sinun m\u00e4\u00e4ritt\u00e4\u00e4 v\u00e4ripaletin! T\u00e4m\u00e4 on j\u00e4lleen yksi add_theme_support()<\/code>, jossa tarjoat joukon v\u00e4rej\u00e4, jotka haluat palettiin. Toimi funktioon, joka on koukussa after_setup_theme<\/code>, tee n\u00e4in:<\/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
Yll\u00e4 olevaan koodiin lis\u00e4\u00e4mme teematuen ’ editor-color-palette<\/code>’:lle, ja funktion toiseksi parametriksi m\u00e4\u00e4rit\u00e4mme joukon kaikkia haluamiasi v\u00e4rej\u00e4. Jokainen v\u00e4ri vaatii m\u00e4\u00e4ritteet name<\/code>, slug<\/code>ja color<\/code>. name<\/code>n\u00e4kyy, kun siirr\u00e4t hiiren v\u00e4rin p\u00e4\u00e4lle paletissa. slug<\/code>on luokan nimi, joka lis\u00e4t\u00e4\u00e4n lohkoelementtiin. Ja color<\/code>m\u00e4\u00e4ritt\u00e4\u00e4 v\u00e4risi heksadesimaalikoodin.<\/p>\n
\"Kehitt\u00e4j\u00e4n<\/a><\/p>\n
Muista, ett\u00e4 sinun on lis\u00e4tt\u00e4v\u00e4 tyylej\u00e4 CSS-kohdistukseen jokaiseen n\u00e4ist\u00e4 luokista (m\u00e4\u00e4ritt\u00e4\u00e4 slug<\/code>). WordPress ei k\u00e4yt\u00e4 automaattisesti hex-v\u00e4ri\u00e4 lohkoihisi, vaikka kerromme WordPressille, mik\u00e4 v\u00e4rikoodi on.<\/p>\n
Esimerkkin\u00e4 oikealla oleva kuva on v\u00e4ripalettini, jonka olen m\u00e4\u00e4ritellyt t\u00e4m\u00e4n sivuston teemaa varten \u2013 A White Pixel:lle:<\/p>\n
N\u00e4m\u00e4 ovat teemav\u00e4ri ja 95 % tapauksista k\u00e4yt\u00e4n jotakin n\u00e4ist\u00e4 v\u00e4reist\u00e4 \u2013 joko tausta- tai tekstiv\u00e4rin\u00e4. Harvoissa tapauksissa voin vet\u00e4\u00e4 v\u00e4rivalitsimen esiin, mutta tavanomaisten ep\u00e4iltyjen m\u00e4\u00e4ritt\u00e4minen v\u00e4ripaletissa tekee el\u00e4m\u00e4st\u00e4 paljon helpompaa.<\/p>\n
Vinkki on, ett\u00e4 lis\u00e4\u00e4t aina puhdasta mustaa (#000000<\/code>) ja puhdasta valkoista (#FFFFFF<\/code>) v\u00e4ripalettiisi. On luultavasti my\u00f6s hyv\u00e4 idea yksi tai kaksi vaaleanharmaata v\u00e4ri\u00e4.<\/p>\n
Staattisen etusivun k\u00e4ytt\u00e4minen ja etusivun mallin optimointi<\/h2>\n
Tied\u00e4t varmaan jo t\u00e4m\u00e4n, mutta mainitsen sen kuitenkin. WordPressiss\u00e4 voit asettaa staattisen sivun etusivuksi siirtym\u00e4ll\u00e4 kohtaan Asetukset > Lukeminen.<\/p>\n
\"Kehitt\u00e4j\u00e4n<\/a><\/p>\n
Oletuksena WordPressin etusivulla n\u00e4kyy luettelo uusimmista viesteist\u00e4. Mutta jos valitset "Staattinen sivu" ja valitset sivun pudotusvalikosta, WordPress n\u00e4ytt\u00e4\u00e4 t\u00e4m\u00e4n sivun sivustosi etusivuna.<\/p>\n
T\u00e4m\u00e4 on vaivaton WordPress-sivustosi etusivun luominen. Valitulla sivulla voit rakentaa etusivun k\u00e4ytt\u00e4m\u00e4ll\u00e4 kaikkia yll\u00e4 mainittuja temppuja. Sinulla voi esimerkiksi olla valitsemattomia viestivaihtoehtoja sivun otsikon, sivupalkin ja esitellyn kuvan n\u00e4ytt\u00e4miseksi. Ja sivu on t\u00e4ysin rakennettu t\u00e4ysleveill\u00e4 kansilohkoilla ja sis\u00e4ll\u00f6ll\u00e4. Voit kuitenkin valita, ettet valitse postausvaihtoehtojen (piilota sivupalkki jne.) reitti\u00e4 ja yksinkertaisesti tehd\u00e4 etusivun mallipohja, joka korvaa tai pakottaa n\u00e4m\u00e4.<\/p>\n
Kun WordPress on asetettu staattiseksi sivuksi etusivuksi, WordPress etsii mallia front-page.php<\/code>teemastasi. T\u00e4t\u00e4 k\u00e4ytet\u00e4\u00e4n page.php<\/code>. N\u00e4in voit luoda ja s\u00e4\u00e4t\u00e4\u00e4 erillisen mallin, jota k\u00e4ytet\u00e4\u00e4n vain etusivullesi.<\/p>\n
T\u00e4ss\u00e4 front-page.php<\/code>mallissa voit jo m\u00e4\u00e4ritt\u00e4\u00e4 HTML:n varmistaaksesi, ett\u00e4 kaikki lohkot menev\u00e4t t\u00e4ysin t\u00e4ysleve\u00e4ksi, ettei niiss\u00e4 ole sivupalkkia, sivun otsikkoa tai esitelty\u00e4 kuvaa. Haluat ehk\u00e4 vain the_content()<\/code>tulostaa sivun sis\u00e4ll\u00f6n kokonaan.<\/p>\n
Esimerkiksi t\u00e4m\u00e4 on mit\u00e4 minulla on t\u00e4m\u00e4n sivuston teemassa front-page.php<\/code>. Kun taas kaikissa muissa malleissa, kuten page.php<\/code>, minulla on runsaasti tulosteita sivupalkille, viestin otsikolle ja niin edelleen, t\u00e4m\u00e4 on silmukani koko laajuus front-page.php<\/code>:<\/p>\n
while (have_posts()): the_post();\n    the_content('');\nendwhile;<\/code><\/pre>\n
Se siit\u00e4. K\u00e4\u00e4ritt\u00e4v\u00e4 HTML-koodini ja luokat varmistavat, ett\u00e4 julkaisun sis\u00e4lt\u00f6 on t\u00e4ysin t\u00e4ysleve\u00e4.<\/p>\n
Muista, ett\u00e4 t\u00e4m\u00e4 on hyv\u00e4 ratkaisu, jos sin\u00e4 teeman k\u00e4ytt\u00e4j\u00e4n\u00e4 ymm\u00e4rr\u00e4t, miten mallipohjasi toimivat. Tied\u00e4n, ett\u00e4 kaiken etusivullani olevan sis\u00e4ll\u00f6n on oltava kokonaan k\u00e4\u00e4ritty kansipalikoiden sis\u00e4\u00e4n. Luotan Cover-lohkon sisemp\u00e4\u00e4n s\u00e4il\u00f6n HTML-koodiin varmistaakseni, ett\u00e4 sis\u00e4lt\u00f6ni n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4 ja putoaa suurimman leveyden s\u00e4il\u00f6\u00f6n. Jos lis\u00e4isin yksinkertaisen kappalelohkon ilman k\u00e4\u00e4rett\u00e4, se ei n\u00e4ytt\u00e4isi hyv\u00e4lt\u00e4, koska sen sivuilta puuttuisi pehmuste.<\/p>\n
Tee sivustosi otsikosta l\u00e4pin\u00e4kyv\u00e4 ensimm\u00e4isest\u00e4 kansilohkosta<\/h2>\n
Hyvin yleinen ominaisuus nykyaikaisilla verkkosivuilla on otsikon l\u00e4pin\u00e4kyvyys etusivulla. Kun k\u00e4ytt\u00e4j\u00e4 alkaa vieritt\u00e4\u00e4 sivua alasp\u00e4in, otsikko muuttuu kiinte\u00e4\u00e4n tyyliin ja saa taustan. Mutta l\u00e4pin\u00e4kyv\u00e4n otsikon pit\u00e4minen voi n\u00e4ytt\u00e4\u00e4 todella hyv\u00e4lt\u00e4, kun n\u00e4emme v\u00e4rit tai kuvan ensimm\u00e4isen osan takana.<\/p>\n
Teen t\u00e4m\u00e4n t\u00e4m\u00e4n sivuston etusivulla<\/a>. Katso! Sivun yl\u00e4reunassa otsikollani ei ole taustaa, ja se n\u00e4ytt\u00e4\u00e4 takana olevan violetin gradienttiosan (kansilohkon) taustan. Kun aloitat vierityksen, se saa kiinte\u00e4n kiinte\u00e4n taustan.<\/p>\n
Muista, ett\u00e4 sinun on oltava tietoinen otsikon ja ensimm\u00e4isen kannen taustan v\u00e4reist\u00e4. Jos otsikkosi koostuu valkoisesta logosta ja valkoisista valikkokohdista (kuten omani), et voi k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 temppua Cover-lohkon kanssa, jossa on vaalea tausta. Se tekisi otsikostasi lukukelvottoman!<\/p>\n
Jos haluat tehd\u00e4 t\u00e4m\u00e4n, muista, ett\u00e4 se vaatii hieman Javascript-tietoa. Mutta se on itse asiassa todella yksinkertaista. K\u00e4yn sinulle perusasiat l\u00e4pi:<\/p>\n
Koko otsikkoelementtini on aina position: fixed<\/code>. Koska en yleens\u00e4 halua sis\u00e4ll\u00f6ni katoavan otsikon taakse, olen lis\u00e4nnyt body-elementtiin pehmusteen, joka ty\u00f6nt\u00e4\u00e4 sis\u00e4ll\u00f6n alas otsikon alle. Olen kuitenkin lis\u00e4nnyt s\u00e4\u00e4nn\u00f6n, ett\u00e4 jos olemme etusivun mallissa, t\u00e4t\u00e4 t\u00e4ytt\u00f6\u00e4 ei lis\u00e4t\u00e4. T\u00e4m\u00e4 varmistaa, ett\u00e4 vain etusivulla runko-osa n\u00e4kyy otsikon takana. Kohdistan sitten etusivun ensimm\u00e4iseen Cover-lohkoon ja lis\u00e4\u00e4n ylim\u00e4\u00e4r\u00e4isen toppauksen varmistaakseni, ett\u00e4 t\u00e4m\u00e4n ensimm\u00e4isen lohkon sis\u00e4lt\u00f6 ei osu yl\u00e4tunnisteen taakse – antaen sille mukavan hyv\u00e4n t\u00e4yt\u00f6n otsikon j\u00e4lkeen.<\/p>\n
Ja sitten olen lis\u00e4nnyt hyvin yksinkertaisen Javascript-koodin jQueryn avulla:<\/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
T\u00e4m\u00e4 koodi lis\u00e4\u00e4 luokan " navbar-fixed<\/code>", kun sivua vieritet\u00e4\u00e4n yli 60 kuvapistett\u00e4 alasp\u00e4in. Ja CSS:ss\u00e4ni kohdistan yksinkertaisesti t\u00e4h\u00e4n luokkaan ja lis\u00e4\u00e4n kiinte\u00e4n taustav\u00e4rin. Ilman t\u00e4t\u00e4 luokkaa otsikon tausta on l\u00e4pin\u00e4kyv\u00e4 etusivulla.<\/p>\n
Siin\u00e4 sen perusasiat. Pelaa CSS:ll\u00e4 \u2013 s\u00e4\u00e4d\u00e4 Javascriptin "k\u00e4rkikohtaa" ja k\u00e4yt\u00e4 esimerkiksi transition<\/code>ominaisuutta tasaisen siirtymisen tekemiseen, kun taustav\u00e4ri\u00e4 k\u00e4ytet\u00e4\u00e4n.<\/p>\n
Upeita lohkoja etusivuille ja aloitussivuille<\/h2>\n
WordPress tarjoaa t\u00e4yden valikoiman lohkoja valmiina k\u00e4ytett\u00e4v\u00e4ksi. Jotkut niist\u00e4 ovat erityisen hy\u00f6dyllisi\u00e4 etusivua tai aloitussivua luotaessa. Jos olet jo tutustunut kaikkiin saatavilla oleviin lohkoihin, tied\u00e4t luultavasti jo niist\u00e4.<\/p>\n