Самая быстрая WordPress тема Reboot

Насколько быстрая тема Reboot?

Тут мы ничего нового не откроем, мы умеем создавать только быстрые темы 😀

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

Время генерации страницы ~ 0.1 секунда.

Вам не скоро потребуется плагин кеширования. Страницы итак будут открываться моментально.

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

А что скажет PageSpeed?

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

На мобильном — 91
На компьютере — 98

В обзоре Алейников Сергей подробнее рассказал и показал, как проходил тест.

Видео начнется не сначала, а именно тест Google PageSpeed. Если еще не видели обзор, рекомендуем посмотреть полностью.

Какие встроенные модули есть в теме Reboot

Разберем подробно, какие модули разработала наша команда и зачем они вообще нужны, когда есть плагины?

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

Сразу объясним, зачем все эти модули? Почему не просто плагины.

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

Так и с нашими модулями. Они все легкие, не перегружены лишним кодом, все написаны нашими программистами для наших тем. Максимально оптимизированы.

Обратная связь

Забудьте про Contact Form 7, про другие тяжелые плагины. Всего один шорткод и на странице появляется форма обратной связи. Легкая, быстрая, простая.

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

В Reboot — Вы просто пишете шорткод

[contactform]

contactform

Карта сайта HTML

Следующее, что приходилось делать — устанавливать Dagon Design Sitemap Generated или его аналог. Настраивать и вырезать внешние ссылки. Чтобы у нас появилась страница, на которой будут ссылки на все наши статьи для лучшей индексации в поисковых системах.

В Reboot — мы пишем шорткод

[htmlsitemap]

Содержание статей

Ну Вы поняли? 😁

Раньше — ищем плагин Table of Contents Plus или аналог, устанавливаем, настраиваем, допиливаем внешний вид.

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

Хлебные крошки

Несмотря на то, что мы всегда рекомендуем ставить Yoast SEO, в котором есть хлебные крошки — не все пользуются этим плагином. Да и на выходе, хотелось бы получить микроразметку Schema.org.

Популярный плагин Breadcrumb NavXT имеет более 800 000 установок. Забудьте и про него.

В Reboot — хлебные крошки активируются в один клик 👍

Лайтбокс

Или всплывающее окно для картинок. Вы просили — мы сделали.

Любой подобный плагин добавляет лишний JS и CSS файл в код страницы, тем самым замедляя отображение контента. А Вам это нужно?

В Reboot — мы написали свой плагин с блэкджеком. Всего одна настройка: включить или выключить.

Рекламный модуль

Мощнейший рекламный модуль, который появился в самой первой нашей теме и постоянно дорабатывался. Что мы получаем на выходе?

12 рекламных позиций, после шапки, перед и после контента, посередине контента, перед и после похожих записей, после любых абзацов и т.д.

Но это даже не самая соль!

Для каждой рекламной позиции Вы можете задать:

Минимальное количество символов
Чтобы не показывать рекламу в маленьких статьях
Через сколько дней показывать рекламу
Не показывайте рекламу в новых статьях, пусть постоянные читатели получают контент без рекламы
Фильтр по записям
Бывает, что для некоторых записей нужно отключить рекламу. Или наоборот показывать только в определенных.
Фильтр по рубрикам
Аналогично записям, скрывайте рекламу для определенных рубрик.

WordPress: Самая быстрая WordPress тема Reboot

Слайдер

Решили добавить красоты для главной страницы? Запилить туда красивый слайдер постов? Он у нас есть 😀

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

Рейтинг статей

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

Важный момент — рейтинг содержит микроразметку, чтобы в результатах поисковых систем отображались звездочки:

P.S. картинка выше — это образец, т.к. демо-сайт не проиндексирован.
Но, можете не сомневаться — рейтинг работает исправно, проверено!

Кнопка Наверх

Мелочь, а не упомянуть нельзя. Ведь большое количество тем не содержит такой кнопки. Достаточно посмотреть на количество установок подобных плагинов, которых наверно штук 50 в репозитории. И в сумме у них более 200 000 установок!

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

Кнопки Поделиться

Еще одна мелочь, а сколько работы с ней! Если ставить кнопки Поделиться от Яндекса или подобного сервиса — мы получаем дополнительный JS файл (замедляет отображение контента) и одинаковые кнопки как у всех.

А вы помните случай, когда сервис Pluso собирал все куки посетителей и продавал рекламодателям? Согласитесь, неприятная ситуация.

В Reboot — мы сделали встроенные кнопки для шаринга, как всегда легкие и простые, с удобной настройкой в админке. Вы просили — мы сделали: можно выводить количество лайков на каждой кнопке.

Коды под счетчики, верификацию и пр.

Добавить коды счетчиков? Кто-то скажет фигня, а тем временем в репозитории WP 57 000 установок у плагинов для добавления счетчика Яндекс Метрики! 57 тысяч, Карл!

Про плагины для Google Analytics вообще лучше промолчать, там более миллиона установок.

В Reboot — встроенные блоки для добавления любых кодов в <head> и перед </body>. Ничего устанавливать не нужно.

Итого

В итоге мы избавляемся, как минимум, от 11 ненужных плагинов!
Неплохо, да?

А если посчитать, что в нашей теме предусмотрена куча других мелочей, псевдо-ссылки, спойлеры, плавающий сайдбар и многое другое.

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

Настройки внешнего вида в теме Reboot

Рассмотрим как мы можем настроить внешний вид и какие дополнительные фишки есть в нашей теме.

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

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

Структура

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

Блоки

Шапка

В этом разделе можно задать логотип сайта, указать любой произвольный HTML-код в шапке (например адрес офиса, номер телефона, вывести кнопку обратного звонка и т.д). Можно настроить произвольный порядок вывода блоков:

Подвал

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

Главная страница

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

Запись

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

Похожие настройки и для страниц, не будем дублировать.

Архивы

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

Сайдбар

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

Модули

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

Слайдер
Содержание
Лайтбокс
Хлебные крошки
Форма обратной связи
Социальные профили
Кнопки поделиться
Кнопка Наверх

Не будем досконально разбирать, все интуитивно понятно и подробно описано в нашем руководстве.

Карточки постов

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

Полет для фантазии тут неограничен, вот несколько примеров с одним блоком:

Каждый вид карточек постов настраивается индивидуально. В теме предусмотрено 5 видов карточек:

Стандартная
Маленькая
Вертикальная
Горизонтальная
Сетка

Коды

В этом блоке можно задать коды проверок Яндекс.Вебмастера и Google, пиксели ретаргетинга, какие-то другие скрипты. Что тут еще скажешь😀Мелочь, а редактировать дочернюю тему или использовать плагины не придется.

Типографика

Говорит сама за себя — настраиваем шрифты, размер, стили, цвет у различных элементов сайта. Пришлось даже свой кастомный контрол для этого разработать, выглядит он так:

Что еще?

Все стандартные настройки и не только:

Цвета
Фон сайта, фон шапки
Меню, виджеты, дополнительные стили
Конструктор главной страницы (о нем отдельно)

Расширенные настройки

Такого не было в других наших темах. Это те опции, о которых вы просите в поддержке, те опции, ради которых устанавливается дочерняя тема или плагин ProFunctions.

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

Например, изменить текст у соц. кнопок, рейтинга, изменить размеры логотипа, настройки для микроразметки и т.д.

Резюме

Выше перечислена краткое изложение настроек, их на самом деле еще больше. Каждый наш клиент сможет настроить сайт под свой вкус. А что не сможет — мы поможем!

SEO-оптимизация, микроразметка, валидация в Reboot

Поговорим об исходном коде нашей темы на чистоту, рассмотрим все преимущества для продвижения вашего сайта.

За что клиенты любят наши темы — это максимальная SEO-оптимизация. Это один из основных столпов, на который мы опираемся в процессе разработки.

Мы проверяем все, изучаем форумы, читаем блоги коллег. Стараемся вовремя следовать всем нововведениям поисковых систем, чтобы сайты, созданные на наших темах занимали ТОПовые позиции в выдаче.

Правильные заголовки

Мы используем теги<h1>—<h6>только для контента. Тем, кто сталкивался с бесплатными темами, часто приходилось удалять теги<h2>из пагинации, из заголовков виджетов, из комментариев и из других мест, где их быть не должно.

Часть таких тегов выводит сам WP, другая часть зависит от самой темы. А ведь теги заголовков играют важную роль в ранжировании.

В теме Reboot нет «неправильных» заголовков. А те, что выводит сам WP мы переопределяем и выводим правильный код.

Произвольный h1 и описание для рубрик

Если вы продвигаете рубрики или метки — в теме предусмотрена важная функция: вы можете задать произвольный заголовок<h1>и описание для этой рубрики.

Если у Вас есть рубрика «Азия» — вы можете задать для нее заголовок «Путешествие по Азии для новичков» или «Подборка интересных материалов про Азию».

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

При этом описание рубрики будет только на первой странице и не будет дублироваться на страницах пагинации.

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

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

Скрытые ссылки от индексации

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

Автор комментария и источник у записи уже автоматически будут закрыты от индексации.

Чистый исходный код

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

Микроразметка schema.org

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

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

Валидация кода

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

Мы можем подгонять все под валидатор, но в тот момент, когда вы подключите на своем сайте счетчики и рекламу — моментально вы получите ошибки.
Вы можете проверить весь ТОП 10 по любым жирным запросам — Вы не найдете там полностью валидных сайтов.
Валидность нужна была раньше, когда браузеры по разному могли отображать HTML-код, сейчас необходимость в этом отпала.

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

В итоге

Мы получаем чистый, валидный, семантически правильный исходный код, с SEO-подготовкой и микроразметкой под дальнейшее продвижение. Что в свою очередь упростит выход статей в ТОП.

Блоки внимания в теме Reboot

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

У нас есть обычная цитата, это стандарт для всех тем.

В теме предусмотрено 8 блоков внимания:

Внимание!
Этот блок точно привлечет внимание посетителей.

Можно ли оформить кредит без процентов, без паспорта и за 10 минут?
— спрашивает Митрофанов Алексей

Нет, Алексей, таких кредитов не бывает 😀

Никогда! Никогда не открывайте дверь незнакомцам! Особенно, если дома кроме вас никого нет.

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

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

Можно раскрыть сильные и слабые стороны вот такими блоками:

Создание сайтов может приносить пассивный доход

Не каждый сайт может выстрелиить

И финалим все цитатой известного нам человека:

С годами я перестал покупать многие вещи просто потому, что они теперь кажутся мне нелепыми.
— Стив Джобс, The Independent, 29 октября 2005 г.

Это один из вариантов, как мы можем внести разнообразие в наш текст, выделить важные участки и сделать акцент на нужных нам блоках.

Запись со встроенным содержанием статьи

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

Как формируется содержание

Чтобы на странице мы увидели содержание, нам необходимо создать несколько заголовков в контенте. Минимум 3 подзаголовка. Сюда включаются теги <h2>, <h3>, <h4>. Вы просто оформляете материал, а блок с содержанием статьи выведется автоматически.

Где выводится содержание

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

Есть еще один способ – вы можете вручную вывести в нужном месте содержание статьи, указав шорткод

Table of Contents

в любом месте.

Можно ли его отключить

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

Содержание древовидное

И опять да, древовидное. Вы просто указываете теги <h2>, <h3>, <h4> и все пункты автоматически будут сформированы. Чем больше число в заголовке — тем более вложенный пункт получается.

Точно древовидные?

Точно-точно! Это еще один заголовок третьего уровня, который будет отображаться как дочерний.

Заключение

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

Конструктор главной страницы темы Reboot

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

Вот как конструктор выглядит в кастомайзере:

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

Чуть подробнее описано в видео-обзоре

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

Есть ли поддержка Гутенберг в шаблоне Reboot?

Разберемся на сколько тема Reboot поддерживает новый редактор Gutenberg, который появился в WordPress 5.0

Да, это первая наша тема, которая изначально поддерживает почти все возможности нового редактора Gutenberg.

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

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

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

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

Как дела с картинками?

Вы только посмотрите на эти храмы:

Картинки можно визуально оформлять на всю ширину, используя стандартные возможности редактора. В один клик! Правда так красиво растянуть картинку можно только для записей, у которых нет сайдбара.

Медиа и текст

Еще один пример интересного оформления контента, это блок Медиа и текст. Он позволяет нам выводить картинку + дополнительный текст к ней. При этом, такой блок по ширине опять же выходит за границы контента и визуально улучшает текст.