Twenty Twenty er det nye standard WordPress-tema, der kommer med den seneste version af WordPress 5.3. Som sin forgænger Twenty Nineteen er Twenty Twenty designet med et specielt fokus på Gutenberg. Der er dog en stor forskel mellem de to: Twenty Twenty er ikke bygget fra bunden af; det er designet til et eksisterende tema fra WordPress-samfundet i stedet.

Da vi elsker alt om WordPress, kiggede vi nærmere på det nye Twenty Twenty-tema og kiggede ind i funktionen.php-filen, stilarket og skabeloner.

Selvom Twenty Twenty langt fra er noget stabilt – på tidspunktet for dette forfatterskab – med mange problemer, der stadig ikke er fikseret, deler vi i dag med dig vores allerførste tanker om det nye standard WordPress-tema.

Lad os dykke ned i Twenty Twenty WordPress-temaet!

Twenty Twenty preview

Twenty Twenty WordPress Theme preview (Billedekilde: Make WordPress Core)

Hurtig introduktion til temaet Twenty Twenty

Twenty Twenty er bygget på Chaplin, et gratis WordPress-tema af Anders Norén, der også er Standard Theme Design Lead for WordPress 5.3.

Chaplin kan downloades i WordPress.org-arkivet, og ifølge Anders er det blevet bygget med Block Editor i tankerne:

Chaplin er et funktionelt pakket WordPress-tema, der giver dig fuld kontrol over skrifttyper og farver på dit websted. Det er bygget fra grunden med den nye Block Editor i tankerne og gør det nemt at skabe flotte layout på både indlæg og sider.

Chaplin WordPress-tema

Chaplin WordPress-tema

Den samme filosofi ligger bag Twenty Twenty: fleksibilitet, klarhed og læsbarhed er fokus-nøgleordene for det nye tema.

Twenty Twenty kommer med et enkelt kolonnelayout og tre post / sideskabeloner, der sigter mod at give WordPress-administratorer og designere friheden til at oprette deres brugerdefinerede layout direkte i Block Editor ved at drage fordel af bredde og fylde med justeringer til blokelementer som kolonner, billeder og gruppeblokken introduceret med Gutenberg 5.5.

Som Anders forklarer:

Twenty Twenty er designet med fleksibilitet i sin kerne. Hvis du vil bruge det til en organisation eller en virksomhed, kan du kombinere kolonner, grupper og medier med brede og fulde justeringer for at oprette dynamiske layouts for at vise dine tjenester eller produkter. Hvis du vil bruge den til en traditionel blog, gør den centrerede indholdssøjle den perfekt til det.

Derudover kommer Twenty Twenty med et nyt skrifttype: Inter. Det er en gratis og open source-fontfamilie designet af Rasmus Andersson specielt til læsbarhed af tekst med små og små bogstaver, især med små skrifttypestørrelser.

Familien Inter-skrifttype

Familien Inter-skrifttype

Inter giver store overskrifter en stærkere personlighed, men du får mest ud af det, når du bruger det med skiftede tekststørrelser, som vist i temaforhåndsvisningen fra WordPress.org-blogindlægget:

Twenty Twenty typografi: påvirkning og læsbarhed

Twenty Twenty typografi: påvirkning og læsbarhed

Mere end et fuldt udstyret tema, Twenty Twenty er et tema, der markerer et vigtigt nyt skridt mod den fremtidige udvikling af WordPress’ redigeringsgrænseflade. Twenty Twenty er i det væsentlige afhængige af Block Editor til redigering og layout af indholdet og på Theme Customizer til header, sidefod og yderligere tilpasninger.

Når det er sagt, er det tid for os at installere dette WordPress-tema og køre det.

Sådan installeres Twenty Twenty

Det kommende standardtema følger WordPress 5.3-frigørelsesplanen. Det betyder, at på det tidspunkt, dette skrives, er Twenty Twenty stadig ikke tilgængelige til download i WordPress tema depotet.

I hvert fald kan du downloade en igangværende version af Twenty Twenty på GitHub og installere den i den aktuelle stabile version af WordPress eller få den med WordPress 5.3. Github-depotet udskrives, når temaet er fusioneret til kernen. I mellemtiden ønsker du måske at gemme følgende datoer fra WordPress 5.3-frigørelsesplan:

Følg nedenstående trin for at komme i gang med Twenty Twenty:

Og det er det! Du kan nu begynde at køre dine test enten på dit scenesite eller på dit lokale miljø

Important

Twenty Twenty er i øjeblikket under udvikling, og mange problemer er endnu ikke rettet. Du bør ikke bruge det i produktionen.

Et åbent emne på GitHub

Et åbent emne på GitHub

Nu hvor du er klar til at gå, lad os gå videre og dykke i Twenty Twenty WordPress-temaet.

Twenty Twenty’s Theme Features

Twenty Twenty er ikke et fuldt udstyret WordPress-tema, men et indskrænket og minimalt tema, der sigter mod at give udviklere og site admins friheden til at oprette tilpassede indholdslayouts til deres indlæg og sider. Ligesom Twenty Nineteen er Twenty Twenty blevet bygget til Gutenberg og afhænger hovedsageligt af Gutenbergs livscyklus (mere om dette emne i denne video af Matt Mullenweg på WCEU 2019).

Temaet understøtter en række temafunktioner som indholdsbredde (580), automatiske feedlink, indlægs-miniaturer, titel tag og flere HTML5-elementer (søgeform, kommentarform, kommentarliste, galleri og billedtekst).

Andre funktioner tilføjer indstillinger til Theme Customizer. Disse inkluderer tilpassede baggrunde og brugerdefineret logo. Kodestykker herunder viser disse funktioner aktiveret i temaets funktionsfil:

// Custom background color
add_theme_support(
	'custom-background',
	array(
		'default-color'	=> 'F5EFE0'
	)
);
// Custom logo
add_theme_support(
	'custom-logo',
	array(
		'height'      => 240,
		'width'       => 320,
		'flex-height' => true,
		'flex-width'  => true,
		'header-text' => array( 'site-title', 'site-description' ),
	)
);
Tema-tilpasser i Twenty Twenty

Tema-tilpasser i Twenty Twenty

Twenty Twenty understøtter også nogle af Gutenbergs specifikke funktioner. Først understøtter temaet brede og fulde bredde tilpasninger:

// Add support for full and wide align images.
add_theme_support( 'align-wide' );

Editorens farvepalet er aktiveret, hvis brugeren indstiller en accentfarve i Customizer (aktiveret som standard):

// If we have accent colors, add them to the block editor palette
if ( $editor_color_palette ) {
	add_theme_support( 'editor-color-palette', $editor_color_palette );
}
Tilpasning af farver i Twenty Twenty

Tilpasning af farver i Twenty Twenty

Temaet Twenty Twenty leveres med fire editor-fontstørrelser, der er tilgængelige i Block Editor:

// Gutenberg Font Sizes
add_theme_support( 'editor-font-sizes', array(
	array(
		'name' 		=> _x( 'Small', ''Navn på den lille skriftstørrelse i Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'S', ''Kort navn på den lille skriftstørrelse i Gutenberg.', 'twentytwenty' ),
		'size' 		=> 16,
		'slug' 		=> 'small',
	),
	array(
		'name' 		=> _x( 'Regular', ''Navn på den almindelige skriftstørrelse i Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 18,
		'slug' 		=> 'regular',
	),
	array(
		'name' 		=> _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'L', 'Kort navn på den almindelige skriftstørrelse i Gutenberg-editoren.', 'twentytwenty' ),
		'size' 		=> 24,
		'slug' 		=> 'large',
	),
	array(
		'name' 		=> _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 32,
		'slug' 		=> 'larger',
	),
) );
Skriftstørrelser i redaktørens blok Tekstindstillinger

Skriftstørrelser i redaktørens blok Tekstindstillinger

Og det er det. Temaet er også ganske minimalt i funktionalitet, men det kan let udvides med et underordnet tema, og vi vil dykke ind i det om et øjeblik.

Sådan tilpasses udseendet på Twenty Twenty

Twenty Twenty comes free from any bells and whistles but provides great flexibility when used in tandem with Gutenberg (or with a good page builder).

Tilpasning af Twenty Twenty tema

Site Identity håndterer webstitens titel og tagline, logo og ikon. Du kan aktivere / deaktivere alle disse elementer i afsnittet Site Identity i Customizer:

Webstedsidentitet i Customizer's indstillinger

Webstedsidentitet i Customizer’s indstillinger

Afsnittet Customizers Cover Template håndterer tilpasningsindstillingerne for sideskabelonen til Cover Template. Der finder du:

Afsnittet Cover Template i Customizer

Afsnittet Cover Template i Customizer

Menusektionen indeholder fem menuplaceringer. Du kan inkludere en almindelig vandret menu i overskriften (Desktop Horizontal Menu) og / eller en skiftbar navigationsmenu (Desktop Expanded Menu). Mobilmenuen er en bestemt menu til mobile enheder, og Footer Menu og Social Menu findes i sidefoden.

Menupositioner i Twenty Twenty

Menupositioner i Twenty Twenty

Sidefoden håndterer placering af sidefoden og Social menu sammen med to widgetområder. Følgende billede viser sidefoden med temaet med alle dets elementer på plads:

Skabelonfodtekst i Twenty Twenty

Skabelonfodtekst i Twenty Twenty

Endelig tillader afsnittet Yderligere CSS dig at inkludere dine tilpassede stilarter.

Enkelt indlæg / sideskabeloner

Når det kommer til indlæg og sidelayout, kan du vælge mellem tre forskellige skabeloner. Udover standardskabelonen giver Twenty Twenty en Cover-skabelon og en fuld bredde-skabelon, du kan lege med for at tilpasse udseendet og fornemmelsen af dit indhold.

Enkelt indlæg / sideskabeloner i Twenty Twenty

Enkelt indlæg / sideskabeloner i Twenty Twenty

Blokeditoren i Twenty Twenty

På grund af sin minimale tilgang er Twenty Twenty’s udseende mest afhængig af Block Editor. Vi kører vores tests på Twenty Twenty med Gutenberg version 6.4.0. Denne version giver et godt antal nye funktioner, forbedringer og fejlrettelser, der forbedrede redigeringsoplevelsen markant.

Nogle blokke er nyttige, især når man bygger websteder på en side. Blokke som Media & Text og Cover er blevet forbedret og ser nu godt ud, når det kommer til at præsentere produkter og / eller professionelle porteføljer:

Medie- og tekstblok

Medie- og tekstblok (fuld med justering)

Da Gutenberg stadig er et igangværende projekt, kan du måske tage et kig på nogle af de mest populære plugins, der giver mulighed for at tilføje flere blokke til redaktøren.

Her er en hurtig liste over plugins, der kan være værd at prøve:

Theme Customizer og Block Editor gør et godt stykke arbejde, når det kommer til udseende og layout tilpasning, men et child theme kan give dig større kontrol over udseendet og følelsen af ​​dine sider.

Sådan opretter du et child theme til det Twenty Twenty tema

At opbygge child themes til WordPress kan være sjovt og også en god måde at starte en karriere som WordPress-temaudvikler på og Twenty Twenty kunne være et godt parent theme, når man bygger child temaer i WordPress. Så hvorfor prøver du ikke det? 😉

Hvis du ikke ved, hvor du skal starte med underordnede temaer, skal du sørge for at se vores udvidede guide til Sådan opretter du et child theme i WordPress.

Træt af at opleve problemer med dit WordPress site? Få den bedste og hurtigste hostingsupport med Kinsta! Check vores planer

Lad os nu opbygge vores første child theme for Twenty Twenty!

Opret et nyt bibliotek under wp-content/themes, og navngiv det noget som twentytwenty-child eller hvad du end vil.

Gennemse til wp-content/temes/twentytwenty-child og opret en ny style.css-fil med følgende overskrift:

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

Dernæst skal vi medtage det overordnede tema’s stilark. Opret i samme bibliotek følgende funktioner.php-fil:

<?php
/* enqueue scripts and style from parent theme */        
function twentytwenty_styles() {
	wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentytwenty_styles');

Gå nu til Udseende → Temaer og aktiver dit child theme. Du kan nu starte med dine tilpasninger.

Aktivér child theme

Aktivér child theme

Du kan ændre næsten alt i 20 Twenty Twenty, fra tilføjelse af tilpassede skabeloner til tilføjelse af dine brugerdefinerede stilarter eller ændring af temaets standardformater.

Her vil jeg vise dig, hvordan du opretter en ny brugerdefineret skabelon til enkeltindlæg og sider.

Tilføjelse af en brugerdefineret post / sideskabelon i Twenty Twenty

Indtil videre har vi oprettet et child theme for Twenty Twenty og knyttet de overordnede stilarter til child themes typografiark. I eksemplet herunder slipper vi for overskriften og sidefoden og gør plads til sidens body i et indlæg / sideskabelonfil.

Trin 1

Kopier og indsæt følgende filer fra overordnet tema til bibliotekets child theme:

Trin 2

Omdøb template-full-width.php til template-canvas.php (eller hvad du end vil). Åbn filen, slet det aktuelle indhold, og indsæt følgende:

<?php
/*
Template Name: Canvas Template
Template Post Type: post, page
*/
get_template_part( 'singular' );

Skabelonnavn indstiller navnet på skabelonfilen, som du kan se den i Block Editor, mens skabelonens posttype definerer de posttyper, der understøtter denne skabelonfil. Funktionen get_template_part indlæser singular.php fra overordnet tema (vi har ikke brug for en kopi af denne fil i vores child theme).

Gå til WordPress-betjeningspanelet, og opret et nyt indlæg. Nu vil du finde en yderligere sideskabelon i afsnittet Indlæg Attributter.

En ny skabelon er tilgængelig i indlægs-attributter

En ny skabelon er tilgængelig i indlægs-attributter

Trin 3

Og nu kommer den sjove del. Åbn header.php i din foretrukne teksteditor, og indpak header elementet inde i følgende, if sætning:

<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
	<header id="site-header" class="header-footer-group" role="banner">
		...
	</header><!-- #site-header -->

	<?php 
	// Output the menu modal
	get_template_part( 'template-parts/modal-menu' );
}

Denne kode kontrollerer, om sideskabelonen ikke er templates/template-canvas.php. Hvis sideskabelonen er is templates/template-canvas.php, inkluderer den ikke webstedsoverskriften og modalmenuen.

På samme måde kan vi fjerne sidefoden fra en postside, når den aktive sideskabelon er vores lærred. Bare tilføj den samme betingelse i footer.php som vist nedenfor:

<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
	<footer id="site-footer" role="contentinfo" class="header-footer-group">
	...
	</footer><!-- #site-footer -->
<?php } ?>
	<?php wp_footer(); ?>

    </body>
</html>

Du kan downloade koden til dette eksempel her. Opret nu et nyt indlæg eller en side, vælg lærredskabelonen i egenskaber for indlæg / side og kontroller siden på forsiden.

Vi kiggede nærmere på det nye WordPress-standardtema Twenty Twenty. Se alle de vigtigste funktioner, du har brug for at vide noget om! 🆕②⓪②⓪Click to Tweet

Resumé

Twenty Twenty er et minimalistisk WordPress-tema med et enkelt kolonnelayout. Den måde, vi bruger den på, afhænger hovedsageligt af udviklingen af ​​Block Editor. Som Anders udtrykkeligt siger det:

”Løftet fra Block Editor er at give brugerne friheden til at designe og strukturere deres websteder, som de synes passende”.

Efter Twenty Nineteen er det nye Twenty Twenty standardtema det andet i en ny generation af temaer, der sigter mod at “tillade opbygning af websteder uden manuel kodedigering”.

Hvis du mener, at Gutenberg stadig ikke er helt pålidelig til dine projekter endnu, kan du tilføje de blokke, du har brug for med plugins som dem, der er anført ovenfor. Eller simpelthen kan du omfavne en tredjeparts sidebygger.

Op til dig nu: Installer det nye standard WordPress-tema, leg med det, og lad os vide, hvad dine tanker er her i kommentarerne!


Hvis du godt kunne lide denne artikel, så vil du elske Kinstas WordPress hostingplatform. Boost dit website og få 24/7 support fra vores WordPress-ekspertteam. Vores Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta-forskellen! Tjek vores planer