Wordpress

Twenty Twenty: Bevezetés az új alapértelmezett WordPress-témába

A Twenty Twenty az új alapértelmezett WordPress téma, amely a WordPress 5.3 legújabb kiadásával érkezik. A Twenty Twenty elődjéhez hasonlóan a Twenty Twenty-t is különös tekintettel Gutenbergre tervezték. A kettő között azonban nagy különbség van: a Twenty Twenty nem az alapoktól épült; ehelyett a WordPress közösség egy meglévő témája alapján készült.

Mivel mindent szeretünk a WordPressben, közelebbről megvizsgáltuk az új Twenty Twenty témát, belekukkantva a function.php fájlba, a stíluslapba és a sablonokba.

Még ha a Twenty Twenty korántsem stabil – az írás idején –, sok probléma még mindig megoldatlan, ma megosztjuk veletek az új alapértelmezett WordPress témával kapcsolatos legelső gondolatainkat.

Merüljünk el a Twenty Twenty WordPress témában!

Twenty Twenty előzetes
Twenty Twenty WordPress téma előnézet (Kép forrása: Make WordPress Core)

Gyors bevezető a Twenty Twenty témába

A Twenty Twenty a Chaplinre, egy ingyenes WordPress-témára épült Anders Noréntól, aki egyben a WordPress 5.3 alapértelmezett tématervezési vezetője is.

A Chaplin letölthető a WordPress.org tárolóból, és Anders szerint a blokkszerkesztőt szem előtt tartva készült:

A Chaplin egy funkciókban gazdag WordPress-téma, amely teljes irányítást biztosít a webhelyén található HTML-betűtípusok és -színek felett. Az alapoktól kezdve az új blokkszerkesztőt szem előtt tartva készült, és megkönnyíti a jó megjelenésű elrendezések létrehozását a bejegyzéseken és az oldalakon egyaránt.

Chaplin WordPress téma
Chaplin WordPress téma

Ugyanez a filozófia ül a Twenty Twenty mögött: rugalmasság, világosság, és a olvashatóság ezek a kulcsszavak az új téma számára.

A Twenty Twenty egyetlen oszlopos elrendezéssel és három bejegyzés-/oldalsablonnal érkezik, amelyek célja, hogy a WordPress rendszergazdái és tervezői az egyéni elrendezések létrehozásának szabadsága közvetlenül a Blokkszerkesztőben kihasználva a széles és teljes igazításokat olyan blokkelemeknél, mint az oszlopok, képek és a Gutenberg 5.5-ös verziójában bevezetett csoportblokk.

Ahogy Anders elmagyarázza:

Twenty A Twenty tervezésénél a rugalmasság a lényeg. Ha egy szervezetnél vagy egy vállalkozásnál szeretné használni, akkor az oszlopokat, csoportokat és médiát széles és teljes igazításokkal kombinálhatja, így dinamikus elrendezéseket hozhat létre szolgáltatásai vagy termékei bemutatására. Ha hagyományos bloghoz szeretnéd használni, a középre helyezett tartalomoszlop erre is tökéletessé teszi.

Ezen kívül a Twenty Twenty új betűtípussal érkezik: Inter. Ez egy ingyenes és nyílt forráskódú betűtípuscsalád, amelyet Rasmus Andersson kifejezetten a vegyes és kisbetűs szövegek olvashatóságára tervezett, különösen kis betűméret esetén.

Inter betűtípus
Az Inter betűtípus család

Az Inter erősebb egyéniséget ad a nagy fejléceknek, de a legtöbbet akkor hozhatja ki belőle, ha váltakozó szövegmérettel használja, amint az a WordPress.org blogbejegyzés témájának előnézetében látható:

huszonhúsz asztali gépen
Twenty Twenty tipográfia: hatás és olvashatóság

A Twenty Twenty egy olyan téma, amely több, mint egy teljes értékű téma, amely egy fontos új lépést jelent a WordPress szerkesztői felhasználói felületének jövőbeli fejlődése felé. A Twenty A Twenty alapvetően a blokkszerkesztőre támaszkodik a tartalom szerkesztéséhez és elrendezéséhez, a téma testreszabására pedig a fejléc, lábléc és további testreszabásokhoz.

Ennek ellenére ideje telepítenünk és futtatnunk ezt a WordPress témát.

Hogyan telepítsük a Twenty Twenty-t

A hamarosan megjelenő alapértelmezett téma a WordPress 5.3 kiadási tervét fogja követni. Ez azt jelenti, hogy az írás idején a Twenty Twenty még mindig nem tölthető le a WordPress témakönyvtárából.

Mindenesetre letöltheti a Twenty Twenty folyamatban lévő verzióját a GitHubon, és telepítheti a WordPress jelenlegi stabil verziójába, vagy letöltheti a WordPress 5.3-mal. A Github-tárház megszűnik, ha a témát a magba egyesítik. Addig is érdemes lehet menteni a következő dátumokat a WordPress 5.3 kiadási ütemtervéből:

  • 23. szeptember 2019.: Béta 1
  • 30. szeptember 2019.: Béta 2
  • 7. október 2019.: Béta 3
  • 15. október 2019.: 1. megjelenési jelölt
  • 22. október 2019.: 2. megjelenési jelölt
  • 29. október 2019.: 3. megjelenési jelölt
  • 5. november 2019.: 4. jelölt kiadása (ha szükséges)
  • 12. november 2019.: A WordPress 5.3 kiadásának tervezett dátuma.

A Twenty Twenty használatának megkezdéséhez kövesse az alábbi lépéseket:

  1. Szerezze be a zip-csomagot a GitHubból.
  2. Töltsd fel a zip fájlt a fejlesztői telepítésedre a WordPress irányítópultján vagy SFTP-n keresztül.
  3. Keressen Megjelenés → Témák és kattintson a Aktiválja gombot a téma előnézeti képén.
  4. Ugrás Megjelenés → Testreszabás a Twenty Twenty beállításához.

És ez az! Mostantól megkezdheti a tesztek futtatását az átmeneti webhelyen vagy a helyi környezetben.

fontos

Twenty Twenty jelenleg fejlesztés alatt áll, és sok problémát még nem javítottak ki. Nem szabad termelésben használni.

Twenty Twenty: teljes szélességű sablon
Nyitott probléma a GitHubon

Most, hogy készen áll az indulásra, menjünk tovább, és merüljünk el a Húsz Húsz WordPress téma.

Egyszerűen tesztelheti a WordPress-témákat, mielőtt élesre állítaná az egykattintásos állomáshelyeinket. Próbálja meg Behmaster ingyen.

“}” 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”}’>

Egyszerűen tesztelheti a WordPress-témákat, mielőtt élesre állítaná az egykattintásos állomáshelyeinket. Próbálja meg Behmaster ingyen.

Twenty Twenty téma jellemzői

A Twenty Twenty nem egy teljes értékű WordPress-téma, hanem egy leszűkített és minimális téma, amelynek célja, hogy a fejlesztők és a webhelyadminisztrátorok szabadságát adják egyéni tartalomelrendezések létrehozására bejegyzéseikhez és oldalaikhoz. A Twenty Twentyhez hasonlóan a Twenty Twenty is Gutenberg számára készült, és leginkább Gutenberg életciklusától függ (erről a témáról bővebben Matt Mullenweg videójában a 2019-es WCEU-n).

A téma számos témafunkciót támogat, mint például a tartalom szélessége (580), automatikus hírcsatornahivatkozások, bejegyzések bélyegképei, címcímkéje és számos HTML5-elem (keresőűrlap, megjegyzésűrlap, megjegyzéslista, galéria és felirat).

Más funkciók további lehetőségeket adnak a téma testreszabásához. Ide tartoznak az egyéni hátterek és az egyéni logó. Az alábbi kódrészletek a téma függvényfájljában engedélyezett funkciókat mutatják be:

// 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' ),
	)
);
A téma testreszabása húsz húszban
A téma testreszabása húsz húszban

A Twenty A Twenty is támogatja Gutenberg bizonyos sajátosságait. Először is, a téma támogatja széles és teljes szélességű igazítások:

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

A szerkesztő színpaletta akkor engedélyezve van, ha a felhasználó kiemelő színt állított be a Testreszabóban (alapértelmezés szerint engedélyezve van):

// 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 );
}
Színek testreszabása a Twenty Twentyben
Színek testreszabása a Twenty Twentyben

A Twenty Twenty témához négy tartozik szerkesztő betűméretei elérhető a Blokkszerkesztőben:

// 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',
	),
) );
Betűméretek a szerkesztő blokkban Szövegbeállítások
Betűméretek a szerkesztő blokkban Szövegbeállítások

És ez az. A téma funkcionalitásban is meglehetősen minimális, de könnyen bővíthető gyermektémával, és ebben egy percen belül elmerülünk.

Hogyan szabhatjuk testre a Twenty Twenty megjelenését

A Twenty Twenty nem tartalmaz csengőt és sípot, de nagy rugalmasságot biztosít, ha Gutenberggel (vagy egy jó oldalkészítővel) együtt használják.

A Twenty Twenty téma testreszabása

A Helyazonosító kezeli a webhely címét és címsorát, logóját és ikonját. Mindezeket az elemeket engedélyezheti/letilthatja a Helyazonosító a Testreszabó része:

Webhelyazonosító a Testreszabó beállításaiban
Webhelyazonosító a Testreszabó beállításaiban

A testreszabóé Borítósablon szakasz kezeli a testreszabási beállításokat Borítósablon oldal sablon. Ott találod:

  • Lehetőség a parallaxis hatás engedélyezésére a háttérképen (rögzített háttérkép).
  • Színválasztók az egyéni háttérszín és szövegszín beállításához a kiemelt képfedvényhez.
  • A fedvény átlátszatlanságának szabályozására szolgáló csúszka.
A Borítósablon szakasz a Testreszabóban
A Borítósablon szakasz a Testreszabóban

A Menük szakasz öt menühelyet biztosít. A fejlécbe beilleszthet egy normál vízszintes menüt (Asztali vízszintes menü) és/vagy egy átkapcsolható navigációs menü (Asztali kiterjesztett menü). A Mobil menü egy speciális menü a mobileszközökhöz, és Lábléc menü és a Közösségi menü az oldal láblécében találhatók.

Menühelyek húsz húszban
Menühelyek húsz húszban

A lábléc kezeli a lábléc menü és a közösségi menü helyeit, valamint két widget területet. A következő képen a téma lábléce látható, minden elemével a helyén:

Sablon lábléce húsz húsz nyelven
Sablon lábléce húsz húsz nyelven

Végül a További CSS szakasz lehetővé teszi egyéni stílusok felvételét.

Egyetlen bejegyzés/oldal sablonok

Ha bejegyzésről és oldalelrendezésről van szó, három különböző sablon közül választhat. Az alapértelmezett sablonon kívül a Twenty Twenty a Borító sablon és egy Teljes szélességű sablon játszva testreszabhatja tartalmai megjelenését és hangulatát.

Egyetlen bejegyzés/oldal sablonok húsz húszban
Egyetlen bejegyzés/oldal sablonok húsz húszban

A blokkszerkesztő húsz húszban

Minimális megközelítése miatt a Twenty Twenty megjelenése leginkább a blokkszerkesztőre támaszkodik. Teszteinket a Twenty Twenty rendszeren futtatjuk a Gutenberg 6.4.0-s verziójával. Ez a verzió számos új funkciót, fejlesztést és hibajavítást tartalmaz, amelyek jelentősen javították a szerkesztési élményt.

Egyszerűen tesztelheti a WordPress-témákat, mielőtt élesre állítaná az egykattintásos állomáshelyeinket. Próbálja meg Behmaster ingyen.

“}” 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”}’>

Egyszerűen tesztelheti a WordPress-témákat, mielőtt élesre állítaná az egykattintásos állomáshelyeinket. Próbálja meg Behmaster ingyen.

Egyes blokkok jól jönnek, különösen egyoldalas webhelyek készítésekor. Olyan blokkok Média és szöveg és a Takaró javítva lettek, és most remekül néznek ki, amikor termékekről és/vagy professzionális portfóliókról van szó:

média és szöveg
Média- és szövegblokk (teljes igazítással)

Ennek ellenére, mivel a Gutenberg egy folyamatban lévő projekt, érdemes áttekinteni néhány legnépszerűbb bővítményt, amelyek lehetővé teszik további blokkok hozzáadását a szerkesztőhöz.

Íme egy gyors lista azokról a bővítményekről, amelyeket érdemes lehet kipróbálni:

  • Gutenberg blokkolja
  • CoBlocks
  • Stackable
  • Atomblokkok.
  • Haladó Gutenberg

A Téma-testreszabó és a Blokkszerkesztő nagyszerű munkát végez a megjelenés és az elrendezés testreszabása terén, de a gyermektéma segítségével jobban szabályozhatja oldalai megjelenését és hangulatát.

Hogyan készítsünk gyermektémát a húsz húsz témához

Gyermektémák készítése a WordPress számára szórakoztató lehet, és jó módja annak, hogy WordPress-témafejlesztőként karriert kezdjen, a Twenty Twenty pedig nagyszerű szülőtéma lehet gyermektémák WordPress-ben való építésekor. Szóval miért nem próbálod ki? 😉

Ha nem tudja, hol kezdje a gyermektémákat, feltétlenül tekintse meg a Gyermektéma létrehozása a WordPressben című kibővített útmutatónkat.

Most pedig építsük fel az első gyerek témát a Twenty Twenty-re!

Hozzon létre egy új könyvtárat a alatt wp-content/themes és nevezd el valami hasonlónak twentytwenty-child vagy ami tetszik.

Keressen wp-content/themes/twentytwenty-child és hozzon létre egy új style.css fájl a következő fejléccel:

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

Ezután be kell adnunk a szülőtéma stíluslapját. Ugyanabban a könyvtárban hozza létre a következőt 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