Лучшие WordPress-темы с поддержкой Gutenberg
Все темы для WordPress делятся на:
- адаптивные,
- неадаптивные.
Адаптивные не зависят от устройства, которое посетитель использует для просмотра сайта. Будь это обычный монитор, ноутбук, планшет или смартфон, адаптивность позволит каждому элементу вашего сайта корректно отображаться на экране любого размера. Кроме того, крупные поисковые системы тоже учитывают эту функцию в своей поисковой выдаче.
Как правильно установить шаблон?
Как настроить тему без ошибок?
Поэтому очень важно для своего WordPress-сайта использовать адаптивный шаблон, который обеспечит Вашему сайту хорошие результаты в поиске и будет удобным для посетителя.
В нашем обзоре есть как премиум темы, так и те, которые можно совершенно бесплатно скачать из официального репозитория WordPress.
Читайте также: Проверка изображений на уникальность. Способы сделать картинку уникальной
The7
The7 – многоцелевой и полностью адаптивный шаблон WordPress с множеством различных настроек. Тема подойдет для любого вида сайта с любой тематикой. Одинаково красиво будет смотреться как корпоративный одностраничный сайт, так и обычный блог или интернет-магазин.
Особенности:
- адаптивный дизайн;
- наличие одного из лучших компоновщиков страниц Visual Composer;
- 3 разных варианта разметки сайта;
- 20 красочных цветовых схем;
- встроенный слайдер;
- 4 разных типа шапки;
- наличие более 680 Google-шрифтов;
- портфолио-менеджер;
- кнопки вызова;
- иконочные шрифты;
- возможность создать красивые фотоальбомы;
- поддержка самых популярных плагинов, включая Gravity Forms, Events Calendar, Contact Form 7, bbPress, WooCommerce и WPML-плагины;
- готовность к переводу;
- оптимизирован для SEO.
Демо | Узнать больше
Xone – одностраничный шаблон WordPress с чистым дизайном
Xone – чистый и элегантный, современный одностраничный шаблон в пяти вариантах загрузки, на ваш выбор. Достаточно богатый функционал: слайдер «Революция», Ajax портфолио и форма контактов, возможность кастомизации виджетов. Шаблон поддерживает Retina-дисплеи, фоновые изображения или видео с параллакс-эффектами и готов к локализации.
The Essence
The Essence – мощный, гибкий адаптивный премиум-шаблон, который подойдет для блогов и информационных сайтов любой тематики.
Особенности:
- адаптивный дизайн;
- наличие функции совместного доступа, позволяющей добавить плавающий социальный бар;
- слайдер изображений;
- интеграция с соцсетями, включая кнопки Поделиться;
- 17 различных макетов сайта;
- пользовательский виджет для Instagram;
- настраиваемые промо-боксы на домашней странице;
- оптимизирован для SEO;
- готовность к переводу.
Демо | Узнать больше
Flatik – Адаптивный многоцелевой шаблон WordPpress
Flatik – чистый, современный вордпресс шаблон с продвинутыми возможностями фреймворка Options Framework. Подойдет корпоративному и бизнес сайту, персональному портфолио, блогу. Ключевые особенности: HTML5/CSS3 верстка, кастом шорткод-плагин для создания стартовых страниц и красивых анимированных слайдеров, неограниченные бэкграунды и цвета, шорткоды, слайдеры (помимо бесплатно-включенного слайдера «Революция», FlexSlider и Nivo Slider), конструктор страниц Visual Composer с интерфейсом перетаскивания.
JournalX
Journal X – полностью адаптивная премиум-тема для сайтов-журналов с бесконечным скроллом. Идеально подойдет для сайтов журнального типа, где необходимо сделать акцент на контенте.
Особенности:
- адаптивный дизайн;
- приятный и современный дизайн;
- проработанная типографика;
- чистый код;
- высокая скорость работы;
- бесконечная подгрузка новых постов;
- плавающий сайдбар;
- 5 видов отображения карточек постов;
- 8 рекламных позиций, включая отдельный блок для мобильных;
- микроразметка schema.org;
- проработанная типографика;
- 3 вида информационных блоков для привлечения внимания читателя;
- возможность добавления спойлеров в контенте;
- SEO-оптимизированная;
- бесплатные обновления;
- переведена на русский язык;
- гибкая система выбора лицензии.
Кстати, у темы JournalX бесконечный скролл с подгрузкой новых постов на главной и в рубриках.
Демо | Узнать больше
Codeus – Многоцелевой адаптивный шаблон WordPress
Codeus – сделанный со вкусом, аккуратный WP-шаблон. Включает все необходимое вашему бизнесу: страницы для бизнес профиля компании, проект/продукт страницы, ШОУ-Кейсы, выразительные слайдшоу & галереи, полностью адаптивные «таймлайны новостей», функция быстрый поиск, интерактивные диаграммы, виджеты, элементы плоского дизайна в виде современных flat иконок и изображений.
На чём основан адаптивный шаблон сайта
Создание адаптивного шаблона основано на пяти основных составляющих:
Читайте также: Как заработать на квартиру: 5 реальных способов
- Резиновый (адаптируемый) макет (каркас) – если основной шаблон имеет фиксированные размеры шапки, сайтбара, блока под контент, футера, то его резиновая копия вычисляется на основе процентной доли от родительского контейнера.
Так, например, если родительский контейнер имеет размер 760рх, а в нём содержится блок контента — 495рх и сайтбар — 190рх. Определение процентной доли каждого из блоков будет вычисляться по формуле:
Искомый контейнер (рх) / Родительский контейнер (рх) * 100% = Результат (%)
Пример расчёта:
Блок контента: 495/760*100= 65.1315789%
Сайтбар: 190/760*100=25%
Примечание: если бы в блоке с контентом был бы ещё один блок, то для него, родителем был бы блок контента.
- Резиновые (адаптируемые) изображения – здесь принцип работы таков, что изображение подстраивается под размеры блока в котором расположено (родителя). Для создания таких резиновых изображений достаточно в стилях css, для мобильных устройств прописать вот такие стили:
img {max-width:100%;height: auto;}
- Резиновые (адаптируемые) встроенные видео – принцип тот же, что и у изображений. Видео подстраиваются под размер контейнера в котором расположены. CSS стили для этого используются следующие:
embed, object, iframe {width: 100%; height: auto;}
- Резиновые (адаптируемые) шрифты – как правило, шрифты в шаблонах указываются в пикселях (рх), а их нужно перевести в относительную величину высоты шрифта (em).
Перевод шрифта из pxв em осуществляется по формуле:
Текущий размер шрифта (рх) / Стандартный размер шрифта (16рх) = Размер шрифта в (em)
Примечание: и хотя, браузеры в современных смартфонах и планшетах умеют масштабировать шрифты для удобства пользователя, пренебрегать этим пунктом не стоит.
- Медиазапросы (Mediaqueries) – именно благодаря медиазапросам и происходит показ того или иного дизайна в зависимости от размеров экран устройства с которого ведётся просмотр. Более подробно о том, как применять медиазапросы я писал здесь. Сейчас лишь напомню, что без этих запросов не будет и адаптивного дизайна в принципе.
сайдбары и медиафайлы
1: Предусмотрен вывод слайдера — в шапке сайта (утончённая регулировка широчайших возможностей и эффектов, прямо из админки) —
1-а Но если Вам необходим показ слайдера в теле статьи, то потребуется небольшая правка файла functions.php и CSS. Всё достаточно просто !! а лёгкость управления темой не выходит за рамки знаний начинающего админа.
2: теперь о виджетах и сайдбарах:
Читайте также: О чем писать на Яндекс Дзен: самые популярные статьи и темы в 2020 году
2-а: В обоих шаблонах имеются дополнительные именные (темные) виджеты: информационный виджет, шорткоды, ссылки… баннеры… (лёгкие) — один из них вывод записей, мне лично много симпатичен)) …все они утончённо настраиваемые…
Да что там, взгляните на сайте…
3: Странички шаблона:
Шаблон, имея массу оригинальных регулировок, настраивается ! абсолютно ! по требованиям админа, как и говорилось: ширина, цветовая палитра как самого сайта, так и отдельных страничек и т. п. Достаточно обладать начальными знаниями HTML!
Таким образом, любую отдельную текстовую страничку можно оформить стилистически индивидуально !! требуется только ваша фантазия:
…возможно, к примеру, сделать какие-то функционально-информационные страницы, совершенно стилистически отличные друг от друга, — во всю ширину контейнера сайта (наподобие отдельного подсайта визитки) не используя/используя в их выводе САЙДБАРы.
Всё от Вашего желания…
Регулировка и определение стилистики странички задаётся из текстового редактора админки.
Можете взглянуть здесь и здесь и здесь… Но — не стоит забывать, что эти мои странички выполнены всего-то для примера, — а у вас, конечно же, всё будет нарисовано по-своему…
Далее…
3-а: Все шаблоны располагают функциональной встроенной картой сайта для посетителя (не нужно будет заморачиваться поиском тяжёлых плагинов или пропиской кода) — страничку возможно на своё усмотрение симпатично настроить небольшим знанием PHP и HTML))
3-б: облегчённая карта сайта…
3-c: карта сайта с подробнейшим архивом по годам и месяцам, рубрикам; подрубрикам, записям и страницам… (Все эти удовольствия без плагинов — настройка из админки))
4: Встроенная лёгкая контактная форма (опять же !! вам не потребуются никакие утяжеляющие блог плагины).
Из админпанели настраиваются ЛОГОТИП или текстовое ИМЯ сайта, также правый баннерный блок (под любые нужды админа — реклама, объявления…). Причём все возможности сохраняются при смене позиций сайдбара и т.п.
На примере сайбар расположен слева, возможен правый вывод…
…и также предусмотрено расположение сайдбаров в футере блога (управление из админпанели).
Что примечательно: шаблоны можно приобрести «с установкой» или с первично настроенными файлами header.php, functions.php и footer.php — то есть с начальными seo-адаптациями (по договору с покупателем).
Абсолютно адаптивный!!
Шаблон Alica: примерно так выглядит в работе эта легко перестраиваемая тема — Примерный сайт
Цена 3500 p.
…с первичными настройками файла функций — 70$.
Все ли шаблоны можно адаптировать
Да, адаптировать можно практически все шаблоны. Только вот на какие-то нужно потратить меньше усилий, а на другие гораздо больше.
Тут нужно понимать, что сегодня уже все новые шаблоны для сайтов поддерживают адаптивный дизайн. И вы можете легко сменить шаблон на один из таких. Жалко лишь усилий, затраченных на доработку своего нынешнего шаблона.
Читайте также: Бот для торговли криптовалютой Autocrypto Bot – обзор и отзывы
Но, вот если вы всё же хотите адаптировать свой действующий шаблон, то нужно внимательно оценить трудности, с которыми вы столкнётесь. Определить целесообразность.
К примеру, мой старый шаблон можно было адаптировать, но при этом пришлось бы непросто применить новые стили и медиазапросы. Пришлось бы менять и дорабатывать графические элементы дизайна.
В этом конкретном примере пришлось бы переделать всю шапку и создать новый фон для мобильных устройств. И я решил сменить шаблон. Хотя и новый шаблон я дорабатывал не меньше старого.
Но, в любом случае, если шаблон вам нравится, и вы над ним изрядно потрудились, то конечно стоит ещё приложить усилия и сделать его адаптивным и удобным для мобильных пользователей.
Настройка адаптивной версии сайта WordPress
На сегодня система WordPress позволяет из административной панели настроить версию сайта для планшетов и мобильных устройств, сразу отслеживая сделанные настройки визуально. Настройка адаптивной версии сайта WordPress очень простая.
Сделать это можно на вкладке Внешний вид>>>Темы, выбрав рабочую тему для настройки. Можно выбрать любую другую установленную тему и посмотреть как она выглядит в адаптивном варианте.
Вы видели эту картинку настроек внешнего вида в других уроках, однако я никогда не обращал ваше внимание на значки внизу меню настроек.
Это и есть кнопки переключения вашего шаблона в варианты просмотра на планшете и мобильном устройстве.
Более того, в этих режимах работают все имеющиеся настройки темы. Вы можете идти по настройкам в меню настроек или выбирать значок «карандаша» в настройке которую нужно изменить, прямо на картинке шаблона.
Например, вам нужно поменять название сайта. Жмёте на «карандаш» у заголовка и в меню настроек меняете название. Или поменять меню, Жмёте на «карандаш» у меню и редактируете меню.
настройка меню для планшета
настройка меню для desktop
Обратите внимание, что все сделанные изменения настроек вы будете видеть онлайн. Если вы настройки не сохраните они сбросятся при выходе из режима настроек.
После окончания настроек, не забудьте сохраниться (опубликовать).
Лучшие адаптивные темы WordPress от TemplateMonster (-30% скидка)
Сегодня в сервисе качественных премиальных шаблонов TemplateMonster, о котором мы много рассказывали, стартовала акция -30% на все макеты для WordPress CMS. Собственно, это и сподвигло меня на написание заметки с подборкой самых новых и красивых адаптивных тем вордпресс. Не смотря на то, что скидка у них далеко не последняя, советую не упускать момент, особенно, если ищете интересный дизайн под свой новый или клиентский проект.
Хотелось бы заранее уточнить, что бесплатных адаптивных шаблонов в данном посте не будет. Возможно, чуть позже мы сделаем для вас отдельную подборку соответствующих дизайнов. В принципе, у большинства современных тем, создаваемых профессиональными разработчиками и проверенными компаниями, поддерживается корректная работа с мобильными устройствами. Сейчас это обязательное требование к макетам.
С учетом скидки, вы сможете заказать на TemplateMonster любой вариант где-то по 30-50 долларов, даже современную универсальную WordPress тему Monstroid 2. При том, что все дизайны качественно сверстаны и поддерживают последние версии CMS. У части тем преобладают функциональные возможности, другие могут похвастаться действительно креативным дизайном, например про гаджеты и рыбалку — отличные работы.
Чтобы перейти на страницу с понравившимся макетом, кликайте на изображение. Для удобства размещаю также небольшое описание по каждому варианту + его стоимость с учетом скидки. На сайте TemplateMonster сможете найти и другие адаптивные премиум шаблон WordPress, я лишь отобрал наиболее свежие из них и те, что меня максимально впечатлили.
Editorso ($32)
Судя по названию, шаблон создавался для авторов книг/текстов и всех, кто связан с похожей деятельностью (копирайтеры, например, и т.п.). По формату похож на блог с яркими графическими вставками и эффектами.
5 Blogging Themes ($74)
Это самый дорогой вариант в нашей подборке, однако архив содержит сразу 5 разных дизайнов — по 15 долларов за тему! Данные шаблоны вордпресс адаптивны плюс основаны на Bootstrap. Они поддерживают SEO настройки, Google шрифты, имеют детальную документацию. По внешнему виду есть разные реализации на любой вкус и под разные тематики. Отличная покупка может быть.
Studio Light ($53)
Макет сайта про некое устройство для KickStarter, хотя может использоваться и для любой похожей направленности — персональной страницы девайса или приложения. Здесь есть информационные блоки с перечнем функций, временная шкала, описание команды и т.п.
GadNews ($39)
Отличный адаптивный шаблон WordPress для проекта о гаджетах и разного рода техники (компьютерные новости также подойдут). Оригинальная навигация по заметкам на главной. Не так уж и дорого.
Stocks Feed ($53)
Дизайн этого варианта достаточно консервативен — прямые линии, прямоугольные блоки, сдержанные цвета. Однако вместе с этим он выглядит стильно, все элементы гармонично вписываются в общую концепцию.
Box ($53)
Еще один «квадратный» макет, которые даже называется соответствующим образом — Box. Тем не менее, за счет эффектов появления текстов, оригинального меню он создает впечатление более креативное, что-ли… творческое. Может, в принципе, использоваться и для корпоративного сайта компании, но явно не финансовой направленности. Хотя, с другой стороны, все зависит от используемой вами графики и контента.
WildRide ($32)
Читайте также: Что такое CMS: виды CMS и как выбрать движок для сайта
Велосипедный шаблон для WordPress с адаптивным дизайном. Он, кстати, входит в пакет 5 Blogging Themes. Понравилась компоновка блоков на главной, хотя в общих чертах и по функциям он полностью соответствует тематике блоггинга. Не особо сложная работа, но за 32 доллара вполне приемлемая.
7 Level ($53)
Классный креативный дизайн для бизнес проекта. Он не смотрится строго официально, но при этом дает понять, что компания серьезная и знающая свое дело. На фоне имеется параллакс эффект, что с большими выразительными шрифтами создает крутое впечатление. В макете имеется раздел с проектами и блог. Хороший вариант.
Ads ($53)
Неплохой адаптивный шаблоны WordPress для сайта рекламной фирмы. Нельзя сказать, что тут есть какие-то сверх оригинальные решения, но вместе с тем макет симпатичный. Авторы используют минимум текста и много пространства. Как и для любого бизнес дизайна, предусмотрен раздел проектов и блог.
Red Woods ($53)
Данный дизайн посвящен летнему лагерю. В принципе, это не сильно поменяло структуру шаблона — просто вместо портфолио/проектов тут галерея с разными вариантами компоновки фото. Для подобной ниши адаптивные темы WordPress важны, так как пользователи часто ищут информацию об отдыхе со смартфона. Тут и сложных функциональных элементов особо нет — зачастую лишь тексты и фото.
Lorenza ($53)
Дизайн для сайта кулинарной тематики. Можно использовать под проекты рецептов, кафе или бизнеса по продаже продуктов питания. Структура похожая на многие другие темы, хотя некоторые элементы имеют иное оформление. Средненький макет.
Financial Vision ($53)
Отличный адаптивный премиум шаблон WordPress по финансовой тематике — красивый, оригинальный, функциональный, удобный по навигации. В общем — практически идеальный. Нравится подача информации — четко и по существу, без лишней графики, но стильно. Советую обратить внимание.
Boutique Consultants Group ($32)
Еще одно классное решение по схожей теме, но больше подходит для сайта с «персональным брендингом». То есть, когда вы продвигаете не услуги компании, а свои собственные. По стилю, как и предыдущий вариант, много пространства и четко выраженный текст. Главная смотрится внушительно и емко (ничего лишнего).
Fishing Club ($55)
Во вступительном тексте я упоминал красивый дизайн сайта о рыбалке — вот он! Очень оригинально здесь реализован макет главной страницы — блоки приятно скомпонованы, все на своих местах. Внешний вид блога и обычных страниц в демо версии стандартные, но тут уже все зависит от вас — встроенный редактор позволяет создавать разные варианты оформления.
The Arc ($55)
Симпатичная адаптивная тема WordPress с набором разных эффектов для меню, информационных блоков на странице и т.п. Есть разбиение на колонки, элементы отзывов, сотрудников, клиентов, раздел портфолио, блок, услуги. В общем, полноценный такой корпоративный сайт. Не смотря на то, что авторы связывают его с тематикой архитектуры, сделать из него можно проект практически любой направленности.
New Faces ($53)
Как и подобает макету модельного агентства или фотографа, в дизайне используется максимум графики плюс подобраны стильные темные цвета. Главная, конечно, выглядит потрясающе. По сути, с помощью добавления разных блоков и оформления вы сможете создать и другие похожие страницы. Красиво.
Vegetexia ($32)
Простой и недорогой адаптивный шаблон WordPress — всего за 32 доллара по акции. Меня лично привлекает цветовое оформление — ярко, красочно, свежо. По формату это обычный блог с некоторыми продвинутыми графическими элементами в виде слайдеров.
На этом все, надеюсь, вам понравились эти 17 дизайнов. Больше макетов найдете на сайте TemplateMonster в разделе WordPress тем. При этом можете выбрать показ только адаптивных тем и ограничиться наиболее актуальными версиями CMS на данный момент. Что касается платить или нет — неоднократно уже поднимал эту тему. Тут уж вам решать, сумма со скидкой -30% получается весьма неплохая.
