Дорогой посетитель, это веб-версия инструкции для WP темы "Law Factory".
Посетите страницу темы на goodwinpress.ru, чтобы получить больше информации. Открыть »

Law Factory

Инструкция по установке и настройке темы

Текущая версия: 1.0

Дата публикации: 31.03.2021

Автор: Алексей Goodwin

Демо: https://advokat.business-wordpress-theme.ru

Страница темы: https://www.goodwinpress.ru/tema-law-factory/

Email: goodwinpress@ya.ru

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

01. Лицензия

1 копия = 2 сайта. Вы сообщаете, на каких сайтах желаете использовать тему - их адреса привязываются к копии темы.

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

Поддомены, технический домен, локалхост я добавляю бесплатно, они не входят в лицензию.

02. Описание темы

Law Factory — красивая, адаптивная, оптимизированная тема для создания сайта адвоката на WordPress. С её помощью презентуем юридические услуги в сети, представляем информацию о себе, собираем контакты.


Достоинства темы:

  • В шапке текстовый заголовок / логотип, на выбор; блок "Онлайн чат" для общения в мессенджерах, заказ звонка, липкое меню, мобильное меню с поиском.
  • Главная страница с набором готовых блоков - включите их и наполните своими изображениями, текстом; укажите ваши преимущества, профессиональную биографию, кейсы, отзывы клиентов.
  • Активно собираем контакты от посетителей, при помощи форм плагина Contact Form 7 и многочисленных поп-апов.
  • Используем возможности Contact Form 7 для редиректа посетителя на страницу "Спасибо" после отправки сообщения.
  • Тема разработана для традиционного многостраничного сайта, но также ее можно использовать как одностраничник, посадочную страницу.
  • Для презентации услуг при помощи custom post type создан дополнительный тип публикаций - service.
  • Для отложенной загрузки изображений и видео включен скрипт lazy load.
  • В комплекте темы - набор из 25 svg иконок на юридическую тематику для оформления раздела "Услуги".
  • Для удобства навигации посетителей повсеместно установлены хлебные крошки.
  • Тема оптимизированная и быстрая, набирает высокие баллы в Google PageSpeed.
  • Приготовлены поля для добавления разных метрик, включая поля для пикселя Facebook и для верификации сайта.
  • Имеется готовая чистая страница для работы с конструкторами типа Elementor или WP Page.
  • Включены шаблоны дополнительных страниц - для контактов, страницы "Спасибо", архива услуг, а также для поддержки woo commerce.
  • Как и прочие темы от goodwinpress, Law Factory настраивается в консоли, где вы можете включить / выключить готовые разделы, разместить свой контент, перекрасить под себя все основные цветные элементы без редактирования кода и специальных знаний. Можно даже изменить прозрачность некоторых элементов (постер, подвал).
  • Для вывода записей, статей имеется блог с липким сайдбаром; есть дополнительный встроенный виджет, чтобы блог тоже работал на сбор контактов.
  • Тема содержит микроразметку schema.org для лучшего представления сайта в поисковой выдаче.
  • Готова к локализации.
  • В комплекте - дочерняя тема, встроенный загрузчик плагинов, демо-контент для импорта.
  • Тема поддерживает автоматическое обновление из админки.

Law Factory работает на версиях WP, начиная с 5.0 и выше. Успешно протестировано на WP 5.7. Чтобы сайт оставался быстрым и безопасным, всегда используйте свежую версию WordPress.

Оптимальная версия PHP для данной темы - 7.4 или выше. Успешно протестировано на PHP 8 (собственно, демо-сайт работает на "восьмерке"). Поддерживается https.


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

NB. Везде далее термины "шаблон" и "тема" являются синонимами, равно как "рубрики" и "категории", "записи" или "статьи" и "посты". Примеры на скриншотах показаны в среде редактора Гутенберг.

PS. Раздел консоли, который в предыдущих темах назывался "Сделай сам", теперь называется "Оформление".

03. Структура темы

Родительская тема имеет следующую структуру:

  • lawfactory
  • папка admin (содержит файлы консоли, лицензию, встроенный загрузчик плагинов, скрипт обновления)
  • папка files
    • папка back (файлы, относящиеся к бэкэнду, то есть, отвечающие за процессы: опции для оптимизации, микроразметка, custom post type для создания предложений)
    • папка front (файлы, относящиеся к фронтэнду, то есть к внешней части темы: поп-апы, иконки соц. сетей, кнопки для расшаривания и т.д.)
    • папка font (содержит файлы шрифта, используемого в теме, Fira Sans, в двух начертаниях)
  • папка img (демо-картинки, элементы декора, svg иконки)
  • папка languages (содержит law.pot для локализации темы)
  • папка scripts (содержит минифицированный асинхронный скрипт темы)
  • папка home (содержит файлы, в которых размещены разделы статической Главной страницы)
  • файл screenshot.png (скриншот темы)
  • файл style.css (файл стилей темы, обеспечивает оформление темы и адаптивность)
  • файл 404.php (для ответа сервера при отсутствии документа по ссылке)
  • файл archive.php (вывод архивов - рубрики, метки)
  • файл archive-service.php (архив услуг)
  • файл blank-page.php (шаблон для создания чистой страницы)
  • файл comments.php (комментарии)
  • файл footer.php (подвал сайта)
  • файл front-page.php (шаблон статической Главной страницы, в который загружатся файлы из папки home)
  • файл functions.php (функции темы - хуки, фильтры, подключение дополнительных опций)
  • файл header.php (шапка сайта)
  • файл index.php (шаблон блога)
  • файл page.php (шаблон обычной страницы)
  • файл search.php (результаты поиска по сайту)
  • файл sidebar.php (сайдбар для блога и рубрик)
  • файл single.php (шаблон записей)
  • файл single-service.php (шаблон страницы услуг)
  • файл thankyou-page.php (шаблон страницы спасибо для редиректа с форм)
  • файл woocommerce.php (шаблон страницы для вывода контента WooCommerce)

 


Дочерняя тема имеет следующую структуру:

  • lawfactory-child-theme
  • папка img (дублирует svg иконки, а также демо-картинки)
  • файл screenshot.png (скриншот дочерней темы)
  • файл style.css (файл стилей дочерней темы)
  • файл functions.php (подключение стилей из родительской темы и другие произвольные функции)

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

04. Установка темы

При покупке вы получили 3 архива. Первый архив - lawfactory.zip, это сама тема (родительская). Второй - lawfactory-child-theme.zip, дочерняя тема. Третий - doc.zip, в котором размещен файл changelog и папка с данной инструкцией. В changelog содержится список изменений, сделанных в теме в процессе обновления.

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

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

В инструкции дана информация по работе с дочерней темой, в одноименном разделе.


Как установить?

Зайдите на страницу с темами на сайте (Внешний вид > Темы), выберите пункт "Добавить"
На следующем экране нажмите кнопку "Загрузить тему", далее нажмите кнопку "выбрать файл".
выберите архив lawfactory.zip на компьютере. После того, как он загрузится, нажмите кнопку "Установить".
Результатом того, что тема установлена успешно, будет такое сообщение:

Далее всё зависит от вашего плана. Если вы собрались использовать тему как есть, активируйте её на этой же странице (ссылка "Активировать"). Тема будет активирована и готова к работе.

Если же собрались делать изменения в коде, для этого понадобится дочерняя тема. В этом случае, родительскую активировать не нужно. Вместо этого вернитесь назад (ссылка "Вернуться на страницу тем") и выберите с компьютера дочернюю тему:

Установите её и активируйте. Так у вас получится две темы - родительская тема Law Factory установлена, дочерняя тема Law Factory установлена и активирована.

Какие проблемы могут возникнуть на этапе установки?

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

Если при установке родительской темы вы увидели такое сообщение, это значит, что на сервере установлено ограничение на размер загружаемых файлов. Архив темы весит 2.6 мегабайта, это немного, но у вас, видимо, лимит ещё меньше - 2 мб или ниже. В данном случае, нужно увеличить лимит. Если вы не знаете, как это сделать, поручите поддержке хостинга увеличить в настройках сайта значение upload_file_maxsize хотя бы до 3-4 мегабайт. После этого тема загрузится и активируется без проблем. Другой вариант - распаковать архив и вручную загрузить папку темы на сервер в директорию wp-content/themes по FTP.


Если после активации темы вас выбрасывает на белый экран, на котором ничего нет, либо белый экран с надписью

HTTP ERROR 500

либо белый экран с надписью

Syntax error: unexpected ?

это означает, что на сайте используется устаревшая версия PHP. На данный момент, актуальная версия PHP это 7.4. В ближайшее время актуальной станет PHP 8. Вам нужно зайти в панель хостинга и включить для данного сайта свежую версию PHP - 7.4 или выше. Это быстро и бесплатно. Как только вы это сделаете, сайт заработает, и всё будет хорошо.


Полезный совет. После установки данной темы рекомендуется сразу перейти в раздел админки Настройки > Постоянные ссылки и нажать на кнопку сохранения настроек:

Это нужно, чтобы custom post type, на основе которого созданы Услуги, работал правильно. Сделам это один раз, чтобы больше к этому не возвращаться.

Демо-контент

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

Скачать файл

Это архив lawfactory-import.zip. Распакуйте его. Внутри находится файл WordPress.2021-03-28.xml. Этот файл вы можете загрузить себе на сайт в раздел админки "Инструменты > Импорт". Выберите данный файл со своего компьютера и импортируйте его.

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

05. Установка плагина

Добавим на сайт плагин Contact Form 7 - для создания контактных форм. С его помощью будем делать формы и размещать их в поп-апах и на страницах сайта, чтобы собирать контакты с посетителей.

В теме Law Factory работает собственный установщик плагинов. После того, как вы активировали шаблон, в админке сайта появится сообщение -

Это значит, что установщик готов к работе и ждет ваших действий.

Нажмите ссылку "Начать установку плагина". Появится следующее окно -

Поставьте галочку, в выпадающем списке выберите опцию "Установить" и нажмите кнопку "Применить". Шаблон сам найдет нужный плагин и установит его на сайт. После чего покажет следующее -

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

Результатом того, что активация выполнена успешно, станет следующее уведомление -


Полезный совет. Если планируете размещать на сайте прайс-листы, обратите внимание на мой плагин GP Price Bloсk. Он бесплатный.

Работает в редакторе Гутенберг, позволяет легко добавлять поля для наименования и стоимости услуги / продукта.

Узнать больше о плагине и скачать его можно по ссылке https://www.goodwinpress.ru/plugin-price/

06. Создание Главной страницы

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

Шаг 1

В админке сайта в разделе "Страницы" сделайте новую страницу. Назовите её "Главная". В её свойствах найдите опцию "Шаблон" -

Там установлен "Шаблон по умолчанию". В выпадающем списке выберите вместо него шаблон "Статическая Главная". После чего опубликуйте страницу.

Шаг 2

Теперь перейдем в раздел "Настройки > Чтение". Там установим отметку в поле "На главной странице отображать - Статическую страницу", откроем выпадающий список и выберем в нём вашу Главную, которую только что создали:

Сохраните изменения. Ок, вы создали и установили статическую Главную страницу сайта.


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


Если нужна страница записей

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

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

Теперь вернёмся в раздел "Настройки > Чтение" и там, в списке "Страница записей", выберем "Статьи и Новости", которые только что создали.

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

Что дальше?

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

Поэтому заранее сделайте следующее:

1) Приготовьте тексты для ваших услуг.
2) Приготовьте тексты о себе, о своей практике, соберите отзывы клиентов, описание выгод, которые получит ваш клиент.
3) Подберите соответствующие изображения - пару своих фотографий, картинку для фона Постера на Главной.
4) Приготовьте коды статистики, пиксель Facebook, коды для верификации сайта (если нужно).
5) Определитесь, какие цвета вы хотите использовать на сайте.
6) Составьте список плагинов, которые будете использовать на сайте, для генерации лидов,ускорения сайта, поисковой оптимизации, защиты и проч.

Цепочка ваших действий будет такой:

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

Пункты 2-5 - разместить в консоли темы заранее подготовленное наполнение - тексты о себе, отзывы, настроить формы сбора контактов, задать свои цвета для оформления.

Пункт 6 - добавить запланированные плагины.

07. Как работать с услугами

У темы есть простой сценарий использования.

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

Все эти услуги мы опубликуем на сайте и поделим их на 2 группы - для частных лиц и для бизнеса.

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

Для публикаци услуг, тема добавляет в WordPress новый тип страницы - Услугу (service), созданную при помощью custom post type. Это вроде предложения или карточки товара, то, что вы хотите продать клиенту.


После активации темы, в админке сайта, в боковом меню WP, появился новый пункт - Услуги. Кликните или наведите на него мышь, покажутся его разделы - "Все услуги", "Добавить новую услугу":


Как создать Услугу

Нажмите на ссылку "Добавить новую услугу".

Откроется экран, где расположены

1) название услуги (заголовок);
2) текстое поле для подробного описания услуги;
3) блок настройки услуги.

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

Потом обращаемся к блоку настройки - если данная услуга предназначена для частных лиц, ставим галочку в поле "Для частных лиц", если для бизнеса - то галочка в поле "Для бизнеса".

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

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

Например, вы создали услугу "Адвокат по делам об убийстве". Находим подходящую иконку - например, с изображением оружия. Это иконка gun. Копируем слово gun и вставляем в услуге:

В результате, gun выводится в списке услуг на Главной:

Список всех юридических иконок:

ИконкаНазвание
agreement
balance
book
box
briefcase
calendar
courthouse
cuffs
dna
drugs
fingerprint
folder
gavel
glass
gun
jail
knife
laundering
lawyer
money_bag
money
safe
shield
thief
traffic_cone

При помощи этого простого интерфейса создайте несколько услуг. На сайте они будут выводиться на статической Главной странице, а также в архиве услуг, который всегда доступен по адресу https://site.ru/services/ (вместо site.ru подставьте адрес вашего сайта). Также каждая услуга выводится на своей собственной странице. Все они составляют ядро сайта и снабжены инструментом для привлечения внимания и сбора контактов (об этом ниже).


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

08. Консоль темы

Иногда, после установки темы, некоторые пользователи переходят в раздел админки Внешний вид > Настроить. В Law Factory так делать не нужно, эта страница нам вообще не потребуется.

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

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

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

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

Рассмотрим все страницы консоли, какие элементы на них находятся и за что отвечают.

Полезный совет

Если до установки Law Factory у вас уже была установлена какая-либо тема от GoodwinPress, сбросьте настройки Law Factory, чтобы наполнение консоли старой темы не попало в новую.

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

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


Персональные данные посетителей В соответствии с законодательством РФ, сайты, собирающие информацию от посетителей, должны получать подтверждение на сбор этих данных. Обычный блог на WordPress, где посетитель оставляет комментарий (а также имя и адрес электронной почты), или бизнес-сайт, где заказчик отправляет запрос через форму отправки сообщений, тоже становятся операторами по сбору данных. Сайт должен проинформировать посетителя о такой процедуре, а посетитель - подтвердить согласие на неё.

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

Напишите свой текст или используйте тот, что предложен темой. Вместо решетки (#) установите адрес страницы с текстом вашей Политики. На сайте это выглядит так:


Верификация сайта в Google и Яндекс

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


Статистика и аналитика

Здесь размещены поля, куда нужно добавить код сбора статистики для сайта. Это так же избавляет админа от необходимости редактировать файлы темы. Выберите подходящее поле и вставьте в него код счётчика. 1) Поле для статистики Google Analytics. Эта статистика не имеет кнопки и выводится, согласно требованию Google, в нижней части сайта. В этом поле ставим только Google Analytics и ничего другого.

2) Поле для Яндекс Метрики без информера-кнопки. Существует две версии Метрики - с кнопкой (информером) и без. Сюда ставим именно счётчик без кнопки. Он будет выводится на сайте в шапке около тэга body.

3) Поле для счётчиков с кнопкой, например, LiveInternet, Рамблер, Mail.ru и т.п., а также для Яндекс Метрики с кнопкой. Счётчик, размещенный здесь, будет выводиться по центру в подвале сайта.

Статистика, установленная в консоли темы, охватывает все страницы сайта, исключая, конечно, админку.

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

4) Поле для пикселя Facebook - он собирает данные, которые помогают отслеживать конверсии с Facebook рекламы, создавать аудитории таргета и отмечать людей, которые уже предприняли какие-то действия на вашем сайте. Код пикселя, размещенный в данное поле, будет выводиться в зоне head.


404 страница
По умолчанию, на 404-й странице размещен такой текст:

"Дорогой посетитель! Страница, которую вы искали, не существует, либо была перемещена на другой адрес. Перейдите на Главную, где собран весь основной контент. Либо посмотрите несколько наших последних публикаций. Спасибо!"

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


Микроразметка

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

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

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

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


Социальные сети
Здесь включим и настроим кнопки, которые ведут на ваши аккаунты в социальных сетях. Предлагаются такие сети и сервисы, как ВКонтакте, Instagram, Facebook, Twitter, Telegram, Youtube. Включите нужные кнопки и добавьте адреса ваших аккаунтов. Данные кнопки будут выводиться в нескольких разделах сайта - во-первых, на каждой странице в подвале; во-вторых - в разделе Обо мне на статической Главной; в-третьих на странице Спасибо (о ней см ниже в одноименном разделе).

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

Здесь вы управляете готовыми разделами статической Главной и их расположением. С помощью данной настройки можем либо переместить раздел в другое место, просто подцепив его мышью (стрелка 1), либо вообще отключить, кликнув на иконку с глазом (стрелка 2). Просто и удобно.


В следующих 11-и страницах консоли размещены все разделы Главной, там настроим их и наполним контентом.

12. Постер

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

Загрузите подходящую тематическую картинку; рекомендуемый размер - 1920х650 пикс., вес - как можно меньше. Если вес фоновой картинки у вас вышел более 100 кб, переделайте, это много. Например, на демо-сайте изображение в Постере весит 48 кб.

Фоновая картинка в Постере прикрыта полупрозрачной цветной маской, которая нужна, чтобы

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

Цвет маски и даже её прозрачность возможно изменить в консоли темы, без копания в файлах, в разделе "Оформление". Если захотите убрать маску, просто установите прозрачность как 0 (ноль).

Что еще нужно знать о Постере в контексте оптимизации?

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

Это позволяет избежать проблем с показателями Largest Contentful Paint и Cumulative Layout Shift при проверке сайта в Google PageSpeed на моб. устройствах, от которых зависит, сколько баллов наберет ваш сайт.

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

После установки фоновой картинки, добавим заголовок (оффер) и небольшой текст. Рекомендуемая длина заголовка 6-8 слов, текста - 10-12 слов.


Форма для сбора контактов в Постере
Еще один инструмент для сбора контактов на сайте. Укажите здесь заголовок формы, например, "Бесплатная консультация" и разместите шорткод формы Contact Form 7.

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

13. Обо мне

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

Обо мне - левая колонка

Здесь установим фотографию. Обязательно квадратная форма - для закругления, рекомендуемый размер - 455х455 пикселей.

Поверх фото добавим "наклейку" с опытом работы, профессональным стажем:

После чего установим контактную информацию - телефон, email, включим соц. кнопки:

Ссылки на ваши аккаунты в социальных сетях берутся из готовых настроек в разделе Общие.


Обо мне - правая колонка

Далее наполним текстовую часть раздела, добавим заголовок и какой-либо текст. Благодаря классическому редактору, текст можно форматировать, разместить списки и др.

Если информация "Обо мне" вышла объёмная, занимает много строк, разместите здесь часть материала, как анонс, а продолжение опубликуйте на отдельной странице. Длинные портянки текста в этом месте не нужны, испортят внешний вид, поэтому разделите его. Для перехода на полную версию, поставьте ссылку. Также отдельную страницу Обо мне можно поместить в меню.


Эффективность

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

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

14. Преимущества

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

Четыре ячейки с текстом. Из настроек - поле для заголовка и поле для текста.

15. Услуги

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

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


Напомним, чтобы поместить услугу в ту или иную группу, поставим галочку в её настройках:


Здесь же есть возможость добавить небольшой произвольный текст:

Наконец, тут подключаем и кнопки:

Первая кнопка открывает архив услуг, другая вызывает поп-ап для перезвона, который вы уже настроили ранее, в Шапке.


Фон данного раздела услуг, а также фоны иконок, возможно изменить на любые другие, это делается в разделе "Оформление".


Полезный совет - как изменить порядок вывода услуг на сайте

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

Разместить услуги в любом произвольном порядке можно при помощи плагина Real Custom Post Order. Установите его на сайт, зайдите в админке на страницу с услугами. Нажмите кнопку "Настройки экрана" в правом верхнем углу.

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

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

16. Пять шагов

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

Установим заголовок раздела и наполним текстом ячейки всех пяти шагов.

Далее закрепим, предложив посетителю немедленное действие - нажатие на кнопку, которая открывает уже знакомый нам поп-ап с формой для сбора контактов (для перезвона).

17. Отзывы

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

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

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

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

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

18. Призыв к действию

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

Кнопка либо открывает знакомый нам поп-ап с формой сбора контактов, либо переводит посетителя на любую указанную вами страницу сайта, например, с какой-либо акцией, предложением, списком цен.

Если выбрали вариант "Открывать поп-ап", то делать больше ничего не требуется, поп-ап будет подставлен в этот раздел автоматически.

Если выбрали вариант "Открывать страницу", укажите её адрес в соответствующем поле.

19. Произвольный контент 1-3

Если требуется добавить на Главную материалы, под которые не нашлось готового раздела, или если нужно разместить текст, таблицу, видео-ролик, html-код, или вывести элементы какого-либо конструктора, page builder'a, в теме предусмотрены универсальные блоки для произвольного контента. С их помощью настройка Главной страницы становится ещё более гибкой и приближенной к вашим задачам.

Таких разделов в теме - три.

Также все они поддерживает использование шорткодов. Если у вас есть любимый плагин такого типа, например, Shortcodes Ultimate от В. Анохина, то любые элементы этого плагина можно выставить здесь — аккордеон, спойлеры, табы, разделители, цитаты, карты, карусель, слайдер, раcписание и т.п. За счет этой функции темы, можно значительно расширить возможности Главной и преобразить её внешний вид. И, конечно, поддерживается вывод такого стандартного шорткода движка, как галерея.

20. Кейсы, статьи

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

Создайте в админке новую рубрику, например, "Случаи из практики". Опубликуйте в ней несколько записей. Потом вернитесь сюда, в данный раздел консоли, откройте выпадающий список и выберите рубрику "Случаи из практики", сохраните настройки. В результате, пять последних записей этой рубрики будут демонстрироваться на Главной. Первые две - с миниатюрой, остальные три - без миниатюры, обычным списком.


Здесь мы заканчиваем с разделами статической Главной. Далее идёт описание других настроек консоли.


21. Страница Контакты

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

Создайте новую страницу в админке сайта, назовите её "Контакты". В её настройках найдите "Шаблон" -

Там уже установлен "Шаблон по умолчанию". Выберите вместо него шаблон "Страница Контакты", после чего опубликуйте.

Теперь страницу нужно наполнить. Перейдем в консоль темы в раздел "Страница Контакты", где разместим такие контактные данные, как:

Телефоны:

Адрес:

Электронную почту:

Номер для чата WhatsApp (впереди 7 и далее ваш номер, без плюса и других символов, без пробелов):


Форма для отправки сообщений на странице Контакты

Добавим на данную страницу форму из Contact Form 7. Использовать уже готовую форму из перезвона мы не будем, поскольку здесь предусмотрено наличие поля для ввода текста сообщения, которое отсутствует в форме перезвона.

Перейдем в Contact Form 7, создадим новую форму и внесем в нее свои изменения.

1) В заголовок впишите название, "Страница Контакты", чтобы не перепутать данную форму с другими.

2) Теперь настроим "Шаблон формы". В нём уже установлен по умолчанию какой-то код, удалите его вообще, а на его место поставьте такой -
<div class="gp-wrapper">[text* text-300 placeholder "Как Вас зовут"][tel* tel-400 placeholder "Ваш номер телефона"][textarea textarea-500 placeholder "Опишите Вашу ситуацию"][response][submit "Отправить"]</div> и нажмите на кнопку "Сохранить".

3) После сохранения, появится шорткод, отмечен рамкой на скриншоте. Скопируйте его. Вернитесь в консоль темы в раздел "Страница Контакты" и вставьте его в соответствующее поле:

Отлично, теперь у вас на странице Контакты есть все необходимые данные и форма отправки сообщений.

3) Но это ещё не всё, остался последний шаг по форме. Закончим ее настройку шаблоном письма - это сообщение, которое будет приходить вам на e-mail из данной формы. Возвращаемся в настройки формы и открываем вкладку "Письмо".

В поле "Тема" удалите всё, на пустое место поставьте "Сообщение с сайта [_site_url]".

Содержимое "Additional headers (Дополнительные заголовки)" тоже удалим, оно вообще не нужно.

В поле "Тело письма" удалите код, что установлен там по умолчанию, вместо него разместите такой (просто скопируйте и вставьте):

Сообщение с сайта [_site_title]
===============================
Форма для перезвона
===============================

Имя: [text-300]
Номер телефона: [tel-400]

Сообщение:
[textarea-500]

===============================

Дата отправки: [_date]
Время отправки: [_time]
IP адрес отправителя: [_remote_ip]

Протестируйте форму, прежде чем запускать в работу. Отправьте себе сообщение для проверки. Если всё сделали правильно, на ваш e-mail поступит письмо. Например:

В нём будет содержаться:

  • тема - откуда письмо,
  • имя клиента,
  • номер телефона, по которому нужно связаться с клиентом,
  • текст сообщения,
  • время и дата отправки,
  • ip адрес отправителя, на всякий случай.

Также на страницу Контакты можно добавить динамическую карту.

Зайдите в Яндекс карты или Гугл карты, введите свой адрес, в меню найдите опцию для вставки карты на сайт, скопируйте предложенный код и вставьте в данное поле.

Какую бы систему вы не использовали, предложенный код будет собран в виде iframe. Чтобы подключить отложенную загрузку (lazy load) к вашей карте, найдите в её коде тэг

iframe src и замените его на iframe data-src Теперь карта будет загружаться по мере скроллинга, что даст вам плюс в скорости страницы и повысит баллы при её проверке в Google PageSpeed.

Еще полезный совет - задайте карте правильную ширину. Найдите в её коде тэг width. Какое-бы значение ни стояло в нём внутри кавычек, замените его на 1145, вот так -

width="1145"

22. Страница Спасибо

У плагина Contact Form 7 есть много опций, одна из которых - редирект, перемещение посетителя на специальную страницу (назовем ее Страница Спасибо) после успешной отправки сообщения из формы. Применим эту опцию в данной теме для пользы дела, улучшения поведенческих факторов.

Если не хотите использовать страницу Спасибо, просто ничего не делайте, оставьте все как есть.

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

Теперь страницу нужно наполнить. Перейдем в консоль темы в раздел "Страница Спасибо".

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

Далее разместим заголовок и какой-либо текст, например, благодарность посетителю за отправку контактов, примерные сроки, когда ему следует ждать от вас звонка. Также, для удержания посетиля на сайте и улучшения ПФ, предложите ему посмотреть ваш блог. Либо отправляйте в социальные сети.

Часть текста можно подветить, как-будто выделено салатовым маркером. Для этого добавим перед выбранным фрагментом тэг <span>, а после - закрывающий тэг </span>. Лучше всего это делать в текстовом редакторе. Например: <span>Я перезвоню в ближайшее время, чтобы обсудить Ваше дело</span>

И, наконец, подключите соц. кнопки и статьи из блога:

23. Архив и страницы Услуг

Архив

Все опубликованные услуги представлены не только на статической Главной, но также и на отдельной странице - в архиве. Данный тип страницы всегда доступен по ссылке https://site.ru/services/ Только замените site.ru на адрес вашего сайта.

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

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

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

Разместим в нём фото, заголовок, короткий текст, настроим кликабельный телефон и кнопку, открывающую знакомый нам поп-ап для перезвона.

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

Изменить цвет фона блока на другой - в разделе консоли "Оформление".

24. Блог, статьи

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

Заголовок блога
По-умолчанию предлагается вариант "Статьи и новости", если нужно - впишите любой другой. Обратите внимание, это h1.


Избранные рубрики
В шапке блога под заголовком предлагается разместить несколько наиболее интересных, актуальных рубрик. Здесь, в консоли, выводится список всех не пустых рубрик сайта; поставьте галочку, чтобы выбранная рубрика появилась в шапке. Рекомендуемое количество: 4-5.


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

1) анонс с миниатюрой
2) стандартный пост.

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

Миниатюра устанавливается в запись путём размещения какой-либо картинки в блок "Изображение записи":

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

Если вам не нравится анонс с миниатюрой, включите режим стандартной записи и оформляйте его по своему вкусу.

Если выбран анонс, рекомендованный размер картинки для миниатюры - 320х240 пикс. Но подгонять точно под размер не обязательно, тема сделает это сама специальным скриптом. Блог и архивы загружаются быстро, поскольку все миниатюры подключены к отложенной загрузке (lazy load).


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

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

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

Спрашивают, почему среди кнопок для расшаривания нет кнопки Инстаграма. Отвечаем - в инсте нельзя расшарить контент с сайта, нет у этого сервиса такой функции, пока.


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

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

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

26. Оформление

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

Здесь можно изменить фоны кнопок, цвет шрифта текстов, ссылок, заголовков, а в Постере и подвале - даже прозрачность элементов.

Помните: самые простые варианты - самые лучшие. Не нужно назначать каждому элементу свой цвет. Для оформления сайта обычно используется палитра из 3-5 цветов максимум. Как видите, на этой странице цвета преимущественно повторяются. Следуйте тому же правилу. Выберите один основной цвет, один дополнительный, акцент, для кнопок и всяких активных элементов, и пару оттенков для декора.

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

Гармоничные цвета для оформления сайта вы найдете в онлайн-сервисе https://colorhunt.co, там представлено несколько сотен различных комбинаций.

Находим подходящий набор, копируем hex-код нужного цвета и вставляем в соответствующее поле консоли:

Сохраняем настройки, в итоге элемент на сайте приобретает новый цвет.


Градиент в кнопках

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



Оформление - последняя страница консоли. Ниже дается описание других возможностей темы.


27. Чистая страница

Если вы работаете с плагинами типа Elementor, или WP Page, или используете какой-либо другой конструктор для создания шаблонного лэндинга, вам потребуется чистая страница - которая поддерживает подключённые к сайту стили и скрипты, статистику, пиксель facebook, но выводится без шапки, меню, сайдбара и подвала - пустой контейнер, чистый лист. Такая страница в теме есть.

Чтобы подключить её, создайте новую страницу, в её настройках найдите выпадающий список, где по умолчанию установлен "Шаблон по умолчанию":

Замените его на шаблон "Чистая страница" и опубликуйте. После этого переходим к наполнению - размещаем блоки, шорткоды и прочее, при помощи вашего любимого конструктора или просто редактора Гутенберг.

28. Встроенный виджет

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

Чтобы установить виджет, перейдите в админке сайта в раздел "Внешний вид > Виджеты", найдите "LAW FACTORY: виджет Обо мне":

Перетащите его мышкой в сайдбар и заполните имеющиеся в нём поля:

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

29. Защита контактных форм от спама

В Law Factory активно используются возможности плагина Contact Form 7 для отправки сообщений c сайта. Всё бы хорошо, если бы не боты, которые ходят по сайтам и бомбят их отправкой спама.

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

https://www.google.com/recaptcha/admin/create

Здесь вы создадите защитную рекапчу. Для начала выполним несколько настроек:

- Обязательно отметим пункт reCAPTCHA v3 - другая нам не нужна, только эта;
- в поле "Домены" впишем адрес сайта, на котором установлена тема,
- поставим галочку для принятия условий,
- снимем галочку с поля оповещений.
- после этого нажмём кнопку "Отправить".

Сервис сгенерирует два ключа (ключ сайта и секретный ключ) и покажет их вам на следующем экране: Эти ключи нужно скопировать и вставить на сайте в настройках Contact Form 7. В соседней вкладке браузера откроем админку сайта и зайдем в раздел "Интеграция" в Contact Form 7:

Найдём блок reCAPTCHA и нажмём кнопку:

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

Как узнать, что рекапча заработала? Если все в порядке, в правом нижнем углу на каждой странице сайта появится ярылк защиты от спама:

Если вам не нравится, что на сайте болтается этот значок, можете скрыть его, добавив в файл темы style.css селектор

.grecaptcha-badge {visibility: hidden}

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

30. Обновление темы

Если в теме найден баг, исправлены какие-либо ошибки, я выпускаю обновление. Law Factory обновляется автоматически, из админки. Если доступна новая версия темы, вы получите уведомление в разделе админки "Обновления", например:

Также можете зайти в раздел "Внешний вид > Темы", там также указано, что появилась новая версия и доступна для установки:

Узнать, что конкретно изменилось в новой версии, возможно следующим образом - кликните на кнопку "Информация о теме", откроется окно, где размещены ссылка на описание обновления, и ссылка для старта обновления:

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

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


31. Дочерняя тема

При покупке вы получили три архива. Один это инструкция, второй - тема, третий - дочерняя тема. Что такое дочерняя тема и для чего она нужна?

Скажем, у вас есть только одна обычная тема, вы решили сделать в ней какие-либо изменения. Изменили файлы темы, стили или вёрстку. Через какое-то время выходит обновление темы - автор добавил новую функцию или исправил баг. Теперь нужно установить обновленную версию, но тогда все изменения кода пропадут.

Дочерняя тема поможет этого избежать.

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


Как делать изменения в дочерней теме?

Например, вы хотите добавить баннер в записи сайта. Поскольку речь идет о записях, нужен файл single.php. В дочерней теме lawfactory-child-theme такого нет, в ней всего три файла - style.css, functions.php и файл скриншота. Поэтому вы копируете файл single.php из папки родительской темы lawfactory в папку lawfactory-child-theme, и уже там, в дочерней, открываете его и меняете под себя, вставляете ваш баннер.


Если нужно изменить стили, для этого требуется файл style.css. Такой файл есть в дочерней теме lawfactory-child-theme. Поскольку он уже фактически имеется, то копировать ничего не нужно, используем его.

Например, хотим уменьшить заголовок h2 в Постере на Главной; в оригинале он оформлен селектором

.poster-caption h2 {font-size: 54px;line-height: 1.22;margin-bottom: 30px;text-shadow: 0 3px 4px rgba(0, 0, 0, .15);font-weight: 700;max-width: 1000px;color: var(--decor-color)}

Размер шрифта тут задан свойством font-size: 54px; а вы, скажем, хотите сделать мельче, 44px.

Откроем файл style.css в дочерней теме, найдем строчку

/* * * * * * * * * * * Размещайте ваши стили под этой строкой * * * * * * * * * * */

под ней поставим выбранный селектор и впишем свойство, которое хотим изменить:

.header-caption h2{font-size:44px}

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

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


Мега-полезный совет

Полезная привычка - чистить кэш в браузере после того, как делаете какие-либо изменения в стилях или скриптах темы. Чтобы сразу видеть результат изменений, актуальный вид страницы, а не её старую копию из кэша. Если также используется плагин для кэширования или минифицирования файлов, например, WP Super Cache или Autoptimize, отключайте его на время проведения работ, либо удаляйте просроченный кэш в настройках плагина по ходу дела. Это сэкономит вам время, и избавит от необходимости обращаться в техподдержку с вопросами типа "Я делаю изменения, а на сайте всё остается по-прежнему, вот на старой теме такого не было" и т.п.

33. Возможные проблемы при использовании темы и их решение

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

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

Правильно выводить скрипты в подвале сайта, под контентом. Но иногда попадаются такие плагины или рекламные коды, которые требуют вывода своих скриптов ДО контента, в шапке. Иначе они не работают. Это не очень правильно, но тут ничего не поделаешь. Если вы наблюдаете такие проблемы, верните скрипты в шапку сайта. Для этого откройте файл темы

files/back/optimize.php

В нём на строчках 3-9 найдите код // перенос скриптов сайта в подвал
function gp_footer_enqueue_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
}
add_action('wp_enqueue_scripts', 'gp_footer_enqueue_scripts');
и удалите его.

34. Оптимизация

Что сделано, чтобы тема работала быстро?

Убран мусор из шапки, который традиционно добавляется движком — стили для recentcomments, версия движка, ссылки rsd_link, adjacent_posts_rel_link и др. Скрипты темы соединены в один файл, сжаты и перенесены в подвал, и загружаются асинхронно. Стили темы сжаты. При настроенной теме - ноль ошибок в дебаг режиме. Стили темы валидны. Микроразметка без ошибок.

Добавлен эффект отложенной загрузки lazy load для картинок, видео и других типов scr и iframe, что само по себе даёт прибавку в скорости.

Важную роль в дизайне играет типографика, для оформления текстов и заголовков применяется красивый шрифт Fira Sans, его библиотека размещена в самой теме и не требует обращения к сторонним серверам, поэтому страница рендерится быстрее, плюс к шрифту применяется свойство swap, которое позволяет загружать тексты сайта сразу, не дожидаясь рендеринга шрифта. Более того, файлы шрифта ещё и предварительно подключаются в head через мета-тэг preload.

Все иконки в теме, за исключением кнопок в яндексовском блоке "Поделиться в соц. сетях" сделал в SVG, это ещё экономия времени загрузки и ресурсов.

Фоновая картинка в Постере выводится только на десктопах, ноутбуках, через wp_is_mobile(), чтобы избежать проблем с показателями Largest Contentful Paint и Cumulative Layout Shift при проверке сайта в Google PageSpeed на моб. устройствах.

Главная страница демо-сайта показывает высокие баллы при проверке в Гугле:

- для мобильных - для десктопов

Услуги получают еще больше баллов:

- для мобильных - для десктопов

Проверка на оптимизацию для мобильных показывает, что ошибок нет:

Проверка на расширенные результаты (микроразметку) также указывает, что все ОК:

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


Можно ли ещё как-то ускорить сайт? Воообще да. Вы можете добавить код, который переносит глобально все стили (темы и плагинов) в подвал. Такой перенос сразу даёт в плюс несколько баллов в сервисе Google PageSpeed Insights. Нужно только понимать, что он подходит не для всех сайтов, его эффективность зависит от вашей конфигурации. Но в целом это может дать положительный эффект.

Такой код уже есть в теме, его нужно просто раскомментировать.

Откройте файл темы

files/back/optimize.php

в нём на строчках 12-19 найдите блок кода

/* перенос стилей в подвал */
/* для разблокировки просто удалите // перед каждой строкой */
// remove_action( 'wp_head', 'wp_print_scripts' );
// remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
// remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );
// add_action( 'wp_footer', 'wp_print_scripts', 5 );
// add_action( 'wp_footer', 'wp_enqueue_scripts', 5 );
// add_action( 'wp_footer', 'wp_print_head_scripts', 5 );
Как видите, он закомментирован - перед каждой строчкой установлен двойной слэш //. Удалите // перед каждой строчкой, чтобы код стал активен. Такое небольшое изменение даст ещё несколько баллов.

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


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


Кэш, картинки, сжатие кода

Используйте кэширование, обязательно включите на сайте какой-нибудь из популярных кэширующих плагинов, например, WP Super Cache.

Следите за размером загружаемых изображений, делайте их вес как можно меньше при помощи сервисов типа https://imagecompressor.com/ru/. Особенно это касается фоновых картинок. Тогда ваш сайт будет открываться быстрее. Лучше пожертвовать качеством изображения, чем оттолкнуть посетителя медленной загрузкой. Если сайт еле дышит, все эти hd картинки никто, кроме вас, не увидит.

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

Emoji

Emoji это библиотека смайлов. Команда WordPress решила добавить эти смайлы в сборку движка. Они появились в версии 4.2 и выводят в шапке сайта несколько ссылок на скрипт и файл стилей. Не очень хорошо, что они принудительно выводятся на сайте и формируют лишние запросы. Для ускорения работы шаблона, эти эмодзи в данной теме заблокированы. Если они вам необходимы, напишите мне, я подскажу, как вернуть их назад.

35. Локализация

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

Для локализации используется 2 способа, на выбор:

1) Программа PoEdit

В директории темы расположена папка languages, внутри лежит файл law.pot. Скачайте с сайта poedit.net официальную бесплатную программу PoEdit, откройте в ней файл law.pot. Программа сразу предложит вам создать на основе данного файла новый перевод.

Переведите русские слова на их аналоги в новом языке. После сохранения переведенного документа, у вас появятся 2 файла, один с расширением .mo, другой с расширением .po. Оба этих файла загрузите на сайт по ftp в ту же самую папку languages, где лежит law.pot. После этого в настройках сайта включите нужный язык - тексты шаблона будут отображаться в соответствующей языковой среде.

2) Плагин

Существует несколько плагинов для перевода темы на нужный язык. Например, Loco Translate. Он автоматизирует процесс и позволяет создать перевод прямо в админке сайта. Ссылка на плагин: ru.wordpress.org/plugins/loco-translate/. Инструкции по работе с ним легко найти в Гугле.


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

36. Безопасность

Данная тема продается по лицензии - на 2 домена. Она содержит фрагмент зашифрованного кода, который защищает тему от халявы, воровства и подмены доменов.

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

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

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

Удаление данного файла или внесение в него правок приведет к отказу в работе темы.

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

Речь идёт о файле

lawfactory/admin/license.php

Волноваться нужно, если антивирусная система выделит какие-либо иные файлы сайта, кроме этого.


Что касается защиты сайта от взлома и уязвимостей, существуют 4 правила:

1) установите сложные и регулярно обновляемые пароли на почту, админку сайта и ftp,

2) не используйте темы и плагины, скачанные на сайтах-помойках, применяйте ПО из официальных источников,

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

4) установите на сайт плагин Wordfence и настройте его, это популярное и прекрасное решение для комплексной защиты сайта, даже в базовой версии.

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

37. Техподдержка

В случае возникновения каких-либо вопросов или проблем, связанных с темой, напишите мне на почту goodwinpress@ya.ru. Поддержка осуществляется только по email. В теме письма обязательно укажите ваш ID номер, который выдается вместе с темой. Не лишним будет также указать адрес сайта, версию движка и php.

Какие письма не рассматриваются:

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

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

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

Поддержка на goodwinpress осуществляются ежедневно, без выходных.

График работы:
понедельник - пятница: с 10:00 до 21:00
суббота - воскресенье и праздники: с 12:00 до 20:00

38. Часто задаваемые вопросы

Могу ли я использовать эту тему на нескольких своих сайтах?
Данный шаблон продается под конкретные домены. Лицензия распространяется на 2 сайта. Поэтому при покупке темы необходимо сообщить адрес сайта, на котором она будет использоваться. Если вы установите копию темы на другой сайт, не указанный в лицензии, она просто не будет работать. Чтобы использовать тему на 3-м или 4-м сайте, требуется оплатить ещё одну лицензию.

При покупке темы я указал только один адрес. Теперь хочу установить тему на второй сайт. Какие мои действия?
Напишите мне на goodwinpress@ya.ru, пришлите адрес второго сайта. Я добавлю его в лицензию и вышлю вам новую копию темы, которая будет содержать оба указанных вами адреса. Установите её на новый сайт.

Могу ли я публиковать или продавать эту тему?...
Нет, вы не можете публиковать тему, выдавать за свою, продавать копии темы, это запрещается.

... даже если я изменил тему?
Да, даже если изменили, это все равно остается тема от goodwinpress.ru, только измененная.

Вы делаете шаблоны на заказ?
Нет,такая работа мне давно не интересна.

Должен ли я в обязательном порядке сохранять авторскую ссылку в подвале темы?
Я не ставлю никаких ссылок в темы, даже стандартной авторской нет.

Если нашли опечатку или баг

Друзья, создание шаблона, составление инструкции это большая работа. Иногда автор может ошибиться, как и любой из нас. Если вы нашли в инструкции опечатку или грамматическую ошибку, а в теме - баг или глюк, пожалуйста, сообщите мне об этом, чтобы я проверил и внёс исправление. Почтовый адрес goodwinpress@ya.ru
Спасибо!









© GoodwinPress, 2021