Создание сайтов на WordPress
Создание сайтов на WordPress

Тема Customizr – обзор, возможности и настройка

Приветствую вас в рубрике «Обзор тем WordPress».

Сегодня разберём тему Customizr: рассмотрим, какие возможности у неё есть и пройдёмся по настройкам этой темы. Customizr имеет как бесплатную, так и платную версию. Мы будем рассматривать бесплатный вариант темы.

Тема Customizr мне очень нравится. Эта тема отлично подойдёт, чтобы сделать блог, сайт для фрилансера или специалиста. Даже в бесплатной версии у неё большие возможности по настройке и она отлично смотрится на мобильных устройствах. Именно на теме Customizr работает мой сайт aleksderk.ru.

Тема Customizr

У темы огромное количество скачиваний и великолепный рейтинг в официальном репозитории WordPress: твёрдая пятёрка на основе почти тысячи голосов. Тема Customizr русифицирована. На момент написания обзора версия темы Customizr была 4.3.3.

Обзор темы Customizr

Установить тему Customizr можно из официального репозитория WordPress по ссылке https://ru.wordpress.org/themes/customizr.

В консоли заходим во «Внешний вид – Про Customizr». На открывшейся странице есть ссылки на документацию и демо, а также можно посмотреть журнал изменений в версиях темы.

Документация темы находится по ссылке https://docs.presscustomizr.com/collection/76-customizr-theme. Документация на английском языке, но можно воспользоваться переводчиком.

Демо можно посмотреть по ссылке https://demo.presscustomizr.com. Следует учесть, что на демо показана Pro версия темы, но от бесплатной версии она внешне не сильно отличается.

Из журнала изменений видно, что тема регулярно обновляется по мере выхода обновлений WordPress.

Переходим к настройкам темы.

Настройка темы Customizr

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

Заходим во «Внешний вид – Настроить». Откроется настройщик темы.

Настройщик темы Customizr

Рассмотрим все разделы по порядку.

Общие настройки

Идентификация

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

Разметка сайта

Здесь можно выбрать, как будет отображаться сайт: по всей ширине (Wide) или фиксировано (Boxed). Также можно выбрать этот параметр отдельно для шапки, топ-бара и подвала.

Основной цвет темы

Здесь всего один параметр: собственно цвет темы.

Font picker and font size

Можно задать шрифт и выбрать размер шрифта.

Ссылки соцсетей

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

Форматирование: ссылки, параграфы

Название подраздела не совсем точно отражает сути настроек в этом подразделе. Здесь есть две опции: плавное прокручивание по клику и подчёркивание при наведении на ссылку.

Настройки изображений

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

Настройки слайдера

Здесь всего одна настройка: включить или отключить эффект параллакса.

Авторы

Можно включить показ информации об авторе после каждой записи.

Плавная прокрутка

Можно включить плавную прокрутку страницы.

Комментарии

Настройки комментариев. Всё подробно описано.

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

Этот раздел позволяет настроить главную страницу. Настройки разбиты на четыре группы.

Выбрать контент и расположение

Выбираете, что отображать на главной странице и выбираете макет. С помощью опции Display navigation in your home page можно отключить отображение постраничной навигации на главной странице.

Отобразить постраничную навигацию

Параметры слайдера

Нам предлагают следующие варианты:

  1. Без слайдера
  2. Демо слайдера
  3. Автоматически создаваемый слайдер из ваших записей в блоге
  4. Создать слайдер

Параметры слайдера

Выбрав «Демо слайдера» вы можете посмотреть образец слайдера.

При выборе «Автоматически создаваемый слайдер из ваших записей в блоге» будет создан слайдер на основе ваших записей. При этом для слайдера будут взяты изображения записей. В этом варианте будет доступен ряд настроек: число отображаемых сообщений, возможность добавить только закреплённые записи, отображение заголовка и т. д.

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

Создание слайдера в теме Customiz

Нажимаем кнопку «Создать слайдер». Откроется библиотека файлов. Загружаем в библиотеку изображения для слайдера. Размеры изображений согласно документации должны составлять 500 пикселей по высоте и 1170 пикселей по ширине. Рекомендую использовать именно эти размеры, чтобы всё отображалось корректно.

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

Добавить в слайдер

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

Добавить слайдер

Вводим в поле название слайдера на английском языке (название на русском отображаться не будет) и нажимаем «Добавить слайдер». Создастся слайдер и в него добавится наше изображение.

Чтобы добавить ещё изображение в слайдер, нужно перейти в библиотеку файлов («Медиафайлы»), открыть редактирование нужного изображения и добавить его в слайдер с помощью блока параметров внизу страницы.

После того как все изображения будут добавлены, возвращаемся в настройки темы в раздел «Главная страница» – «Параметры слайдера» и выбираем в раскрывающемся списке наш слайдер.

Выберите слайдер

Настройки популярных страниц

Если выбрать «Применить», то появятся настройки страниц, а на главной странице появится блок с популярными страницами.

Блок с популярными страницами

Общие настройки списков записей

Здесь задаётся максимальное число записей на странице и число слов в превью записи.

Шапка

Идентификация

Здесь дублируется одноимённый подраздел из раздела «Общие настройки».

Общие настройки внешнего вида

Можно выбрать стиль шапки: светлый, тёмный или установить свой цвет.
Переключатель Highlight contextually active menu items позволяет сделать подчёркнутым пункт меню, который активен в настоящий момент.
Переключатель Highlight contextually active menu items позволяет делать шапку прозрачной.
Также можно включить отображение верхней панели (топ-бара) и вывод социальных сетей.
Ещё три переключателя позволяют показывать верхнюю границу, подчёркивать название сайта, делать прикреплённую шапку полупрозрачной при прокручивании.

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

И последняя настройка – это установка z-индекса. Если кратко, то z-индекс позволяет задавать приоритет отображения блоков на сайте. По умолчанию у шапки он равен 100, то есть у него очень высокий приоритет, что нас устраивает.

Настройки дизайна для смартфонов и ноутбуков

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

Здесь настраивается расположение логотипа и девиза, отображение иконки поиска.
Если включить переключатель Use a full screen search block, то при нажатии на кнопку поиска поле поиска раскроется не в маленьком окошке, а займёт всю страницу, перекрыв содержимое.

Поиск на сайте

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

Поведение шапки при прокрутке

  1. «Не показывать при прокручивании страницы». Шапка будет всегда вверху.
  2. «Показать при прокручивании вверх». При прокручивании страницы вниз шапка скроется, но как только начнётся прокрутка вверх, то она тут же появится.
  3. «Всегда видимый». Шапка всегда является видимой при прокручивании.

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

При включенном переключателе «Прикреплённая шапка: укоротить заголовок/логотип» заголовок и логотип уменьшаются в размерах при прокручивании.

Настройки дизайна для смартфонов и планшетов при портретной ориентации

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

Меню навигации

Здесь предлагается выбрать дизайн главного меню: обычное (горизонтальное) или боковое (вертикальное).

С горизонтальным меню всё понятно – это стандартное меню. При выборе бокового меню на сайте появится боковое меню, выпадающее при клике по иконке в шапке.

Боковое меню

Также при выборе бокового меню появится возможность добавить горизонтальное меню.

Показать горизонтальное меню

В самом низу раздела «Меню навигации» есть возможность удалить все меню на сайте. Честно говоря, не знаю, зачем это может понадобиться.

Основное содержание

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

Здесь те же настройки что и в разделе «Главная страница», который мы рассматривали выше.

Страницы & Вид записей

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

Списки записей

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

Макет списка записей

«Простой полный макет». Записи отображаются в полном виде, а изображения записей занимают всю ширину области контента.

«Макет сетки». Записи отображаются в виде миниатюр в несколько столбцов, количество которых может составлять от 1 до 4.

Макет сетки

«Альтернативный макет миниатюр». Записи отображаются в виде миниатюр и краткой выдержки. Для этого варианта есть настройки отображения миниатюр.

Форма миниатюры

Можно выбрать форму миниатюры и её расположение. Переключатель «Альтернативная миниатюра/контент» делает расположение миниатюр чередующимся справа и слева.

Отдельные записи

Здесь можно задать расположение миниатюры записи. При включённой опции Display featured images in their original dimensions миниатюры будут отображаться в полном размере.

Настройка миниатюры записи

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

Отдельные страницы

В этом разделе настраиваются изображения записи аналогично предыдущему разделу «Отдельные записи».

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

Настройка хлебных крошек. Всё просто и понятно.

Метаописания записей

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

Галереи

При включённых опциях в этом разделе появится эффект лайтбокса и эффект наведения. Следует учесть, что эти эффекты будут проявляться, только если в настройках галереи в качестве ссылки будет выбран «Медиафайл».

Настройки галереи

Комментарии

Настройки отображения комментариев. Настроек немного и они простые.

Навигация записи/страницы

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

Навигация записей

Настройки изображений

Здесь те же настройки изображений, что и в разделе «Общие настройки».

Соцсети в боковых панелях

Можно включить отображение соцсетей в боковых панелях.

Подвал

Общие настройки подвала

С помощью опции Horizontal widget area in your footer можно активировать горизонтальную область для виджетов.

Горизонтальный виджет в футере

Также в этом разделе есть и другие настройки подвала и кнопки «Наверх».

Меню

Настройки меню. Останавливаться подробно на этом не буду, здесь всё стандартно.

Виджеты

Здесь показаны активные области для виджетов.

Дополнительные параметры

Дополнительные стили

Содержит текстовую область, в которую можно прописать дополнительные стили.

Производительность сайта

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

В принципе здесь всё очевидно, но есть опции, которые могут быть непонятны:

Defer loading javascript files to avoid render blocking issues – отложить загрузку файлов javascript.
Defer loading Font Awesome icons – отложить загрузку шрифтов Font Awesome.
Preload Google Fonts – предварительная загрузка.

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

Заполнители фронтенда и блоков помощи

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

Фронт-энд Иконки (Font Awesome)

Позволяет включить иконки Font Awesome.

Adaptative font size on mobile devices

Содержит опцию «Автоматически адаптировать размер шрифта по ширине устройства».

Стиль темы

Предлагает на выбор два стиля: современный и классический. Однозначно рекомендую выбрать современный, чтобы всё смотрелось красиво.

Итоги

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

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

Кстати, у разработчиков темы Customizr есть собственный конструктор страниц Nimble Page Builder, обзор которого я сделаю отдельно.

Конструктор страниц Nimble Page Builder

Основные достоинства темы:

  • Гибкие настройки с подробным описанием.
  • Наличие всей необходимой навигации: хлебных крошек, постраничной навигации, кнопки «Наверх».
  • Наличие функции показа даты обновления записей.
  • Возможность добавлять боковое меню.
  • Возможность настроить красивый вывод списка записей.
  • Возможность расширить функционал по созданию страниц с помощью собственного конструктора страниц Nimble Page Builder.

Явных недостатков у темы Customizr я не выявил.

На этом прощаюсь. До свидания!

Поделиться в соцсетях:

Оставьте комментарий

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