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!
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.
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:
- Först och främst ger användning av en systemteckensnittsstack fördelar för UX och Prestanda eftersom inbyggda teckensnitt redan stöds av de flesta operativsystem och inte kräver extra belastningstid.
- För det andra ser de neutrala ut, så de kan smidigt slås samman till någon form av design.
- För det tredje, eftersom de inte kräver att ytterligare teckensnittsfiler laddas, är det lättare för användare och utvecklare att anpassa layouten på en webbplats med Twenty Twenty-One.
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
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:
- 20 oktober 2020: Beta 1
- 27 oktober 2020: Beta 2
- 2 november 2020: Beta 3
- 12 november 2020: Beta 4
- 17 november 2020: RC 1
- 1 december 2020: RC 2
- 7 december 2020: Torrkörning för lansering av WordPress 5.6
- 8 december 2020: Måldatum för lansering av WordPress 5.6
Så här får du igång twenty twenty-one-temat:
- Hämta zip-paketet från Github.
- Ladda upp ditt paket till din utvecklingsinstallation från WordPress-instrumentpanel eller via Sftp.
- Bläddra till utseende → teman och klicka på knappen Aktivera på temats förhandsgranskningsbild.
- 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.
Ä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:
- Automatiska matningslänkar
- Rubriktagg
- Publicera format
- Inlägg Miniatyrer
- HTML5-element
- Anpassad logotyp
- Selektiv uppdatering för widgetar
- Anpassad bakgrund
- Två navigeringsmenyer
- Ett sidofält
Blockeringsfunktioner:
- Standardformat för block
- Redigerarstilar
- Mörka redigeringsstilar (mörk bakgrund)
- Justera bredd
- Blockera teckenstorlekar
- Blockera färgpaletter
- Blockera förinställningar för övertoning
- Startinnehåll
- Responsiva inbäddningar
- Anpassad linjehöjd
- Experimentell länkfärg
- Experimentellt anpassat avstånd
- Anpassade enheter (borttagna i WordPress 5.6)
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.
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.
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.
Om du vill ta en titt på hur Twenty Twenty-One-temat hanterar inläggsformat navigerar du till template-parts/excerpt och väljer mallen. Öppna till exempel excerpt-image.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:
has_blockavgör om ett inlägg eller en sträng innehåller en specifik blocktyp (kärnbildsblocket i detta exempel).twenty_twenty_one_print_first_instance_of_blockär en Twenty Twenty-One mallfunktion som skriver ut den första instansen av ett block i innehållet och sedan bryts bort.
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.
Den här skärmen innehåller:
- Anpassad logotyp
- Webbplatsrubrik
- Tagline
- Ikon för webbplats
Teckenstorlekar för redigerare
Twenty Twenty-One stöder följande teckenstorlekar:
- Extra liten – 16
- Liten – 18
- Normal/Medium – 20
- Stor – 24
- Extra stor – 40
- Enorm – 96
- Gigantisk – 144
I temats formatmall anges storlekarna i rem enheter.
Färginställningar
Temaanpassaren innehåller en panel med färger och mörkt läge med två alternativ:
- En enkel färgväljare med 10 fördefinierade färgpaletter.
- En kryssruta för att aktivera/inaktivera mörkt läge.
Bilden nedan visar en ljusgul bakgrundsfärg med mörkgrå text.
Bakgrundsfärgen är som standard en pastellgrön ('#d1e4dd'), men webbplatsadministratörer kan enkelt växla mellan följande bakgrundsfärgalternativ:
- Svart =
'#000000'; - Mörkgrå =
'#28303D'; - Grå =
'#39414D'; - Grön =
'#D1E4DD'; - Blå =
'#D1DFE4'; - Lila =
'#D1D1E4'; - Röd =
'#E4D1D1'; - Orange =
'#E4DAD1'; - Gul =
'#EEEADD'; - Vit =
'#FFFFFF';
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.
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.
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:
- Tillåter webbplatsägare att inaktivera stöd för mörkt läge och besökare att aktivera/ inaktivera det mörka läget när de tittar på webbplatsen.
- Tillåter bara webbplatsägare att inaktivera stöd för mörkt läge (inget alternativ för besökarna att aktivera/inaktivera mörkt läge).
- Aktivera stöd för mörkt läge som ”alltid på” samtidigt som besökarna kan växla det medan de tittar på webbplatsen.
- Aktivera stöd för mörkt läge som ”alltid på” och förhindra besökare från att växla det mörka läget på / av.
- Stöder inte mörkt läge alls
Efter en tankeväckande diskussion lades mörkt läge till i temat. Nwo:
- Stöd för mörkt läge är tillgängligt som opt-in-funktion för webbplatsägare.
- Den Växlingsknapp har tagits bort från redigerarens gränssnitt och är endast tillgänglig i Anpassaren.
- Växlingsknappen Mörkt läge finns i det nedre högra hörnet (vänster på RTL) och försvinner när webbplatsvisaren rullar ner på sidan.
- Med Mörkt läge aktiverat kan webbplatsvisare slå på/ stänga av det beroende på deras personliga inställningar och oavsett deras operativsystem / webbläsarinställningar.
Ä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.
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.
I Google Chrome, starta Chrome WebTools och klicka på fliken Program. Hitta avsnittet Lagring och expandera menyn 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.
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);
}
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:
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-patterns.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.
För närvarande ger temat följande mönster:
- Stor text
- Länkområde: En enorm text följt av sociala nätverk och e-postadresslänkar.
- Rubrik för medie- och textartikel: Ett medie- och textblock med en stor bild till vänster och en rubrik till höger. Rubriken följs av en avgränsare och ett beskrivningsstycke.
- Överlappande bilder: Tre bilder i ett överlappande kolumnblock.
- Två bilder showcase: A Media & Textblock med en stor bild till vänster och en mindre med en kantad ram till höger.
- Överlappande bilder och text: Ett överlappande kolumnblock med två bilder och en textbeskrivning.
- Portföljlista: En lista över projekt med miniatyrbilder.
- Kontaktinformation: Ett block med 3 kolumner som visar kontaktinformation och länkar till sociala medier.
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).
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.
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:
Du skulle märka filen experimental-theme.json och mappen block-templates och block-template-parts.
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.
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-content/themes 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 -child 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.
- Temanamn: Temats unika namn.
- Tema-URI: Där användare kan hitta koden eller dokumentationen för temat.
- Beskrivning: Beskrivande text som hjälper användarna att förstå vad temat gör.
- Författare: Ditt namn
- Författare URI: Författarens webbsida.
- Mall: Mappen där det överordnade temat lagras. Använd mappnamnet och inte temanamnet. Utan den här raden fungerar inte ditt tema som ett underordnat tema.
- Version: Versionsnumret
- Licens: Licensen, som måste vara GNU.
- Licens-URI: Länken till information om licensen.
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 style.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 style.css och ladda om sidan. Du bör se Ubuntu som den nya standardteckensnittsfamiljen för sidans rubriker.
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.
Vi kan nu registrera vårt mönster i barntemats functions.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 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.
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 footer.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å.
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!
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.
Lämna ett svar