Twenty Twenty-Four: новая минимальная многоцелевая тема WordPress по умолчанию

Двадцать Двадцать Четыре — это совершенно новая тема WordPress по умолчанию, которая будет включена в следующую версию WordPress 6.4.

Идея Twenty Twenty-Four заключается в том, что тема по умолчанию подходит для любого типа сайта, независимо от его тематики. Тема предназначена для трех вариантов использования: владельцев малого бизнеса, фотографов и художников, а также писателей и блоггеров.

Twenty Twenty-Four — это больше, чем просто тема. Это коллекция шаблонов и шаблонов, которые, объединенные вместе, позволяют создавать самые разнообразные веб-сайты. Таким образом, вы можете считать Twenty Twenty Four многоцелевой темой, хотя это абсолютно минималистичная тема.

Как и следовало ожидать, Twenty Twenty-Four — это блочная тема, полностью совместимая со всеми замечательными функциями WordPress 6.4, включая блок подробностей и вертикальный текст.

После этого краткого введения в новую тему WordPress по умолчанию в этой статье мы рассмотрим множество шаблонов, шаблонов и стилей, чтобы показать вам, как создать привлекательный, отзывчивый, удобный и доступный веб-сайт с помощью Twenty Twenty-Four.

Теперь запустите Редактор сайта, цифра CMD + Ки введите Шаблоны.

Тема WordPress «Двадцать двадцать четыре»

Twenty Twenty-Four дает нам прекрасный пример блочной темы WordPress. Когда вы получите доступ к папке темы в вашей установке WordPress, вы обнаружите чрезвычайно простой функции.php файл, единственная цель которого — поставить в очередь несколько таблиц стилей для определенных блоков.

Файл функций Twenty Twenty-Four — хороший пример того, как оптимизировать тему, гарантируя, что определенные ресурсы будут внедрены только тогда, когда они необходимы. Следующий код ставит в очередь кнопка-outline.css таблица стилей только тогда, когда кнопка находится на странице:

if ( ! function_exists( 'twentytwentyfour_block_styles' ) ) :
	/**
	 * Register custom block styles
	 *
	 * @return void
	 * @since Twenty Twenty-Four 1.0
	 *
	 */
	function twentytwentyfour_block_styles() {
		/**
		 * The wp_enqueue_block_style() function allows us to enqueue a stylesheet
		 * for a specific block. These will only get loaded when the block is rendered
		 * (both in the editor and on the front end), improving performance
		 * and reducing the amount of data requested by visitors.
		 *
		 * See https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/ for more info.
		 */
		wp_enqueue_block_style(
			'core/button',
			array(
				'handle' => 'twentytwentyfour-button-style-outline',
				'src'    => get_template_directory_uri() . '/assets/css/button-outline.css',
				'ver'    => wp_get_theme()->get( 'Version' ),
			)
		);
	}
	...
endif;

Тема не предоставляет никакой функциональности вашему веб-сайту WordPress, и вы будете полностью полагаться на плагины для добавления поведения на свои страницы. Итак, двадцать двадцать четыре функции.php file заботится только о постановке в очередь определенных таблиц стилей для определенных блоков.

Продолжая исследовать папку темы Twenty Twenty-Four, вы заметите, что стиль.css Файл содержит только заголовок с подробностями, необходимыми для правильной работы темы, и не содержит блоков CSS:

/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile, and applicable to any website. Its collection of templates and patterns is tailored to different needs, such as presenting a business, blogging, and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full-page designs to help speed up the site-building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.2
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

Вы также найдете ресурсы папка, содержащая шрифты папка, набор изображенийи CSS папка, в которой находится кнопка-outline.css таблица стилей.

В стиле Twenty Twenty-Four по умолчанию используются два шрифта: Cardo для заголовков и Inter для других текстовых элементов.

Также доступны семейства шрифтов Jost и Instrument Sans, которые используются в нескольких вариантах стиля.

Далее вы найдете четыре папки, содержащие настоящую суть темы Twenty Twenty-Four по умолчанию:

• стили
• узоры
• части
• шаблоны

Глобальные стили

Twenty Twenty-Four поставляется с набором из шести различных комбинаций стилей. Вы можете изучить каждый стиль в Стили разделе Редактора сайта или в разделе Просмотр стилей панель в режиме редактирования.

Стиль по умолчанию определен в файле theme.json и поставляется с 11 цветами, 12 градиентами, 5 двухцветными комбинациями цветов и двумя семействами шрифтов: Inter для тела контента и Cardo для заголовков.

Каждый вариант добавляет определенные комбинации стилей.

На момент написания этой статьи Twenty Twenty-Four поставляется со следующими вариациями стиля:

Лед: Этот вариант очень похож на стиль по умолчанию. Он использует ту же цветовую палитру по умолчанию с системным шрифтом для заголовков и Inter для тела.

Млечный: Этот вариант поставляется с теми же семействами шрифтов по умолчанию, но с другой цветовой палитрой.

Монетный двор: Mint добавляет вариации как в цветовой палитре, так и в семействах шрифтов. Он использует Instrument Sans для заголовков и Jost для тела.

Оникс: Это темная версия стиля по умолчанию. Он добавляет пользовательскую палитру, градиенты и комбинации дуотонов.

Ржавчина: Rust использует приятную цветовую палитру. Типографика основана на семействах шрифтов по умолчанию, но с разными размерами шрифтов.

Песчаная буря: Этот вариант меняет несколько элементов стиля по умолчанию. Sandstorm определяет 11-цветную палитру, использует семейства шрифтов Instrument Sans и Jost и настраивает внешний вид нескольких блоков и элементов HTML.

Шаблоны

Twenty Twenty-Four поставляется с одиннадцатью встроенными шаблонами. Соответствующие файлы вы можете найти в папке шаблоны папка каталога темы:

• сингл.html
• одиночный с боковой панелью.html
• поиск.html
• страница.html
• страница-с-sidebar.html
• страница-wide.html
• страница-no-title.html
• index.html
• home.html
• архив.html
• 404.html

Вы можете получить доступ к списку шаблонов для ваших настроек в редакторе сайта. Шаблоны раздел.

Опять же, если вы хотите углубиться в код шаблонов Twenty Twenty-Four, вам просто нужно открыть один или два из них в вашем любимом редакторе кода. Неудивительно, что каждый шаблон включает в себя один или несколько шаблонов. Это еще раз доказывает, что Twenty Twenty-Four — это более или менее набор паттернов.

Возьмем, к примеру index.html и откройте его в своем редакторе. Вы должны увидеть следующий код:

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
	<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
	<!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
	<h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">Posts</h1>
	<!-- /wp:heading -->
	<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

Шаблон начинается с div что включает в себя header шаблонная часть. А main элемент с заголовком и posts-three-columns шаблон создает тело, в то время как footer Часть шаблона создает нижнюю часть страницы.

Теперь давайте сравним index.html с архив.html:

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
	<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">

	<!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"lineHeight":"1"},"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} /-->

	<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->

</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

Вы заметите, что эти два шаблона очень похожи. Единственная разница в том, что архив.html использует Название архива блок вместо элемента H1. Оба шаблона используют posts-three-columns шаблон для генерации содержимого страницы.

Переключившись с редактора HTML на редактор сайта WordPress, вы можете просмотреть и настроить шаблоны темы. На изображении ниже показан шаблон архива в режиме редактирования.

Если вы довольны внесенными изменениями, нажмите Сохранять в правом верхнем углу. Откроется новая панель, на которой вы сможете подтвердить свои изменения или отменить их. Нажмите Сохранять еще раз, и все готово.

Части шаблона и узоры

Выкройки и части шаблонов можно найти в двух разных папках на сайте. двадцать двадцать четыре каталог. узоры папка включает в себя +50 паттернов, а папка части Папка включает шесть частей шаблона.

В Редакторе сайта части шаблонов и шаблоны включены в один и тот же файл. Узоры раздел.

Twenty Twenty-Four предоставляет несколько шаблонов, которые можно использовать для создания всей страницы. Это упрощает рабочий процесс редактирования и позволяет вам создать весь веб-сайт с небольшими настройками.

Примерами являются Домашняя страница, О страницеи Страница обзора портфолио шаблоны, перечисленные под О Категория узора.

Скажем, например, что вы хотите создать страницу «О компании». Благодаря шаблону Twenty Twenty-Four About вы можете создать новую страницу и просто выбрать шаблон из средства вставки блоков.

О Шаблон обеспечивает весь макет страницы, и вам нужно только добавить свои настройки, добавляя или переключая блоки, изображения и текст в соответствии с вашими потребностями. А если вам интересно, что произойдет со структурой вашей страницы, если вы измените тему, ответ — абсолютно ничего. После добавления на вашу страницу шаблон становится частью контента и сохраняется в таблице сообщений базы данных WordPress.

Когда вы прокручиваете вниз Узоры меню навигации, вы найдете Части шаблона раздел, включающий в себя Заголовок, Нижний колонтитули Общий Пункты меню. Каждый элемент является точкой входа в соответствующую категорию частей шаблона. Twenty Twenty-Four предоставляет один верхний колонтитул, три нижних колонтитула и две общие части шаблона.

Но если вы откроете части шаблона Twenty Twenty-Four в своем любимом редакторе кода, вы увидите, что большинство из них просто содержат шаблон. Возьмите Боковая панель часть шаблона, например:

<!-- wp:pattern {"slug":"twentytwentyfour/sidebar"} /-->

Эта часть шаблона просто включает в себя Боковая панель шаблон. Вы не найдете этот шаблон в списке Узоры раздел Редактора сайта, поскольку это скрытый шаблон. Если вы хотите углубиться в код, перейдите к теме узоры папку, найдите скрытый-sidebar.php файл и откройте его в редакторе кода.

Заголовок этого файла подтверждает, что это скрытый шаблон и он недоступен через вставку блоков:

<?php
/**
 * Title: sidebar
 * Slug: twentytwentyfour/sidebar
 * Categories: hidden
 * Inserter: no
 */
?>

Краткое содержание

Если вы ищете многофункциональную тему с множеством функций и спецэффектов, Twenty Twenty-Four не для вас.

Новая тема WordPress по умолчанию легкая, гибкая, лишена каких-либо наворотов и полностью управляется из редактора сайта.

С Twenty Twenty-Four вам не придется трогать ни единой строки кода и не требует настройки. Чтобы создать сайт с помощью Twenty Twenty-Four, вам просто нужно настроить шаблоны в редакторе сайта и выбрать один или несколько шаблонов для заполнения страниц вашего сайта.

По своей сути Twenty Twenty-Four представляет собой набор паттернов. Он отражает новый подход к созданию сайтов и представляет собой отличный пример того, как создавать темы блоков.

Теперь дело за вами. Вы установили Twenty Twenty-Four в свою среду разработки? Вам нравится новый подход к созданию сайтов WordPress? Напишите в комментариях ниже и поделитесь своими мыслями.