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

Grey Magic

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

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

Дата публикации: 13 сентября 2020

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

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

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

Email: goodwinpress@ya.ru

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

01. Лицензия

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

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

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

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

Grey Magic — адаптивный шаблон лэндинга / посадочной страницы на WordPress для презентации продуктов и услуг, курсов, тренингов, образовательных программ, для ИП и самозанятых - цветной, с микроразметкой, сбором контактов, простой в настройке и очень быстрый. Рекомендуется как одностраничник, но может применяться и для многостраничного ресурса.


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

  • Главная страница с набором готовых блоков - включите их и наполните своими изображениями, видео и текстом.
  • Формы для сбора контактов на основе Contact Form 7 + поп-ап в шапке.
  • Тему можно использовать как одностраничник, но не только - в ней есть все стандартные для WordPress файлы и функции для добавления блога, рубрик, внутренних страниц.
  • В одностраничном режиме Предложения открываются в модальном окне.
  • Для презентации Ваших Предложений при помощи custom post type создан дополнительный тип публикаций.
  • Тема содержит микроразметку schema.org для лучшего представления сайта в поисковой выдаче.
  • Для отложенной загрузки изображений и видео включен скрипт lazy load.
  • Тема оптимизированная и быстрая, набирает топовые баллы в Google Page Speed (90-95 на мобильных, 100 на десктопах).
  • Приготовлены поля для добавления разных метрик, включая поля для пикселя Facebook и для верификации сайта.
  • Как и прочие темы от goodwinpress, Grey Magic настраивается в консоли, где Вы можете включить нужные разделы, разместить свой контент, перекрасить под себя все основные цветные элементы и т.п. без редактирования кода и специальных знаний.
  • Приготовлено три сайдбара для разных типов страниц, в данной теме публикации размещаются в одну колонку, поэтому сайдбары расположены под основным контентом.
  • Все готово к локализации.

Grey Magic работает на версиях WP, начиная с 5.0 и выше. Чтобы сайт оставался быстрым и безопасным, всегда используйте свежую версию WordPress. Оптимальная версия PHP для данной темы - 7.3 или выше.


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

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

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

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

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

  • greymagic
  • папка admin (содержит файлы консоли, лицензию, встроенный загрузчик плагинов)
  • папка files
    • папка back (файлы, относящиеся к бэкэнду, то есть, отвечающие за процессы: опции для оптимизации, микроразметка, custom post type для создания предложений)
    • папка front (файлы, относящиеся к фронтэнду, то есть к внешней части темы: поп-ап, иконки соц. сетей, кнопки для расшаривания и т.д.)
    • папка font (содержит файлы шрифта, используемого в теме, Golos, в трех начертаниях)
  • папка img (демо-картинки, мелкие элементы для дизайна)
  • папка languages (содержит gpress.pot для локализации темы)
  • папка scripts (содержит минифицированный скрипт темы)
  • папка frontpage (содержит файлы, в которых размещены разделы статической Главной страницы)
  • файл screenshot.png (скриншот темы)
  • файл style.css (файл стилей темы, обеспечивает оформление темы и адаптивность)
  • файл 404.php (для ответа сервера при отсутствии документа по ссылке)
  • файл archive.php (вывод архивов - рубрики, метки)
  • файл archive-offer.php (архив Предложений)
  • файл blank-page.php (шаблон для создания чистой страницы)
  • файл comments.php (комментарии)
  • файл footer.php (подвал сайта)
  • файл front-page.php (шаблон статической Главной страницы, в который загружатся файлы из папки frontpage)
  • файл functions.php (функции темы - хуки, фильтры, подключение дополнительных опций)
  • файл header.php (шапка сайта)
  • файл index.php (шаблон блога)
  • файл page.php (шаблон обычной страницы)
  • файл search.php (результаты поиска по сайту)
  • файл sidebar-blog.php (сайдбар для блога и рубрик)
  • файл sidebar-offer.php (сайдбар для Предложений)
  • файл sidebar-single.php (сайдбар для записей и страниц)
  • файл single.php (шаблон записей)
  • файл single-offer.php (шаблон Предложения)
  • файл style-editor.css (стили для встроенного редактора движка)

 


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

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

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

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

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

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

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

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


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

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

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

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

Установите ее и потом активируйте. Таким образом, у вас получится две темы - родительская тема Grey Magic установлена, дочерняя тема Grey Magic установлена и активирована.

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

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

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

Если после активации темы Вас выбрасывает на белый экран, на котором ничего нет, либо белый экран с надписью HTTP ERROR 500, либо белый экран с надписью Syntax error: unexpected ? - это означает, что на сайте используется устаревшая версия PHP. На данный момент, актуальные версии PHP это 7.3 и 7.4. Вам нужно зайти в панель хостинга и включить для данного сайта свежую версию PHP - 7.3 или выше. Это быстро и бесплатно. Как только Вы это сделаете, сайт заработает и всё будет хорошо.

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

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

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

Добавим на сайт несколько плагинов.

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

2) Simplelightbox - простой плагин для создания эффекта лайтбокса при открытии изображений в Галерее / Кейсах и на внутренних страницах. Рекомендуемый.

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

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

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

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

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

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

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

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

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

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

Шаг 1

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

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

Шаг 2

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

Сохраните изменения. Готово! Вы создали и установили Главную страницу сайта.


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


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

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

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

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

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

Что дальше?

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

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

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

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

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

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

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

07. Как работать с Предложениями

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

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

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

Данная тема не только позволяет работать со всеми указанными документами, но еще добавляет на сайт новый - Предложения (offer), созданые с помощью custom post type.

Предложение это вроде карточки услуги или продукта, то, что Вы хотите продать клиенту.


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


Как создать Предложение

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

Откроется экран, где расположены следующие поля:

1) название (заголовок);
2) текстовый редактор Гутенберг для подробного описания Предложения;
3) изображение (будет использовано в качестве миниатюры, также выводится внутри Предложения);
4) галочка, чтобы добавить это Предложение на Главную страницу;
5) короткое описание (применяется в анонсе);
6) стоимость, цена услуги или продукта;
7) возможность установить видео вместо картинки-миниатюры (если у Вас есть видео в формате mp4, загрузите его в медиабиблиотеку сайта и укажите в данном поле его адрес).


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


После этого откроем консоль темы для дальнейшей настройки.

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

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

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

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

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

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

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

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

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

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

Режим работы темы Это первое, что следует сделать в консоли - выбрать режим работы. Их два: тема может работать как одностраничный сайт, либо как обычный многостраничный сайт.

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

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

Пример:

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

Если включен Одностраничный сайт, то по клику на ссылки содержимое Предложения откроется в модальном окне с вертикальной прокруткой:

Если включен Многостраничный сайт, тогда клик на ссылки откроет Предложение на отдельной странице:

От этого выбора также зависят:

1) содержимое Предложений - в одностраничном варианте описание Предложения делаем короче, чем в многостраничном;
2) меню сайта - в одностраничном режиме в меню ставим якорные ссылки, ведущие на разделы Главной, в многостраничном режиме делаем обычное меню, ведущее на внутренние страницы;
3) в разделе Галерея / Кейсы в многостраничном режиме добавим ссылки к картинкам, в одностраничном - не добавим.


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

Крайне рекомендуется к установке, поскольку используется также и в микроразметке.


Персональные данные посетителей В соответствии с законодательством РФ, сайты, собирающие информацию от посетителей, должны получать подтверждение на сбор этих данных. Обычный блог на 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.

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


Меню
Здесь можно быстро отключить меню в шапке и подвале сайта.


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

10. Настройка Главной страницы

Шапка
Шапка на Главной заполняет весь первый экран и содержит главный заголовок, подзаголовок, кнопку, кликабельный номер телефона, блок кнопок социальных сетей. Все они размещаются поверх фоновой картинки, прикрытой полупрозрачной темной маской. Установите здесь фоновое изображение, текст заголовка и подзаголовка. Рекомендуемый размер картинки - 1920х1000 пикс. Вес - как можно меньше. Фоновое изображение на демо весит 36 килобайт. Если у Вас вес фоновой картинки более 50-60 кб, переделайте, это много.


Кнопка
Включите кнопку, разместите текст на кнопке и выберите сценарий, что должна делать кнопка при нажатии. Два варианта: она либо открывает заданный Вами адрес, либо - поп-ап c каким-либо содержимым. Если выбран адрес, впишите его ниже, не забываем добавить http:// или https://. Если выбран поп-ап, разместим его содержимое в соответствующем поле, оформленном как классический редактор, оно позволяет перекрасить текст, разместить картинку, видео, шорткод.


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


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


Разделы Главной страницы
Статическая Главная страница состоит из шапки, подвала и 8 готовых разделов. Среди них Подписка, Предложения + мотивация, Выгода, О нас + достижения, Отзывы, Галерея / кейсы, Произвольный контент, Контакты. Любой из этих разделов можно отключить или поменять местами. Чтобы выключить какой-либо раздел, кликните на иконку с глазом; чтобы переместить раздел, подцепите его мышкой и переставьте вверх или вниз. Просто и удобно.


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


11. Подписка

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


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

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

Перейдите по ссылке на сайт dashicons - https://developer.wordpress.org/resource/dashicons/. Найдите подходящую иконку, кликните на нее. Вам покажут выбранную иконку и 3 ссылки, кликните на Copy CSS: Откроется окошко, содержащее свойство иконки. Нам нужен только код внутри, например, f19b. Скопируйте его и вставьте в консоли:

Добавление иконок в другие разделы производится точно так же.

Далее добавим немного текста:

Последнее, что нужно сделать, это разместить шорткод формы. Перейдем в настройки плагина Contact Form 7 и создадим новую форму:

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

2) В поле "Шаблон формы" уже установлен по умолчанию какой-то код, удалите его вообще, а на его место поставьте такой -
[text* text-100 placeholder "Как Вас зовут"][email* email-200 placeholder "Ваш e-mail"][tel* tel-300 placeholder "Номер телефона"][submit "Хочу учиться"][response] после чего сохраните форму, нажав на кнопку "Сохранить".

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

На сайте появится форма, она выглядит так:

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

Убедитесь, что в поле "Кому" размещен корректный e-mail - на него будут поступать сообщения из формы. Лучше использовать адрес на почтовом хостинге gmail.com или yandex.ru. Как показывает опыт, приём на почту от сайта часто находится в зависимости от настроек почтового сервера Вашего хостинга, о которых Вы не в курсе, и есть риск, что какие-то сообщения Вы можете не получить.

В поле "От кого" вместо [your-name] впишите название вашей организации.

В поле "Тема" удалите всё, на пустое место поставьте текст "Сообщение с сайта" или какой-либо другой.

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

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

Контакт из формы подписки

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

Имя клиента: [text-100]
E-mail: [email-200]
Номер телефона: [tel-300]

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

Дата отправки: [_date]
Время отправки: [_time]

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

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

12. Предложения + мотивация

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

В каждом Предложении есть опция "Добавить на главную":

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

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

Перейдем в настройки плагина Contact Form 7 и создадим новую форму.

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

2) В поле "Шаблон формы" уже установлен по умолчанию какой-то код, удалите его вообще, вместо него разместите такой:
[cf7_extra_fields][text* text-400 placeholder "Как Вас зовут"][tel* tel-500 placeholder "Номер телефона"][submit "Хочу учиться"][response] и нажмите на кнопку "Сохранить".

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

На сайте в модальных окнах Предложений появится форма, она выглядит так:

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

Убедитесь, что в поле "Кому" размещен корректный e-mail - сюда будут поступать сообщения из формы.

В поле "От кого" вместо [your-name] впишите название сайта или организации.

В поле "Тема" удалите всё, на пустое место поставьте текст "Сообщение с сайта", "Заявка с сайта" или какой-либо другой.

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

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

Заявка от клиента на участие в курсе

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

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

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

Предложение:
"[page-title]"
[page-url]

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

Дата отправки: [_date]
Время отправки: [_time]

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


Мотивация

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

13. Выгода

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

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

Установить свои цвета для фона раздела и фона выгод можно в разделе консоли "Оформление":

14. О нас + Достижения

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

"О нас" позволяет вывести на Главную какой-либо произвольный текст о Вас, об организации или проекте, указать короткое резюме, продемонстрировать квалификацию, опыт, чтобы вызвать доверие к Вам и предлагаемым услугам, продуктам. Он состоит из 2 частей: слева - текстовая часть, справа - изображение, фото.

Разместите заголовок, текст. Классический редактор позволяет отформатировать контент, добавить ссылки, html-код. Далее установите картинку, фото. Рекомендуемый размер - не менее, чем 955х700 пикс. Вес - как можно меньше. Внешний вид всего раздела лучше, если высота изображения больше высоты текста, как на демо-сайте.

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


В "Достижениях" укажем факты, касающиеся работы, которые демонстрирует значение, успехи, чего уже достигли. Например, сколько выполнили проектов, сдали объектов, количество подписчиков, клиентов и т.п. При необходимости, Достижения можно отключить.

15. Отзывы

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

Сначала установим иконку и заголовок.

Иконка добавляется также, как и в других разделах - на сайте https://developer.wordpress.org/resource/dashicons/ находим подходящую иконку, кликаем на неё, потом на Copy CSS, копируем код иконки, состоящий из латинской буквы и цифр, вставляем его в консоли темы.

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

Максимальное количество отзывов: 10. Первые два включены по умолчанию, остальные включим по желанию.

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

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

17. Произвольный контент

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

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

18. Контакты

Данный раздел состоит из двух частей:

1) Контактные данные

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

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

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

2) Форма и социальные сети

Далее подключим такую же форму для сбора контактов, как в разделе Подписка, а также блок кнопок соц. сетей. Вконтакте, Instagram, Facebook, Twitter, Youtube, Telegram и Одноклассники, как в шапке на Главной. Предполагается, что форма и кнопки уже настроены ранее.


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


20. Архив Предложений + страницы Предложений

В многостраничном режиме для вывода всех Предложений есть отдельная страница, архив. Предложения созданы при помощи post type с ярылком "offer". Поэтому архив Предложений доступен по ссылке https://site.ru/offer Замените site.ru на адрес Вашего сайта. Архив выглядит так:

Если используете одностраничный режим, можете пропустить эти пункты настройки. Также в этом случае рекомендуется добавить в Ваш файл robots.txt условия Disallow: /offer/
Disallow: /offer/*
а также исключить данную страницу и сами Предложения из карты сайта, чтобы они не индексировалась.

Если используете многостраничный режим, настроим все опции. Установим заголовок (обратите внимание, это h1) и короткий текст, описание.

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

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


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

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

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

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

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


Описание
Небольшое описание в шапке блога, вводная, о чем говорится в блоге, что интересного приготовлено для посетителей. Здесь же можно ограничить вывод описания только первой страницей блога.


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


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

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

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

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

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

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


Следующие настройки касаются вида внутри записей:

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

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

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


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

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

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

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

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

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

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

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

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

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

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



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


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

В Grey Magic активно используются возможности плагина 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}

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

Если Вы работаете с конструкторами типа Elementor или WP Page или используете какой-либо другой page builder, Вам потребуется чистая страница - которая поддерживает подключенные к сайту стили и скрипты, но выводится без меню, сайдбара и подвала - пустой контейнер, чистый лист. Такая страница в теме есть. Чтобы подключить её, создайте новую страницу (или это может быть уже существующая страница, которую Вы предназначили для работы), в её Атрибутах найдите выпадающий список, где по умолчанию установлен "Шаблон по умолчанию":

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

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

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

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

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

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

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

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

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

Например, Вы хотите уменьшить заголовок h1 в шапке на Главной, в оригинале его стили задаются селектором

.header-caption h1{font-size:80px;line-height:1.2;margin-bottom:20px}

В нём размер шрифта задан свойством font-size:80px; а Вы хотите сделать меньше, например, 60.

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

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

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

.header-caption h1{font-size:60px}

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

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


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

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

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

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

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

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

files/back/optimize.php

В нём найдите код // перенос скриптов сайта в подвал
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');
и удалите его.

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

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

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

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

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

Для иконок применяется библиотека dashicons, которая уже входит в комплект самого движка - еще экономия времени и ресурсов.

Главная страница демо-сайта с темой, тремя плагинами, содержащая 2 видео, 24 картинки, 6 модальных окон и 8 форм для сбора контактов не перегружена и показывает высокие баллы при проверке в Гугле:

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

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

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

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


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

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

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

files/back/optimize.php

вверху найдите блок

/* перенос стилей в подвал */
/* для разблокировки просто удалите // перед каждой строкой */
// 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 );
Как видите, он закомментирован - перед каждой строчкой кода стоит двойной слэш //. Удалите // перед каждой строчкой, чтобы код стал активен. Такое небольшое изменение сразу даст ещё несколько баллов.

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


Есть ещё один способ сделать сайт на WP быстрее, он один уже может добавить сайту баллов 10 в Google PageSpeed Insights, но и с ним есть нюанс. В WordPress 5.0 был введён новый блочный редактор Гутенберг. На внешней стороне сайта он подключает библиотеку стилей для оформления своих блоков. Пользуетесь Вы ими или нет, стили все равно выводятся на сайте и тормозят. Это подключение можно удалить, сайт получит больше баллов, но тогда Ваш контент, размещенный в записях и на страницах через Гутенберг, потеряет оформление. Поэтому данный способ рекомендуется тем, кто не использует новые блоки типа Обложки, встроенные кнопки и прочие новинки. Если Вы публикуете контент, активно применяя Гутенберга, он вряд ли Вам подойдет. На Ваш страх и риск.

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

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

files/back/optimize.php

в нём на строчках 20-24 найдите блок /* отключение библиотеки блоков гутенберга */
//function custom_theme_assets() {
//wp_dequeue_style( 'wp-block-library' );
//}
//add_action( 'wp_enqueue_scripts', 'custom_theme_assets', 100 );
Удалите // перед каждой строчкой кода, чтобы он стал активен.


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


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

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

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

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

Emoji

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

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

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

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

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

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

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

2) Плагин

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


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

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

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

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

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

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

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

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

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

admin/license.php

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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









© GoodwinPress, 2020