Twenty Twenty är WordPress nya standardtema som kommer med den senaste versionen av WordPress 5.3. Liksom föregångaren Twenty Nineteen har Twenty Twenty designats med särskilt fokus på Gutenberg. Det finns dock en stor skillnad mellan de två: Twenty Twenty är inte byggt från grunden; det är utformat på ett befintligt tema från WordPress-gemenskapen istället.
Eftersom vi älskar allt om WordPress, tog vi en närmare titt på det nya Twenty Twenty-temat, kikade in i functions.php-filen, stilmallen och mallarna.
Även om Twenty Twenty är långt ifrån att vara någorlunda stabil – vid skrivande stund – med många problem fortfarande olösta, delar vi idag med oss av våra allra första tankar om det nya standardtemat
Låt oss dyka in WordPress-temat Twenty Twenty!
Snabbt intro till Twenty Twenty-temat
Twenty Twenty har byggts på Chaplin, ett gratis WordPress-tema av Anders Norén som också är huvuddesigner för standardtemat för WordPress 5.3.
Chaplin är tillgängligt för nedladdning i WordPress.org-arkivet och enligt Anders har det byggts med Blockredigeraren i åtanke:
Chaplin är ett funktionsspäckat WordPress-tema som ger dig full kontroll över HTML-typsnitt och färger på din webbplats. Det är byggt från grunden med den nya Blockredigeraren i åtanke och gör det enkelt att skapa snygga layouter på både inlägg och sidor.
Samma filosofi ligger bakom Twenty Twenty: flexibilitet, tydlighet och läsbarhet är fokus-sökord för det nya temat.
Twenty Twenty kommer med en enda kolumnlayout och tre inläggs/sidmallar, som syftar till att ge WordPress-administratörer och designers frihet att skapa sina egna layouter direkt i Blockredigeraren genom att dra nytta av breda och fulla anpassningar för blockelement som kolumner, bilder och gruppblocket introducerat med Gutenberg 5.5.
Som Anders förklarar:
Twenty Twenty är utformat med flexibilitet i kärnan. Om du vill använda det för en organisation eller ett företag kan du kombinera kolumner, grupper och media med breda och fullbreda anpassningar för att skapa dynamiska layouter för att visa upp dina tjänster eller produkter. Om du vill använda det till en traditionell blogg, är den centrerade innehållskolumnen perfekt för det också.
Förutom det kommer Twenty Twenty med ett nytt typsnitt: Inter. Det är en gratis och öppen källkod-typsnittsfamilj designad av Rasmus Andersson speciellt för läsbarhet för text med blandade versaler och gemener, särskilt vid små teckenstorlekar.
Inter ger en starkare personlighet till stora rubriker, men du får ut det mesta av det när du använder det med blandade textstorlekar, som visas i tema-förhandsgranskningen från WordPress.orgs blogginlägg:
Twenty Twenty är mer än ett fullfjädrat tema, det är ett tema som markerar ett viktigt nytt steg mot den framtida utvecklingen av WordPress redigerings-UI. Twenty Twenty bygger i huvudsak på Blockredigeraren för redigering och placering av innehållet, och på Theme Customizern för sidhuvud, sidfot och ytterligare anpassningar.
Med det sagt är det dags för oss att installera detta WordPress-tema och köra det.
Så installerar du Twenty Twenty
Den kommande standardtemat kommer att följa WordPress 5.3 release-plan. Detta innebär, vid skrivande stund, att Twenty Twenty fortfarande inte är tillgängligt för nedladdning i WordPress tema-katalog.
Hur som helst kan du ladda ner en pågående version av Twenty Twenty på GitHub och installera det i den nuvarande stabila versionen av WordPress eller skaffa det med WordPress 5.3. GitHub-arkivet kommer att avvecklas när temat slås samman till kärnan. Under tiden kanske du vill spara följande datum från WordPress 5.3 release-schema:
- 23 September 2019: Beta 1
- 30 September 2019: Beta 2
- 7 oktober 2019: Beta 3
- 15 oktober 2019: Release-kandidat 1
- 22 oktober 2019: Release-kandidat 2
- 29 oktober 2019: Release-kandidat 3
- 5 November 2019: Release-kandidat 4 (om det behövs)
- 12 November 2019: Måldatum för release av WordPress 5.3.
För att komma igång med Twenty Twenty, följ stegen nedan:
- Hämta zip-paketet från GitHub.
- Ladda upp zip-filen till din utvecklingsinstallation i WordPress-panelen 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.
Och det var allt! Du kan nu börja köra dina tester antingen på din stagingwebbplats eller på din lokala miljö.
Nu när du är redo att gå, låt oss gå vidare och dyka in i WordPress-temat Twenty Twenty.
Twenty Twenty Tema-funktioner
Twenty Twenty är inte ett fullfjädrat WordPress-tema, men ett nedkrympt och minimalt tema som syftar till att ge utvecklare och webbplatsadministratörer frihet att bygga anpassade innehållslayouter för sina inlägg och sidor. Liksom Twenty Nineteen har Twenty Twenty byggts för Gutenberg och förlitar sig mestadels på Gutenbergs livscykel (mer om detta ämne i den här videon av Matt Mullenweg på WCEU 2019).
Temat stöder ett antal temafunktioner som innehållsbredd (580), automatiska feed-länkar, inläggsminiatyrer, titeltaggar och flera HTML5-element (sökformulär, kommentarformulär, kommentarlista, galleri och bildtext).
Andra funktioner lägger till alternativ till Theme Customizer. Dessa inkluderar anpassade bakgrunder och anpassad logotyp. Kodavsnitten nedan visar dessa funktioner aktiverade i temats functions-fil:
// 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 stöder också några av Gutenbergs specifika egenskaper. För det första stöder temat breda och fullbredds-justeringar:
// Add support for full and wide align images.
add_theme_support( 'align-wide' );Redigerarens färgpalett är aktiverad om användaren anger en accentfärg i Customizer (aktiverad 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 );
}
Twenty Twenty-temat kommer med fyra teckensnittsstorlekar som finns i blockredigeraren:
// Gutenberg Font Sizes
add_theme_support( 'editor-font-sizes', array(
array(
'name' => _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
'size' => 16,
'slug' => 'small',
),
array(
'name' => _x( 'Regular', 'Name of the regular font size in 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', 'Short name of the large font size in the Gutenberg editor.', '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',
),
) );
Och det är allt. Temat är ganska minimalt också i funktionalitet, men det är lätt att förlänga med ett barntema, och vi dyker in i det om en liten stund.
Så anpassar du utseendet på Twenty Twenty
Twenty Twenty kommer fri från alla extrafinesser, men ger stor flexibilitet när det används tillsammans med Gutenberg (eller med en bra sidbyggare).
Anpassa Twenty Twenty-temet
Webbplatsidentitet hanterar webbplatstitel och tagline, logotyp och ikon. Du kan aktivera/inaktivera alla dessa element i avsnittet Webbplatsidentitet i Customizer:
Customizer-avsnittet ”Omslagsmall” hanterar anpassningsinställningarna för sidmallen Omslagsmall. Där hittar du:
- Ett alternativ för att aktivera en parallax-effekt på bakgrundsbilden (fast bakgrundsbild).
- Färgväljare för att ställa in din anpassade bakgrundsfärg och textfärg för overlay över den utvalda bilden.
- En slider för att styra overlay-opacitet.
Avsnittet Menyer innehåller fem menyplatser. Du kan inkludera en vanlig horisontell meny i headern (Stationär horisontell meny) och/eller en växlingsbar navigeringsmeny (Stationär expanderad meny). Den mobila menyn är en specifik meny för Mobila enheter, och Sidfotmenyn och Sociala menyn finns i sidfoten.
Sidfoten hanterar Sidfotmenyn och Sociala meny-platserna tillsammans med två widget områden. Följande bild visar temats sidfot med alla dess element på plats:
Slutligen, låter avsnittet Ytterligare CSS dig att inkludera dina egna stilar.
Enstaka Inlägg/Sidmallar
När det gäller inlägg- och sidlayouter kan du välja mellan tre olika mallar. Förutom standardmallen, ger Twenty Twenty en Omslagsmall och en Fullbreddsmall du kan leka med för att anpassa utseendet på ditt innehåll.
Blockredigeraren i Twenty Twenty
På grund av dess minimala tillvägagångssätt bygger Twenty Twentys utseende mestadels på Blockredigeraren. Vi kör våra tester på Twenty Twenty med Gutenberg version 6.4.0. Den här versionen ger ett bra antal nya funktioner, förbättringar och buggfixar som väsentligt förbättrade redigeringsupplevelsen.
Vissa block kommer väl till pass, särskilt när man bygger ensides-webbplatser. Block som Media & Text och Omslag har förbättrats och ser nu bra ut när det gäller att presentera produkter och/eller professionella portfolios:
Eftersom Gutenberg är ett pågående projekt, kanske du vill ta en titt på några av de mest populära pluginsen som gör det möjligt att lägga till fler block till redigeraren.
Här är en snabb lista över plugins som kan vara värt ett försök:
Theme Customizer och Blockredigeraren gör ett bra jobb när det gäller utseende och layout-anpassning, men ett barntema kan ge dig större kontroll över utseendet på dina sidor.
Så skapar du ett barntema för Twenty Twenty-temat
Att bygga barnteman för WordPress kan vara roligt och också ett bra sätt att starta en karriär som WordPress-temautvecklare och Twenty Twenty kan vara ett bra föräldratema när man bygger barnteman i WordPress. Så varför gör du inte ett försök? 😉
Om du inte vet var du ska börja med barnteman, se till att kolla in vår utökade guide om hur du skapar ett barntema i WordPress.
Skapa en ny katalog under wp-content/themes och namnge det något som twentytwenty-child eller vad du vill.
Bläddra till wp-content/themes/twentytwenty-child och skapa en ny style.css-fil med följande rubrik:
/*
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
*/Därefter måste vi inkludera föräldratemats stilmall. I samma katalog skapar du följande functions.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 till Utseende → Teman och aktivera ditt barntema. Du kan nu börja med dina anpassningar.
Du kan ändra nästan vad som helst i Twenty Twenty, från att lägga till egna mallar till dina egna stilar eller ändra temats standardformat.
Här visar jag dig hur du skapar en ny anpassad mall för enskilda inlägg och sidor.
Lägga till en anpassad inlägg/sidmall i Twenty Twenty
Hittills har vi skapat ett barntema för Twenty Twenty och bifogat föräldrastilarna till barntemats stilmall. I exemplet nedan kommer vi att göra oss av med sidhuvudet och sidfoten, vilket gör plats för sidans kropp i en inlägg/sidmallfil.
Steg 1
Kopiera och klistra in följande filer från föräldratemat till barntemats katalog:
- templates/template-full-width.php
- header.php
- footer.php
Steg 2
Döp om template-full-width.php till template-canvas.php (eller vad du vill). Öppna filen, ta bort det aktuella innehållet och klistra in följande:
<?php
/*
Template Name: Canvas Template
Template Post Type: post, page
*/
get_template_part( 'singular' );Mallnamn anger namnet på mallfilen som du ser den i Blockredigeraren, Medan Mall inläggstyp definierar inläggstyperna som stöder den här mallfilen. Funktionen get_template_part laddar singular.php-filen från föräldratemat (vi behöver inte en kopia av den här filen i vårt barntema).
Gå till WordPress-panelen och skapa ett nytt inlägg. Nu ska du hitta en ytterligare sidmall i avsnittet Inläggsattribut.
Steg 3
Och nu kommer den roliga delen. Öppna header.php i din favorit textredigerare och slå in header-elementet i följande if-funktion:
<?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' );
}Den här koden kontrollerar om om sidmallen inte är templates/template-canvas.php. Om sidmallen är templates/template-canvas.php, då kommer det inte att inkludera sidhuvudet och modal-menyn.
På samma sätt kan vi ta bort sidfoten från en inläggssida när den aktiva sidmallen är vår canvas. Lägg bara till samma villkor i footer.php som visas nedan:
<?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 ladda ner koden för detta exempel här.
Skapa nu ett nytt inlägg eller en sida, välj Canvasmallen i Inlägg/Sidattribut och kontrollera sidan på frontenden.
Sammanfattning
Twenty Twenty är ett minimalistiskt WordPress-tema, med en layout med en enda kolumn. Hur vi använder det beror oftast på utvecklingen av Blockredigeraren. Som Anders uttryckligen säger:
”Löftet hos Blockredigeraren är att ge användarna frihet att designa och strukturera sina webbplatser som de själva vill”.
Efter Twenty Nineteen är Twenty Twenty det andra nya standardtemat i en ny generation av teman som syftar till att ”tillåta byggandet av webbplatser utan manuell kodredigering”. WordPress-webbplatser som drivs av Twenty Twenty-temat finns i alla former och storlekar. För att ta reda på om ett tema använder Twenty Twenty, kolla in vårt praktiska temadetektorverktyg för WordPress.
Om du tror att Gutenberg fortfarande inte är helt tillförlitlig för dina projekt ännu, kan du lägga till de block du behöver med plugins som de som anges ovan. Eller, helt enkelt, använda en tredjeparts sidbyggare.
Up to you now: install the new default WordPress theme, play around with it, and let us know what your thoughts are here in the comments!
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