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!
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 HTML 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.
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.
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:
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:
- september 2019: Beta 1
- september 2019: Beta 2
- oktober 2019: Beta 3
- oktober 2019: Frigørelse af kandidat 1
- oktober 2019: Frigørelse af kandidat 2
- oktober 2019: Frigørelse af kandidat 3
- november 2019: Frigørelse af kandidat 4 (hvis nødvendigt)
- november 2019: Måldato for frigivelse af WordPress 5.3.
Følg nedenstående trin for at komme i gang med Twenty Twenty:
- Hent zip-pakken fra GitHub.
- Upload zip-filen til din udviklingsinstallation i WordPress-dashboard eller via SFTP.
- Gennemse til Udseende → Temaer, og klik på Aktivér-knappen på tematets eksempelbillede.
- Gå til Udseende → Tilpas for at konfigurere 20 Twenty Twenty.
Og det er det! Du kan nu begynde at køre dine test enten på dit scenesite eller på dit lokale miljø
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' ),
)
);
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 );
}
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',
),
) );
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 kommer fri for en masse lækre features, men giver stor fleksibilitet, når det bruges sammen med Gutenberg (eller med en god sidebygger).
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:
Afsnittet Customizers Cover Template håndterer tilpasningsindstillingerne for sideskabelonen til Cover Template. Der finder du:
- En mulighed for at aktivere en parallax effekt på baggrundsbilledet (Fast baggrundsbillede).
- Farvevælger til at indstille din brugerdefinerede baggrundsfarve og tekstfarve til det fremhævede billedoverlay.
- En skyder til at kontrollere overlayets opacitet.
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.
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:
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.
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:
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.
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.
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:
- templates/template-full-width.php
- header.php
- footer.php
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.
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.
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”. WordPress-websteder drevet af Twenty Twenty-temaet kommer i alle former og størrelser. For at finde ud af, om et tema bruger Twenty Twenty, skal du tjekke vores praktiske WordPress-tema detektor værktøj.
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!
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.
Skriv et svar