{"id":233772,"date":"2023-02-22T19:35:00","date_gmt":"2023-02-22T16:35:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233772"},"modified":"2022-11-11T12:18:45","modified_gmt":"2022-11-11T09:18:45","slug":"utvecklarguide-anvaenda-wordpress-gutenberg-foer-startsida-och-maalsidor","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/utvecklarguide-anvaenda-wordpress-gutenberg-foer-startsida-och-maalsidor\/","title":{"rendered":"Utvecklarguide: Anv\u00e4nda WordPress Gutenberg f\u00f6r startsida och m\u00e5lsidor"},"content":{"rendered":"\n

I det h\u00e4r inl\u00e4gget kommer vi att titta p\u00e5 hur man anv\u00e4nder Gutenberg-redigeraren f\u00f6r att skapa snygga och moderna framsidor eller m\u00e5lsidor. Vi kommer s\u00e4rskilt titta p\u00e5 hur du som utvecklare kan justera din temakod f\u00f6r att st\u00f6dja detta. Den h\u00e4r guiden \u00e4r perfekt f\u00f6r dig som vill anpassa ett \u00e4ldre tema f\u00f6r att st\u00f6dja Gutenberg, eller vill l\u00e4ra dig att utveckla nya teman optimerade f\u00f6r Gutenberg.<\/p>\n

N\u00e4r WordPress introducerade den nya Gutenberg-redigeraren<\/a> i WordPress 5.0 (sl\u00e4pptes runt december 2018) gjorde det oftast anv\u00e4ndningen av en separat sidbyggarplugin on\u00f6dig. Gutenberg-redakt\u00f6ren ger WordPress-f\u00f6rfattaren mycket flexibilitet och m\u00f6jlighet att skapa rikt inneh\u00e5ll och design som inte var l\u00e4tt f\u00f6rut \u2013 om inte temat eller ett plugin tillhandah\u00f6ll funktionaliteten f\u00f6r dem med t.ex. kortkoder.<\/p>\n

Du f\u00e5r mycket styling f\u00f6r Gutenberg-block ur l\u00e5dan i WordPress, men med lite arbete i ditt tema och kunskap om blocken kan du l\u00e4gga till s\u00e5 mycket mer till Gutenberg-upplevelsen. L\u00e5t oss ta en titt p\u00e5 hur!<\/p>\n

Aktiverar breda och fullbreddsblock<\/h2>\n

\"Utvecklarguide:<\/a><\/p>\n

De flesta block l\u00e5ter dig v\u00e4lja blockjusteringar. N\u00e4r du arbetar i Gutenberg i ett tema som inte utvecklats f\u00f6r Gutenberg f\u00e5r du valet mellan "Align Left, "Align Center" och "Align Right".<\/p>\n

Men visste du att det faktiskt finns tv\u00e5 till? De andra tv\u00e5, "Wide Width" och "Full Width" \u00e4r perfekta f\u00f6r att g\u00f6ra en f\u00f6rstasida eller landningssida. Vi kommer att titta n\u00e4rmare p\u00e5 hur du optimerar din temalayout och design f\u00f6r att fullt ut st\u00f6dja breda och fullbreddsblock senare. F\u00f6rst m\u00e5ste du ber\u00e4tta f\u00f6r WordPress att l\u00e4gga till st\u00f6d f\u00f6r dessa tv\u00e5 blockanpassningar i ditt tema.<\/p>\n

I en funktion kopplad till after_setup_theme<\/code>ringer du helt enkelt add_theme_support('align-wide')<\/code>. Du har f\u00f6rmodligen redan en "setup"-funktion i ditt tema, eller om inte \u2013 l\u00e4gg till detta i ditt tema functions.php<\/code>:<\/p>\n

add_action('after_setup_theme', function() {\n    add_theme_support('align-wide');\n});<\/code><\/pre>\n
Med denna kod aktiv i ditt tema b\u00f6r du nu f\u00e5 totalt fem alternativ f\u00f6r blockjusteringar. F\u00f6r vissa block, till exempel Kolumner, f\u00e5r du bara de tv\u00e5 nya.<\/p>\n
\"Utvecklarguide:<\/a><\/p>\n
Det finns vissa blocktyper d\u00e4r du kan st\u00e4lla in blockjusteringar \u2013 oftast \u00e4r det s\u00e5dana som st\u00f6der kapslade block, dvs. ett block som l\u00e5ter dig l\u00e4gga till block inuti. S\u00e5dana popul\u00e4ra block \u00e4r Cover, Columns, Image, inb\u00e4ddningsblock och s\u00e5 vidare. Omslagsblocket \u00e4r ett bra block f\u00f6r att bygga framsidor eller landningssidor, som vi kommer att se i det h\u00e4r inl\u00e4gget.<\/p>\n
Anv\u00e4nda t\u00e4ckblocket<\/h2>\n
Omslagsblocket \u00e4r definitivt det b\u00e4sta blocket n\u00e4r du vill bygga en f\u00f6rstasida eller landningssida uppdelad i sektioner. Du kan l\u00e4gga till vilken typ av block som helst och hur m\u00e5nga block du vill inuti ett t\u00e4ckblock. Med ett t\u00e4ckblock kan du st\u00e4lla in en bakgrundsf\u00e4rg, en bakgrundsbild eller en bakgrundsbild med en f\u00e4rg\u00f6verlagring.<\/p>\n
\"Utvecklarguide:<\/a><\/p>\n
I kombination med m\u00f6jligheten att st\u00e4lla in blockets justering till bred eller full bredd (som vi gjorde ovan), \u00e4r Cover blocket ett kraftfullt verktyg. Du kan skapa en sida d\u00e4r allt inneh\u00e5ll finns i t\u00e4ckblockssektioner med full bredd med var sin bakgrundsf\u00e4rg eller bakgrundsbild. Med r\u00e4tt stil och layout i ditt tema har du en fullskalig modern f\u00f6rstasidesbyggare.<\/p>\n
\"Utvecklarguide:<\/a><\/p>\n
I WordPress 5.3 kom en viktig f\u00f6rb\u00e4ttring f\u00f6r Cover-blocket: Ett inre HTML-omslag. Detta inneb\u00e4r att Cover-blocket har ett HTML-element f\u00f6r sj\u00e4lva sektionen \u2013 med sin bakgrundsf\u00e4rg eller bakgrundsbild, och sedan ett annat HTML-element d\u00e4r allt inneh\u00e5ll finns. Kombinera detta med en blockjustering i full bredd: stil det yttre elementet (med bakgrundsf\u00e4rgen eller bilden) s\u00e5 att det blir helt i full bredd och stil sedan det inre HTML-elementet med inneh\u00e5llet s\u00e5 att det passar i beh\u00e5llaren f\u00f6r ditt tema.<\/p>\n
Anta till exempel att ditt tema har en beh\u00e5llare med maxbredd p\u00e5 1200px. Du har f\u00f6rmodligen redan en specifik HTML-klass som \u00e4r utformad med maxbredd, vilket s\u00e4kerst\u00e4ller att ditt inneh\u00e5ll inte bara bl\u00e5ser full bredd oavsett sk\u00e4rmstorlek. L\u00e4gg till din maxbreddsstil till omslagets inre HTML; klassnamn wp-block-cover__inner-container<\/code>. Som ett exempel:<\/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
I CSS-koden ovan riktar jag mig mot tv\u00e5 Cover-f\u00f6r\u00e4lderklasser. Den \u00f6verordnade Cover-blockklassen \u00e4ndras beroende p\u00e5 om du v\u00e4ljer en bakgrundsbild eller inte. Omslagsblock med en bakgrundsbild f\u00e5r klassen " wp-block-cover-image<\/code>" och omslagsblock med bakgrundsf\u00e4rg f\u00e5r klassen " wp-block-cover<\/code>". Dessutom riktar jag ocks\u00e5 in blockjusteringen "Full Width" med klassen " alignfull<\/code>". Blockjusteringen "Wide Width" f\u00e5r klassen " alignwide<\/code>". L\u00e4gg till CSS f\u00f6r att rikta in den h\u00e4r blockanpassningen ocks\u00e5 \u2013 beroende p\u00e5 vad du vill g\u00f6ra.<\/p>\n
Om du har b\u00f6rjat leka med detta kan du ha st\u00f6tt p\u00e5 problem med den allm\u00e4nna layouten i temat. Ditt tema tvingar f\u00f6rmodligen dina t\u00e4ckblock i full bredd att inte g\u00e5 i full bredd alls. L\u00e5t oss titta p\u00e5 detta h\u00e4rn\u00e4st.<\/p>\n
Temalayout och stil i full bredd<\/h2>\n
Hittills har vi lagt till st\u00f6d f\u00f6r breda och fullbreddsblock och l\u00e4rt oss hur man anv\u00e4nder och optimerar Cover-blocket f\u00f6r att fungera som f\u00f6rstasida eller m\u00e5lsidesavsnitt. Men i de flesta teman kan din HTML och layout hindra ditt inl\u00e4ggsinneh\u00e5ll fr\u00e5n att bli fullbredd.<\/p>\n
Ditt tema har f\u00f6rmodligen en h\u00f6ger sidof\u00e4lt i enstaka inl\u00e4gg eller sidvy. Det finns f\u00f6rmodligen ytterligare HTML-omslag, inklusive ett containerelement med maxbredd, som f\u00f6rhindrar att dina fullbreddsblock faktiskt blir fullbredd. Dina omslag har f\u00f6rmodligen ocks\u00e5 en hel del marginaler eller stoppning som \u00e5terigen hindrar blocken i full bredd att helt vidr\u00f6ra kanterna p\u00e5 sk\u00e4rmen. Men du m\u00e5ste f\u00e5 enstaka inl\u00e4gg eller sida att se bra ut f\u00f6r inl\u00e4gg d\u00e4r anv\u00e4ndaren inte ocks\u00e5 anv\u00e4nder Cover-block. Du m\u00e5ste t\u00e4nka p\u00e5 dina omslag n\u00e4r du utvecklar f\u00f6r Gutenberg med st\u00f6d f\u00f6r breda och fullbreddsblock. Allt beror p\u00e5 ditt temas design, HTML och stil \u2013 men l\u00e5t oss titta p\u00e5 n\u00e5gra id\u00e9er f\u00f6r att l\u00f6sa detta.<\/p>\n
\"Utvecklarguide:<\/a><\/p>\n
En bra l\u00f6sning skulle vara att l\u00e4gga till inl\u00e4ggsalternativ; anpassade metainst\u00e4llningar f\u00f6r inl\u00e4gg och sidor som p\u00e5verkar layouten p\u00e5 den sidan. Du kan g\u00f6ra en inst\u00e4llning f\u00f6r att d\u00f6lja sidof\u00e4ltet eller f\u00f6r att tvinga ditt inl\u00e4ggsinneh\u00e5ll att bli helt i full bredd. Skapa inl\u00e4ggsinst\u00e4llningar manuellt sj\u00e4lv genom att l\u00e4gga till metaboxar, eller anv\u00e4nd avancerade anpassade f\u00e4lt<\/a> f\u00f6r att g\u00f6ra processen enklare. Och sedan i ditt tema h\u00e4mtar du postinst\u00e4llningarna och hanterar HTML-utmatningen p\u00e5 motsvarande s\u00e4tt.<\/p>\n
Andra bra inl\u00e4ggsalternativ \u00e4r att d\u00f6lja sidtiteln och\/eller d\u00f6lja den utvalda bilden. Detta g\u00f6r att du kan skapa inneh\u00e5ll normalt, men f\u00f6r specifika sidor kan du enkelt skapa en m\u00e5lsida helt med t\u00e4ckblock i full bredd. Genom att d\u00f6lja standardsidans rubrik kan du skapa en snyggare rubrik eller en uppmaningssektion f\u00f6r att fungera som sidrubriken ist\u00e4llet.<\/p>\n
Skapa blockstilar<\/h2>\n
Det finns en f\u00f6ga k\u00e4nd funktion i WordPress Gutenberg; block kan ha olika stilar. Du kan se blockstilar i aktion med Quote-blocket. L\u00e4gg till blocket i din editor och ta en titt p\u00e5 Inspekt\u00f6ren (h\u00f6ger sidof\u00e4lt). Du hittar \u00e4mnet "Stilar" och tv\u00e5 alternativ mellan olika stilar.<\/p>\n
\"Utvecklarguide:<\/a><\/p>\n
Skapa anpassade stilar som g\u00f6r det enklare att bygga framsida och m\u00e5lsidor. Jag f\u00f6resl\u00e5r \u00e5tminstone att du l\u00e4gger till anpassade blockstilar till rubrikblocket, s\u00e5 att du kan skapa anpassade stilar utan att avbryta rubriker f\u00f6r vanliga inl\u00e4gg. G\u00f6r en blockstil f\u00f6r avsnittstitlar med extra stort teckensnitt och extra utfyllnad.<\/p>\n
N\u00e4r du f\u00f6rs\u00f6ker skapa framsidor, notera vad du m\u00e5ste anpassa upprepade g\u00e5nger \u2013 det h\u00e4r kan passa bra f\u00f6r en blockstil.<\/p>\n
Att l\u00e4gga till anpassade blockstilar \u00e4r faktiskt v\u00e4ldigt enkelt och kr\u00e4ver inga Javascript-kunskaper. Jag har en separat handledning om hur du g\u00f6r detta om du vill l\u00e4ra dig mer om detta.<\/p>\n
PS: Om du inte ser blockstilar kan ditt tema sakna st\u00f6d f\u00f6r detta. Processen \u00e4r densamma som vi gjorde f\u00f6r bred- och fullbreddsblockjusteringar; i kroken after_setup_theme<\/code>l\u00e4gger du till 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
Anv\u00e4nda temaf\u00e4rger som f\u00e4rgpalett<\/h2>\n
Om du har lekt med Gutenberg har du f\u00f6rmodligen m\u00e4rkt att Gutenberg erbjuder dig en viss upps\u00e4ttning f\u00e4rger f\u00f6r text eller bakgrundsf\u00e4rg. Om du till exempel l\u00e4gger till ett t\u00e4ckblock kommer du att uppmana dig att v\u00e4lja en f\u00e4rg fr\u00e5n en f\u00e4rgpalett.<\/p>\n
Du har m\u00f6jlighet att anv\u00e4nda en f\u00e4rgv\u00e4ljare f\u00f6r att v\u00e4lja eller ange hex-f\u00e4rgen till den exakta f\u00e4rg du vill ha. Du kan komma \u00e5t detta genom att klicka p\u00e5 l\u00e4nken "Anpassad f\u00e4rg". Men om du anv\u00e4nder samma upps\u00e4ttning f\u00e4rger i ditt tema och vill h\u00e5lla det konsekvent, kan det vara besv\u00e4rligt att hela tiden komma ih\u00e5g och ange samma hexadecimala f\u00e4rgkoder varje g\u00e5ng.<\/p>\n
Som tur \u00e4r l\u00e5ter WordPress Gutenberg dig definiera f\u00e4rgpaletten! Det h\u00e4r \u00e4r \u00e4nnu en add_theme_support()<\/code>d\u00e4r du tillhandah\u00e5ller en rad f\u00e4rger du vill ha i paletten. I en funktion kopplad till after_setup_theme<\/code>g\u00f6r du s\u00e5 h\u00e4r:<\/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
I koden ovan l\u00e4gger vi till temast\u00f6d f\u00f6r ’ editor-color-palette<\/code>’, och som andra parameter till funktionen definierar vi en array av alla f\u00e4rger vi vill ha. Varje f\u00e4rg kr\u00e4ver attributen name<\/code>, slug<\/code>och color<\/code>. name<\/code>\u00e4r vad som visas n\u00e4r du f\u00f6r musen \u00f6ver f\u00e4rgen i paletten. slug<\/code>\u00e4r klassnamnet som kommer att l\u00e4ggas till i blockelementet. Och color<\/code>definierar hex-koden f\u00f6r din f\u00e4rg.<\/p>\n
\"Utvecklarguide:<\/a><\/p>\n
T\u00e4nk p\u00e5 att du m\u00e5ste l\u00e4gga till stilar i din CSS riktad mot var och en av dessa klasser (definierad av slug<\/code>). WordPress applicerar inte automatiskt hex-f\u00e4rgen p\u00e5 dina block \u00e4ven om vi ber\u00e4ttar f\u00f6r WordPress vad f\u00e4rgkoden \u00e4r.<\/p>\n
Som ett exempel \u00e4r bilden till h\u00f6ger min f\u00e4rgpalett som jag har definierat f\u00f6r den h\u00e4r webbplatsens tema \u2013 f\u00f6r A White Pixel:<\/p>\n
Det h\u00e4r \u00e4r mina temaf\u00e4rger och i 95 % av fallen kommer jag att anv\u00e4nda en av dessa f\u00e4rger \u2013 antingen som bakgrund eller som textf\u00e4rg. I s\u00e4llsynta fall kan jag dra ut colorpickern, men att ha de vanliga misst\u00e4nkta redan definierade i f\u00e4rgpaletten g\u00f6r livet mycket l\u00e4ttare.<\/p>\n
Ett tips \u00e4r att alltid se till att l\u00e4gga till rent svart (#000000<\/code>) och rent vitt (#FFFFFF<\/code>) i din f\u00e4rgpalett. Det \u00e4r nog ocks\u00e5 en bra id\u00e9 att ha en eller tv\u00e5 ljusgr\u00e5 f\u00e4rger.<\/p>\n
Anv\u00e4nda en statisk framsida och optimera framsidesmallen<\/h2>\n
Du vet s\u00e4kert redan om detta, men jag n\u00e4mner det \u00e4nd\u00e5. I WordPress kan du st\u00e4lla in en statisk sida som f\u00f6rstasida genom att g\u00e5 till Inst\u00e4llningar > L\u00e4sa.<\/p>\n
\"Utvecklarguide:<\/a><\/p>\n
Som standard visar WordPress f\u00f6rstasidan en lista \u00f6ver de senaste inl\u00e4ggen. Men om du v\u00e4ljer "En statisk sida" och v\u00e4ljer en sida fr\u00e5n rullgardinsmenyn, kommer WordPress att visa den h\u00e4r sidan som f\u00f6rstasidan till din webbplats.<\/p>\n
Det h\u00e4r \u00e4r l\u00e4tt att skapa en f\u00f6rstasida f\u00f6r din WordPress-webbplats. P\u00e5 den valda sidan kan du bygga framsidan med alla knep som n\u00e4mns ovan. Du kan till exempel ha avmarkerade inl\u00e4ggsalternativ f\u00f6r att visa sidrubrik, sidof\u00e4lt och utvald bild. Och sidan \u00e4r helt byggd med omslagsblock och inneh\u00e5ll i full bredd. D\u00e4remot kan du v\u00e4lja att inte g\u00e5 inl\u00e4ggsalternativen (d\u00f6lj sidof\u00e4ltet etc) v\u00e4gen och helt enkelt skapa en f\u00f6rstasidesmall f\u00f6r att ers\u00e4tta eller anv\u00e4nda dessa.<\/p>\n
N\u00e4r din WordPress \u00e4r inst\u00e4lld som en statisk sida som f\u00f6rstasida kommer WordPress att leta efter mallen front-page.php<\/code>i ditt tema. Detta kommer att anv\u00e4ndas ist\u00e4llet f\u00f6r page.php<\/code>. Detta g\u00f6r att du kan skapa och justera en separat mall som endast anv\u00e4nds f\u00f6r din f\u00f6rstasida.<\/p>\n
I den front-page.php<\/code>mallen kan du redan definiera HTML f\u00f6r att s\u00e4kerst\u00e4lla att alla block g\u00e5r helt i full bredd, har ingen sidof\u00e4lt, ingen sidtitel eller utvald bild. Du kanske vill helt enkelt bara g\u00f6ra the_content()<\/code>f\u00f6r att mata ut sidans inneh\u00e5ll i sin helhet.<\/p>\n
Till exempel, det h\u00e4r \u00e4r vad jag har i det h\u00e4r webbplatstemans front-page.php<\/code>. Medan jag i alla andra mallar, som page.php<\/code>, har massor av utdata f\u00f6r sidof\u00e4lt, inl\u00e4ggstitel och s\u00e5 vidare, \u00e4r detta hela omfattningen av min loop i front-page.php<\/code>:<\/p>\n
while (have_posts()): the_post();\n    the_content('');\nendwhile;<\/code><\/pre>\n
Det \u00e4r allt. Min inpackning av HTML och mina klasser s\u00e4kerst\u00e4ller att inl\u00e4ggets inneh\u00e5ll \u00e4r helt i full bredd.<\/p>\n
Kom ih\u00e5g att detta \u00e4r en bra l\u00f6sning om du som anv\u00e4ndare av temat f\u00f6rst\u00e5r hur dina mallar fungerar. Jag vet att allt mitt inneh\u00e5ll p\u00e5 min f\u00f6rstasida m\u00e5ste vara helt insvept i omslagsblock. Jag litar p\u00e5 Cover-blockets inre beh\u00e5llare-HTML f\u00f6r att s\u00e4kerst\u00e4lla att mitt inneh\u00e5ll ser bra ut och faller i en beh\u00e5llare med maxbredd. Om jag skulle l\u00e4gga till ett enkelt Paragraph-block utan ett omslagsblock skulle det inte se bra ut eftersom det skulle sakna stoppning p\u00e5 sidorna.<\/p>\n
G\u00f6r din sidas rubrik genomskinlig vid f\u00f6rsta omslagsblocket<\/h2>\n
En mycket vanlig funktion p\u00e5 moderna webbplatser \u00e4r att g\u00f6ra rubriken transparent p\u00e5 f\u00f6rstasidan. N\u00e4r anv\u00e4ndaren b\u00f6rjar scrolla ner p\u00e5 sidan \u00e4ndras rubriken till en fast stil och f\u00e5r en bakgrund. Men att ha en genomskinlig rubrik kan se riktigt snygg ut n\u00e4r vi kan se f\u00e4rgerna eller bilden bakom det f\u00f6rsta avsnittet.<\/p>\n
Jag g\u00f6r detta p\u00e5 den h\u00e4r webbplatsens f\u00f6rstasida<\/a>. Ta en titt! H\u00f6gst upp p\u00e5 sidan har min rubrik ingen bakgrund och visar bakgrunden f\u00f6r den lila gradientdelen (ett omslagsblock) bakom. N\u00e4r du v\u00e4l b\u00f6rjar scrolla f\u00e5r den en fast solid bakgrund.<\/p>\n
T\u00e4nk p\u00e5 att du m\u00e5ste vara medveten om f\u00e4rgerna i din rubrik och den f\u00f6rsta omslagsbakgrunden. Om din rubrik best\u00e5r av vit logotyp och vita menyalternativ (som min g\u00f6r), kan du inte anv\u00e4nda det h\u00e4r tricket med ett Cover-block som har en ljus bakgrund. Det skulle g\u00f6ra din rubrik ol\u00e4slig!<\/p>\n
Om du vill g\u00f6ra detta t\u00e4nk p\u00e5 att det kr\u00e4ver lite Javascript-kunskaper. Men det \u00e4r faktiskt v\u00e4ldigt enkelt. Jag ska g\u00e5 igenom grunderna f\u00f6r dig:<\/p>\n
Hela mitt rubrikelement \u00e4r alltid position: fixed<\/code>. Eftersom jag normalt inte vill att mitt inneh\u00e5ll ska f\u00f6rsvinna bakom rubriken, har jag lagt till en stoppning p\u00e5 body-elementet som trycker ner inneh\u00e5llet under rubriken. D\u00e4remot har jag lagt till en regel om att om vi \u00e4r p\u00e5 f\u00f6rstasidesmallen kommer denna utfyllnad inte att l\u00e4ggas till. Det s\u00e4kerst\u00e4ller att endast p\u00e5 f\u00f6rstasidan kommer kroppsdelen att synas bakom rubriken. Jag riktar sedan in det f\u00f6rsta omslagsblocket p\u00e5 framsidan och l\u00e4gger till en extra utfyllnad topp f\u00f6r att s\u00e4kerst\u00e4lla att inneh\u00e5llet i detta f\u00f6rsta block inte st\u00f6ter upp bakom rubriken \u2013 vilket ger det en bra bra utfyllnad efter rubriken.<\/p>\n
Och sedan har jag lagt till en mycket enkel Javascript-kod med jQuery:<\/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
Vad den h\u00e4r koden g\u00f6r \u00e4r att l\u00e4gga till en klass ’ navbar-fixed<\/code>’ n\u00e4r sidan rullas l\u00e4ngre \u00e4n 60px ner p\u00e5 sidan. Och i min CSS riktar jag mig helt enkelt mot den h\u00e4r klassen och l\u00e4gger till en fast bakgrundsf\u00e4rg. Utan denna klass \u00e4r rubrikens bakgrund transparent p\u00e5 framsidan.<\/p>\n
Det \u00e4r grunderna i det. Lek med CSS \u2013 justera Javascripts "tipspunkt" och anv\u00e4nd till exempel transition<\/code>egendom f\u00f6r att g\u00f6ra en mjukare \u00f6verg\u00e5ng n\u00e4r bakgrundsf\u00e4rgen appliceras.<\/p>\n
Bra block f\u00f6r f\u00f6rstasidor och landningssidor<\/h2>\n
WordPress erbjuder ett komplett utbud av block redo f\u00f6r dig att anv\u00e4nda. Vissa av dem \u00e4r s\u00e4rskilt anv\u00e4ndbara n\u00e4r du bygger en f\u00f6rstasida eller m\u00e5lsida. Om du redan \u00e4r bekant med alla tillg\u00e4ngliga block vet du f\u00f6rmodligen redan om dessa.<\/p>\n