Тема Tove: презентация темы WordPress, совместимой с полным редактированием сайта.

Гамильтон, Хичкок, Чаплин, Миядзаки: эти имена, вероятно, напоминают вам известных людей, особенно когда вы думаете о спорте и кино.

Но знаете ли вы, что они также имеют какое-то отношение к WordPress? Да, по-настоящему. За исключением того, что это не то, что вы думаете: Льюис Хэмилтон не решил заняться веб-дизайном WP после потери титула чемпиона мира 2021 года на последнем круге последнего Гран-при.

Тем не менее, он может сойти с ума из-за этого (привет, Альфред), но вы упускаете суть. На самом деле, эти 4 известные фамилии также являются темами WordPress, созданными плодовитым и креативным Андерсом Нореном .

У мужчины в официальном каталоге их более 20, и сегодня мы сосредоточимся на его последнем ребенке по имени Туве .

Это имя также связано со знаменитостью — мы вернемся к этому позже — но больше всего оно тесно связано с небольшой революцией в выпуске WordPress 5.9.

Его имя? Полное редактирование сайта (FSE). Признайтесь, вам не терпится узнать больше, не так ли? Свет, камера, действие: пойдем со мной, чтобы открыть для себя Туве… и в то же время немного FSE, так как они идут вместе!

Вашим лучшим проектам WordPress нужен лучший хостинг!

WPMarmite рекомендует Bluehost: отличная производительность, отличная поддержка. Все, что нужно для отличного старта.

Попробуйте Блюхост

Что за тема Туве?

Tove — бесплатная многоцелевая тема WordPress , полностью основанная на блоках , используемых редактором контента WordPress (Gutenberg). Он был разработан в соответствии с требованиями проекта полного редактирования сайта, выпущенного вместе с WordPress 5.9 (выпущенным 25 января 2022 г.).

Запущенный в сентябре 2021 года, Tove остается очень конфиденциальным на момент написания. У него «всего» более 400 активных установок, в основном по одной простой причине: его можно использовать только с WordPress 5.9 или с одной из последних версий плагина Gutenberg.

Среди особенностей темы WordPress Tove выделяются следующие моменты, как подчеркнул ее разработчик Андерс Норен:

• Tove очень легкий с точки зрения кода , что является реальным плюсом с точки зрения скорости загрузки и пользовательского опыта, который он может предложить.
• Он был разработан специально для ресторанов и кафе , «но вы можете использовать Tove для любого типа веб-сайта» , — говорит Норен. Туве также отличается своей гибкостью.
• Тема Tove имеет около 40 шаблонов блоков, которые можно добавить одним щелчком мыши на ваши страницы, чтобы, например, иметь готовые к использованию верхний и нижний колонтитулы.

Это делает его достойным предметом изучения, учитывая, что темы, совместимые с FSE, в настоящее время не очень широко распространены в экосистеме.

С одной стороны, вы найдете несколько, созданных на экспериментальной основе (Armando, Q, TT1 Blocks).

С другой стороны, вы столкнетесь с темами, которые приняли решение оседлать волну FSE раньше других, таких как Blockbase, Hansen или Aino.

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

Что такое полное редактирование сайта?

Проект Full Site Editing, доступный в WordPress 5.9, позволяет создавать и редактировать всю структуру сайта (включая верхний и нижний колонтитулы, меню и шаблоны страниц, а не только его содержимое) с помощью блоков редактора содержимого (Gutenberg).

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

Это серьезное изменение, приближающее редактор контента WordPress к тому, как работает конструктор страниц .

Вы также можете ознакомиться с нашим подробным исследованием FSE и его влияния на магазины тем WordPress.

Теперь вы знаете о FSE все! Давайте продолжим, сосредоточившись на разработчике темы Tove, Андерсе Норене.

Тема Туве: прикосновение Андерса Норена

Если вы внимательно следите за новостями WordPress, имя Андерса Норена наверняка вам напомнит.

Этот шведский разработчик и веб-дизайнер из Стокгольма прославился своими темами WordPress, которые бесплатно доступны в официальном каталоге.

Всего он предлагает 22 из них и было скачано около 4 миллионов раз . Большинство из них в основном посвящены ведению блога, но вы также можете найти некоторые из них для создания портфолио или интернет-магазина.
Часто принцип один и тот же: минималистский и чистый аспект.

Помимо этого, Норен также вносит свой вклад в разработку ядра WordPress. Пример? Он разработал нативную тему Twenty Twenty, которая поставляется с WordPress 5.3 .

Среди этой небольшой армии тем есть Tove, первая тема, полностью совместимая с FSE, созданная Норен. После этой первой проверки пульса пришло время взглянуть на эту инновационную тему.

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

Как выглядит тема Туве?

Основываясь на демонстрационной презентации темы Tove, мы можем увидеть несколько основных характеристик:

• Пастельные и кричащие цвета , с преобладанием розового, голубого и желтого.
• Различные элементы в шапке : иконки, перенаправляющие в социальные сети, часы работы (помните, что тема посвящена кафе и ресторанам) и даже кнопка призыва к действию. Логотип расположен в центре шапки.
• Визуальные эффекты отображаются на весь экран.
• Блоки контента прямоугольной и квадратной формы .
• Пустые пространства , позволяющие дышать и подчеркивающие воздушную сторону.
• Использование шрифта «DM Sans» , геометрического шрифта и шрифта без засечек.

Демонстрация предназначена для того, чтобы дать вам законченный визуальный аспект темы, но вы, конечно, можете изменить ее основные характеристики (цвета, типографику, типы блоков и т. д.), играя со зверем.

Это то, на чем мы сосредоточимся в следующей части.

Присоединяйтесь к подписчикам WPMarmite

Получите последние сообщения WPMarmite (а также эксклюзивные ресурсы).

ПОДПИШИСЬ СЕЙЧАС

Как настроить тему Tove на WordPress?

Редактор сайта

После того, как вы активировали тему Tove, перейдите в «Внешний вид»> «Редактор». Редактор сайта появился в WordPress 5.9.

Здесь вы можете настроить Tove, а также любые другие блочные темы, которые вы установите позже.

Как видите, меню «Виджеты» исчезло, как и меню «Настройщик».

Теперь все происходит в этом известном редакторе сайтов, который использует блоки Гутенберга для создания и заполнения всех областей вашего сайта .

По умолчанию вы попадаете в шаблон «Индекс», в котором перечислены все публикации вашего блога.

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

Нажав на нее, вы попадете на панель инструментов редактора контента, из которой вы можете внести коррективы :

Шаблоны

Для облегчения создания стандартных страниц Tove также предлагает 5 шаблонов. Вы можете получить к ним доступ, нажав «Просмотреть все шаблоны»:

Среди этих шаблонов следующие:

• Отдельный пост для управления отображением страницы поста (избранное изображение, метатеги и т. д.).
• Page , чтобы упорядочить представление одной страницы, как если бы вы делали это с публикацией.
• Index , чтобы настроить организацию страницы блога, на которой перечислены все ваши публикации.
• Страница без заголовка , чтобы оформить страницу без заголовка.
• 404 , чтобы создать пользовательскую страницу 404.

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

Давайте остановимся на теме общих настроек вашего сайта, взглянув на глобальные стили. Это новая функция в WordPress 5.9 , которую, конечно же, использует тема Tove.

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

Вам больше не нужно проходить трудоемкий процесс изменения каждого элемента один за другим.

По сути, цель состоит в том, чтобы заменить инструмент Customizer, предоставив место для управления всеми настройками темы и стиля блока.

Чтобы получить доступ к этой опции и изменить внешний вид Туве — розовый цвет может не соответствовать вашему руководству по стилю — нажмите маленькую кнопку вверху, справа от панели инструментов редактора сайта:

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

Стили блоков

Вы хотите пройтись по одному элементу за раз? Каждый блок отдельно? Это также возможно с темой Tove, которая предлагает несколько пользовательских стилей блоков.
Чтобы открыть их, вам просто нужно нажать на блок по вашему выбору.

В зависимости от выбранного блока будет предложен один или несколько стилей . Например, блок «Цитата» предлагает начертание «Обычный» и «Крупный», которые изменяют размер шрифта:

Блок «Изображение» предлагает два варианта стиля: «Закругленный» или «Затененный».

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

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

Это готовые к использованию разделы контента, состоящие из нескольких блоков Гутенберга . Вы можете очень легко добавить их в свой контент, щелкнув вкладку «Шаблоны» в редакторе контента WordPress.

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

Андерс Норен предлагает почти 40 шаблонов блоков на тему Туве. Они разделены на 7 категорий:

• Призыв к действию с двумя шаблонами для создания горизонтального или вертикального призыва к действию.
• Блог , чтобы настроить отображение страницы блога, особенно в виде сетки или списка (всего 5 шаблонов).
• Header , который предлагает 6 различных шаблонов заголовков.

• General , где вы найдете 11 шаблонов для отображения отзывов, прайс-листов, информационных баннеров и других иконок социальных сетей.
• Hero , который включает в себя 4 шаблона для отображения фона, заголовка, кнопок и текста.
• Ресторан с 8 готовыми к использованию шаблонами специально для ресторанов: меню, часы работы, практическая информация, кнопка бронирования.

• Нижний колонтитул с 7 шаблонами для настройки нижнего колонтитула, включая кредиты и макет (например, со столбцами).

Что ж, теперь вы знаете, как манипулировать и настраивать Туве. Прежде чем двигаться дальше, вот мое мнение по поводу обработки этой темы.

Вообще говоря, тема Tove проста в использовании, что является большим преимуществом. Хотя сначала вам придется привыкнуть к редактору сайта WordPress — особенно тем, кто читал эту статью в начале 2022 года — вы быстро освоитесь, особенно если вы уже знакомы с редактором контента.
Умеете пользоваться блоками? Тогда у Туве не будет от тебя секрета.

Наконец, чтобы закрыть эту часть о настройке темы, знайте, что вы можете связать Tove с компоновщиком страниц.

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

Создайте свой сайт с Elementor

Легко создавайте внешний вид вашего сайта WordPress с помощью известного конструктора страниц. Попробуйте Элементор

Попробуйте Элементор

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

Производительность, SEO, отзывчивость: 3 основных аспекта

Производительность темы WordPress Tove

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

Это, очевидно, нужно тщательно учитывать, поскольку это влияет на пользовательский опыт , а тем более на SEO, вопреки распространенному мнению.

Несколько факторов могут повлиять на скорость загрузки страниц вашего сайта: вес ваших изображений, используемые вами плагины, ваш веб-хостинг, ваша версия PHP и т. д.

Среди них есть и ваша тема. Чем он легче и лучше закодирован, тем больше вероятность, что у вас будет быстрый сайт.

В этом отношении Туве — отличница. Он не перегружен ненужными элементами, и, как указано на его странице презентации, поскольку он построен вокруг проекта полного редактирования сайта, Tove остается «простым и тонким. Действительно тонкий. Тема весит чуть более 200 килобайт, и большая часть этих байтов приходится на иллюстрации-заполнители и скриншот темы» .

Это то, что вы заметите, если протестируете демо-версию темы с помощью инструмента измерения производительности, такого как WebPageTest.

Кстати, если ваш сайт немного отстает, воспользуйтесь возможностью, чтобы немного ускорить его, активировав, например, отличный премиальный плагин WP Rocket (партнерская ссылка).

SEO

Вас беспокоит скорость загрузки ваших страниц? Тогда, как добросовестный создатель сайта, вы наверняка должны беспокоиться о своем SEO.

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

Чтобы страница правильно ранжировалась в Google и других, необходимо схематически:

• Работайте над содержанием вашего сайта вокруг целевых запросов (ключевых слов).
• Получите ссылки с других сайтов (известные обратные ссылки).
• Позаботьтесь об архитектуре вашего сайта .

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

Для управления внутренней поисковой оптимизацией (оптимизацией контента) у вас не будет особых опций с темой Андерса Норена.

В редакторе контента WordPress вы сможете выбрать теги заголовков (h1, h2, h3, h4, h5) по вашему выбору и правильно применить их к различным заголовкам.

В остальном я рекомендую использовать общий SEO-плагин, такой как Yoast SEO. Это не приведет к автоматическому увеличению позиций на страницах результатов поиска.

Тем не менее, это гарантирует, что вы сможете правильно настроить некоторые ключевые аспекты вашего SEO, при условии, что вы сделаете это правильно.

Для этого обратитесь к нашему руководству о самом известном SEO-плагине в блоге WPMarmite.

Отзывчивый

Забота о производительности вашего сайта и SEO — это здорово. Но не переусердствуйте с сайтом, который не оптимизирован для мобильных устройств. Точнее, мы называем это «отзывчивым дизайн".

Опять же, об этом действительно нужно позаботиться, особенно если большинство посетителей приходят на ваш сайт WordPress со смартфонов или планшетов.

Совет. Чтобы узнать, какой тип устройства используют ваши посетители, перейдите в Google Analytics: Аудитория > Мобильные устройства > Обзор.

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

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

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

Чтобы убедиться в этом вручную, вы можете действовать двумя способами:

1. Сузьте окно браузера влево или вправо , чтобы убедиться, что содержимое правильно помещается друг под другом. У Туве так оно и есть: все отображается безукоризненно, так как окно сужается.
2. Используйте бесплатный инструмент, предлагаемый Google : Mobile-Friendly Test. Чтобы сделать это правильно, я протестировал демо-страницу Туве. Гугл ничего плохого не нашел:

Вот и все: отзывчивость, SEO и производительность, мы закончили эту сложную часть. Раз уж мы подошли к концу обзора этой темы, поговорим о счете?

Цена и поддержка пользователей

С Tove нет сюрпризов и скрытых затрат, когда дело доходит до ценообразования: она на 100% бесплатна , как и остальные темы, разработанные Андерсом Нореном.

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

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

Вы всегда можете попытаться опубликовать свои запросы на форуме общественной поддержки Tove. И вот хорошая новость: вы заметите, что Андерс Норен довольно реактивен и большую часть времени отвечает на вопросы, которые ему задают .

Тем не менее, на практике большинство проблем, с которыми вы можете столкнуться, будут связаны с редактором сайта WordPress, а не обязательно с Tove, который на него полагается.

И для этого нет чудодейственного рецепта: вам придется тренироваться, чтобы приручить животное и освоить его, как вождь .

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

Для этого Норен рекомендует веб-сайт Каролины Наймарк, автора ядра WordPress: fullsiteediting.com.

Наше мнение о теме Туве

Ну вот и мы. Дегустация Туве подошла к концу. Пришло время все это переварить и подвести итоги. Давайте подытожим все, что мы прошли с начала этого поста.

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

Простая в обращении, приятная и простая в использовании без кодирования , Tove — это тема, которая, кажется, предназначена для начинающих.

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

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

Более того, если сравнивать ее с другими известными темами из официального каталога, Tove остается намного легче с точки зрения возможностей настройки (что логично, так как это не ее цель).

Таким образом, начинающий веб-дизайнер, безусловно, будет чувствовать себя более комфортно с темами, которые ведут его от А до Я и полны шаблонов и других вариантов стиля, таких как Astra, GeneratePress, Kadence или Blocksy.

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

Скачать тему "Туве":

Что вы думаете об этом? Вы уже планируете подписаться на тему FSE и Tove?

Жду ваших ответов в комментариях ниже.