Начнем с установки шаблона.
В админ. панели идем в раздел Внешний вид, где мы видим уже установленные по-умолчанию или кем-то ранее темы. Они довольно примитивны и на них останавливать внимание не будем и жмем на кнопку Добавить новую, как на скриншоте ниже.
Перед нами открывается панель с официальными темами WordPress, которые устанавливаются одним нажатием. Имеется фильтр категорий шаблонов, с помощью которых вы можете упростить себе выбор подходящего шаблона.
Но и этот вариант нам не подходит, т.к. темв здесь тоже, в основном, примитивные и малопримечательные, поэтому тему мы идем искать к специализированным разработчикам.
Я далеко ходить не стал в выбрал довольно популярную студию Template Monster, которая разрабатывает крутые шаблоны для различных CMS, в т.ч. и для WP. На их оффициальном сайте вы найдете тысячи качественных шаблонов различных тематик, как платных так и бесплатных.
Для нашего проекта я выбрал бесплатный шаблон Worky Lite. Скачиваем тему, предварительно зарегистрировавшись на сайте, разархивируем скачанную тему и кроме прочего находим там архив worky.zip, который содержит установочные файлы данного шаблона.
Потом на следующем шаге в разделе Добавить темы жмем кнопку Загрузить тему, и загружаем наш архив, после чего жмем Установить.
В результате мы видим на экране сообщение об успешной установке и выбираем дальнейшее действие. Жмем Активировать тему и после этого видим нашу новую тему в списке всех шаблонов, установленных на нашем сайте. Жмем Настроить.
Уже на этом этапе на фронте сайта (на его главной и остальных страницах) мы видим нашу тему, но пока еще ничего не понятно, т.к. выводится базовый демо-контент, который в дальнейшем мы будем создавать и настраивать.
Далее предлагаю читателю самостоятельно пробежаться по настройкам темы и посмотреть что там можно кастомизировать и как это делается, тут все очень просто и расписывать все я не вижу смысла.
Суть здесь в том, что каждый элемент дизайна сайта поддается довольно точной настройке и результат сразу виден в правой части экрана. Особенно удобно что есть возможность самостоятельно писать свои правила CSS, а в большинстве тем еще и JS в разделе Дополнительные темы (скипты).
Далее рассмотрим еще одно интересное дополнение, а именно ELEMENTOR — специальный конструтор для редактирования страниц. С его помощью мы можем еще глубже редактировать дизайн страниц, а самое главное — создавать практически любые необходимые элементы (формы обратной связи, слайдеры, аккордеоны, множество других полезных виджетов) и практически безгранично их настраивать.
Для установки Elementor идем в Плагины — Добавить новый и вводим в поиске elementor.
Нам нужен самый первый плагин, появившийся в результатах поиска «Elementor — конструктор сайтов и страниц». Кроме этого мы видим целую кучу специальных аддонов для Элементора, но они нам пока не нужны, все желающие могут ознакомиться с ними самостоятельно.
Итак, нажимаем Установить и бесплатная версия плагина устанавливается на наш сайт, не забываем Активировать.
* Как и в случае с шаблоном, мы используем бесплатную версию, зачастую этого вполне достаточно, но в платных версиях присутствуют более широкие возможности, о которых вы можете прочитать на сайте разработчика. Нам они пока не нужны.
На приветственной странице установщика мы видим видеообзор, который я рекомендую посмотреть, а также ссылка на документацию и ссылка для создания первой страницы в Elementor.
В конце статьи я выложу ссылку на подробную документацию, если вы еще не готовы устанавливать этот плагин, но хотите получить о нем побольше информации.
Если нажать Создайте Вашу первую страницу — попадете в редактор страницы, где можно делать что угодно. Нам становится доступна очень глубокая кастомизация. Сразу сделаю оговорку в пользу платной версии — она дает возможность предустановить и использовать уже готовые шаблоны и схемы страниц с наборами уже настроенных виджетов, которые можно адаптировать под себя. Но и бесплатная версия богата на функционал и используя стили установленного ранее шаблона мы можем создавать шикарные функциональные темы, особенно при наличии определенного вкуса и понимания концепций веб-дизайна.
Первым делом жмем на «+» и создаем строку (сколько угодно), а в ней определяем компоновку колонок, а далее в эти колонки мы можем перенести любой элемент из левой колонки. Тут есть все — от текстовых блоков и заголовков до SoundCloud плеера. Также там находятся все стандартные виджеты WordPress, а также подцепляются виджеты сторонних компонентов (например, WooCommerce).
Когда выбранный элемент находится на своем месте на странице, нажатие на нем вызывает его настройки, которые видны в левой колонке.
Далее рекомендую посмотреть МАНУАЛ ПО ELEMENTOR там подробно рассказано о всех элементах и правильной работе с ними, а я на этом сегодня закончу.
В следующий раз планирую написать о всевозможных плагинах, предназначенных для решения различных целей и задач.