Wordpress

Twenty Twenty: Жаңа әдепкі WordPress тақырыбына кіріспе

Twenty Twenty — WordPress 5.3 нұсқасының соңғы шығарылымымен бірге келетін жаңа әдепкі WordPress тақырыбы. Жиырма он тоғыз алдыңғы нұсқасы сияқты, Twenty Twenty Гутенбергке ерекше назар аудара отырып жасалған. Екеуінің арасында үлкен айырмашылық бар, дегенмен: «Жиырма жиырма» басынан бастап салынбаған; оның орнына WordPress қауымдастығынан бұрыннан бар тақырып бойынша жасалған.

Біз WordPress туралы барлығын жақсы көретіндіктен, біз function.php файлын, стильдер кестесін және үлгілерді қарап отырып, жаңа Twenty Twenty тақырыбын мұқият қарастырдық.

Тіпті Twenty Twenty біршама тұрақты болудан алыс болса да – осы жазу кезінде – көптеген мәселелер әлі шешілмеген болса да, бүгін біз сіздермен жаңа әдепкі WordPress тақырыбы туралы алғашқы ойларымызды бөлісетін боламыз.

Twenty Twenty WordPress тақырыбына кірісейік!

Twenty Twenty алдын ала қарау
Twenty Twenty WordPress тақырыбын алдын ала қарау (Сурет көзі: WordPress Core жасау)

Жиырма жиырма тақырыпқа жылдам кіріспе

Twenty Twenty Чаплин негізінде құрастырылған, Андерс Нореннің тегін WordPress тақырыбы, ол сонымен бірге WordPress 5.3-тің әдепкі тақырыптық дизайн жетекшісі.

Чаплинді WordPress.org репозиторийінде жүктеп алуға болады және Андерстің айтуынша, ол Блок редакторын ескере отырып жасалған:

Чаплин - бұл сіздің сайтыңыздағы HTML қаріптері мен түстерін толық басқаруға мүмкіндік беретін мүмкіндіктері бар WordPress тақырыбы. Ол жаңа блоктық редакторды ескере отырып, басынан бастап жасалған және жазбалар мен беттерде жақсы көрінетін макеттерді жасауды жеңілдетеді.

Chaplin WordPress тақырыбы
Chaplin WordPress тақырыбы

Жиырма жиырманың артында дәл осындай философия жатыр: Икемділік, айқындық, және оқылымдылық жаңа тақырыптың негізгі кілт сөздері болып табылады.

Twenty Twenty бір бағанның орналасуымен және WordPress әкімшілері мен дизайнерлеріне ұсынуға бағытталған үш хабарлама/бет үлгісімен келеді. олардың реттелетін макеттерін тікелей Блок өңдегішінде жасау еркіндігі Гутенберг 5.5 нұсқасымен енгізілген бағандар, кескіндер және топтық блок сияқты блок элементтері үшін кең және толық теңестіру мүмкіндіктерін пайдалану арқылы.

Андерс түсіндіргендей:

Twenty Twenty негізі икемділікпен жасалған. Егер сіз оны ұйым немесе бизнес үшін пайдаланғыңыз келсе, қызметтеріңізді немесе өнімдеріңізді көрсету үшін динамикалық орналасуларды жасау үшін кең және толық теңестірулері бар бағандарды, топтарды және медианы біріктіруге болады. Егер сіз оны дәстүрлі блог үшін пайдаланғыңыз келсе, орталықтандырылған мазмұн бағаны оны сол үшін де тамаша етеді.

Бұдан басқа, Twenty Twenty жаңа қаріппен келеді: Inter. Бұл Расмус Андерссон арнайы аралас және кіші әріптермен, әсіресе шағын қаріп өлшемдерімен оқылатын мәтінді оқуға арналған тегін және ашық бастапқы қаріптер тобы.

Интер қаріп
Интер шрифттер тобы

Интер үлкен тақырыптарға күштірек тұлға береді, бірақ WordPress.org блог жазбасындағы тақырыпты алдын ала қарауда көрсетілгендей, оны ауыспалы мәтін өлшемдерімен пайдаланған кезде одан көбірек пайда аласыз:

жұмыс үстелінде жиырма жиырма
Twenty Twenty типографиясы: әсер және оқылу

Толық мүмкіндіктері бар тақырыптан гөрі, Twenty Twenty WordPress-тің өңдеу интерфейсінің болашақ эволюциясына маңызды жаңа қадамды белгілейтін тақырып. Twenty Twenty негізінен мазмұнды өңдеу және орналастыру үшін Блок өңдегішіне және үстіңгі деректеме, төменгі деректеме және қосымша теңшеулер үшін Тақырып теңшеушісіне сүйенеді.

Осыған орай, бізге осы WordPress тақырыбын орнату және оны іске қосу уақыты келді.

Twenty Twenty қалай орнатуға болады

Алдағы әдепкі тақырып WordPress 5.3 шығарылым жоспарына сәйкес болады. Бұл осы жазу кезінде Twenty Twenty әлі WordPress тақырып каталогында жүктеп алу мүмкін емес дегенді білдіреді.

Қалай болғанда да, GitHub сайтында Twenty Twenty бағдарламасының орындалып жатқан нұсқасын жүктеп алып, оны WordPress-тің ағымдағы тұрақты нұсқасына орнатуға немесе WordPress 5.3 нұсқасымен алуға болады. Тақырып өзекке біріктірілгеннен кейін Github репозиторийі ескіреді. Осы уақытта WordPress 5.3 шығарылым кестесінен келесі күндерді сақтағыңыз келуі мүмкін:

  • 23 жылғы 2019 қыркүйек: Бета 1
  • 30 жылғы 2019 қыркүйек: Бета 2
  • 7 жылғы 2019 қазан: Бета 3
  • 15 жылдың 2019 қазаны: 1-кандидаттың шығарылымы
  • 22 жылдың 2019 қазаны: 2-кандидаттың шығарылымы
  • 29 жылдың 2019 қазаны: 3-кандидаттың шығарылымы
  • 5 жылдың 2019 қарашасы: 4-кандидатты шығарыңыз (қажет болса)
  • 12 жылғы 2019 қараша: WordPress 5.3 шығарылымының мақсатты күні.

Twenty Twenty қолданбасын бастау үшін төмендегі қадамдарды орындаңыз:

  1. GitHub сайтынан zip бумасын алыңыз.
  2. Zip файлын WordPress бақылау тақтасындағы әзірлеу қондырғысына немесе SFTP арқылы жүктеңіз.
  3. Қарау Сыртқы түрі → Тақырыптар және басыңыз іске қосыңыз тақырыптың алдын ала қарау кескініндегі түймешігін басыңыз.
  4. Бару Сыртқы түрі → Реттеу Twenty Twenty конфигурациялау үшін.

Міне, болды! Енді сынақтарды қою веб-сайтында немесе жергілікті ортада іске қосуға болады.

маңызды

Twenty Twenty қазір әзірлену үстінде және көптеген мәселелер әлі шешілген жоқ. Сіз оны өндірісте пайдаланбауыңыз керек.

Twenty Twenty: толық ені үлгісі
GitHub сайтындағы ашық мәселе

Енді сіз баруға дайынсыз, әрі қарай жылжып, суға сүңгейік Жиырма жиырма WordPress тақырыбы.

Біздің бір рет басу арқылы орналастыру сайттары арқылы өндіріске көшпес бұрын WordPress тақырыптарын оңай сынап көріңіз. Тырысу Behmaster Тегін.

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

Біздің бір рет басу арқылы орналастыру сайттары арқылы өндіріске көшпес бұрын WordPress тақырыптарын оңай сынап көріңіз. Тырысу Behmaster Тегін.

Twenty Twenty тақырыбының ерекшеліктері

Twenty Twenty - бұл толыққанды WordPress тақырыбы емес, әзірлеушілер мен сайт әкімшілеріне олардың жазбалары мен беттері үшін теңшелетін мазмұн макеттерін құру еркіндігін беруге бағытталған қысқартылған және минималды тақырып. Twenty Nineteen сияқты, Twenty Twenty Гутенберг үшін құрастырылған және көбінесе Гутенбергтің өмірлік цикліне байланысты (бұл тақырып туралы толығырақ WCEU 2019-те Мэтт Мулленвегтің осы бейнесінде).

Тақырып мазмұн ені сияқты бірқатар тақырып мүмкіндіктерін қолдайды (580), автоматты арна сілтемелері, жазба нобайлары, тақырып тегі және бірнеше HTML5 элементтері (іздеу пішіні, түсініктеме пішіні, түсініктемелер тізімі, галерея және тақырып).

Басқа мүмкіндіктер тақырыпты реттеушіге опцияларды қосады. Оларға реттелетін фон және пайдаланушы логотипі кіреді. Төмендегі код үзінділері тақырыптың функциялар файлында қосылған осы мүмкіндіктерді көрсетеді:

// 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 сонымен қатар Гутенбергтің кейбір ерекше мүмкіндіктерін қолдайды. Біріншіден, тақырыпты қолдайды кең және толық енді туралау:

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

The редактордың түстер палитрасы пайдаланушы теңшеуіште екпін түсін орнатқан жағдайда қосылады (әдепкі бойынша қосулы):

// 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 ішіндегі түстерді теңшеу
Twenty Twenty ішіндегі түстерді теңшеу

Жиырма жиырма тақырыбы төртеуімен бірге келеді редактордың қаріп өлшемдері Блок редакторында қол жетімді:

// 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',
	),
) );
Редактор блогындағы қаріп өлшемдері Мәтін параметрлері
Редактор блогындағы қаріп өлшемдері Мәтін параметрлері

Міне бітті. Тақырып функционалдық жағынан да өте аз, бірақ оны балалар тақырыбымен оңай кеңейтуге болады, және біз оған бір минуттан кейін енеміз.

Жиырма жиырманың сыртқы түрін қалай теңшеуге болады

Twenty Twenty кез келген қоңыраулар мен ысқырықтардан бос келеді, бірақ Гутенбергпен (немесе жақсы бет құрастырушымен) тандемде пайдаланылғанда үлкен икемділікті қамтамасыз етеді.

Twenty Twenty тақырыбын теңшеу

The Сайт идентификациясы сайт тақырыбы мен тег сызығын, логотипін және белгішесін өңдейді. Барлық осы элементтерді қосуға/өшіруге болады Сайт идентификациясы реттеуші бөлімі:

Customizer параметрлеріндегі сайт идентификациясы
Customizer параметрлеріндегі сайт идентификациясы

Тапсырыс берушінің Мұқаба үлгісі бөлімі үшін теңшеу параметрлерін өңдейді Мұқаба үлгісі бет үлгісі. Онда сіз мыналарды табасыз:

  • Фондық кескінге параллакс әсерін қосу опциясы (бекітілген фондық сурет).
  • Таңдаулы кескін қабаты үшін реттелетін фон түсін және мәтін түсін орнатуға арналған түс таңдау құралдары.
  • Қабаттаудың мөлдірлігін басқаруға арналған жүгірткі.
Баптауыштағы Мұқаба үлгісі бөлімі
Баптауыштағы Мұқаба үлгісі бөлімі

The мәзірлер бөлім бес мәзір орнын ұсынады. Тақырыпқа кәдімгі көлденең мәзірді қосуға болады (Жұмыс үстелінің көлденең мәзірі) және/немесе ауыспалы шарлау мәзірі (Жұмыс үстелінің кеңейтілген мәзірі). The Ұялы мәзір мобильді құрылғыларға арналған арнайы мәзір болып табылады және Төменгі деректеме мәзірі және Әлеуметтік мәзір беттің төменгі деректемесінде орналасқан.

Twenty Twenty ішіндегі мәзір орындары
Twenty Twenty ішіндегі мәзір орындары

Төменгі деректеме төменгі деректеме мәзірін және екі виджет аймағымен бірге Әлеуметтік мәзір орындарын өңдейді. Келесі суретте тақырыптың төменгі деректемесі оның барлық элементтері орнында көрсетілген:

Twenty Twenty ішіндегі үлгінің төменгі деректемесі
Twenty Twenty ішіндегі үлгінің төменгі деректемесі

Ақырында, Қосымша CSS бөлімі реттелетін мәнерлеріңізді қосуға мүмкіндік береді.

Жалғыз хабарлама/бет үлгілері

Жазбалар мен беттердің орналасуына келетін болсақ, сіз үш түрлі үлгіні таңдай аласыз. Әдепкі үлгіден басқа, Twenty Twenty а Мұқаба үлгісі және Толық ені үлгісі мазмұнның көрінісі мен сезімін теңшеу үшін ойнай аласыз.

Twenty Twenty ішіндегі жалғыз хабарлама/бет үлгілері
Twenty Twenty ішіндегі жалғыз хабарлама/бет үлгілері

Жиырма жиырмадағы блок редакторы

Ең аз тәсілдің арқасында Twenty Twenty-дің көрінісі негізінен Блок редакторына сүйенеді. Біз Gutenberg 6.4.0 нұсқасымен Twenty Twenty жүйесінде сынақтарды орындаймыз. Бұл нұсқа өңдеу тәжірибесін айтарлықтай жақсартатын көптеген жаңа мүмкіндіктерді, жақсартуларды және қателерді түзетуді қамтамасыз етеді.

Біздің бір рет басу арқылы орналастыру сайттары арқылы өндіріске көшпес бұрын WordPress тақырыптарын оңай сынап көріңіз. Тырысу Behmaster Тегін.

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

Біздің бір рет басу арқылы орналастыру сайттары арқылы өндіріске көшпес бұрын WordPress тақырыптарын оңай сынап көріңіз. Тырысу Behmaster Тегін.

Кейбір блоктар, әсіресе бір беттік веб-сайттарды құру кезінде ыңғайлы. Блоктар ұнайды Медиа және мәтін және Қақпақ жақсартылды және енді өнімдерді және/немесе кәсіби портфолиоларды ұсынуға келгенде керемет көрінеді:

ақпарат құралдары және мәтін
Мультимедиа және мәтін блогы (толық туралау)

Дегенмен, Гутенберг жұмыс істеп тұрған жоба болғандықтан, редакторға көбірек блоктар қосуға мүмкіндік беретін ең танымал плагиндердің кейбірін қарастырғыңыз келуі мүмкін.

Міне, қолданып көруге тұрарлық плагиндердің жылдам тізімі:

  • Гутенберг блоктары
  • CoBlocks
  • Бекітілген
  • Атом блоктары.
  • Жетілдірілген Гутенберг

Тақырыпты реттеуші және блокты өңдеуші сыртқы түрі мен орналасуын теңшеуге келгенде тамаша жұмыс істейді, бірақ бала тақырыбы беттердің көрінісі мен сезімін көбірек басқаруға мүмкіндік береді.

Жиырма жиырма тақырыпқа балалар тақырыбын қалай жасауға болады

WordPress үшін балалар тақырыптарын құру көңілді болуы мүмкін, сонымен қатар WordPress тақырыптарын әзірлеуші ​​ретінде мансапты бастаудың жақсы тәсілі және Twenty Twenty WordPress-те балалар тақырыптарын құру кезінде тамаша ата-аналық тақырып болуы мүмкін. Ендеше, неге байқап көрмеске? 😉

Егер сіз балалар тақырыптарын неден бастау керектігін білмесеңіз, WordPress-те балалар тақырыбын қалай жасауға болатыны туралы кеңейтілген нұсқаулықты қараңыз.

Енді Twenty Twenty үшін бірінші бала тақырыбымызды құрастырайық!

астында жаңа каталог жасаңыз wp-content/themes және оны бір нәрсе деп атаңыз twentytwenty-child немесе сізге ұнайтын нәрсе.

Қарау wp-content/themes/twentytwenty-child жаңа жасаңыз style.css келесі тақырыппен файл:

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

Әрі қарай, біз негізгі тақырыптың стиль кестесін қосуымыз керек. Сол каталогта келесіні жасаңыз functions.php файл:

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

Leave a Reply

Your email address will not be published.

Back to top button