Wordpress

Twenty Twenty: Kynning á nýju sjálfgefna WordPress þema

Twenty Twenty er nýja sjálfgefna WordPress þema sem kemur með nýjustu útgáfunni af WordPress 5.3. Eins og forverinn Twenty Nineteen hefur Twenty Twenty verið hannaður með sérstaka áherslu á Gutenberg. Það er þó mikill munur á þessu tvennu: Twenty Twenty er ekki byggt frá grunni; það er hannað eftir núverandi þema frá WordPress samfélaginu í staðinn.

Þar sem við elskum allt við WordPress, skoðuðum við nýja Twenty Twenty þemað nánar, skoðuðum function.php skrána, stílblaðið og sniðmátin.

Jafnvel þótt Twenty Twenty sé langt frá því að vera nokkuð stöðugur - þegar þetta er skrifað - með mörg vandamál enn óleyst, í dag munum við deila með þér fyrstu hugsunum okkar um nýja sjálfgefna WordPress þema.

Við skulum kafa inn í Twenty Twenty WordPress þema!

Tuttugu Tuttugu forsýning
Forskoðun Twenty Twenty WordPress þema (Myndheimild: Gerðu WordPress Core)

Fljótleg kynning á tuttugu og tuttugu þemanu

Twenty Twenty hefur verið byggt á Chaplin, ókeypis WordPress þema eftir Anders Norén sem er einnig sjálfgefinn þemahönnunarstjóri WordPress 5.3.

Chaplin er hægt að hlaða niður í WordPress.org geymslunni og, að sögn Anders, hefur það verið smíðað með Block Editor í huga:

Chaplin er lögun-pakkað WordPress þema sem gefur þér fulla stjórn á HTML leturgerðum og litum á síðunni þinni. Hann er byggður frá grunni með nýja Block Editor í huga og gerir það auðvelt að búa til flott útlit bæði á færslum og síðum.

Chaplin WordPress þema
Chaplin WordPress þema

Sama heimspeki situr að baki Twenty Twenty: sveigjanleiki, skýrleika, og sýnilegur eru lykilorðin fyrir nýja þemað.

Twenty Twenty kemur með einni dálkuppsetningu og þremur póst-/síðusniðmátum, sem miða að því að gefa WordPress stjórnendum og hönnuðum frelsi til að búa til sérsniðnar útlit sitt beint í blokkaritillinn með því að nýta sér víðtæka og fullkomna röðun fyrir blokkaþætti eins og dálka, myndir og hópblokkinn sem kynntur var með Gutenberg 5.5.

Eins og Anders útskýrir:

Twenty Twenty er hannað með sveigjanleika í grunninn. Ef þú vilt nota það fyrir stofnun eða fyrirtæki geturðu sameinað dálka, hópa og miðla með breiðum og fullri röðun til að búa til kraftmikið skipulag til að sýna þjónustu þína eða vörur. Ef þú vilt nota það fyrir hefðbundið blogg, þá gerir miðlægur efnisdálkur hann fullkominn fyrir það líka.

Fyrir utan það kemur Twenty Twenty með nýtt leturgerð: Inter. Þetta er ókeypis og opinn leturfjölskylda hönnuð af Rasmus Andersson sérstaklega fyrir læsileika blönduðra og lágstafa texta, sérstaklega með litlum leturstærðum.

Inter leturgerð
Inter leturgerð fjölskyldan

Inter gefur stórum hausum sterkari persónuleika, en þú munt fá sem mest út úr því þegar þú notar það með mismunandi textastærðum, eins og sýnt er í þemaforskoðuninni frá WordPress.org bloggfærslunni:

tuttugu og tuttugu á skjáborðinu
Tuttugu Tuttugu leturfræði: áhrif og læsileiki

Meira en fullkomið þema, Twenty Twenty er þema sem markar mikilvægt nýtt skref í átt að framtíðarþróun klippingarviðmóts WordPress. Twenty Twenty treystir í meginatriðum á blokkaritillinn til að breyta og setja upp innihaldið og á þemasérsniðinu fyrir haus, fót og viðbótaraðlögun.

Með því að segja, þá er kominn tími fyrir okkur að setja upp þetta WordPress þema og keyra það.

Hvernig á að setja upp Twenty Twenty

Væntanlegt sjálfgefið þema mun fylgja WordPress 5.3 útgáfuáætluninni. Þetta þýðir að þegar þetta er skrifað er Twenty Twenty enn ekki hægt að hlaða niður í WordPress þemaskránni.

Engu að síður, þú getur halað niður útgáfu af Twenty Twenty í vinnslu á GitHub og sett hana upp í núverandi stöðugu útgáfu WordPress eða fengið hana með WordPress 5.3. Github geymslan verður úrelt þegar þemað er sameinað í kjarna. Í millitíðinni gætirðu viljað vista eftirfarandi dagsetningar úr útgáfuáætlun WordPress 5.3:

  • 23. september 2019: Beta 1
  • 30. september 2019: Beta 2
  • 7. október 2019: Beta 3
  • 15. október 2019: Frambjóðandi 1
  • 22. október 2019: Frambjóðandi 2
  • 29. október 2019: Frambjóðandi 3
  • 5. nóvember 2019: Losun umsækjandi 4 (ef þörf krefur)
  • 12. nóvember 2019: Markmiðsdagur fyrir útgáfu WordPress 5.3.

Til að byrja með Twenty Twenty skaltu fylgja skrefunum hér að neðan:

  1. Fáðu zip pakkann frá GitHub.
  2. Hladdu upp zip skránni í þróunaruppsetninguna þína á WordPress mælaborðinu eða í gegnum SFTP.
  3. Flettu að Útlit → Þemu og smelltu á Virkja hnappinn á forskoðunarmynd þemunnar.
  4. Fara á Útlit → Aðlaga til að stilla Twenty Twenty.

Og þannig er það! Þú getur nú byrjað að keyra prófin þín annað hvort á sviðsetningarvefsíðunni þinni eða á þínu staðbundnu umhverfi.

mikilvægt

Twenty Twenty er í þróun og mörg vandamál hafa ekki verið lagfærð ennþá. Þú ættir ekki að nota það í framleiðslu.

Tuttugu Tuttugu: sniðmát í fullri breidd
Opið mál á GitHub

Nú þegar þú ert tilbúinn til að fara, skulum við halda áfram og kafa í Tuttugu Tuttugu WordPress þema.

Prófaðu WordPress þemu auðveldlega áður en þú ferð í framleiðslu með sviðsetningarsíðunum okkar með einum smelli. Reyndu Behmaster frítt.

“}” data-sheets-userformat='{“2″:6659,”3”:{“1″:0},”4”:{“1″:2,”2″:16777215},”12″:0,”14”:{“1″:2,”2″:0},”15″:”Roboto, RobotoDraft, Helvetica, Arial, sans-serif”}’>

Prófaðu WordPress þemu auðveldlega áður en þú ferð í framleiðslu með sviðsetningarsíðunum okkar með einum smelli. Reyndu Behmaster frítt.

Twenty Twenty's Theme Features

Twenty Twenty er ekki fullkomið WordPress þema, heldur niðurskorið og lágmarks þema sem miðar að því að gefa forriturum og stjórnendum vefsins frelsi til að búa til sérsniðið efnisútlit fyrir færslur sínar og síður. Eins og Twenty Nineteen, hefur Twenty Twenty verið smíðað fyrir Gutenberg og fer að mestu eftir lífsferli Gutenbergs (meira um þetta efni í þessu myndbandi af Matt Mullenweg á WCEU 2019).

Þemað styður fjölda þemaeiginleika eins og efnisbreidd (580), sjálfvirkir straumtenglar, smámyndir pósta, titilmerki og nokkrir HTML5 þættir (leitareyðublað, athugasemdareyðublað, athugasemdalisti, myndasafn og yfirskrift).

Aðrir eiginleikar bæta valmöguleikum við Þema Customizer. Þetta felur í sér sérsniðna bakgrunn og sérsniðið lógó. Kóðabútarnir hér að neðan sýna þessa eiginleika virka í aðgerðaskrá þemunnar:

// 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' ),
	)
);
Theme Customizer í Twenty Twenty
Theme Customizer í Twenty Twenty

Twenty Twenty styður einnig suma af sérstökum eiginleikum Gutenbergs. Í fyrsta lagi styður þemað breidd og fullri breidd röðun:

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

The litaspjald ritstjóra er virkt ef notandinn stillir hreim lit í sérsniðnum (sjálfgefið virkt):

// 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 );
}
Sérsníða liti í Twenty Twenty
Sérsníða liti í Twenty Twenty

Tuttugu og tuttugu þemað kemur með fjórum leturstærðir ritstjóra fáanlegt í Block Editor:

// 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',
	),
) );
Leturstærðir í ritstjórablokkinni Textastillingar
Leturstærðir í ritstjórablokkinni Textastillingar

Og þannig er það. Þemað er líka í lágmarki hvað varðar virkni, en það er auðvelt að stækka það með barnaþema og við munum kafa ofan í það eftir eina mínútu.

Hvernig á að sérsníða útlit Tuttugu og Tuttugu

Twenty Twenty kemur laus við allar bjöllur og flautur en veitir mikinn sveigjanleika þegar það er notað samhliða Gutenberg (eða með góðum síðugerð).

Að sérsníða Twenty Twenty þemað

The Sjálfsmynd staðarins sér um titil vefsvæðis og tagline, lógó og táknmynd. Þú getur virkjað/slökkt á öllum þessum þáttum í Sjálfsmynd staðarins hluta Customizer:

Site Identity í stillingum Customizer
Site Identity í stillingum Customizer

Customizer's Forsíðusniðmát kafla sér um aðlögunarstillingar fyrir Forsíðusniðmát sniðmát síðu. Þar finnur þú:

  • Valkostur til að virkja parallax áhrif á bakgrunnsmyndina (Föst bakgrunnsmynd).
  • Litavalsarar til að stilla sérsniðna bakgrunnslit og textalit fyrir yfirlit yfir mynd.
  • Renna til að stjórna ógagnsæi yfirborðs.
Forsíðusniðmáthlutinn í Customizer
Forsíðusniðmáthlutinn í Customizer

The Valmyndir kafla veitir fimm valmyndarstaðir. Þú getur sett venjulega lárétta valmynd í hausinn (Lárétt valmynd skrifborðs) og/eða valmynd sem hægt er að skipta um (Stækkuð valmynd fyrir skjáborð). The Farsímavalmynd er sérstakur valmynd fyrir farsíma, og Footer Valmynd og Félagslegur matseðill eru staðsettar í síðufótinum.

Valmyndir í Twenty Twenty
Valmyndir í Twenty Twenty

Fóturinn sér um staðsetningu fótavalmyndar og félagsvalmyndar ásamt tveimur búnaðarsvæðum. Eftirfarandi mynd sýnir fætur þemunnar með öllum þáttum þess á sínum stað:

Sniðmátsfótur í Twenty Twenty
Sniðmátsfótur í Twenty Twenty

Að lokum, Viðbótarupplýsingar CSS kafla gerir þér kleift að láta sérsniðna stíla fylgja með.

Sniðmát fyrir staka færslu/síðu

Þegar kemur að uppsetningu pósta og síðna geturðu valið úr þremur mismunandi sniðmátum. Fyrir utan sjálfgefna sniðmátið veitir Twenty Twenty a Kápa sniðmát og a Sniðmát með fullri breidd þú getur spilað með til að sérsníða útlit og tilfinningu efnisins þíns.

Sniðmát fyrir staka færslu/síðu í Twenty Twenty
Sniðmát fyrir staka færslu/síðu í Twenty Twenty

The Block Editor í Twenty Twenty

Vegna lágmarks nálgunar, treystir útlit Twenty Twenty að mestu leyti á Block Editor. Við keyrum prófin okkar á Twenty Twenty með Gutenberg útgáfu 6.4.0. Þessi útgáfa býður upp á mikinn fjölda nýrra eiginleika, endurbóta og villuleiðréttinga sem bættu klippingarupplifunina verulega.

Prófaðu WordPress þemu auðveldlega áður en þú ferð í framleiðslu með sviðsetningarsíðunum okkar með einum smelli. Reyndu Behmaster frítt.

“}” data-sheets-userformat='{“2″:6659,”3”:{“1″:0},”4”:{“1″:2,”2″:16777215},”12″:0,”14”:{“1″:2,”2″:0},”15″:”Roboto, RobotoDraft, Helvetica, Arial, sans-serif”}’>

Prófaðu WordPress þemu auðveldlega áður en þú ferð í framleiðslu með sviðsetningarsíðunum okkar með einum smelli. Reyndu Behmaster frítt.

Sumar blokkir koma sér vel, sérstaklega þegar þú ert að byggja eina síðu vefsíður. Blokkir eins og Miðlar og texti og Cover hafa verið endurbætt og líta nú vel út þegar kemur að því að kynna vörur og/eða faglega eignasafn:

fjölmiðla og texta
Miðlar og textablokk (fullur með röðun)

Samt sem áður, þar sem Gutenberg er verkefni í vinnslu, gætirðu viljað kíkja á nokkrar af vinsælustu viðbótunum sem gera kleift að bæta fleiri kubbum við ritstjórann.

Hér er stuttur listi yfir viðbætur sem gætu verið þess virði að prófa:

  • Gutenberg blokkir
  • CoBlocks
  • Stackable
  • Atómblokkir.
  • Háþróaður Gutenberg

Þema Customizer og Block Editor gera frábært starf þegar kemur að útliti og aðlögun útlits, en barnaþema gæti veitt þér meiri stjórn á útliti og tilfinningu síðna þinna.

Hvernig á að búa til barnaþema fyrir tuttugu og tuttugu þema

Að byggja barnaþemu fyrir WordPress gæti verið skemmtilegt og líka góð leið til að hefja feril sem WordPress þemahönnuður og Twenty Twenty gæti verið frábært foreldraþema þegar þú byggir barnaþemu í WordPress. Svo, hvers vegna prófarðu það ekki? 😉

Ef þú veist ekki hvar þú átt að byrja með barnaþemu, vertu viss um að skoða útbreidda handbók okkar um hvernig á að búa til barnaþema í WordPress.

Nú skulum við búa til fyrsta barnaþema okkar fyrir Tuttugu og tuttugu!

Búðu til nýja möppu undir wp-content/themes og nefndu það eitthvað eins og twentytwenty-child eða hvað sem þú vilt.

Flettu að wp-content/themes/twentytwenty-child og búðu til nýjan style.css skrá með eftirfarandi fyrirsögn:

/*
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
*/

Næst verðum við að láta stílblað foreldraþema fylgja með. Búðu til eftirfarandi í sömu möppu functions.php file:

Now go to Appearance → Themes and activate your Child Theme. You can now start with your customizations.

Activate the child theme
Activate the child theme

You can change almost anything in Twenty Twenty, from adding custom templates to adding your custom styles or changing the theme’s default styles.

Here I will show you how to create a new custom template for single posts and pages.

Adding a Custom Post/Page Template in Twenty Twenty

So far, we have created a child theme for Twenty Twenty and attached the parent styles to the child theme’s stylesheet. In the example below, we’ll get rid of the header and the footer, making room for the page’s body in a post/page template file.

Step 1

Copy and paste the following files from the parent theme to the child theme’s directory:

  • templates/template-full-width.php
  • header.php
  • footer.php

Step 2

Rename template-full-width.php to template-canvas.php (or whatever you like). Open the file, delete the current content, and paste the following:

Template Name sets the name of the template file as you’ll see it in the Block Editor, while Template Post Type defines the post types supporting this template file. The get_template_part function loads the singular.php file from the parent theme (we don’t need a copy of this file in our child theme).

Go to the WordPress dashboard and create a new post. Now you should find an additional page template in the Post attributes section.

A new template is available in Post Attributes
A new template is available in Post Attributes

Step 3

And now comes the fun part. Open header.php in your favorite text editor and wrap the header element inside the following if statement:


	

	

This code checks whether the page template is not templates/template-canvas.php. If the page template is templates/template-canvas.php, then it won’t include the site header and the modal menu.

Similarly, we can remove the footer from a post page when the active page template is our canvas. Just add the same condition in footer.php as shown below:


	
...

You can download the code of this example here.
Now create a new post or page, select the Canvas template in Post/Page attributes and check the page on the front site.

We took a closer look at the new WordPress default theme Twenty Twenty. Check out all the main features you need to know about! 🆕②⓪②⓪Click to Tweet

Summary

Twenty Twenty is a minimalist WordPress theme, with a single column layout. The way we’ll use it mostly depend on the evolution of the Block Editor. As Anders expressively says:

“The promise of the Block Editor is to give users the freedom to design and structure their sites as they see fit”.

Following Twenty Nineteen, the new Twenty Twenty default theme is the second in a new generation of themes aiming to “allow the construction of websites without manual code editing”. WordPress sites powered by the Twenty Twenty theme come in all shapes and sizes. To find out if a theme is using Twenty Twenty, check out our handy WordPress theme detector tool.

If you think that Gutenberg is still not completely reliable for your projects yet, you could add the blocks you’ll need with plugins like the ones listed above. Or, simply, you can embrace a third-party page builder.

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!

Related Articles

0 Comments
Inline Feedbacks
View all comments
Back to top button