Twenty Twenty-One: первый взгляд на новую тему WordPress по умолчанию

Twenty Twenty-One — это новая тема WordPress по умолчанию, входящая в состав WordPress 5.6. Как и его предшественник, тема Twenty Twenty-One WordPress продолжает минималистичный дизайн темы. Если вы ищете отличную тему для создания своей собственной, вам повезло.

В этой статье мы рассмотрим особенности темы Twenty Twenty-One и покажем вам, как чтобы настроить внешний вид без дополнительной работы. Давайте погрузимся.

Что нового в Twenty Twenty-One

Twenty Twenty-One поставляется с WordPress 5.6 , который планируется выпустить 8 декабря 2020 года. Однако, если вы хотите установить тему сейчас, вы можете загрузить zip-файл Twenty Twenty-One с Github и установить его, как любую другую тему.

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

После установки вы сразу заметите, насколько хороша эта тема. На самом деле, я никогда не был большим поклонником тем по умолчанию. У меня есть несколько тем, которыми я занимаюсь; однако, поигравшись с этой темой, я могу без вопросов сказать, что если бы я создавал сайты с настраиваемыми темами, я бы действительно посмотрел на использование Twenty Twenty-One в качестве своей основной темы.

Хочу Узнать больше? Мы даже расскажем о построении темы с помощью редактора блоков более подробно во время предстоящего в январе премиального тренинга. Займите свое место для создания темы с помощью редактора блоков WordPress.

Хорошо, есть ряд функций, в которые я хочу углубиться вместе с остальной частью сообщения, поэтому давайте взглянем на некоторые из них. особенности темы.

Twenty Twenty-One Theme и Block Features

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

Редактор Гутенберга во многом полагается на создание страниц с помощью Twenty Twenty- Во-первых, он не только должен поддерживать функции темы, такие как миниатюры сообщений и навигация, но также должен поддерживать ряд функций, связанных с блоками WordPress.

Я думаю, что мне больше всего нравится в дайвинге глубоко в Twenty Twenty-One я вижу, как выглядит создание темы в наши дни. Во времена конструкторов страниц и решений без кода легко забыть о корнях системы тем внутри самого WordPress.

Я действительно рад видеть, какие системы тем перестанут существовать. следующие несколько лет, когда они начнут использовать некоторые достижения в библиотеках HTML, CSS и даже JS. И я очень рад, что вы ознакомитесь с некоторыми стилями и шаблонами блоков, которые они встроили в Twenty Twenty-One. Мы скоро перейдем к более продвинутым функциям, но давайте сначала рассмотрим некоторые основы.

Особенности темы

  • Тег заголовка
  • Форматы сообщений
  • Миниатюры сообщений
  • элементы HTML5
  • Пользовательский логотип заголовка
  • Пользовательский фон
  • Два меню навигации (УРА!)
  • Одна боковая панель

Функции блока

  • Стили по умолчанию
  • Стили редактора
  • Темные стили редактора (в темном режиме)
  • Выровнять по ширине
  • Размеры шрифта
  • Цветовые палитры
  • Предустановки градиента
  • Стартовый контент
  • Адаптивные встраивания

Я уверен, что некоторых мне не хватает, но это должно дать вам представление о том, какие функции доступны в Twenty Twenty-One. . В следующем списке представлены функции, которые мне больше всего нравятся, и я хотел бы погрузиться в них немного глубже.

Два меню

Я думаю, что это функция, которую я наверное, больше всего волнует, в основном из-за того, что тема по умолчанию наконец поддерживает несколько меню. Меню — это неотъемлемая часть веб-сайта, и я всегда чувствовал себя слишком ограниченным, имея поддержку только одного меню из коробки.

Слава Twenty Twenty-One, теперь вы можете добавить два меню. Вы получаете один в верхнем колонтитуле и один в нижнем колонтитуле.

Интересная особенность Cover Block

Я никогда не использовал основной блок обложки. Но во время тестирования Twenty Twenty-One я случайно поместил пару блоков обложки в трехколоночный макет и добавил к нему фиксированное фоновое изображение. Знаете ли вы, что если вы сделаете это со всеми блоками обложки, это применит эффект коробки? Проверьте это.

Я вижу, что это используется в различными способами, и мне любопытно узнать, начал ли кто-нибудь это использовать. Дайте нам знать в комментариях.

Форматы сообщений

Я могу вспомнить, когда форматы сообщений впервые появились в ядре WordPress. Это была идея, над которой они играли, и я был очень взволнован, увидев, что они стали стандартом. Конечно, темам потребовалось некоторое время, чтобы добавить их поддержку, но, тем не менее, тот факт, что Twenty Twenty-One все еще использует их, показывает, что они все еще должны получать немного любви.

Twenty Twenty-One поддерживает девять форматов сообщений:

  • Ссылки
  • Asides
  • Галереи
  • Изображения
  • Цитаты
  • Статус
  • Видео
  • Аудио
  • Чаты

Они доступны на панели «Статус и видимость» в настройках редактора. Что мне действительно нравится, так это контент блога, в котором вы создаете несколько типов контента, например сообщения блога, аудиофайлы и видеофайлы..

Размеры шрифта редактора

Когда вы начинаете смотреть на компоновщики страниц, всегда есть опасения, что вы измените стиль сайта. Я работал со многими клиентами на протяжении многих лет, и я работал с несколькими конструкторами страниц на протяжении многих лет. Больше всего меня беспокоит то, что клиент быстро превратит страницу в новейшие Geocities.

Вот здесь и пригодятся размеры шрифтов редактора. Когда тема устанавливает размеры в таблице стилей темы, это невероятно их легко использовать с блоками. Twenty Twenty-One поддерживает следующие размеры шрифтов:

  • Очень мелкий — 16
  • Маленький — 18
  • Нормальный /Средний — 20
  • Большой — 24
  • Очень большой — 40
  • Огромный — 96
  • Gigantic — 144

Настройки цвета

Еще одна область, в которой я беспокоюсь о компоновщиках страниц, — это цвета. Я всегда хочу быть уверенным, что клиенты могут работать самостоятельно. Частично для этого нужно убедиться, что они могут применять правильную цветовую схему к страницам и т. Д. Мне кажется, что это, вероятно, самый большой промах в теме Twenty Twenty-One, по крайней мере, из коробки.

В настройщике есть панель «Цвета и темный режим» (мы перейдем к последнему ниже), которая включает только две опции:

  • Простая палитра цветов с 10 предустановленными цветовые палитры.
  • Флажок для включения/выключения темного режима.

Здесь есть только возможность изменить цвет фона. Вы можете изменить цвет фона с пастельно-зеленого на несколько других. Эти же цвета доступны в качестве цветовых палитр блоков в настройках блока редактора.

Давайте на минутку погрузимся в параметр темного режима.

Поддержка темного режима

Я использую Mac, и с тех пор, как в пользовательский интерфейс добавили параметр Dark Mode, я переехал туда. Я уверен, что вы собираетесь сказать, что темный режим предназначен для разработчиков. Существует множество мнений о том, полезен ли темный режим для ваших глаз или нет. Я оставлю это на ваше усмотрение.

С Twenty Twenty-One вы можете включить темный режим на своем сайте. Вот как:

  • Поддержка темного режима доступна в качестве дополнительной функции для владельцев сайтов.
  • Кнопка переключения была удалена из интерфейс редактора и доступен только в Настройщике.
  • Кнопка переключения темного режима расположена в правом нижнем углу (левом или RTL) и исчезает, когда средство просмотра сайта прокручивает страницу вниз.
  • При включенном темном режиме посетители сайта могут включать/выключать его в зависимости от своих личных предпочтений и независимо от настроек своей ОС/браузера.

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

Шаблоны блоков

Шаблоны блоков WordPress были представлены в WordPress 5.5, а в Twenty Twenty-One мы видим полный набор шаблонов блоков.

Ранее мы рассматривали шаблоны блоков, но TL; DR; в шаблонах блоков заключается в том, что они представляют собой предопределенные макеты, которые позволяют пользователям создавать любое количество сложных макетов, нажимая всего несколько кнопок.

Если вы хотите немного погрузиться в код, вы можете проверить inc/ block-patterns.php. Здесь вы можете увидеть все шаблоны блоков, которые определяет Twenty Twenty-One.

Во время тестирования вот шаблоны блоков, которые определяет тема.

  • Большой текст
  • Область ссылок
  • Медиа и заголовок текстовой статьи
  • Перекрывающиеся изображения
  • Два изображения демонстрируют
  • Перекрывающиеся изображения и текст
  • Список портфолио
  • Контактная информация

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

Стили и настраиваемые свойства CSS

Один из интересных аспектов Twenty Twenty-One — это набор встроенных функций для разработчиков. Вам нужно покопаться в коде, чтобы извлечь некоторые из замечательных функций, поэтому давайте поговорим о доступных вам настраиваемых свойствах CSS.

Действительно замечательная функция препроцессоров CSS — это возможность включать переменные внутри CSS. Это позволяет вам добавить что-то вроде цвета в качестве переменной, а затем использовать это в остальной части вашего CSS. Вот на что похожи пользовательские свойства CSS.

Пользовательские свойства CSS (также известные как переменные CSS) — это сущности, которые содержат определенные значения, которые можно использовать во всей таблице стилей.

Давайте поговорим. о том, как это работает.

Чтобы иметь возможность использовать эти настраиваемые свойства CSS, вам необходимо установить значение свойства в блоке: root вашего CSS. Вот быстрый снимок экрана: root-блока в теме Twenty Twenty-One.

Вот пример того, что вы можете с этим сделать. Допустим, вы хотите добавить цвет рамки вокруг изображений. Вы можете сделать это с помощью этого небольшого фрагмента кода.

: root {--global - color-red: # ff0000;} img {border: 1px solid var (- global - color  -red);} 

Первое, что вам нужно сделать, это объявить его в блоке: root. После этого вы добавляете var в объявление для границ.

Однако вы должны быть осторожны при использовании настраиваемых свойств CSS, если вам нужно поддерживать старые браузеры. Хорошая новость заключается в том, что, поскольку они поддерживаются всеми основными браузерами, вы можете быть уверены, что они будут работать у большинства людей, просматривающих ваш сайт.

Заключение: Twenty Twenty-One , Solid Theme

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

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

Конечно, если вам просто нужна хорошая отправная точка для вашего следующего веб-проекта, у вас это тоже есть.



/Twentytwentyone Archived

Эта тема была объединена в репозиторий WordPress Core SVN и больше не поддерживается на GitHub.

Сообщайте обо всех новых ошибки запросов на повторное внесение изменений в Trac: https://core.trac.wordpress.org/newticket.

Соавторы: wordpressdotorg Требуется минимум: 5.3 Протестировано до: 5.6 Требуется PHP: 5.6 Лицензия: GPLv2 или новее URI лицензии: http://www.gnu.org/licenses/gpl-2.0.html

Описание

Twenty Twenty-One — это чистый холст для ваших идей, и он делает редактор блоков вашей лучшей кистью.

Благодаря новым узорам блоков, которые позволяют создавать красивый макет за считанные секунды, мягкие цвета и привлекательный, но вневременной дизайн этой темы позволят вашей работе сиять.

Попробуйте! Посмотрите, как Twenty Twenty-One улучшает ваше портфолио, бизнес-сайт или личный блог.

Участие

С этого момента любой новые проблемы следует открывать в WordPress Core Trac, а не на GitHub, чтобы их можно было перенести туда вручную позже.

Пожалуйста, укажите в обращениях префикс Twenty Twenty-One: чтобы они легко найти и собрать с помощью поиска или фильтров. Спасибо!

https://core.trac.wordpress.org/newticket?component=Bundled+Theme&summary=Twenty+Twenty-One

https:// core.trac.wordpress.org/search?q=twenty+twenty-one.

Оцените статью
logicle.ru
Добавить комментарий