Переход с темы Avada на Twenty Twenty One и Gutenberg

Вот уже несколько лет меня не покидает мысль, что тема Avada мне больше не приносит такого удовольствия от пользования как раньше. Я из тех людей, кто верит в то что контент должен быть в первую очередь полезным и доступным, а уже потом обернут в красивую обертку. Самую полезную информацию я частенько находил на достаточно ужасных сайтах (с точки зрения дизайна), но я не обращал внимания на визуальную составляющую. И наоборот — частенько наткнувшись на очень красивый сайт, я как-то терялся в дизайне и не особо воспринимал информацию. Был и «wow» эффект, но этого было мало… А учитывая, что последние несколько лет я разрабатывал ПО для оптимизации сайтов — ну прям грех мне было не получить заветные 100 баллов на PageSpeed Insights.

В обще, решил я что мне надоели эти тяжелые темы, и несмотря на всю мою любовь к WordPress теме Avada и ненависть к Gutenberg, настало время двигаться дальше. Еще в прошлом 2020 году я сделал попытку перейти на тему TwentyTwenty и пересесть на Gutenberg. Я не знаю или, если быть точнее — я не помню, почему мне изначально не зашел Gutenberg. Но уже тогда мне показалось, что у редактора большое будущее и мне ну прям очень хочется на него перейти.

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

И вот настал 2021, вышел WordPress 5.7, вышла тема Twenty Twenty One и я взялся за работу. Кстати, данный пост уже написан на Gutenberg.

Подготовка темы

Я очень хотел сохранить общую стилистику сайта, особенно шапку сайта:

Тема Avada

Мне подумалось, что я смогу это сделать лишь через CSS. И я был прав. Но, пришлось пожертвовать меню. Уж очень не хотелось ставить отдельные плагины.

Тема Twenty Twenty One + Gutenberg

Так же я решил увеличить ширину зоны контента с 1200px до 1300px и ширину базовых текстовых блоков с 610px до 810px. Честно говоря, не очень понимаю почему разработчики WordPress так сильно привязываются к такими странным размерам. На 34» мониторе, 610px под текст — ну это как-то странно.

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

:root {
	--global--color-blue: #0d99e4;
	--global--color-primary-hover: var(--global--color-blue);
}

А чтобы поменять цвета всяких рамок:

:root {
	--global--color-border: var(--global--color-blue);
	--separator--border-color: var(--global--color-blue);
	--form--border-color: var(--global--color-blue);
}

Вторым моментом нужно было перенести вот эту часть:

Верхняя часть страницы

Сначала я хотел создать все это непосредственно в Gutenberg, но я никак не мог найти способ выводить последние сообщения в том же формате, в котором они выводятся по умолчанию в теме. Поэтому, я решил добавить данный блок непосредственно в файл header.php дочерней темы:

<?php if ( is_home() ) : ?>
	<div class="wp-block-columns alignwide header-slogan-div">
		<div class="wp-block-column"></div>
		<div class="wp-block-column">
			<h3 class="has-text-align-right header-slogan">Привет! Я являюсь full-stack разработчиком. Моя специализация — это создание сайтов на базе WordPress и создании инфраструктуры для высоконагруженных проектов.</h3>
		</div>
	</div>
	<div class="wp-block-columns alignwide header-name-div">
		<div class="wp-block-column"></div>
		<div class="wp-block-column">
			<h3 class="has-text-align-left header-name">ANTON<br/>VANYUKOV</h3>
		</div>
	</div>
	<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<?php endif; ?>

Я постарался максимально сохранить использование блоков. Таким образом, с минимальными изменениями в CSS, мне удалось добиться идентичного блока как в Avada.

И последнее — в Twenty Twenty One присутствует функция темного режима:

Активированный темный режим

Почти все заработало «из коробки», мне лишь нужно было переписать мои синие цвета:

body.is-dark-theme {
	border-color: var(--global--color-dark-gray);
	--separator--border-color: var(--global--color-border);
	--form--border-color: var(--global--color-border);
}

.is-dark-theme .primary-navigation a {
	color: var(--entry-header--color-link);
}

.is-dark-theme .site-logo {
	background-color: var(--global--color-dark-gray);
}

.is-dark-theme .header-slogan,
.is-dark-theme .header-name {
	color: var(--global--color-light-gray);
}

Страницы и записи

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

Намного большая проблема — конвертация блоков из Fusion Builder (Avada) в Gutenberg. Какие-то базовые блоки можно конвертировать автоматически, нажимаем на блок и появляется опция преобразования:

Автоматическое преобразование в блоки

С более комплексными блоками ситуация более сложная:

Остатки Fusion Builder

Получается, что каждую запись, по хорошему надо вручную отредактировать. У меня порядка 150 записей, я решил особо не заморачиваться. На момент перехода, я конвертировал 25 самых популярных постов, а остальные решил поправлять по ходу. Даже, если ничего не менять — посты, в принципе, читаемы. Да, выглядит не очень и мы не используем потенциал блоков Gutenberg, но это не огромный блокер. Если бы у меня было больше 200 постов, я бы заморочился над автоматизированным решением и все сконвертировал автоматически, тем более, что такие решения уже есть.

Кастомные блоки и модули

Что делать с уникальными блоками из Avada — FAQ, портфолио… Да ничего — мне сейчас портфолио не особо нужно, так как мои проекты говорят больше нежели несколько красивых фотографий, а FAQ — это я перенес непосредственно в свой плагин.

Вывод

Переход с Avada позволил мне серьезно разгрузить WordPress, я избавился от тяжелой темы с ее встроенным Fusion Builder, избавился от плагина для подсветки синтаксиса в пользу блока «Код» в Gutenberg. Плюс ко всему я получил дополнительный темный режим. И огромный прирост в производительности:

Время отклика до и после

Думаю, объяснять где я поменял тему не нужно.

И дополнительный плюс — в Google PageSpeed Insights мои показатели скакнули до 90 в мобильной версии и 98 в версии для компьютеров. В данный момент, от 100 меня отделяет лишь шрифты и аналитика (я использую две разные системы для сбор статистики). Но это уже повод для отдельной темы.

2 комментария

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *