Twenty Twenty-One är det nya WordPress-standardtemat som kommer med WordPress 5.6. Om du väntar på en fullständig WordPress-tema så kanske du blir lite besviken.

Twenty Twenty-One är ett minimalistiskt tema som ser ut och fungerar som en mycket anpassningsbar tom duk. Liksom sina föregångare kommer det nya standardtemat främst att förlita sig på Blockera redigerare för sidbyggnad.

I det här inlägget går vi igenom de mest intressanta funktionerna i Twenty Twenty-One-temat och vi visar dig hur du anpassar utseendet och känslan på en WordPress-webbplats med ett enkelt Twenty Twenty-One barntema.

Redo? Vi dyker in!

Twenty Twenty-One
Förhandsgranskning av Twenty Twenty-One-tema (bildkälla: Make WordPress Core)

En första titt på Twenty Twenty-One WordPress Tema

Liksom Twenty Twenty är det nya standardtemat som kommer med WordPress 5.6 inte byggt från grunden, men det bygger på ett tema som kommer från samhället.

Twenty Twenty-One har utvecklats på ett nytt Automattics tema, Seedlet tema, som ger en ren och välbeställd struktur av kapslade CSS-anpassade egenskaper. På grund av den stora användningen av CSS-egenskaper i temats stilblad är det snabbt och enkelt att bygga barnteman i Twenty Twenty-One.

Seedlet WordPress-tema
Seedlet WordPress-tema

Twenty Twenty-One är ett mycket tillgängligt, minimalistiskt WordPress-tema med en enda kolumnlayout, en sidfots sidofält och två menyplatser: Primär navigering och sidfotsnavigering.

Det nya temat använder en systemteckensnitt stack. Detta bör ha flera fördelar för både användare och Utvecklare:

Twenty Twenty-One-temat använder en minimal färgpalett baserat på pastellgröna bakgrundsfärger och två nyanser av grått som förgrundsfärger. Temat ger flera ytterligare pastellfärgpaletter.

På denna punkt förklarar Mel Choyse-Dwan, Standard Tema Design:

Vi kommer att kombinera temat med några ytterligare färgpaletter, inklusive både ett vitt och ett svart färgschema. Varför pastellgrön? Pasteller och dämpade färger är vackra just nu

Twenty Twenty-One färger
Twenty Twenty-One färger (Bildkälla: Make WordPress Core)
Twenty Twenty-One är det nya WordPress-standardtemat som kommer med WordPress 5.6! 👁‍🗨 Lär dig alla dess viktigaste funktioner i den här djupgående guiden!Click to Tweet

Hur man installerar Twenty twenty-one

I skrivande stund är Twenty Twenty-One under aktiv utveckling och är ännu inte tillgängligt för nedladdning i WordPress Temakatalog. Men du kan hitta en nuvarande version av temat på Github.

Github-databasen kommer att vara inaktuell när temat har slagits samman till Core och du hittar den i temakatalogen. När Twenty Twenty-One följer WordPress 5.6 utgivningsschema kanske du vill spara följande datum:

Så här får du igång twenty twenty-one-temat:

  1. Hämta zip-paketet från Github.
  2. Ladda upp ditt paket till din utvecklingsinstallation från WordPress-instrumentpanel eller via Sftp.
  3. Bläddra till utseende → teman och klicka på knappen Aktivera på temats förhandsgranskningsbild.
  4. Gå till Utseende → Anpassa för att konfigurera Twenty Twenty-One.

Du kan nu börja köra dina tester antingen på en mellanlagringswebbplats eller på din lokala miljö.

Observera att Twenty Twenty-One fortfarande är under aktiv utveckling, många problem har inte åtgärdats ännu, och vissa funktioner kan ändras i framtiden.

dark mode issue
Twenty Twenty-One Issue #620 på Github

Är du inte redo att köra dina tester?

Inga bekymmer, vi har dissekerat temat och vi ska visa dig vad du kan förvänta dig av Twenty Twenty-One.

Twenty Twenty-One tema och blockfunktioner

Precis som Twenty Twenty är det nya standard WordPress-temat inte ett fullt presenterat tema, utan ett minimalistiskt tema som förlitar sig på blockredigeraren för sidbyggnad. Temat syftar också till att ger stor tillgänglighet. Med Mel Choyce-Dwans ord:

Slutligen vill vi gärna att temat uppfyller relevanta riktlinjer från WCAG 2.1 nivå AAA. Vi älskade idén när +make.wordpress.org/accessibility/ tog upp den och skulle uppskatta all vägledning från vårt samhälle a11y experter för att hjälpa till att göra detta möjligt.

Temat stöder ett stort antal Tema och blockeringsfunktioner inklusive följande:

Tema funktioner:

Blockeringsfunktioner:

Följande lista innehåller de funktioner som kan vara mer relevanta när du bygger en webbplats baserad på Twenty Twenty-One.

Navigeringsmenyer

Twenty Twenty-One stöder två menyplatser, primär navigering, som finns i huvudets övre högra hörn och sidfotsnavigeringen.

Tjugo tjugoen menyplatser
Tjugo tjugoen menyplatser

Om du läggs till på sidfotsmenyn sociala band upptäcks och konverteras automatiskt de till SVG-ikoner för de sociala medier som stöds.

social meny
Twenty Twenty-One social meny

Publiceringsformat

Twenty Twenty-One stöder nio inläggsformat: länk, åt sidan, galleri, bild, citat, status, video, ljud, chatt. Du kan välja ditt inläggsformat på panelen Status och synlighet i redigerarens inställningar.

Twenty Twenty-One stöder nio inläggsformat
Twenty Twenty-One stöder nio inläggsformat

Om du vill ta en titt på hur Twenty Twenty-One-temat hanterar inläggsformat navigerar du till malldelarna/utdragsmappen och väljer mallen. Öppna till exempel utdragsbilden.php filen i din favoritfil kodredigerare. I den filen ser du följande kod:

/**
 * Show the appropriate content for the Image post format.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since 1.0.0
 */

// If there is no featured-image, print the first image block found.
if (
	! twenty_twenty_one_can_show_post_thumbnail() &&
	has_block( 'core/image', get_the_content() )
) {

	twenty_twenty_one_print_first_instance_of_block( 'core/image', get_the_content() );
}

the_excerpt();

Koden är självförklarande, men låt oss ta en närmare titt:

Så om en webbplatsvisare kräver ett arkiv med inlägg i ”bildformatet” kommer WordPress att visa en bild högst upp för varje inlägg i arkivet. Enligt samma logik kan du dyka in i val av inläggsformat genom att kontrollera motsvarande malldelar.

Webbplatsidentitet och anpassad logotyp

Twenty Twenty-One ger stöd för en 300×100 px anpassad logotyp. Du hittar anpassade logotypinställningar på panelen Webbplatsidentitet.

Webbplatsidentitet i Twenty Twenty-One
Webbplatsidentitet i Twenty Twenty-One

Den här skärmen innehåller:

Teckenstorlekar för redigerare

Twenty Twenty-One stöder följande Teckenstorlekar:

I temats formatmall anges storlekarna i rem enheter.

Twenty Twenty-One stöder sju teckenstorlekar
Twenty Twenty-One stöder sju teckenstorlekar

Färginställningar

Temaanpassaren innehåller en panel med färger och mörkt läge med två alternativ:

Bilden nedan visar en ljusgul bakgrundsfärg med mörkgrå text.

Inställningar för färger och mörkt läge i Twenty Twenty-One
Inställningar för färger och mörkt läge i Twenty Twenty-One

Bakgrundsfärgen är som standard en pastellgrön ('#d1e4dd'), men webbplatsadministratörer kan enkelt växla mellan följande bakgrundsfärgalternativ:

Samma färger är tillgängliga som blockfärgspaletter i redigerarens blockinställningar.

Dessutom stöder Twenty Twenty-One flera övertoningsförinställningar för block som stöder den här funktionen. Bilden nedan visar standardgradienterna i blockinställningarnas kolumner.

Åtta övertoningsförinställningar i ett block färginställningar
Åtta övertoningsförinställningar i ett block färginställningar

Ur tillgänglighetssynpunkt är stöd för mörkt läge en absolut nyhet för ett standardtema.

Låt oss dyka lite djupare!

 

Stöd för mörkt läge i Twenty Twenty-One Theme

Efter en diskussion om #core-teman Slack kanal, Mel Choyce-Dwan introducerade stöd för mörkt läge för Twenty Twenty.21.

Aktivera mörkt läge i macOS
Aktivera mörkt läge i macOS

Först var det inte klart hur den här funktionen kunde ha implementerats i Twenty Twenty-One om den lades till som en temafunktion eller som en separat projektfrakt i ett plugin.

Det fanns fem möjliga alternativ att välja mellan:

Efter en tankeväckande diskussion lades mörkt läge till i temat. Nwo:

Mörkt läge aktiverat i Anpassaren och inaktiverat på framsidan
Mörkt läge aktiverat i Anpassaren och inaktiverat på framsidan

Även om mörkt läge anses vara en tillgänglighetsförbättring är det inte uppenbart att dina webbplatssidor skulle vara mer tillgängliga i alla sammanhang.

De största problemen gäller mörka logotyper och transparenta bilder. Att byta från en standardljusmall till en mörk bakgrundsfärg kan leda till läsbarhetsproblem som kan minska användbarheten och förstöra utseendet på din webbplats.

Till exempel kan en mörk logotyp på en ljus bakgrund försvinna helt om dina läsare aktiverar mörkt läge på sin sida. Liknande farhågor gäller bildljushet och kontrast Och opacitet mellan gränser, avdelare och avgränsare.

Av denna anledning, om du planerar att tillhandahålla mörkt läge-stöd för din webbplats, bör du också ta hänsyn till hur din webbplats kommer att se ut med en mörk bakgrund.

Mörkt läge aktiverat i Anpassaren och aktiverat på framsidan
Mörkt läge aktiverat i Anpassaren och aktiverat på framsidan

Temabidragsgivare är medvetna om dessa problem och diskussionen fortsätter på Github. För en närmare bild av problem med användbarhet i mörkt läge och en möjlighet att engagera sig i diskussionen, kontrollera hela listan över problem på Github.

Inställningar för mörkt läge lagras i LocalStorage och kan ses i webbläsarens utvecklarverktyg.

Google Chrome, starta Chrome WebTools och klicka på fliken Program. Hitta avsnittet Lagring och expandera menyn Lokal lagring.

Inställningar för dark mode-användare i brave browser lokal lagring
Inställningar för dark mode-användare i brave browser lokal lagring

För att vara ärlig är Mörkt läge inte en vanlig sak i samband med webbplatser idag. Men eftersom ett nytt WordPress-standardtema nu stöder mörkt läge kan vi förvänta oss en förändring inom detta specifika tillgänglighetsområde eftersom WordPress är det mest använda CMS programvara.

Utvecklare som vill dyka djupare in i de tekniska sakerna bör inte missa den här djupgående guiden om mörkt läge på webben.

Anpassade egenskaper för formatmallar och CSS

Med det sagt är det dags nu att utforska de mest intressanta funktionerna i Twenty Twenty-One för temautvecklare.

Låt oss börja med anpassade CSS-egenskaper.

Som nämnts ovan är Twenty Twenty-One baserat på Seedlet, ett tema med två kolumner, med en sidfotssida och tre menyplatser. Utformningen av Seedlet är helt baserad på CSS anpassade egenskaper och detta gör det enklare för temautvecklare och avancerade användare att bygga underordnade teman på Automattics tema.

Detsamma gäller Twenty Twenty-One. Det nya standardtemat levereras med en enda kolumnlayout, ett sidfots sidofält och två menyplatser. Stilmallen speglar systemet med kapslade anpassade egenskaper som tillhandahålls av Seedlet och detta gör Twenty Twenty-One till en perfekt duk för att bygga barnteman och mycket anpassade webbplatser.

CSS anpassade egenskaper (även kallade CSS-variabler)är speciella entiteter som innehåller specifika värden som kan återanvändas överallt i formatmallen.

Så om du behöver ändra en specifik färgcenter i dokumentet behöver du inte köra en global sökning för att ta reda på någon förekomst av den färgen i hela formatmallen. Du behöver bara ange ett annat egenskapsvärde inom :root blockera.

CSS anpassade egenskaper i Twenty Twenty-One
CSS anpassade egenskaper i Twenty Twenty-One

Som ett exempel på enkel anpassning säger du att du vill ange en anpassad bakgrundsfärg. Du behöver inte bygga ett barntema för det. Du behöver bara inkludera två CSS-deklarationer i kodredigeraren för Ytterligare CSS-panel:

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}
Anpassad CSS i Twenty Twenty-One Customizer
Anpassad CSS i Twenty Twenty-One Customizer

CSS anpassade egenskaper är säkra att använda eftersom de stöds av alla större webbläsare, som visas i bilden nedan från Kan jag använda:

Anpassade CSS-egenskaper stöds av de flesta moderna webbläsare
Anpassade CSS-egenskaper stöds av de flesta moderna webbläsare

Om du vill dyka djupare in i CSS anpassade egenskaper kan du kolla in MDN-dokumentation.

Twenty Twenty-One blockmönster

Twenty Twenty-One ger flera mönster för Block redigeraren. I ett föregående blogginlägg definierade vi blockmönster som fördefinierade blocklayouter så att användare snabbt kan lägga till komplexa strukturer av kapslade block på sina sidor.

WordPress 5.5 introducerade en handfull blockmönster och mer bör komma med WordPress 5.6. Dessutom kommer Twenty Twenty-One med sin egen uppsättning blockmönster.

I Twenty Twenty-One definieras blockmönster i inc/block-mönster.php fil.  Twenty Twenty-One mönster varierar från enkla mönster som mönstret Stor text, som innehåller ett enda H2-element, till mer komplexa mönster, till exempel överlappande bilder och rubrik för text- och medie- och textartikel.

Medie- och textartikel Rubrikblockmönster i Twenty Twenty-One
Medie- och textartikel Rubrikblockmönster i Twenty Twenty-One

För närvarande ger temat följande mönster:

Överlappande bilder blockmönster i Twenty Twenty-One
Överlappande bilder blockmönster i Twenty Twenty-One

Tillgängligheten för så många blockmönster är bra för både användare och utvecklare. Användare kommer att tillåtas att snabbt och enkelt lägga till komplexa kodblock i sina inlägg och sidor, utvecklare kan använda dessa mönster som användbara mallar att bygga vidare på när de kodar sina egna.

Experimentet med 221 block

Twenty Twenty-One Blocks är en separat blockbaserad experimentell version av Twenty Twenty-One-temat. Dess syfte är att dela och hålla alla uppdaterade om vad som händer på hela webbplatsredigeringsexperimentet, vilket ger alla en chans att dyka in i de nya FSE-funktionerna innan de blir en del av WordPress kärnan.

Det är osannolikt att vi kommer att se denna experimentella version slå samman till kärnan med WordPress 5.6. Enligt Carolina Nymark,

Temat kommer att behöva Gutenberg och hela webbplatsredigeringsexperimentet för att aktiveras. Det kommer inte att vara en del av Core, men när det är klart kommer det att vara tillgängligt i temakatalogen.

I skrivande stund kräver Twenty Twenty-One Blocks Gutenberg-plugin. När du har installerat och aktiverat både temat och plugin-programmet visas ett menyalternativ för Webbplatsredigeraren i din WordPress-administratörsmeny (du behöver inte aktivera experimentet för fullständig webbplatsredigering längre).

Menyalternativet Webbplatsredigeraren i experimentet Twenty Twenty-One Blocks
Menyalternativet Webbplatsredigeraren i experimentet Twenty Twenty-One Blocks

Klicka nu på det nya menyalternativet Webbplatsredigeraren för att öppna redigeringsgränssnittet för hela webbplatsen och börja redigera alla element på sidan med hjälp av blockredigeraren.

Fullständig webbplatsredigering i Twenty Twenty block
Fullständig webbplatsredigering i Twenty Twenty block

Här kommer vi inte att dyka in i de tekniska sakerna. Det räcker med att säga att klassiska teman och blockbaserade teman är strukturellt olika.

Bilden nedan visar innehållet i mappen Twenty Twenty-One Blocks:

Mappen Tjugo tjugoen block
Mappen Tjugo tjugoen block

Du skulle märka filen experimental-theme.json och blockmallarna och blockmallsdelarna.

Den största skillnaden mellan traditionella WordPress-teman och blockbaserade teman är att blockbaserade teman innehåller mallar som helt består av block.

Öppna till exempel block-template-parts/header.html i kodredigerare. Du bör se följande kod:

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"Home","url":"#"} /-->

<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->

<!-- wp:navigation-link {"label":"Work","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Som du kan se har den klassiska mallfilen header.php ersatts av en .html-fil som innehåller flera block.

Du kan ta den pågående versionen av Twenty Twenty-One Blocks-temat från temat experimentprojekt på Github.

Om du är temautvecklare innehåller den officiella dokumentationen allt du behöver veta om blockbaserade teman.

Skicka din feedback här om du vill bidra till hela webbplatsredigeringsexperimentet.

Hur man bygger ett barntema på Twenty Twenty-One

Standard WordPress-teman är bra utgångspunkter för att lära sig grunderna i temautveckling och komma igång med att skapa anpassade underordnade teman.

Standardteman följer den officiella tjänstemannens riktlinjer WordPress kodningsstandarder och är förenliga med webbstandarder.

Behöver du blixtsnabb, säker och utvecklarvänlig hosting för dina klientwebbplatser? Kinsta är byggt med WordPress-utvecklare i åtanke och ger massor av verktyg och en kraftfull instrumentpanel. Kolla in våra planer

Finns det något bättre ställe att lär sig koda på?

Barnteman är en bra WordPress-funktion som låter dig anpassa layouten, funktionerna och strukturen på dina sidor. Med följande exempel dyker vi in i varje aspekt av temaanpassning.

Konfigurera ditt underordnade tema

Att skapa ett WordPress-barntema är en 3-stegsprocess:

1. Skapa den underordnade temamappen

Skapa en ny mapp i wp-innehåll / teman och namnge den som du vill. Men kom ihåg att det borde vara ett unikt namn. Handbok för teman för barn rekommenderar att du använder samma namn som överordnat tema, med -barn bifogat till slutet.

Vi kan namnge den nya mappen twentytwentyone-child.

2. Skapa ett format.css fil

Gå nu till din underordnade temakatalog och skapa en ny .css fil inklusive följande kod:

/*
Theme Name: My Twenty Twenty One Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty One.
Author: Your Name
Author URI: https://example.com/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

Informationshuvudet gör det möjligt för WordPress att hantera ditt barntema på rätt sätt.

Under den texten kan du lägga till dina CSS-block med deklarationer, som jag visar dig om ett ögonblick.

3. Skapa en functions.php fil

Med Twenty Twenty-One behöver du också en .php fil. Så skapa din egen i det underordnade temats katalog, öppna den i kodredigeraren och lägg till följande kod:

<?php
/* enqueue scripts and style from parent theme */
   
function twentytwentyone_styles() {
	wp_enqueue_style( 'child-style', get_stylesheet_uri(),
	array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Eftersom temat Twenty Twenty-One används get_template_directory() för att ladda formatmallen måste du fråga det underordnade temats formatmall med hjälp av wp_enqueue_scripts åtgärden.

Därefter sparar du dina filer, öppnar din WordPress-instrumentpanel, bläddrar till Utseende -> Teman och aktiverar ditt Twenty Twenty-One barntema.

Låt oss nu lägga till våra anpassningar.

Så här lägger du till anpassade format

När det gäller att anpassa layouten på din WordPress-webbplats har du flera alternativ för att lägga till din anpassade CSS-kod. Anpassarens extra CSS-panel kan räcka för små ändringar.

Men ett barntema skulle vara ett bättre alternativ om du måste göra avancerade anpassningar, eller om du behöver exportera din kod till olika WordPress-webbplatser.

Låt oss prova med enkel anpassning: ändra standardteckensnittsstacken.

Säg att du vill läsa in en annan teckensnittsstack, eller helt enkelt lägga till ditt favoritteckensnitt till standardfamiljerna för Twenty Twenty-One-teckensnitt.

Hur gör man det?

Här kommer jag att visa dig hur du ändrar standardteckensnittet för H1-rubriker, men du kan ändra teckensnittsfamiljen för alla textelement på din webbplats.

Öppna först Thenty Twenty-One’s style.css och hitta följande block av CSS:

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	clear: both;
	font-family: var(--heading--font-family);
	font-weight: var(--heading--font-weight);
}

Som du kan se anges teckensnittsfamiljen för rubriker i --heading--font-family variabeln. Gå nu till :root{} blocket och hitta följande deklaration:

--heading--font-family: var(--global--font-primary);

--heading--font-family beror på --global--font-primary som definieras högst upp i :root{} blocket:

:root{
	/* Font Family */
	--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	...
}

Nu vet vi vad vi ska ändra på!

Kopiera --global--font-primary deklarationen från den överordnade formatmallen och klistra in den i barnets format.css. Ändra sedan egenskapens namn och värde enligt nedan:

:root{
	/* Font Family */
	--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif);

	--global--font-family-child: var(--global--font-primary-child);
}

När du har deklarerat din anpassade teckensnittsstack kan du använda den var du vill i formatmallen. H1 rubriker i vårt exempel:

h1,
.h1 {
	font-family: var(--global--font-family-child);
}

Spara ditt barns stil.css och ladda om sidan. Du bör se Ubuntu som den nya standardteckensnittsfamiljen för sidans rubriker.

Standardteckensnittsfamilj jämfört med anpassad teckensnittsfamilj i Twenty Twenty-One
Standardteckensnittsfamilj jämfört med anpassad teckensnittsfamilj i Twenty Twenty-One

Nu när du vet hur du anpassar Twenty Twenty-One’s stil med ett barntema kan vi utforska mer avancerade funktioner.

Så här lägger du till nya blockmönster

I det här exemplet ska vi skapa ett anpassat blockmönster med ett block med två kolumner med en rundad bild till vänster, en H4-rubrik och ett stycke till höger.

Du kan bygga ditt mönster direkt i Block Editor eller anpassa koden av ett befintligt blockmönster.

Om du väljer att bygga ditt mönster i blockredigeraren behöver du helt enkelt lägga till nödvändiga block i ett inlägg eller ett sidutkast och sedan växla till kodredigeraren och kopiera motsvarande kod.

Ett block med två kolumner i kodredigeraren
Ett block med två kolumner i kodredigeraren

Vi kan nu registrera vårt mönster i barntemats funktioner.php fil:

add_action( 'init', function(){

	register_block_pattern_category( 
		'custom-patterns', 
		array( 'label' => esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );

	register_block_pattern(
	'twentytwentyone-child/custom-bio-pattern',
	array(
		'title'			=> __( 'Author Bio', 'twentytwentyone-child' ),
		'description'	=> _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),
		'content'		=> '<!-- wp:columns {"verticalAlignment":null} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:image {"id":29,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-style-rounded"><img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" /></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"width":"66.66%"} --> <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"level":4} --> <h4>About Kinsta</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best WordPress hosting platform in the world, and that’s our promise. We don’t settle and are here to stay.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --></div> <!-- /wp:columns -->',
		'categories'	=> array( 'custom-patterns' ),
	)
	);
});

Koden ovan registreras i kategorin Anpassade mönster och author bio-mönstret.

Notera koden vi använde för att bygga img elementet:

<img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" />

Den get_stylesheet_directory_uri() Funktion tillhandahåller URI:n för det underordnade temats katalog (bilden har tidigare lagts till i det underordnade temats resursmapp).

Spara ändringarna och skapa ett nytt inlägg eller en ny sida.

Nu bör du hitta det nya mönstret i blockinfogaren.

Ett anpassat blockmönster som lagts till i Twenty Twenty-One
Ett anpassat blockmönster som lagts till i Twenty Twenty-One

Anpassa en mallfil

Om du vill skapa en ny mallfil för ett visst arkiv, eller ett enda inlägg/sida, måste du skapa en ny .php mall enligt WordPress Mallhierarki.

Men om du bara vill redigera en befintlig mall (eller malldel) behöver du bara kopiera den ursprungliga mallen från det överordnade temat och klistra in den i motsvarande position som ditt underordnade tema (läs mer om det här avsnittet i vårt utökade guide för barnteman).

Säg att du vill anpassa texten ”Stolt driven av WordPress”. Du har flera alternativ för att ta bort eller anpassa den raden. Till vårt exempel, låt oss ändra det manuellt.

För att göra det kopierar du sidfotens .php mallfil från den överordnade mappen och klistrar in den i roten till ditt underordnade tema. När du är klar öppnar du ditt underordnade tema i footer.php kodredigeraren och hittar följande kod:

<div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div><!-- .powered-by -->

Nu kan du göra dina ändringar. Låt oss säga att du vill ge krediter till din webbhotell, byt bara ut a elementet som visas nedan:

<div class="powered-by">
	<?php
	printf(
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="https://kinsta.com/">Kinsta</a>'
	);
	?>
</div><!-- .powered-by -->

Om du vill ta bort texten kommenterar eller tar du bara bort div.powered-by elementet:

<!-- <div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div> -->

Och det var allt. Nu, från de enkla exemplen ovan, kan du göra mer spännande anpassningar och ta din webbplats med Twenty Twenty-One-temat till nästa nivå.

Kolla in vad som är nytt i WordPress-tema, från mörkt läge till blockbaserade teman, i denna grundliga översikt över Twenty Twenty-One🌅Click to Tweet

Sammanfattning

Twenty Twenty-One-temat är det tredje försöket att tillåta människor utan avancerade tekniska färdigheter att bygga webbplatser. Det är ett minimalistiskt, väl presterande och tillgängligt WordPress-tema som också passar ett brett spektrum av användningsfall. WordPress-webbplatser som drivs av Twenty Twenty-One-temat finns i alla former och storlekar. För att ta reda på om ett tema använder Twenty Twenty-One, kolla in vårt praktiska temadetektorverktyg för WordPress.

Det nya standardtemat är utformat med blockredigeraren i åtanke och är lätt att anpassa för både användare och utvecklare.

Din tur nu: Har du installerat Twenty Twenty-One-temat ännu? Vad har du för erfarenhet av det? Dela med dig av dina tankar i kommentarsfältet!


Spara tid, kostnad och maximera webbplatsens prestanda med:

  • Omedelbar hjälp från WordPress -hostingexperter, 24/7.
  • Cloudflare Enterprise-integration.
  • Global publik räckvidd med 29 datacenter över hela världen.
  • Optimering med vår inbyggda Application Performance Monitoring.

Allt detta och mer, i en plan utan långsiktiga kontrakt, assisterad migration och en 30-dagars pengarna-tillbaka-garanti. Kolla in våra paket, eller prata med säljteamet för att hitta den plan som fungerar för dig.