{"id":38446,"date":"2021-03-18T12:15:55","date_gmt":"2021-03-18T11:15:55","guid":{"rendered":"https:\/\/kinsta.com\/?p=83720"},"modified":"2023-01-19T11:54:46","modified_gmt":"2023-01-19T11:54:46","slug":"twenty-twenty-one-temat","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/","title":{"rendered":"Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat"},"content":{"rendered":"<p>Twenty Twenty-One \u00e4r det nya WordPress-standardtemat som kommer med WordPress 5.6. Om du v\u00e4ntar p\u00e5 en fullst\u00e4ndig\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/snabbaste-wordpress-theme\/\">WordPress-tema<\/a>\u00a0s\u00e5 kanske du blir lite besviken.<\/p>\n<p>Twenty Twenty-One \u00e4r ett minimalistiskt tema som ser ut och fungerar som en mycket anpassningsbar tom duk. Liksom sina f\u00f6reg\u00e5ngare kommer det nya standardtemat fr\u00e4mst att f\u00f6rlita sig p\u00e5\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-gutenberg-redigeraren\/\">Blockera redigerare<\/a>\u00a0f\u00f6r sidbyggnad.<\/p>\n<p>I det h\u00e4r inl\u00e4gget g\u00e5r vi igenom de mest intressanta funktionerna i Twenty Twenty-One-temat och vi visar dig hur du anpassar utseendet och k\u00e4nslan p\u00e5 en WordPress-webbplats med ett enkelt Twenty Twenty-One barntema.<\/p>\n<p>Redo? Vi dyker in!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<figure id=\"attachment_83746\" aria-describedby=\"caption-attachment-83746\" style=\"width: 1580px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one.jpg\" alt=\"Twenty Twenty-One\" width=\"1580\" height=\"2048\"><figcaption id=\"caption-attachment-83746\" class=\"wp-caption-text\">F\u00f6rhandsgranskning av Twenty Twenty-One-tema (bildk\u00e4lla: <a href=\"https:\/\/make.wordpress.org\/core\/2020\/09\/23\/introducing-twenty-twenty-one\/\">Make WordPress Core<\/a>)<\/figcaption><\/figure>\n<h2>En f\u00f6rsta titt p\u00e5 Twenty Twenty-One WordPress Tema<\/h2>\n<p>Liksom <a href=\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-tema\/\">Twenty Twenty<\/a> \u00e4r det nya standardtemat som kommer med WordPress 5.6 inte byggt fr\u00e5n grunden, men det bygger p\u00e5 ett tema som kommer fr\u00e5n samh\u00e4llet.<\/p>\n<p>Twenty Twenty-One har utvecklats p\u00e5 ett nytt Automattics tema,\u00a0<a href=\"https:\/\/wordpress.org\/themes\/seedlet\/\">Seedlet<\/a>\u00a0tema, som ger en ren och v\u00e4lbest\u00e4lld struktur av kapslade CSS-anpassade egenskaper. P\u00e5 grund av den stora anv\u00e4ndningen av\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-css\/#wordpress-and-css\">CSS-egenskaper<\/a>\u00a0i temats stilblad \u00e4r det snabbt och enkelt att bygga barnteman i Twenty Twenty-One.<\/p>\n<figure id=\"attachment_83739\" aria-describedby=\"caption-attachment-83739\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83739 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/seedlet.jpg\" alt=\"Seedlet WordPress-tema\" width=\"600\" height=\"769\"><figcaption id=\"caption-attachment-83739\" class=\"wp-caption-text\">Seedlet WordPress-tema<\/figcaption><\/figure>\n<p>Twenty Twenty-One \u00e4r ett mycket tillg\u00e4ngligt, minimalistiskt WordPress-tema med en enda kolumnlayout, en sidfots sidof\u00e4lt och tv\u00e5 <a href=\"https:\/\/kinsta.com\/se\/blog\/webbplatsnavigeringen\/\">menyplatser<\/a>: Prim\u00e4r navigering och sidfotsnavigering.<\/p>\n<p>Det nya temat anv\u00e4nder en\u00a0<a href=\"https:\/\/kinsta.com\/blog\/web-safe-fonts\/\">systemteckensnitt stack<\/a>. Detta b\u00f6r ha flera f\u00f6rdelar f\u00f6r b\u00e5de anv\u00e4ndare och\u00a0<a href=\"https:\/\/kinsta.com\/blog\/hire-wordpress-developer\/\">Utvecklare<\/a>:<\/p>\n<ul>\n<li>F\u00f6rst och fr\u00e4mst ger anv\u00e4ndning av en systemteckensnittsstack f\u00f6rdelar f\u00f6r UX och\u00a0<a href=\"https:\/\/kinsta.com\/se\/lar\/snabba-upp-wordpress\/\">Prestanda<\/a>\u00a0eftersom inbyggda teckensnitt redan st\u00f6ds av de flesta operativsystem och inte kr\u00e4ver extra belastningstid.<\/li>\n<li>F\u00f6r det andra ser de neutrala ut, s\u00e5 de kan smidigt sl\u00e5s samman till n\u00e5gon form av design.<\/li>\n<li>F\u00f6r det tredje, eftersom de inte kr\u00e4ver att ytterligare teckensnittsfiler laddas, \u00e4r det l\u00e4ttare f\u00f6r anv\u00e4ndare och utvecklare att anpassa layouten p\u00e5 en webbplats med Twenty Twenty-One.<\/li>\n<\/ul>\n<p>Twenty Twenty-One-temat anv\u00e4nder en\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/webbplats-fargscheman\/\">minimal f\u00e4rgpalett<\/a>\u00a0baserat p\u00e5 pastellgr\u00f6na bakgrundsf\u00e4rger och tv\u00e5 nyanser av gr\u00e5tt som f\u00f6rgrundsf\u00e4rger. Temat ger flera ytterligare pastellf\u00e4rgpaletter.<\/p>\n<p>P\u00e5 denna punkt f\u00f6rklarar Mel Choyse-Dwan, Standard Tema Design:<\/p>\n<blockquote><p>Vi kommer att kombinera temat med n\u00e5gra ytterligare f\u00e4rgpaletter, inklusive b\u00e5de ett vitt och ett svart f\u00e4rgschema. Varf\u00f6r pastellgr\u00f6n? Pasteller och d\u00e4mpade f\u00e4rger \u00e4r vackra just nu<\/p><\/blockquote>\n<figure id=\"attachment_83743\" aria-describedby=\"caption-attachment-83743\" style=\"width: 1640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83743 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-colors.jpg\" alt=\"Twenty Twenty-One f\u00e4rger\" width=\"1640\" height=\"600\"><figcaption id=\"caption-attachment-83743\" class=\"wp-caption-text\">Twenty Twenty-One f\u00e4rger (Bildk\u00e4lla: <a href=\"https:\/\/make.wordpress.org\/core\/2020\/09\/23\/introducing-twenty-twenty-one\/\">Make WordPress Core<\/a>)<\/figcaption><\/figure>\n\n<h2>Hur man installerar Twenty twenty-one<\/h2>\n<p>I skrivande stund \u00e4r Twenty Twenty-One under aktiv utveckling och \u00e4r \u00e4nnu inte tillg\u00e4ngligt f\u00f6r nedladdning i WordPress Temakatalog. Men du kan hitta en nuvarande version av temat p\u00e5\u00a0<a href=\"https:\/\/github.com\/wordpress\/twentytwentyone\">Github<\/a>.<\/p>\n<p>Github-databasen kommer att vara inaktuell n\u00e4r temat har slagits samman till\u00a0<a href=\"https:\/\/kinsta.com\/docs\/support\/scope-of-support\/managed-wordpress-scope-of-support\/\">Core<\/a> och du hittar den i temakatalogen. N\u00e4r Twenty Twenty-One f\u00f6ljer\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/5-6\/\">WordPress 5.6 utgivningsschema<\/a> kanske du vill spara f\u00f6ljande datum:<\/p>\n<ul>\n<li>20 oktober 2020: Beta 1<\/li>\n<li>27 oktober 2020: Beta 2<\/li>\n<li>2 november 2020: Beta 3<\/li>\n<li>12 november 2020: Beta 4<\/li>\n<li>17 november 2020: RC 1<\/li>\n<li>1 december 2020: RC 2<\/li>\n<li>7 december 2020: Torrk\u00f6rning f\u00f6r lansering av WordPress 5.6<\/li>\n<li>8 december 2020: M\u00e5ldatum f\u00f6r lansering av WordPress 5.6<\/li>\n<\/ul>\n<p>S\u00e5 h\u00e4r f\u00e5r du ig\u00e5ng twenty twenty-one-temat:<\/p>\n<ol>\n<li>H\u00e4mta zip-paketet fr\u00e5n\u00a0<a href=\"https:\/\/github.com\/wordpress\/twentytwentyone\">Github<\/a>.<\/li>\n<li>Ladda upp ditt paket till din utvecklingsinstallation fr\u00e5n\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-admin\/\">WordPress-instrumentpanel<\/a> eller via\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/hur-du-anvander-sftp\/\">Sftp<\/a>.<\/li>\n<li>Bl\u00e4ddra till\u00a0<strong>utseende \u2192 teman <\/strong>och klicka p\u00e5 knappen\u00a0<strong>Aktivera<\/strong>\u00a0p\u00e5 temats f\u00f6rhandsgranskningsbild.<\/li>\n<li>G\u00e5 till\u00a0<strong>Utseende \u2192 Anpassa f\u00f6r <\/strong>att konfigurera Twenty Twenty-One.<\/li>\n<\/ol>\n<p>Du kan nu b\u00f6rja k\u00f6ra dina tester antingen p\u00e5 en\u00a0<a href=\"https:\/\/kinsta.com\/docs\/wordpress-hosting\/staging-environment\/\">mellanlagringswebbplats<\/a>\u00a0eller p\u00e5 din\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/installerar-wordpress-lokalt\/\">lokala milj\u00f6<\/a>.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"> <aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p><\/span>Observera att Twenty Twenty-One fortfarande \u00e4r under aktiv utveckling,\u00a0<a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\">m\u00e5nga problem<\/a>\u00a0har inte \u00e5tg\u00e4rdats \u00e4nnu, och vissa funktioner kan \u00e4ndras i framtiden.<span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"><\/p>\n<\/aside>\n<\/span><\/p>\n<figure id=\"attachment_83731\" aria-describedby=\"caption-attachment-83731\" style=\"width: 1480px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-issue.jpg\" alt=\"dark mode issue\" width=\"1480\" height=\"2728\"><figcaption id=\"caption-attachment-83731\" class=\"wp-caption-text\">Twenty Twenty-One <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/620\">Issue #620<\/a> p\u00e5 Github<\/figcaption><\/figure>\n<p>\u00c4r du inte redo att k\u00f6ra dina tester?<\/p>\n<p>Inga bekymmer, vi har dissekerat temat och vi ska visa dig vad du kan f\u00f6rv\u00e4nta dig av Twenty Twenty-One.<\/p>\n<h2>Twenty Twenty-One tema och blockfunktioner<\/h2>\n<p>Precis som Twenty Twenty \u00e4r det nya standard WordPress-temat inte ett fullt presenterat tema, utan ett minimalistiskt tema som f\u00f6rlitar sig p\u00e5 blockredigeraren f\u00f6r sidbyggnad. Temat syftar ocks\u00e5 till att\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/basta-webbdesignpraxis\/#how-to-make-your-website-more-accessible\">ger stor tillg\u00e4nglighet<\/a>. Med Mel Choyce-Dwans ord:<\/p>\n<blockquote><p>Slutligen vill vi g\u00e4rna att temat uppfyller relevanta riktlinjer fr\u00e5n WCAG 2.1 niv\u00e5 AAA. Vi \u00e4lskade id\u00e9n n\u00e4r +make.wordpress.org\/accessibility\/ tog upp den och skulle uppskatta all v\u00e4gledning fr\u00e5n v\u00e5rt samh\u00e4lle a11y experter f\u00f6r att hj\u00e4lpa till att g\u00f6ra detta m\u00f6jligt.<\/p><\/blockquote>\n<p>Temat st\u00f6der ett stort antal <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_theme_support\/\">tema<\/a>\u00a0och\u00a0<a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/themes\/theme-support\/\">blockeringsfunktioner<\/a>\u00a0inklusive f\u00f6ljande:<\/p>\n<p><strong>Tema funktioner:<\/strong><\/p>\n<ul>\n<li>Automatiska matningsl\u00e4nkar<\/li>\n<li>Rubriktagg<\/li>\n<li>Publicera format<\/li>\n<li>Inl\u00e4gg\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/sa-regenererar-du-miniatyrer\/\">Miniatyrer<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/html-vs-html5\/#what-is-html5\">HTML5-element<\/a><\/li>\n<li>Anpassad logotyp<\/li>\n<li>Selektiv uppdatering f\u00f6r widgetar<\/li>\n<li>Anpassad bakgrund<\/li>\n<li>Tv\u00e5 navigeringsmenyer<\/li>\n<li>Ett sidof\u00e4lt<\/li>\n<\/ul>\n<p><strong>Blockeringsfunktioner:<\/strong><\/p>\n<ul>\n<li>Standardformat f\u00f6r block<\/li>\n<li>Redigerarstilar<\/li>\n<li>M\u00f6rka redigeringsstilar (m\u00f6rk bakgrund)<\/li>\n<li>Justera bredd<\/li>\n<li>Blockera teckenstorlekar<\/li>\n<li>Blockera f\u00e4rgpaletter<\/li>\n<li>Blockera f\u00f6rinst\u00e4llningar f\u00f6r \u00f6vertoning<\/li>\n<li>Startinneh\u00e5ll<\/li>\n<li>Responsiva inb\u00e4ddningar<\/li>\n<li>Anpassad linjeh\u00f6jd<\/li>\n<li>Experimentell l\u00e4nkf\u00e4rg<\/li>\n<li>Experimentellt anpassat avst\u00e5nd<\/li>\n<li>Anpassade enheter (borttagna i WordPress 5.6)<\/li>\n<\/ul>\n<p>F\u00f6ljande lista inneh\u00e5ller de funktioner som kan vara mer relevanta n\u00e4r du bygger en webbplats baserad p\u00e5 Twenty Twenty-One.<\/p>\n<h3>Navigeringsmenyer<\/h3>\n<p>Twenty Twenty-One st\u00f6der tv\u00e5 menyplatser,\u00a0<strong>prim\u00e4r navigering<\/strong>, som finns i huvudets \u00f6vre h\u00f6gra h\u00f6rn och\u00a0<strong>sidfotsnavigeringen<\/strong>.<\/p>\n<figure id=\"attachment_83737\" aria-describedby=\"caption-attachment-83737\" style=\"width: 1678px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83737 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/menu-locations.jpg\" alt=\"Tjugo tjugoen menyplatser\" width=\"1678\" height=\"954\"><figcaption id=\"caption-attachment-83737\" class=\"wp-caption-text\">Tjugo tjugoen menyplatser<\/figcaption><\/figure>\n<p>Om du l\u00e4ggs till p\u00e5 sidfotsmenyn\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-sociala-medie-plugins\/\">sociala band<\/a>\u00a0uppt\u00e4cks och konverteras automatiskt de till\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/basta-bildfilstyperna\/#vector-image-file-formats\">SVG-ikoner<\/a>\u00a0f\u00f6r de sociala medier som st\u00f6ds.<\/p>\n<figure id=\"attachment_83742\" aria-describedby=\"caption-attachment-83742\" style=\"width: 1376px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83742 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/social-icons.jpg\" alt=\"social meny\" width=\"1376\" height=\"1294\"><figcaption id=\"caption-attachment-83742\" class=\"wp-caption-text\">Twenty Twenty-One social meny<\/figcaption><\/figure>\n<h3>Publiceringsformat<\/h3>\n<p>Twenty Twenty-One st\u00f6der nio inl\u00e4ggsformat: l\u00e4nk, \u00e5t sidan, galleri, bild, citat, status, video, ljud, chatt. Du kan v\u00e4lja ditt inl\u00e4ggsformat\u00a0p\u00e5 panelen <strong>Status och\u00a0synlighet<\/strong> i redigerarens inst\u00e4llningar.<\/p>\n<figure id=\"attachment_83738\" aria-describedby=\"caption-attachment-83738\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83738 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/post-formats.jpg\" alt=\"Twenty Twenty-One st\u00f6der nio inl\u00e4ggsformat\" width=\"280\" height=\"329\"><figcaption id=\"caption-attachment-83738\" class=\"wp-caption-text\">Twenty Twenty-One st\u00f6der nio inl\u00e4ggsformat<\/figcaption><\/figure>\n<p>Om du vill ta en titt p\u00e5 hur Twenty Twenty-One-temat hanterar inl\u00e4ggsformat navigerar du\u00a0<em>till template-parts\/excerpt<\/em> och v\u00e4ljer mallen. \u00d6ppna till exempel\u00a0<em>excerpt-image.php<\/em>\u00a0filen i din favoritfil\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/gratis-html-redigerare\/\">kodredigerare<\/a>. I den filen ser du f\u00f6ljande kod:<\/p>\n<pre><code class=\"language-php\">\/**\n * Show the appropriate content for the Image post format.\n *\n * @link https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\n *\n * @package WordPress\n * @subpackage Twenty_Twenty_One\n * @since 1.0.0\n *\/\n\n\/\/ If there is no featured-image, print the first image block found.\nif (\n\t! twenty_twenty_one_can_show_post_thumbnail() &&\n\thas_block( 'core\/image', get_the_content() )\n) {\n\n\ttwenty_twenty_one_print_first_instance_of_block( 'core\/image', get_the_content() );\n}\n\nthe_excerpt();<\/code><\/pre>\n<p>Koden \u00e4r sj\u00e4lvf\u00f6rklarande, men l\u00e5t oss ta en n\u00e4rmare titt:<\/p>\n<ul>\n<li><code>has_block<\/code>\u00a0<a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/has_block\/\">avg\u00f6r<\/a> om ett inl\u00e4gg eller en str\u00e4ng inneh\u00e5ller en specifik blocktyp (k\u00e4rnbildsblocket i detta exempel).<\/li>\n<li><code>twenty_twenty_one_print_first_instance_of_block<\/code>\u00a0\u00e4r en Twenty Twenty-One mallfunktion som skriver ut den f\u00f6rsta instansen av ett block i inneh\u00e5llet och sedan bryts bort.<\/li>\n<\/ul>\n<p>S\u00e5 om en webbplatsvisare kr\u00e4ver ett arkiv med inl\u00e4gg i &#8221;bildformatet&#8221; kommer WordPress att visa en bild h\u00f6gst upp f\u00f6r varje inl\u00e4gg i arkivet. Enligt samma logik kan du dyka in i val av inl\u00e4ggsformat genom att kontrollera motsvarande malldelar.<\/p>\n<h3>Webbplatsidentitet och anpassad logotyp<\/h3>\n<p>Twenty Twenty-One ger st\u00f6d f\u00f6r en 300\u00d7100 px anpassad logotyp. Du hittar anpassade logotypinst\u00e4llningar p\u00e5 panelen\u00a0<strong>Webbplatsidentitet. <\/strong><\/p>\n<figure id=\"attachment_83741\" aria-describedby=\"caption-attachment-83741\" style=\"width: 1894px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/site-identity.jpg\" alt=\"Webbplatsidentitet i Twenty Twenty-One\" width=\"1894\" height=\"1674\"><figcaption id=\"caption-attachment-83741\" class=\"wp-caption-text\">Webbplatsidentitet i Twenty Twenty-One<\/figcaption><\/figure>\n<p>Den h\u00e4r sk\u00e4rmen inneh\u00e5ller:<\/p>\n<ul>\n<li>Anpassad logotyp<\/li>\n<li>Webbplatsrubrik<\/li>\n<li>Tagline<\/li>\n<li>Ikon f\u00f6r webbplats<\/li>\n<\/ul>\n<h3>Teckenstorlekar f\u00f6r redigerare<\/h3>\n<p>Twenty Twenty-One st\u00f6der f\u00f6ljande <a href=\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/\">teckenstorlekar<\/a>:<\/p>\n<ul>\n<li>Extra liten \u2013 16<\/li>\n<li>Liten \u2013 18<\/li>\n<li>Normal\/Medium \u2013 20<\/li>\n<li>Stor \u2013 24<\/li>\n<li>Extra stor \u2013 40<\/li>\n<li>Enorm \u2013 96<\/li>\n<li>Gigantisk \u2013 144<\/li>\n<\/ul>\n<p>I temats formatmall anges storlekarna i <code>rem<\/code> enheter.<\/p>\n<figure id=\"attachment_83735\" aria-describedby=\"caption-attachment-83735\" style=\"width: 572px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83735 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/font-sizes.png\" alt=\"Twenty Twenty-One st\u00f6der sju teckenstorlekar\" width=\"572\" height=\"502\"><figcaption id=\"caption-attachment-83735\" class=\"wp-caption-text\">Twenty Twenty-One st\u00f6der sju teckenstorlekar<\/figcaption><\/figure>\n<h3>F\u00e4rginst\u00e4llningar<\/h3>\n<p>Temaanpassaren inneh\u00e5ller en\u00a0panel med <strong>f\u00e4rger och m\u00f6rkt l\u00e4ge<\/strong>\u00a0med tv\u00e5 alternativ:<\/p>\n<ul>\n<li>En enkel f\u00e4rgv\u00e4ljare med 10 f\u00f6rdefinierade f\u00e4rgpaletter.<\/li>\n<li>En kryssruta f\u00f6r att aktivera\/inaktivera m\u00f6rkt l\u00e4ge.<\/li>\n<\/ul>\n<p>Bilden nedan visar en ljusgul bakgrundsf\u00e4rg med m\u00f6rkgr\u00e5 text.<\/p>\n<figure id=\"attachment_83727\" aria-describedby=\"caption-attachment-83727\" style=\"width: 554px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83727 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/colors.jpg\" alt=\"Inst\u00e4llningar f\u00f6r f\u00e4rger och m\u00f6rkt l\u00e4ge i Twenty Twenty-One\" width=\"554\" height=\"658\"><figcaption id=\"caption-attachment-83727\" class=\"wp-caption-text\">Inst\u00e4llningar f\u00f6r f\u00e4rger och m\u00f6rkt l\u00e4ge i Twenty Twenty-One<\/figcaption><\/figure>\n<p>Bakgrundsf\u00e4rgen \u00e4r som standard en pastellgr\u00f6n (<code>'#d1e4dd'<\/code>), men <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-anvanderroller\/\">webbplatsadministrat\u00f6rer<\/a>\u00a0kan enkelt v\u00e4xla mellan f\u00f6ljande bakgrundsf\u00e4rgalternativ:<\/p>\n<ul>\n<li>Svart = <code>'#000000'<\/code>;<\/li>\n<li>M\u00f6rkgr\u00e5 = <code>'#28303D'<\/code>;<\/li>\n<li>Gr\u00e5 = <code>'#39414D'<\/code>;<\/li>\n<li>Gr\u00f6n = <code>'#D1E4DD'<\/code>;<\/li>\n<li>Bl\u00e5 = <code>'#D1DFE4'<\/code>;<\/li>\n<li>Lila = <code>'#D1D1E4'<\/code>;<\/li>\n<li>R\u00f6d = <code>'#E4D1D1'<\/code>;<\/li>\n<li>Orange = <code>'#E4DAD1'<\/code>;<\/li>\n<li>Gul = <code>'#EEEADD'<\/code>;<\/li>\n<li>Vit = <code>'#FFFFFF'<\/code>;<\/li>\n<\/ul>\n<p>Samma f\u00e4rger \u00e4r tillg\u00e4ngliga som\u00a0<strong>blockf\u00e4rgspaletter<\/strong>\u00a0i redigerarens blockinst\u00e4llningar.<\/p>\n<p>Dessutom st\u00f6der Twenty Twenty-One flera\u00a0<strong>\u00f6vertoningsf\u00f6rinst\u00e4llningar f\u00f6r block<\/strong>\u00a0som st\u00f6der den h\u00e4r funktionen. Bilden nedan visar standardgradienterna i blockinst\u00e4llningarnas kolumner.<\/p>\n<figure id=\"attachment_83752\" aria-describedby=\"caption-attachment-83752\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83752 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/color-gradients.png\" alt=\"\u00c5tta \u00f6vertoningsf\u00f6rinst\u00e4llningar i ett block f\u00e4rginst\u00e4llningar\" width=\"280\" height=\"765\"><figcaption id=\"caption-attachment-83752\" class=\"wp-caption-text\">\u00c5tta \u00f6vertoningsf\u00f6rinst\u00e4llningar i ett block f\u00e4rginst\u00e4llningar<\/figcaption><\/figure>\n<p>Ur tillg\u00e4nglighetssynpunkt \u00e4r st\u00f6d f\u00f6r m\u00f6rkt l\u00e4ge en absolut nyhet f\u00f6r ett standardtema.<\/p>\n<p>L\u00e5t oss dyka lite djupare!<\/p>\n<h2>St\u00f6d f\u00f6r m\u00f6rkt l\u00e4ge i Twenty Twenty-One Theme<\/h2>\n<p>Efter en diskussion om\u00a0<a href=\"https:\/\/wordpress.slack.com\/archives\/C02RP4VMP\/p1603294484103600\">#core-teman<\/a>\u00a0Slack kanal,\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2020\/10\/22\/twenty-twenty-one-dark-mode-discussion\/\">Mel Choyce-Dwan introducerade st\u00f6d f\u00f6r m\u00f6rkt l\u00e4ge<\/a>\u00a0f\u00f6r Twenty Twenty.21.<\/p>\n<figure id=\"attachment_83732\" aria-describedby=\"caption-attachment-83732\" style=\"width: 1338px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83732 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-mac.jpg\" alt=\"Aktivera m\u00f6rkt l\u00e4ge i macOS\" width=\"1338\" height=\"510\"><figcaption id=\"caption-attachment-83732\" class=\"wp-caption-text\">Aktivera m\u00f6rkt l\u00e4ge i macOS<\/figcaption><\/figure>\n<p>F\u00f6rst var det inte klart hur den h\u00e4r funktionen kunde ha implementerats i Twenty Twenty-One om den lades till som en temafunktion eller som en separat projektfrakt i ett plugin.<\/p>\n<p>Det fanns fem m\u00f6jliga alternativ att v\u00e4lja mellan:<\/p>\n<ul>\n<li>Till\u00e5ter webbplats\u00e4gare att inaktivera st\u00f6d f\u00f6r m\u00f6rkt l\u00e4ge och bes\u00f6kare att aktivera\/ inaktivera det m\u00f6rka l\u00e4get n\u00e4r de tittar p\u00e5 webbplatsen.<\/li>\n<li>Till\u00e5ter bara webbplats\u00e4gare att inaktivera st\u00f6d f\u00f6r m\u00f6rkt l\u00e4ge (inget alternativ f\u00f6r bes\u00f6karna att aktivera\/inaktivera m\u00f6rkt l\u00e4ge).<\/li>\n<li>Aktivera st\u00f6d f\u00f6r m\u00f6rkt l\u00e4ge som &#8221;alltid p\u00e5&#8221; samtidigt som bes\u00f6karna kan v\u00e4xla det medan de tittar p\u00e5 webbplatsen.<\/li>\n<li>Aktivera st\u00f6d f\u00f6r m\u00f6rkt l\u00e4ge som &#8221;alltid p\u00e5&#8221; och f\u00f6rhindra bes\u00f6kare fr\u00e5n att v\u00e4xla det m\u00f6rka l\u00e4get p\u00e5 \/ av.<\/li>\n<li>St\u00f6der inte m\u00f6rkt l\u00e4ge alls<\/li>\n<\/ul>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2020\/11\/10\/twenty-twenty-one-dark-mode-update\/\">Efter en tankev\u00e4ckande diskussion<\/a> lades m\u00f6rkt l\u00e4ge till i temat. Nwo:<\/p>\n<ul>\n<li><strong>St\u00f6d f\u00f6r m\u00f6rkt l\u00e4ge \u00e4r tillg\u00e4ngligt som opt-in-funktion f\u00f6r webbplats\u00e4gare<\/strong>.<\/li>\n<li>Den\u00a0<a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/pull\/622\">V\u00e4xlingsknapp<\/a>\u00a0har tagits bort fr\u00e5n redigerarens gr\u00e4nssnitt och \u00e4r endast tillg\u00e4nglig i Anpassaren.<\/li>\n<li>V\u00e4xlingsknappen M\u00f6rkt l\u00e4ge finns i det nedre h\u00f6gra h\u00f6rnet (v\u00e4nster p\u00e5 RTL) och f\u00f6rsvinner n\u00e4r webbplatsvisaren rullar ner p\u00e5 sidan.<\/li>\n<li>Med M\u00f6rkt l\u00e4ge aktiverat kan webbplatsvisare sl\u00e5 p\u00e5\/ st\u00e4nga av det beroende p\u00e5 deras personliga inst\u00e4llningar och\u00a0<strong>oavsett deras operativsystem \/ webbl\u00e4sarinst\u00e4llningar<\/strong>.<\/li>\n<\/ul>\n<figure id=\"attachment_83733\" aria-describedby=\"caption-attachment-83733\" style=\"width: 2410px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83733 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-off.jpg\" alt=\"M\u00f6rkt l\u00e4ge aktiverat i Anpassaren och inaktiverat p\u00e5 framsidan\" width=\"2410\" height=\"1194\"><figcaption id=\"caption-attachment-83733\" class=\"wp-caption-text\">M\u00f6rkt l\u00e4ge aktiverat i Anpassaren och inaktiverat p\u00e5 framsidan<\/figcaption><\/figure>\n<p>\u00c4ven om m\u00f6rkt l\u00e4ge anses vara en tillg\u00e4nglighetsf\u00f6rb\u00e4ttring \u00e4r det inte uppenbart att dina webbplatssidor skulle vara mer tillg\u00e4ngliga i alla sammanhang.<\/p>\n<p>De st\u00f6rsta problemen g\u00e4ller m\u00f6rka logotyper och transparenta bilder. Att byta fr\u00e5n en standardljusmall till en m\u00f6rk bakgrundsf\u00e4rg kan leda till l\u00e4sbarhetsproblem som kan minska anv\u00e4ndbarheten och f\u00f6rst\u00f6ra utseendet p\u00e5 din webbplats.<\/p>\n<p>Till exempel kan en m\u00f6rk logotyp p\u00e5 en ljus bakgrund f\u00f6rsvinna helt om dina l\u00e4sare aktiverar m\u00f6rkt l\u00e4ge p\u00e5 sin sida. Liknande farh\u00e5gor g\u00e4ller\u00a0<a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/618\">bildljushet och kontrast<\/a>\u00a0Och\u00a0<a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/620\">opacitet mellan gr\u00e4nser, avdelare och avgr\u00e4nsare<\/a>.<\/p>\n<p>Av denna anledning, om du planerar att tillhandah\u00e5lla m\u00f6rkt l\u00e4ge-st\u00f6d f\u00f6r din webbplats, b\u00f6r du ocks\u00e5 ta h\u00e4nsyn till hur din webbplats kommer att se ut med en m\u00f6rk bakgrund.<\/p>\n<figure id=\"attachment_83734\" aria-describedby=\"caption-attachment-83734\" style=\"width: 2409px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83734 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-on.jpg\" alt=\"M\u00f6rkt l\u00e4ge aktiverat i Anpassaren och aktiverat p\u00e5 framsidan\" width=\"2409\" height=\"1193\"><figcaption id=\"caption-attachment-83734\" class=\"wp-caption-text\">M\u00f6rkt l\u00e4ge aktiverat i Anpassaren och aktiverat p\u00e5 framsidan<\/figcaption><\/figure>\n<p>Temabidragsgivare \u00e4r medvetna om dessa problem och diskussionen forts\u00e4tter p\u00e5 Github. F\u00f6r en n\u00e4rmare bild av problem med anv\u00e4ndbarhet i m\u00f6rkt l\u00e4ge och en m\u00f6jlighet att engagera sig i diskussionen, kontrollera hela\u00a0<a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\">listan \u00f6ver problem p\u00e5 Github<\/a>.<\/p>\n<p>Inst\u00e4llningar f\u00f6r m\u00f6rkt l\u00e4ge lagras i LocalStorage och kan ses i webbl\u00e4sarens utvecklarverktyg.<\/p>\n<p>I\u00a0<a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/storage\/localstorage\">Google Chrome<\/a>, starta Chrome WebTools och klicka p\u00e5\u00a0<strong>fliken<\/strong>\u00a0Program. Hitta avsnittet\u00a0<strong>Lagring<\/strong>\u00a0och expandera menyn Lokal lagring.<\/p>\n<figure id=\"attachment_83723\" aria-describedby=\"caption-attachment-83723\" style=\"width: 1740px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83723 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/brave-browser-local-storage.jpg\" alt=\"Inst\u00e4llningar f\u00f6r dark mode-anv\u00e4ndare i brave browser lokal lagring\" width=\"1740\" height=\"1086\"><figcaption id=\"caption-attachment-83723\" class=\"wp-caption-text\">Inst\u00e4llningar f\u00f6r dark mode-anv\u00e4ndare i brave browser lokal lagring<\/figcaption><\/figure>\n<p>F\u00f6r att vara \u00e4rlig \u00e4r M\u00f6rkt l\u00e4ge inte en vanlig sak i samband med webbplatser idag. Men eftersom ett nytt WordPress-standardtema nu st\u00f6der m\u00f6rkt l\u00e4ge kan vi f\u00f6rv\u00e4nta oss en f\u00f6r\u00e4ndring inom detta specifika tillg\u00e4nglighetsomr\u00e5de eftersom WordPress \u00e4r det mest anv\u00e4nda\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/cms-programvarorna\/\">CMS programvara<\/a>.<\/p>\n<p>Utvecklare som vill dyka djupare in i de tekniska sakerna b\u00f6r inte missa den h\u00e4r djupg\u00e5ende guiden om\u00a0<a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-dark-mode-on-the-web\/\">m\u00f6rkt l\u00e4ge p\u00e5 webben<\/a>.<\/p>\n<h2>Anpassade egenskaper f\u00f6r formatmallar och CSS<\/h2>\n<p>Med det sagt \u00e4r det dags nu att utforska de mest intressanta funktionerna i Twenty Twenty-One f\u00f6r temautvecklare.<\/p>\n<p>L\u00e5t oss b\u00f6rja med anpassade CSS-egenskaper.<\/p>\n<p>Som n\u00e4mnts ovan \u00e4r Twenty Twenty-One baserat p\u00e5\u00a0<a href=\"https:\/\/wordpress.org\/themes\/seedlet\/\">Seedlet<\/a>, ett tema med tv\u00e5 kolumner, med en sidfotssida och tre menyplatser. Utformningen av Seedlet \u00e4r helt baserad p\u00e5 CSS anpassade egenskaper och detta g\u00f6r det enklare f\u00f6r temautvecklare och avancerade anv\u00e4ndare att\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-barntema\/\">bygga underordnade teman<\/a>\u00a0p\u00e5 Automattics tema.<\/p>\n<p>Detsamma g\u00e4ller Twenty Twenty-One. Det nya standardtemat levereras med en enda kolumnlayout, ett sidfots sidof\u00e4lt och tv\u00e5 menyplatser. Stilmallen speglar systemet med kapslade anpassade egenskaper som tillhandah\u00e5lls av Seedlet och detta g\u00f6r Twenty Twenty-One till en perfekt duk f\u00f6r att bygga barnteman och mycket anpassade webbplatser.<\/p>\n<p><strong>CSS anpassade egenskaper<\/strong>\u00a0(\u00e4ven kallade\u00a0<strong>CSS-variabler)<\/strong>\u00e4r speciella entiteter som inneh\u00e5ller specifika v\u00e4rden som kan \u00e5teranv\u00e4ndas \u00f6verallt i formatmallen.<\/p>\n<p>S\u00e5 om du beh\u00f6ver \u00e4ndra en specifik f\u00e4rgcenter i dokumentet beh\u00f6ver du inte k\u00f6ra en global s\u00f6kning f\u00f6r att ta reda p\u00e5 n\u00e5gon f\u00f6rekomst av den f\u00e4rgen i hela formatmallen. Du beh\u00f6ver bara ange ett annat egenskapsv\u00e4rde inom\u00a0<code>:root<\/code>\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:root\">blockera<\/a>.<\/p>\n<figure id=\"attachment_83728\" aria-describedby=\"caption-attachment-83728\" style=\"width: 1970px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83728 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/css-custom-properties.jpg\" alt=\"CSS anpassade egenskaper i Twenty Twenty-One\" width=\"1970\" height=\"1108\"><figcaption id=\"caption-attachment-83728\" class=\"wp-caption-text\">CSS anpassade egenskaper i Twenty Twenty-One<\/figcaption><\/figure>\n<p>Som ett exempel p\u00e5 enkel anpassning s\u00e4ger du att du vill ange en anpassad bakgrundsf\u00e4rg. Du beh\u00f6ver inte bygga ett barntema f\u00f6r det. Du beh\u00f6ver bara inkludera tv\u00e5 CSS-deklarationer i kodredigeraren f\u00f6r\u00a0<a href=\"https:\/\/kinsta.com\/blog\/edit-wordpress-code\/#css\"><strong>Ytterligare CSS<\/strong>-panel<\/a>:<\/p>\n<pre><code class=\"language-css\">:root {\n\t--global--color-beige: #e6d7c1;\n}\n\nbody {\n\tbackground-color: var(--global--color-beige);\n}<\/code><\/pre>\n<figure id=\"attachment_83722\" aria-describedby=\"caption-attachment-83722\" style=\"width: 1682px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83722 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/additional-css.jpg\" alt=\"Anpassad CSS i Twenty Twenty-One Customizer\" width=\"1682\" height=\"786\"><figcaption id=\"caption-attachment-83722\" class=\"wp-caption-text\">Anpassad CSS i Twenty Twenty-One Customizer<\/figcaption><\/figure>\n<p>CSS anpassade egenskaper \u00e4r s\u00e4kra att anv\u00e4nda eftersom de st\u00f6ds av alla st\u00f6rre webbl\u00e4sare, som visas i bilden nedan fr\u00e5n\u00a0<a href=\"https:\/\/caniuse.com\/css-variables\">Kan jag anv\u00e4nda<\/a>:<\/p>\n<figure id=\"attachment_83724\" aria-describedby=\"caption-attachment-83724\" style=\"width: 1326px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83724 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/caniuse-css-custom-properties.jpg\" alt=\"Anpassade CSS-egenskaper st\u00f6ds av de flesta moderna webbl\u00e4sare\" width=\"1326\" height=\"610\"><figcaption id=\"caption-attachment-83724\" class=\"wp-caption-text\">Anpassade CSS-egenskaper st\u00f6ds av de flesta moderna webbl\u00e4sare<\/figcaption><\/figure>\n<p>Om du vill dyka djupare in i CSS anpassade egenskaper kan du kolla in\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties\">MDN-dokumentation<\/a>.<\/p>\n<h2>Twenty Twenty-One blockm\u00f6nster<\/h2>\n<p>Twenty Twenty-One ger flera m\u00f6nster f\u00f6r Block redigeraren. I ett\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-5\/#block-patterns\">f\u00f6reg\u00e5ende blogginl\u00e4gg<\/a> definierade vi blockm\u00f6nster som\u00a0<strong>f\u00f6rdefinierade blocklayouter s\u00e5 att anv\u00e4ndare snabbt kan l\u00e4gga till komplexa strukturer av kapslade block p\u00e5 sina sidor<\/strong>.<\/p>\n<p>WordPress 5.5 introducerade en handfull blockm\u00f6nster och mer b\u00f6r komma med WordPress 5.6. Dessutom kommer Twenty Twenty-One med sin egen upps\u00e4ttning blockm\u00f6nster.<\/p>\n<p>I Twenty Twenty-One definieras blockm\u00f6nster i <em>inc\/block-patterns.php<\/em>\u00a0fil.\u00a0<a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/50\"> Twenty Twenty-One m\u00f6nster<\/a>\u00a0varierar fr\u00e5n enkla m\u00f6nster som\u00a0<em>m\u00f6nstret Stor text,<\/em>\u00a0som inneh\u00e5ller ett enda H2-element, till mer komplexa m\u00f6nster, till\u00a0<em>exempel \u00f6verlappande bilder och rubrik f\u00f6r text-<\/em>\u00a0<em>och medie- och textartikel<\/em>.<\/p>\n<figure id=\"attachment_83744\" aria-describedby=\"caption-attachment-83744\" style=\"width: 580px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83744 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-media-and-text-block-pattern.jpg\" alt=\"Medie- och textartikel Rubrikblockm\u00f6nster i Twenty Twenty-One\" width=\"580\" height=\"306\"><figcaption id=\"caption-attachment-83744\" class=\"wp-caption-text\">Medie- och textartikel Rubrikblockm\u00f6nster i Twenty Twenty-One<\/figcaption><\/figure>\n<p>F\u00f6r n\u00e4rvarande ger temat f\u00f6ljande m\u00f6nster:<\/p>\n<ul>\n<li><strong>Stor text<\/strong><\/li>\n<li><strong>L\u00e4nkomr\u00e5de<\/strong>: En enorm text f\u00f6ljt av sociala n\u00e4tverk och e-postadressl\u00e4nkar.<\/li>\n<li><strong>Rubrik f\u00f6r medie- och textartikel<\/strong>: Ett medie- och textblock med en stor bild till v\u00e4nster och en rubrik till h\u00f6ger. Rubriken f\u00f6ljs av en avgr\u00e4nsare och ett beskrivningsstycke.<\/li>\n<li><strong>\u00d6verlappande bilder<\/strong>: Tre bilder i ett \u00f6verlappande kolumnblock.<\/li>\n<li><strong>Tv\u00e5 bilder showcase<\/strong>: A\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-mediebibliotek\/\">Media<\/a>\u00a0&#038; Textblock med en stor bild till v\u00e4nster och en mindre med en kantad ram till h\u00f6ger.<\/li>\n<li><strong>\u00d6verlappande bilder och text: <\/strong>Ett \u00f6verlappande kolumnblock med tv\u00e5 bilder och en textbeskrivning.<\/li>\n<li><strong>Portf\u00f6ljlista<\/strong>: En lista \u00f6ver projekt med miniatyrbilder.<\/li>\n<li><strong>Kontaktinformation<\/strong>: Ett block med 3 kolumner som visar kontaktinformation och l\u00e4nkar till sociala medier.<\/li>\n<\/ul>\n<figure id=\"attachment_83745\" aria-describedby=\"caption-attachment-83745\" style=\"width: 792px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83745 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-overlapping-images-block-pattern.jpg\" alt=\"\u00d6verlappande bilder blockm\u00f6nster i Twenty Twenty-One\" width=\"792\" height=\"1028\"><figcaption id=\"caption-attachment-83745\" class=\"wp-caption-text\">\u00d6verlappande bilder blockm\u00f6nster i Twenty Twenty-One<\/figcaption><\/figure>\n<p>Tillg\u00e4ngligheten f\u00f6r s\u00e5 m\u00e5nga blockm\u00f6nster \u00e4r bra f\u00f6r b\u00e5de anv\u00e4ndare och utvecklare. Anv\u00e4ndare kommer att till\u00e5tas att snabbt och enkelt l\u00e4gga till komplexa kodblock i sina inl\u00e4gg och sidor, utvecklare kan anv\u00e4nda dessa m\u00f6nster som anv\u00e4ndbara mallar att bygga vidare p\u00e5 n\u00e4r de kodar sina egna.<\/p>\n<h2>Experimentet med 221 block<\/h2>\n<p>Twenty Twenty-One Blocks \u00e4r en separat blockbaserad experimentell version av Twenty Twenty-One-temat. Dess syfte \u00e4r att dela och h\u00e5lla alla uppdaterade om vad som h\u00e4nder p\u00e5 hela webbplatsredigeringsexperimentet, vilket ger alla en chans att dyka in i de nya FSE-funktionerna innan de blir en del av WordPress k\u00e4rnan.<\/p>\n<p>Det \u00e4r\u00a0<a href=\"https:\/\/make.wordpress.org\/themes\/2020\/10\/07\/block-based-themes-and-wordpress-5-6\/\">osannolikt att vi kommer att se<\/a>\u00a0denna experimentella version sl\u00e5 samman till k\u00e4rnan med WordPress 5.6.\u00a0<a href=\"https:\/\/make.wordpress.org\/themes\/2020\/10\/23\/developing-the-full-site-editing-version-of-twenty-twenty-one\/\">Enligt Carolina Nymark<\/a>,<\/p>\n<blockquote><p>Temat kommer att beh\u00f6va Gutenberg och hela webbplatsredigeringsexperimentet f\u00f6r att aktiveras. Det kommer inte att vara en del av Core, men n\u00e4r det \u00e4r klart kommer det att vara tillg\u00e4ngligt i temakatalogen.<\/p><\/blockquote>\n<p>I skrivande stund kr\u00e4ver\u00a0<strong>Twenty Twenty-One Blocks Gutenberg-plugin<\/strong>. N\u00e4r du har installerat och aktiverat b\u00e5de temat och plugin-programmet visas ett menyalternativ f\u00f6r Webbplatsredigeraren i din WordPress-administrat\u00f6rsmeny (du beh\u00f6ver inte aktivera experimentet f\u00f6r fullst\u00e4ndig webbplatsredigering l\u00e4ngre).<\/p>\n<figure id=\"attachment_83740\" aria-describedby=\"caption-attachment-83740\" style=\"width: 519px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83740 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/site-editor-menu-item.jpg\" alt=\"Menyalternativet Webbplatsredigeraren i experimentet Twenty Twenty-One Blocks\" width=\"519\" height=\"438\"><figcaption id=\"caption-attachment-83740\" class=\"wp-caption-text\">Menyalternativet Webbplatsredigeraren i experimentet Twenty Twenty-One Blocks<\/figcaption><\/figure>\n<p>Klicka nu p\u00e5 det nya\u00a0<strong>menyalternativet Webbplatsredigeraren<\/strong>\u00a0f\u00f6r att \u00f6ppna redigeringsgr\u00e4nssnittet f\u00f6r hela webbplatsen och b\u00f6rja redigera alla element p\u00e5 sidan med hj\u00e4lp av blockredigeraren.<\/p>\n<figure id=\"attachment_83736\" aria-describedby=\"caption-attachment-83736\" style=\"width: 2260px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83736 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/full-site-editing.jpg\" alt=\"Fullst\u00e4ndig webbplatsredigering i Twenty Twenty block\" width=\"2260\" height=\"1278\"><figcaption id=\"caption-attachment-83736\" class=\"wp-caption-text\">Fullst\u00e4ndig webbplatsredigering i Twenty Twenty block<\/figcaption><\/figure>\n<p>H\u00e4r kommer vi inte att dyka in i de tekniska sakerna. Det r\u00e4cker med att s\u00e4ga att klassiska teman och blockbaserade teman \u00e4r strukturellt olika.<\/p>\n<p>Bilden nedan visar inneh\u00e5llet i mappen Twenty Twenty-One Blocks:<\/p>\n<figure id=\"attachment_83747\" aria-describedby=\"caption-attachment-83747\" style=\"width: 1266px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twentytwentyone-blocks.jpg\" alt=\"Mappen Tjugo tjugoen block\" width=\"1266\" height=\"700\"><figcaption id=\"caption-attachment-83747\" class=\"wp-caption-text\">Mappen Tjugo tjugoen block<\/figcaption><\/figure>\n<p>Du skulle m\u00e4rka filen <em>experimental-theme.json <\/em>och mappen <em>block-templates <\/em><em>och<\/em> <em>block-template-parts<\/em><em>.<\/em><\/p>\n<p>Den st\u00f6rsta skillnaden mellan traditionella WordPress-teman och blockbaserade teman \u00e4r att blockbaserade teman inneh\u00e5ller mallar som helt best\u00e5r av block.<\/p>\n<p>\u00d6ppna till exempel <em>block-template-parts\/header.html<\/em>\u00a0i\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/gratis-html-redigerare\/\">kodredigerare<\/a>. Du b\u00f6r se f\u00f6ljande kod:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:spacer {\"height\":70} --&gt;\n&lt;div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"&gt;&lt;\/div&gt;\n&lt;!-- \/wp:spacer --&gt;\n\n&lt;!-- wp:columns {\"align\":\"wide\"} --&gt;\n&lt;div class=\"wp-block-columns alignwide\"&gt;&lt;!-- wp:column --&gt;\n&lt;div class=\"wp-block-column\"&gt;&lt;!-- wp:site-title \/--&gt;\n\n&lt;!-- wp:site-tagline \/--&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;\n\n&lt;!-- wp:column --&gt;\n&lt;div class=\"wp-block-column\"&gt;&lt;!-- wp:navigation {\"orientation\":\"horizontal\",\"itemsJustification\":\"right\"} --&gt;\n&lt;!-- wp:navigation-link {\"label\":\"<span id=\"urn:enhancement-1\" class=\"textannotation\">Home<\/span>\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Blog\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Work\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Contact\",\"url\":\"#\"} \/--&gt;\n&lt;!-- \/wp:navigation --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;\n\n&lt;!-- wp:spacer {\"height\":70} --&gt;\n&lt;div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"&gt;&lt;\/div&gt;\n&lt;!-- \/wp:spacer --&gt;<\/code><\/pre>\n<p>Som du kan se har den klassiska <a href=\"https:\/\/kinsta.com\/blog\/add-code-wordpress-header-footer\/\">mallfilen <em>header.php<\/em><\/a> ersatts av en <em>.html<\/em>-fil som inneh\u00e5ller flera block.<\/p>\n<p>Du kan ta den p\u00e5g\u00e5ende versionen av Twenty Twenty-One Blocks-temat fr\u00e5n <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\">temat experimentprojekt<\/a> p\u00e5 Github.<\/p>\n<p>Om du \u00e4r temautvecklare inneh\u00e5ller den <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/master\/docs\/designers-developers\/developers\/themes\/block-based-themes.md\">officiella dokumentationen<\/a> allt du beh\u00f6ver veta om blockbaserade teman.<\/p>\n<p>Skicka din feedback <a href=\"https:\/\/make.wordpress.org\/test\/handbook\/full-site-editing-outreach-experiment\/\">h\u00e4r<\/a> om du vill bidra till hela webbplatsredigeringsexperimentet.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Twenty Twenty-One Blocks \u00e4r ett experimentellt tema och b\u00f6r inte anv\u00e4ndas i produktion! Lek med den i en <a href=\"https:\/\/kinsta.com\/docs\/wordpress-hosting\/staging-environment\/\">iscenes\u00e4ttningsmilj\u00f6<\/a>.<\/p>\n<\/aside>\n\n<h2>Hur man bygger ett barntema p\u00e5 Twenty Twenty-One<\/h2>\n<p>Standard WordPress-teman \u00e4r bra utg\u00e5ngspunkter f\u00f6r att l\u00e4ra sig grunderna i\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-utvecklarloner\/\">temautveckling<\/a>\u00a0och komma ig\u00e5ng med att skapa anpassade\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-barntema\/\">underordnade teman<\/a>.<\/p>\n<p>Standardteman f\u00f6ljer den officiella tj\u00e4nstemannens riktlinjer\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/handbook\/best-practices\/coding-standards\/\">WordPress kodningsstandarder<\/a>\u00a0och \u00e4r f\u00f6renliga med\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_standards\">webbstandarder<\/a>.<\/p>\n<p>Finns det n\u00e5got b\u00e4ttre st\u00e4lle att\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/skriptsprak\/\">l\u00e4r sig koda p\u00e5?<\/a><\/p>\n<p>Barnteman \u00e4r en bra WordPress-funktion som l\u00e5ter dig anpassa layouten, funktionerna och strukturen p\u00e5 dina sidor. Med f\u00f6ljande exempel dyker vi in i varje aspekt av temaanpassning.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Konfigurera ditt underordnade tema<\/h3>\n<p>Att skapa ett WordPress-barntema \u00e4r en 3-stegsprocess:<\/p>\n<h4>1. Skapa den underordnade temamappen<\/h4>\n<p>Skapa en ny mapp i <em>wp-content\/themes<\/em>\u00a0och namnge den som du vill. Men kom ih\u00e5g att det borde vara ett unikt namn. <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#1-create-a-child-theme-folder\">Handbok f\u00f6r teman f\u00f6r barn<\/a> rekommenderar att du anv\u00e4nder samma namn som \u00f6verordnat tema, med <strong>-child<\/strong> bifogat till slutet.<\/p>\n<p>Vi kan namnge den nya\u00a0mappen <strong>twentytwentyone-child<\/strong>.<\/p>\n<h4>2. Skapa ett format.css fil<\/h4>\n<p>G\u00e5 nu till din underordnade temakatalog och skapa en ny .css fil inklusive f\u00f6ljande kod:<\/p>\n<pre><code class=\"language-php\">\/*\nTheme Name: My Twenty Twenty One Child Theme\nTheme URI: https:\/\/example.com\nDescription: A child theme for Twenty Twenty One.\nAuthor: Your Name\nAuthor URI: https:\/\/example.com\/\nTemplate: twentytwentyone\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/\n<\/code><\/pre>\n<p>Informationshuvudet g\u00f6r det m\u00f6jligt f\u00f6r WordPress att hantera ditt barntema p\u00e5 r\u00e4tt s\u00e4tt.<\/p>\n<ul>\n<li>Temanamn: Temats unika namn.<\/li>\n<li>Tema-URI: D\u00e4r anv\u00e4ndare kan hitta koden eller dokumentationen f\u00f6r temat.<\/li>\n<li>Beskrivning: Beskrivande text som hj\u00e4lper anv\u00e4ndarna att f\u00f6rst\u00e5 vad temat g\u00f6r.<\/li>\n<li>F\u00f6rfattare: Ditt namn<\/li>\n<li>F\u00f6rfattare URI: F\u00f6rfattarens webbsida.<\/li>\n<li>Mall: Mappen d\u00e4r det \u00f6verordnade temat lagras. Anv\u00e4nd mappnamnet och inte temanamnet. Utan den h\u00e4r raden fungerar inte ditt tema som ett underordnat tema.<\/li>\n<li>Version: Versionsnumret<\/li>\n<li>Licens: Licensen, som\u00a0<a href=\"https:\/\/developer.wordpress.org\/themes\/getting-started\/wordpress-licensing-the-gpl\/\">m\u00e5ste vara GNU<\/a>.<\/li>\n<li>Licens-URI: L\u00e4nken till information om licensen.<\/li>\n<\/ul>\n<p>Under den texten kan du l\u00e4gga till dina CSS-block med deklarationer, som jag visar dig om ett \u00f6gonblick.<\/p>\n<h4>3. Skapa en functions.php fil<\/h4>\n<p>Med Twenty Twenty-One beh\u00f6ver du ocks\u00e5 en .php fil. S\u00e5 skapa din egen i det underordnade temats katalog, \u00f6ppna den i kodredigeraren och l\u00e4gg till f\u00f6ljande kod:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/* enqueue scripts and style from parent theme *\/\n   \nfunction twentytwentyone_styles() {\n\twp_enqueue_style( 'child-style', get_stylesheet_uri(),\n\tarray( 'twenty-twenty-one-style' ), wp_get_theme()-&gt;get('Version') );\n}\nadd_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');<\/code><\/pre>\n<p>Eftersom temat Twenty Twenty-One anv\u00e4nds <code>get_template_directory()<\/code> f\u00f6r att ladda formatmallen m\u00e5ste du fr\u00e5ga det underordnade temats formatmall med hj\u00e4lp av <code>wp_enqueue_scripts<\/code> \u00e5tg\u00e4rden.<\/p>\n<p>D\u00e4refter sparar du dina filer, \u00f6ppnar din WordPress-instrumentpanel,\u00a0bl\u00e4ddrar till<strong> Utseende -&gt; Teman <\/strong>och aktiverar ditt Twenty Twenty-One barntema.<\/p>\n<p>L\u00e5t oss nu l\u00e4gga till v\u00e5ra anpassningar.<\/p>\n<h3>S\u00e5 h\u00e4r l\u00e4gger du till anpassade format<\/h3>\n<p>N\u00e4r det g\u00e4ller att anpassa layouten p\u00e5 din WordPress-webbplats har du flera alternativ f\u00f6r att\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-css\/\">l\u00e4gga till din anpassade CSS-kod<\/a>. Anpassarens <strong>extra\u00a0CSS-panel<\/strong>\u00a0kan r\u00e4cka f\u00f6r sm\u00e5 \u00e4ndringar.<\/p>\n<p>Men ett barntema skulle vara ett b\u00e4ttre alternativ om du m\u00e5ste g\u00f6ra avancerade anpassningar, eller om du beh\u00f6ver exportera din kod till olika WordPress-webbplatser.<\/p>\n<p>L\u00e5t oss prova med enkel anpassning: \u00e4ndra standardteckensnittsstacken.<\/p>\n<p>S\u00e4g att du vill l\u00e4sa in en annan teckensnittsstack, eller helt enkelt\u00a0<a href=\"https:\/\/kinsta.com\/blog\/modern-fonts\/\">l\u00e4gga till ditt favoritteckensnitt<\/a>\u00a0till standardfamiljerna f\u00f6r Twenty Twenty-One-teckensnitt.<\/p>\n<p>Hur g\u00f6r man det?<\/p>\n<p>H\u00e4r kommer jag att visa dig hur du \u00e4ndrar standardteckensnittet f\u00f6r H1-rubriker, men du kan \u00e4ndra <a href=\"https:\/\/kinsta.com\/blog\/best-programming-fonts\/\">teckensnittsfamiljen<\/a> f\u00f6r alla textelement p\u00e5 din webbplats.<\/p>\n<p>\u00d6ppna f\u00f6rst Thenty Twenty-One&#8217;s\u00a0<em>style.css<\/em>\u00a0och hitta f\u00f6ljande block av CSS:<\/p>\n<pre><code class=\"language-css\">h1,\n.h1,\nh2,\n.h2,\nh3,\n.h3,\nh4,\n.h4,\nh5,\n.h5,\nh6,\n.h6 {\n\tclear: both;\n\tfont-family: var(--heading--font-family);\n\tfont-weight: var(--heading--font-weight);\n}<\/code><\/pre>\n<p>Som du kan se anges teckensnittsfamiljen f\u00f6r rubriker i <code>--heading--font-family<\/code> variabeln. G\u00e5 nu till <code>:root{}<\/code> blocket och hitta f\u00f6ljande deklaration:<\/p>\n<pre><code class=\"language-css\">--heading--font-family: var(--global--font-primary);<\/code><\/pre>\n<p><code>--heading--font-family<\/code> beror p\u00e5 <code>--global--font-primary<\/code> som definieras h\u00f6gst upp i\u00a0<code>:root{}<\/code> blocket:<\/p>\n<pre><code class=\"language-css\">:root{\n\t\/* Font Family *\/\n\t--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif);\n\t...\n}<\/code><\/pre>\n<p>Nu vet vi vad vi ska \u00e4ndra p\u00e5!<\/p>\n<p>Kopiera\u00a0<code>--global--font-primary<\/code> deklarationen fr\u00e5n den \u00f6verordnade formatmallen och klistra in den i barnets\u00a0<em>style.css<\/em>. \u00c4ndra sedan egenskapens namn och v\u00e4rde enligt nedan:<\/p>\n<pre><code class=\"language-css\">:root{\n\t\/* Font Family *\/\n\t--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Cantarell, \"Helvetica Neue\", sans-serif);\n\n\t--global--font-family-child: var(--global--font-primary-child);\n}<\/code><\/pre>\n<p>N\u00e4r du har deklarerat din anpassade teckensnittsstack kan du anv\u00e4nda den var du vill i formatmallen. H1 rubriker i v\u00e5rt exempel:<\/p>\n<pre><code class=\"language-css\">h1,\n.h1 {\n\tfont-family: var(--global--font-family-child);\n}<\/code><\/pre>\n<p>Spara ditt barns <em>style.css<\/em>\u00a0och ladda om sidan. Du b\u00f6r se Ubuntu som den nya standardteckensnittsfamiljen f\u00f6r sidans rubriker.<\/p>\n<figure id=\"attachment_83729\" aria-describedby=\"caption-attachment-83729\" style=\"width: 2612px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83729 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/custom-font-family.png\" alt=\"Standardteckensnittsfamilj j\u00e4mf\u00f6rt med anpassad teckensnittsfamilj i Twenty Twenty-One\" width=\"2612\" height=\"1576\"><figcaption id=\"caption-attachment-83729\" class=\"wp-caption-text\">Standardteckensnittsfamilj j\u00e4mf\u00f6rt med anpassad teckensnittsfamilj i Twenty Twenty-One<\/figcaption><\/figure>\n<p>Nu n\u00e4r du vet hur du anpassar Twenty Twenty-One&#8217;s stil med ett barntema kan vi utforska mer avancerade funktioner.<\/p>\n<h3>S\u00e5 h\u00e4r l\u00e4gger du till nya blockm\u00f6nster<\/h3>\n<p>I det h\u00e4r exemplet ska vi skapa ett anpassat blockm\u00f6nster med ett block med tv\u00e5 kolumner med en rundad bild till v\u00e4nster, en H4-rubrik och ett stycke till h\u00f6ger.<\/p>\n<p>Du kan bygga ditt m\u00f6nster direkt i Block Editor eller\u00a0<a href=\"https:\/\/kinsta.com\/blog\/edit-wordpress-code\/\">anpassa koden<\/a>\u00a0av ett befintligt blockm\u00f6nster.<\/p>\n<p>Om du v\u00e4ljer att bygga ditt m\u00f6nster i blockredigeraren beh\u00f6ver du helt enkelt l\u00e4gga till n\u00f6dv\u00e4ndiga block i ett inl\u00e4gg eller ett sidutkast och sedan v\u00e4xla till kodredigeraren och kopiera motsvarande kod.<\/p>\n<figure id=\"attachment_83725\" aria-describedby=\"caption-attachment-83725\" style=\"width: 1058px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83725 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/code-editor-2.png\" alt=\"Ett block med tv\u00e5 kolumner i kodredigeraren\" width=\"1058\" height=\"528\"><figcaption id=\"caption-attachment-83725\" class=\"wp-caption-text\">Ett block med tv\u00e5 kolumner i kodredigeraren<\/figcaption><\/figure>\n<p>Vi kan nu registrera v\u00e5rt m\u00f6nster i barntemats\u00a0<em>functions.php<\/em>\u00a0fil:<\/p>\n<pre><code class=\"language-php\">add_action( 'init', function(){\n\n\tregister_block_pattern_category( \n\t\t'custom-patterns', \n\t\tarray( 'label' =&gt; esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );\n\n\tregister_block_pattern(\n\t'twentytwentyone-child\/custom-bio-pattern',\n\tarray(\n\t\t'title'\t\t\t=&gt; __( 'Author Bio', 'twentytwentyone-child' ),\n\t\t'description'\t=&gt; _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),\n\t\t'content'\t\t=&gt; '&lt;!-- wp:columns {\"verticalAlignment\":null} --&gt; &lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"33.33%\"} --&gt; &lt;div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:33.33%\"&gt;&lt;!-- wp:image {\"id\":29,\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"className\":\"is-style-rounded\"} --&gt; &lt;figure class=\"wp-block-image size-large is-style-rounded\"&gt;&lt;img src=\"' . esc_url( get_stylesheet_directory_uri() ) . '\/assets\/images\/Kinsta-logo.png\" alt=\"Kinsta\" \/&gt;&lt;\/figure&gt; &lt;!-- \/wp:image --&gt;&lt;\/div&gt; &lt;!-- \/wp:column --&gt; &lt;!-- wp:column {\"width\":\"66.66%\"} --&gt; &lt;div class=\"wp-block-column\" style=\"flex-basis:66.66%\"&gt;&lt;!-- wp:heading {\"level\":4} --&gt; &lt;h4&gt;About Kinsta&lt;\/h4&gt; &lt;!-- \/wp:heading --&gt; &lt;!-- wp:paragraph --&gt; &lt;p&gt;Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best hosting platform in the world, and that\u2019s our promise. We don\u2019t settle and are here to stay.&lt;\/p&gt; &lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt; &lt;!-- \/wp:column --&gt;&lt;\/div&gt; &lt;!-- \/wp:columns --&gt;',\n\t\t'categories'\t=&gt; array( 'custom-patterns' ),\n\t)\n\t);\n});<\/code><\/pre>\n<p>Koden ovan registreras i kategorin <strong>Anpassade\u00a0m\u00f6nster<\/strong> och <strong>Author bio<\/strong>-m\u00f6nstret.<\/p>\n<p>Notera koden vi anv\u00e4nde f\u00f6r att bygga <code>img<\/code> elementet:<\/p>\n<pre><code class=\"language-php\">&lt;img src=\"' . esc_url( get_stylesheet_directory_uri() ) . '\/assets\/images\/Kinsta-logo.png\" alt=\"<span id=\"urn:enhancement-15\" class=\"textannotation\">Kinsta<\/span>\" \/&gt;<\/code><\/pre>\n<p>Den <code>get_stylesheet_directory_uri()<\/code> <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_stylesheet_directory_uri\/\">Funktion<\/a>\u00a0tillhandah\u00e5ller URI:n f\u00f6r det underordnade temats katalog (bilden har tidigare lagts till i det underordnade temats\u00a0<em>resursmapp).<\/em><\/p>\n<p>Spara \u00e4ndringarna och skapa ett nytt inl\u00e4gg eller en ny sida.<\/p>\n<p>Nu b\u00f6r du hitta det nya m\u00f6nstret i blockinfogaren.<\/p>\n<figure id=\"attachment_83730\" aria-describedby=\"caption-attachment-83730\" style=\"width: 2306px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83730 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/custom-pattern.jpg\" alt=\"Ett anpassat blockm\u00f6nster som lagts till i Twenty Twenty-One\" width=\"2306\" height=\"908\"><figcaption id=\"caption-attachment-83730\" class=\"wp-caption-text\">Ett anpassat blockm\u00f6nster som lagts till i Twenty Twenty-One<\/figcaption><\/figure>\n<h3>Anpassa en mallfil<\/h3>\n<p>Om du vill skapa en ny mallfil f\u00f6r ett visst arkiv, eller ett enda inl\u00e4gg\/sida, m\u00e5ste du skapa\u00a0en ny <em>.php<\/em>\u00a0mall enligt WordPress\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-barntema\/#how-wordpress-chooses-template-files\">Mallhierarki<\/a>.<\/p>\n<p>Men om du bara vill redigera en befintlig mall (eller malldel) beh\u00f6ver du bara kopiera den ursprungliga mallen fr\u00e5n det \u00f6verordnade temat och klistra in den i motsvarande position som ditt underordnade tema (l\u00e4s mer om det h\u00e4r avsnittet i v\u00e5rt\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-barntema\/#the-files-in-a-wordpress-child-theme\">ut\u00f6kade guide f\u00f6r barnteman<\/a>).<\/p>\n<p>S\u00e4g att du vill anpassa texten &#8221;Stolt driven av WordPress&#8221;. Du har flera alternativ f\u00f6r att\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/ta-bort-powered-by-wordpress\/\">ta bort eller anpassa den raden<\/a>. Till v\u00e5rt exempel, l\u00e5t oss \u00e4ndra det manuellt.<\/p>\n<p>F\u00f6r att g\u00f6ra det kopierar du <em>footer.php <\/em>mallfil fr\u00e5n den \u00f6verordnade mappen och klistrar in den i roten till ditt underordnade tema. N\u00e4r du \u00e4r klar \u00f6ppnar du ditt underordnade tema i <code>footer.php<\/code> kodredigeraren och hittar f\u00f6ljande kod:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\t\/* translators: %s: WordPress. *\/\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"' . esc_attr__( 'https:\/\/wordpress.org\/', 'twentytwentyone' ) . '\"&gt;WordPress&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt;&lt;!-- .powered-by --&gt;<\/code><\/pre>\n<p>Nu kan du g\u00f6ra dina \u00e4ndringar. L\u00e5t oss s\u00e4ga att du vill ge krediter till din webbhotell, byt bara ut <code>a<\/code> elementet som visas nedan:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"https:\/\/kinsta.com\/\"&gt;<span id=\"urn:enhancement-16\" class=\"textannotation\">Kinsta<\/span>&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt;&lt;!-- .powered-by --&gt;<\/code><\/pre>\n<p>Om du vill ta bort texten kommenterar eller tar du bara bort\u00a0<code>div.powered-by<\/code> elementet:<\/p>\n<pre><code class=\"language-php\">&lt;!-- &lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\t\/* translators: %s: WordPress. *\/\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"' . esc_attr__( 'https:\/\/wordpress.org\/', 'twentytwentyone' ) . '\"&gt;WordPress&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt; --&gt;<\/code><\/pre>\n<p>Och det var allt. Nu, fr\u00e5n de enkla exemplen ovan, kan du g\u00f6ra mer sp\u00e4nnande anpassningar och ta din webbplats med Twenty Twenty-One-temat till n\u00e4sta niv\u00e5.<\/p>\n\n<h2>Sammanfattning<\/h2>\n<p>Twenty Twenty-One-temat \u00e4r det tredje f\u00f6rs\u00f6ket att till\u00e5ta m\u00e4nniskor utan avancerade tekniska f\u00e4rdigheter att bygga webbplatser. Det \u00e4r ett minimalistiskt, v\u00e4l presterande och tillg\u00e4ngligt WordPress-tema som ocks\u00e5 passar ett brett spektrum av anv\u00e4ndningsfall.\u00a0WordPress-webbplatser som drivs av Twenty Twenty-One-temat finns i alla former och storlekar. F\u00f6r att ta reda p\u00e5 om ett tema anv\u00e4nder Twenty Twenty-One, kolla in v\u00e5rt praktiska <a href=\"https:\/\/kinsta.com\/se\/verktyg\/wordpress-theme-detector\/\">temadetektorverktyg f\u00f6r WordPress<\/a>.<\/p>\n<p>Det nya standardtemat \u00e4r utformat med blockredigeraren i \u00e5tanke och \u00e4r l\u00e4tt att anpassa f\u00f6r b\u00e5de anv\u00e4ndare och utvecklare.<\/p>\n<p>Din tur nu: Har du installerat Twenty Twenty-One-temat \u00e4nnu? Vad har du f\u00f6r erfarenhet av det? Dela med dig av dina tankar i kommentarsf\u00e4ltet!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Twenty Twenty-One \u00e4r det nya WordPress-standardtemat som kommer med WordPress 5.6. Om du v\u00e4ntar p\u00e5 en fullst\u00e4ndig\u00a0WordPress-tema\u00a0s\u00e5 kanske du blir lite besviken. Twenty Twenty-One \u00e4r ett &#8230;<\/p>\n","protected":false},"author":36,"featured_media":38448,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[29,304],"topic":[],"class_list":["post-38446","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-wordpress","tag-wordpresstheme"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat<\/title>\n<meta name=\"description\" content=\"Twenty Twenty-One-temat \u00e4r standardtemat som introduceras med WordPress 5.6. Kolla in alla de viktigaste funktioner i den h\u00e4r djupg\u00e5ende guiden.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat\" \/>\n<meta property=\"og:description\" content=\"Twenty Twenty-One-temat \u00e4r standardtemat som introduceras med WordPress 5.6. Kolla in alla de viktigaste funktioner i den h\u00e4r djupg\u00e5ende guiden.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstasweden\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-18T11:15:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-19T11:54:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/03\/twenty-twenty-one-temat.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Twenty Twenty-One-temat \u00e4r standardtemat som introduceras med WordPress 5.6. Kolla in alla de viktigaste funktioner i den h\u00e4r djupg\u00e5ende guiden.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/03\/twenty-twenty-one-temat.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:label1\" content=\"Skriven av\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Ber\u00e4knad l\u00e4stid\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat\",\"datePublished\":\"2021-03-18T11:15:55+00:00\",\"dateModified\":\"2023-01-19T11:54:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/\"},\"wordCount\":4525,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/03\/twenty-twenty-one-temat.jpeg\",\"keywords\":[\"WordPress\",\"wordpresstheme\"],\"articleSection\":[\"De b\u00e4sta handledningarna f\u00f6r WordPress\"],\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/\",\"url\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/\",\"name\":\"Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/03\/twenty-twenty-one-temat.jpeg\",\"datePublished\":\"2021-03-18T11:15:55+00:00\",\"dateModified\":\"2023-01-19T11:54:46+00:00\",\"description\":\"Twenty Twenty-One-temat \u00e4r standardtemat som introduceras med WordPress 5.6. Kolla in alla de viktigaste funktioner i den h\u00e4r djupg\u00e5ende guiden.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/03\/twenty-twenty-one-temat.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/03\/twenty-twenty-one-temat.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/se\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/se\/#website\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/se\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/se\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstasweden\/\",\"https:\/\/x.com\/kinsta_se\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/se\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat","description":"Twenty Twenty-One-temat \u00e4r standardtemat som introduceras med WordPress 5.6. Kolla in alla de viktigaste funktioner i den h\u00e4r djupg\u00e5ende guiden.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/","og_locale":"sv_SE","og_type":"article","og_title":"Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat","og_description":"Twenty Twenty-One-temat \u00e4r standardtemat som introduceras med WordPress 5.6. Kolla in alla de viktigaste funktioner i den h\u00e4r djupg\u00e5ende guiden.","og_url":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstasweden\/","article_published_time":"2021-03-18T11:15:55+00:00","article_modified_time":"2023-01-19T11:54:46+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/03\/twenty-twenty-one-temat.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Twenty Twenty-One-temat \u00e4r standardtemat som introduceras med WordPress 5.6. Kolla in alla de viktigaste funktioner i den h\u00e4r djupg\u00e5ende guiden.","twitter_image":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/03\/twenty-twenty-one-temat.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_se","twitter_misc":{"Skriven av":"Carlo Daniele","Ber\u00e4knad l\u00e4stid":"24 minuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat","datePublished":"2021-03-18T11:15:55+00:00","dateModified":"2023-01-19T11:54:46+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/"},"wordCount":4525,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/03\/twenty-twenty-one-temat.jpeg","keywords":["WordPress","wordpresstheme"],"articleSection":["De b\u00e4sta handledningarna f\u00f6r WordPress"],"inLanguage":"sv-SE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/","url":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/","name":"Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/03\/twenty-twenty-one-temat.jpeg","datePublished":"2021-03-18T11:15:55+00:00","dateModified":"2023-01-19T11:54:46+00:00","description":"Twenty Twenty-One-temat \u00e4r standardtemat som introduceras med WordPress 5.6. Kolla in alla de viktigaste funktioner i den h\u00e4r djupg\u00e5ende guiden.","breadcrumb":{"@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#primaryimage","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/03\/twenty-twenty-one-temat.jpeg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/03\/twenty-twenty-one-temat.jpeg","width":1460,"height":730,"caption":"Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/se\/"},{"@type":"ListItem","position":2,"name":"Twenty Twenty-One: En djupdykning i det nya standard WordPress-temat"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/se\/#website","url":"https:\/\/kinsta.com\/se\/","name":"Kinsta\u00ae","description":"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar","publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/se\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sv-SE"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/se\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/se\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstasweden\/","https:\/\/x.com\/kinsta_se","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/se\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/38446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/comments?post=38446"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/38446\/revisions"}],"predecessor-version":[{"id":48958,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/38446\/revisions\/48958"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/38446\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/38446\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/38446\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/38446\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/38446\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/38446\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/38446\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/38446\/translations\/se"},{"href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/38446\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media\/38448"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media?parent=38446"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/tags?post=38446"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/topic?post=38446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}