Make Progress 2

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

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

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

Последнее обновление: 3 октября 2018

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

Демо: http://demo2.goodwinpress.ru/makeprogress2/

Страница темы: http://goodwinpress.ru/tema-make-progress2

Email: goodwinpress@ya.ru

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

В скриншоте темы использован фрагмент картины кисти немецкого художника Йохана Шмидта (Jochen Schmidt).

 

01. Лицензия

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

Лицензия распространяется на 2 сайта.

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

Технический поддомен или локалхост добавим бесплатно.

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

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

Основная страница в шаблонах такого типа — Главная. В теме имеется своя готовая статическая главная страница, состоящая из нескольких блоков:

- Постер
- О компании
- Достижения
- Карусель
- Продукты в виде сетки
- Наши преимущества
- Услуги
- Портфолио
- Карусель с отзывами
- Блок для произвольного контента
- Контактный блок
- Новости

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

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

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

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

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

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

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

  • makeprogress2
  • папка admin (содержит файлы консоли, проверку версии WordPress, библиотеку шрифта Source Sans Pro от Google, загрузчик плагинов, лицензию)
  • папка css (содержит библиотеку иконок Font Awesome и стили для оформления визуального редактора движка)
  • папка files
    • папка back (файлы, относящиеся к бэкэнду, то есть, к внутренней части темы: скрипт обработки миниатюр, встроенные виджеты, подключение шорткодов, управление сайдбаром)
    • папка front (файлы, относящиеся к фронтэнду, то есть к внешней части темы: блок Об авторе, контактный блок в шапке, логотип / заголовок, внутренняя навигация, поиск в шапке, кнопки для расшаривания)
    • папка home (содержит файлы всех разделов статической главной)
  • папка img (демо-картинки)
  • папка languages (содержит gpress.pot для локализации темы)
  • папка scripts (скрипты темы)
  • файл screenshot.png (скриншот темы)
  • файл style.css (файл стилей темы, обеспечивает оформление темы и адаптивность)
  • файл 404.php (для ответа сервера при отсутствии документа по ссылке)
  • файл archive.php (вывод архивов - рубрики, метки)
  • файл author.php (вывод записей по авторам)
  • файл comments.php (комментарии)
  • файл footer.php (подвал сайта)
  • файл functions.php (функции темы - хуки, фильтры, подключение дополнительных опций)
  • файл header.php (шапка сайта)
  • файл index.php (шаблон блога)
  • файл main.php (шаблон статической главной страницы)
  • файл page.php (шаблон обычной страницы)
  • файл search.php (результаты поиска по сайту)
  • файл sidebar-blog.php (боковая колонка для блога)
  • файл sidebar-page.php (боковая колонка для страниц)
  • файл sidebar-single.php (боковая колонка для записей)
  • файл single.php (шаблон записей)
  • файл woocommerce.php (дополнительный файл для совместимости с WC)

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

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

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

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

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

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

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

Активировать её НЕ НУЖНО. Нажмем на ссылку "Вернуться на страницу тем" и начнем установку дочерней темы. Точно также выберем её на компьютере -
Установим, а потом активируем: Таким образом, у вас получится две темы - родительская тема Make Progress 2 установлена, дочерняя тема Make Progress 2 установлена и активирована. Это правильно.

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

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

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

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

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

2) WP Pagenavi - список страниц, лучший плагин для создания постраничной навигации в блоге, архивах и поиске. Обязательный.

3) Responsive Lightbox and Gallery - плагин для создания эффекта лайтбокса при открытии изображений. Главные его достоинства - работает как часы, имеет несколько вариантов лайтбокса, подходит как для галерей, так и для отдельных изображений. Рекомендуемый, расширяет возможности портфолио.

4) WP First Letter Avatar - плагин, который заменяет аватары комментаторов на цветные буквенные иконки. Поскольку ваши посетители вряд ли поголовно зарегистрированы в сервисе Gravatar, у них в комментариях будут пустые заглушки. Данный плагин решает эту проблему. Рекомендуемый.

Раньше плагины просто прилагались к шаблону, и их приходилось по одному загружать через FTP или админку сайта. Теперь это не нужно, поскольку в теме Make Progress 2 работает собственный установщик плагинов. Рассмотрим, как происходит установка.

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

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

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

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

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

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

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

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

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

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

Шаг 1

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

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

Шаг 2

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

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


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


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

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

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

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

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

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

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

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

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

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


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

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

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

Если до установки Make Progress 2 у вас уже была установлена какая-либо тема от GoodwinPress, сбросьте настройки MP2 в консоли, чтобы опции из старой темы не попали в новую.

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

Здесь находятся следующие опции:

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

Заголовок сайта На выбор два варианта - установить либо текстовый заголовок, либо логотип, картинку.

Рекомендуемый размер для логотипа - 300х80 пикселей. Почему 300? А для того, чтобы логотип не обрезался на экранах смартфонов с шириной 320 или ниже.

Здесь также есть поле для установки второго логотипа - в подвале сайта. Если вы сделали темный подвал, то шрифт / изображение на втором логотипе должны быть светлыми, и наоборот.

Если выбран текстовый заголовок, в нем будет показываться текст, который вы установили при создании сайта в разделе Настройки > Общие.

Цвет текстового заголовка меняется на странице "Сделай сам":

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

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

Кроме комментариев, эта опция распространяется также на контактные формы, созданные при помощи плагина Contact Form 7. Например -

Статистика для сайта

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

Первое поле предназначено для статистики Google Analytics, второе - для Яндекс Метрики (без информера-кнопки). Ставьте сюда только код статистики, избегайте использования посторонней разметки. Код счетчика Яндекса выводится в шапке около тэга body, код Google Analytics - в нижней части сайта.

Третье поле - для счетчиков с кнопкой-информером, например, LiveInternet, Hotlog, Рамблер, mail.ru и т.п., а также для Яндекс Метрики с кнопкой. Существует 2 версии Метрики - с кнопкой и без. С кнопкой вставляем в третье поле, без кнопки - во второе. Счетчик, размещенный там, будет выводиться в подвале.
Статистика, установленная в консоли темы, охватывает все страницы сайта.

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

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

Здесь вы можете заменить его на свой.

09. Контакты в шапке

В данной теме контактную информацию можно вывести в шапке сайта. Справа от заголовка / логотипа предусмотрено три ячейки.

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

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

3 ячейка - график работы.

Данный блок сквозной, выводится на всех страницах сайта.

Цвет текста и иконок данного блока меняется на странице "Сделай сам":

10. Статическая Главная

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

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

В следующих 12 разделах консоли описываются все разделы статической Главной.

11. Постер

Это простой, но важный элемент, он создает первое впечатление у посетителя. Состоит из 4 элементов - фоновое изображение, заголовок h2, короткий текст и кнопка.

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

Помните, что изображение должно быть легким. Чем меньше вес картинок на сайте, тем быстрее сайт загружается. Полезный сервис для оптимизации картинок - http://tools.dynamicdrive.com/imageoptimizer/. Лучше установить изображение легкое, но с плохой детализацией, чем тяжелое, но качественное. Если посетитель уйдет раньше, чем оно загрузится, то пользы от его красоты и качества не будет никакой.

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

Заголовок

В данном месте используется заголовок типа h2. Оптимально 1-2 строки. Чтобы выделить часть текста внутри него другим цветом, используйте тэги <i> и </i>. Есть мнение, что размещать какую-либо разметку внутри заголовка нельзя. Если это так, тогда почему считается нормальным ставить в заголовки те же ссылки? В них разметки гораздо больше. В общем, на ваше усмотрение.

Текст

Какой-нибудь короткий тематический текст. Оптимально 2-3 строки.

Кнопка

Здесь можно включить / отключить кнопку, задать для неё текст (анкор) и ссылку. Не забывайте про http:// или https://, например, http://goodwinpress.ru.

12. О нас

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

Он состоит из 2 частей. Слева текст, справа - изображение, либо изображение + видео.

Текстовая часть выполнена в виде стандартного визуального редактора WordPress -

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

Ниже разместим какое-нибудь тематическое изображение. Оптимальный размер - 540х360 пикс.

Дополнительно установим видео. Выберите нужный вариант и разместите код видеоролика в соответствующее поле:

В результате, на сайте поверх изображения появится анимированная иконка, клик на которую откроет модальное окно с видеороликом внутри. Ролик рекомендуется брать с видеохостинга - типа Youtube, Vimeo. Для наилучшего отображения, установите ему ширину (width) как 700, высоту (height) как 360.

13. Достижения

В этом разделе выводится 4 счетчика, которые начинают отсчет в тот момент, когда посетитель скроллит страницу и выводит данный блок в видимую часть экрана. Разместите в них какие-нибудь факты, касающиеся вашей работы и достигнутых успехов. Например, у вас 5000 клиентов, 5 офисов, выполнено 500 проектов, выпито за работой 10000 чашек кофе и т.п.

Настройка каждого счетчика состоит из 3 полей - иконка, значение (цифры) и описание (пояснение к цифре).

Как поставить иконку и откуда она берется? Есть такая рспространенная библиотека иконок - Font Awesome. К теме подключена версия Font Awesome 4.7. Заходим на сайт FA по ссылке https://fontawesome.com/v4.7.0/icons/ и выбираем нужную иконку. Например, line-chart:

Кликнем на неё, откроется страница иконки. В ней имеется свойство Unicode, в котором указан код иконки:

Скопируем его и вставим в соответствующее поле консоли:

Сохраним настройки, готово. На сайте будет выводиться заданная вами иконка:

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

14. Карусель

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

Всего имеется 10 ячеек. Первые 4 включены по умолчанию, остальные включаются по желанию.

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

15. Продукты

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

Способов наполнения - два, на выбор.

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

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

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

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

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

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

Иконка добавляется так же, как в Достижениях. Например, вы производите быструю доставку и указываете это как своё преимущество. К нему подойдет иконка с ракетой, символ высокой скорости. Переходим на сайт https://fontawesome.com/v4.7.0/icons/ и выбираем ракету:

Кликнем на неё, попадаем на страницу иконки, в поле Unicode видим её номер:

Копируем f135 и вставляем в консоли темы в поле для иконки:

Сохраните настройки. Готово, иконка выводится на сайте:

Всего имеется 5 ячеек, первые три включены по умолчанию, остальные включаем по желанию:

Фон поля с ячейками изменим на странице "Сделай сам":

17. Услуги

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

Наполнение - через два поля, Заголовок и Текст:

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

Цвет фона квадратов с номерами устанавливается на странице "Сделай сам" вместе с другими мелкими декоративными элементами:

Примечание. Наилучший вид достигается, когда во всех ячейках одинаковое количество строк.

18. Портфолио

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

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

Например, организация продает разные товары - фрукты, овощи, грибы и т.д. Первую галерею назовем "Фрукты", вторую - "Овощи", третью - "Грибы" и так далее. Укажем название в соответствующем поле:

Теперь создадим первую галерею, куда добавим изображения с фруктами, - нажмем на плюс и перейдем в медиа-библиотеку сайта. Зажимаем клавишу Shift (на Windows) или Command (на Маке) и мышкой кликаем по нужным картинкам, чтобы сделать множественный выбор. Ограничений на количество нет, ставьте столько, сколько хотите. Выбранная картинка будет отмечена галочкой:

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

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

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

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

Для презентации портфолио будет полезен плагин лайтбокса, например, Responsive Lightbox and Gallery, который идет в комплекте с темой. Он позволяет производить непрерывный просмотр всех картинок в портфолио с красивым эффектом.

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

К каждой картинке в портфолио можно добавить текст - название, описание, характеристику. Для этого зайдите в медиа-библиотеку сайта, кликните на изображение, чтобы открыть его свойства, там имеется поле "Подпись". Разместите в нём текст:

Он будет выводиться поверх картинки:

19. Отзывы

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

1) фото / аватар автора отзыва
2) текст
3) ФИО
4) должность или организация или сайт того, чей отзыв публикуется
5) рейтинг - от 1 до 5 звезд, который автор отзыва дает продукту / услуге.

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

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

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

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

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

21. Контактный блок

Данный раздел состоит из трех частей, подробно рассмотрим их настройку.

1) Форма для отправки сообщений

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

1) Переходим в настройки плагина Contact Form 7, создаём новую форму:

2) В заголовке пишем "Контакт - Главная", чтобы не перепутать данную форму с другими. В поле "Шаблон формы" уже установлен по умолчанию какой-то код, удалите его целиком, на его место поставьте такой - [text* text-1000 placeholder "Имя" ][tel* tel-2000 placeholder "Номер телефона" ][email* email-3000 placeholder "E-mail"][textarea textarea-4000 placeholder "Текст сообщения" ] [response][submit "Отправить"] после чего сохраните форму, нажав на кнопку "Сохранить".

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

В результате, форма появится на сайте:

Не забудьте включить уведомление о персональных данных. Это делается в разделе "Общие настройки" (см. выше).

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

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

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

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

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

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

Сообщение с сайта [_url]

Имя: [text-1000]
Номер телефона: [tel-2000]
Почта отправителя: [email-3000]

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

Текст сообщения:
[textarea-4000]

-------------------
Это сообщение отправлено с сайта "Название вашей организации"

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

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

2) Карта (или изображение)

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

Получить карту Яндекса

Заходим по ссылке https://yandex.ru/maps, вводим нужный адрес в строку поиска, получаем участок карты с вашим местом, нажимаем на контекстное меню, кликаем на "Поделиться" (отмечена стрелкой).

Открывается окно, в котором видим поле "КОД ДЛЯ ВСТАВКИ НА САЙТ" (отмечено рамкой). Он-то нам и нужен, копируем код полностью и вставляем в соответствующее поле в консоли (Код карты).

По умолчанию, Яндекс дает фрагмент карты шириной 560 пикселей и высотой 400 пикселей, то есть, в нем есть свойства width="560" и height="400". Добавив код карты в консоль, замените в нем 560 на 850, а высоту 400 на 275. Фактически, в десктопной версии сайта выводится фрагмент меньше, чем 850, но не будем забывать про планшеты и нетбуки, для них нужно пошире.


Получить карту Google Maps

Заходим по ссылке https://www.google.ru/maps, вводим адрес в строку поиска, получаем участок карты с нужным местом, нажимаем на иконку "Поделиться".

Появляется окно, где мы выбираем вкладку "Код". На данной вкладке предоставляется код вставки на сайт (отмечен рамкой) -

Копируем его и размещаем в консоли. Здесь также рекомендуется изменить ширину и высоту карты - с width="600" на width="850", а с height="450" на height="275".


Альтернативный вариант

Использование карты на сайте может замедлить открытие страницы - как и во всех случаях, когда ваша площадка обращается к сторонним серверам. Вы можете ускорить сайт, если замените интерактивную карту на картину. Для этого сделайте скриншот карты размером 850х275, уменьшите его вес, загрузите в медиа-бибилиотеку сайта, и вставьте в поле "Код карты" таким кодом:

<img src="XXXX" alt="">

Вместо иксов укажите адрес изображения. Например:

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


3) Каналы связи

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

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

22. Новости

Раздел "Новости" демонстрирует на Главной несколько публикаций из блога. Это могут быть профессиональные статьи, акции, обновления, новинки, любая информация, которую желаете донести до посетителей. Предоставляется выбор:

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

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

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


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


23. Настройка записей и страниц

Для записей и страниц сайта предлагается несколько дополнительных функций.

Заголовок

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


Варианты записей в блоге

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

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

Анонс это короткий отрывок текста, он автоматически формируется темой на основе первых 480 байт записи. Доступ к остальной части публикации производится через клик на кнопку или заголовок. Чтобы украсить анонс и сделать его визуально привлекательным, вдобавок к нему добавляется изображение. Оно устанавливается стандартно, путём размещения какой-либо картинки в блок "Изображение записи", такой есть в каждой записи в админке сайта:

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

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

Если же выбран анонс, вот рекомендованный размер изображения - 815х350 пикс.


Примечание В обновлении темы 1.1 добавлен третий вариант - анонс с квадратной миниатюрой.



Расположение сайдбара

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


Исключить из блога какие-либо рубрики

Вы можете использовать записи блога как для публикации статей, новостей, так и для описания продуктов, услуг, сервисов, объектов и т.п. Тогда, вероятно, вам захочется убрать эти специфические записи из блога, отделить их от обычных записей. В Make Progress 2 такая возможность есть - здесь можно исключить из блога рубрики, используемые в разделе Продукты, а также любые другие, какие захотите. Поставьте галочку напротив категории, чтобы её убрать. Исключенные рубрики выведем на сайт отдельно - через меню.


Дата публикации записей

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


Информация о записи

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


Блок об авторе

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


Навигация внутри записей

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


Описание в рубриках

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


Комментарии в записях и Комментарии на страницах

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

24. Социальные сети

В теме имеется 3 набора соц. кнопок:

1) кнопки для расшаривания - чтобы поделиться записью в соц. сетях и мессенджерах. Они выводятся в записях и на страницах, построены на основе сервиса "Яндекс Поделиться";

2) кнопки, ведущие на аккаунты организации, добавляются виджетом в любой сайдбар или сразу во все;

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

Кнопки первого набора состоят из таких сетей и сервисов, как ВКонтакте, Facebook, Одноклассники, Twitter, Viber, WhatsApp, Skype, Telegram. С их помощью посетитель расшарит ваш контент. Они уже размещены в шаблоне, вам остается только включить их, причем можно отдельно для записей и отдельно для страниц:


Кнопки второго набора настраиваются, они содержат ссылки на аккаунты вашего бизнеса / сайта в сетях Вконтакте, Facebook, Twitter, Telegram, Youtube, Instagram, Одноклассники. Отключите те кнопки, которые не будете использовать, а к тем, что останутся, добавьте ссылки. Не забываем про http или https, например, https://twitter.com/goodwinpress.

Выводится данный набор при помощи виджета темы, перейдите в админке на страницу Внешний вид > Виджеты, найдите виджет "Make Progress 2: соц. кнопки" и поставьте его в боковую колонку.


Кнопки третьего набора настраиваются в профиле автора.

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

Если не хотите выводить соц. кнопки автора, либо очистите каждое поле, либо отключите их глобально в консоли:

25. Сделай сам

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

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

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

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

Гармоничные цвета для оформления сайта вы найдете на сервисе http://www.colourlovers.com/palettes, там представлено несколько миллионов различных цветовых комбинаций. Когда мне нужно раскрасить сайт, первым делом иду туда.

Находим подходящий вариант, копируем HEX код нужного цвета и вставляем в консоли.



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


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

В теме имеется пять встроенных виджетов:

1) баннер с картинкой
2) цветной баннер
3) социальные сети
4) свежие записи
5) красивые рубрики

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

1) Виджет "Баннер с картинкой"

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

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

Фон и шрифт в заголовке баннера меняем в разделе "Сделай сам".

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


2) Виджет "Цветной баннер"

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

Добавление иконки немного отличается от того, как это делалось при наполнении разделов "Почему мы" или "Достижения", и это связано с особенностью работы WordPress. Здесь мы также используем Font Awesome, переходим на сайт https://fontawesome.com/v4.7.0/icons/, выбираем иконку, открываем её страницу - только вместо номера копируем название:

Вставляем его в соответствующее поле виджета:

Сохраним настройки, иконка появится на сайте.

Примечание. У данного баннера есть один нюанс. Фон виджета лучше установить после того, как вписали текст и сохранили настройки. Вот так: наполнить баннер, сохранить, а потом выбрать фон и еще раз сохранить. Я постараюсь оптимизировать это в следующей версии темы. Может быть, тут есть лишнее действие, но лучше так, чем вообще без баннера.


3) Виджет "Социальные сети"

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


4) Виджет "Свежие записи"

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


5) Виджет "Красивые рубрики"

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

С правой стороны указано количество публикаций в рубрике.

28. Как сделать отдельную страницу для контактов (а также для других разделов)

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

На статической Главной есть контактный блок, вы можете поставить такой же на любой странице сайта при помощи шорткода.

Как это сделать?

Создадим новую страницу или откроем уже существующую, поставим в текстовое поле шорткод [contact]

Довольно просто.

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

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

- контактный блок [contact]

- отзывы [test]

- продукты [product]

- карусель [product2]

- портфолио [portfolio]

- услуги [service]

- почему мы [reasons]

- о нас [about]

- достижения [count]

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

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

30. Постраничная навигация

Для перехода по страницам блога или рубрик используется постраничная навигация, реализованная через классический плагин WP Pagenavi.

Чтобы постраничная навигация выглядела у вас так же, как на демо-сайте, перейдите в админке сайта в настройки плагина WP Pagenavi и установите их как данном скриншоте:

Цвет подсветки пунктов постраничной навигации меняется на странице "Сделай сам".

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

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

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

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

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

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

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

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

Например, в теме есть заголовок сайта, его стили задаются селектором

/* 06 Заголовок сайта */
.textlogo h1,.textlogo span{display:block;text-align:left;font-size:24px;line-height:1;padding:20px 0 0 30px;font-weight:700;margin:0 0 5px 0}

В нём размер шрифта задан свойством font-size:24px; а вы хотите сделать заголовок крупнее, скажем, заменить 24 на 40.

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

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

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

.textlogo h1,.textlogo span{font-size:40px}

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

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


Очень-преочень полезный совет

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

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

Что сделано, чтобы тема работала быстро? Используется минимум кода. Убран мусор из шапки, который традиционно выводится движком — dns perfetch, версия движка, ссылки rsd_link, adjacent_posts_rel_link, убран вывод скрипта и стилей emoji. Скрипты темы соединены в один файл, сжаты и перенесены в подвал. Стили темы сжаты компромиссно, чтобы и загружаться за короткое время, и в то же время — с подписями и компоновкой, чтобы в них было легко разобраться. При настроенной теме - ноль ошибок в дебаг режиме. Стили темы валидны.

Также вы можете добавить в тему код, который переносит глобально все стили (темы и плагинов) в подвал. Такой перенос сразу дает в плюс несколько баллов в сервисе Google Speed Test. Нужно только понимать, что он подходит не для всех сайтов, и его эффективность зависит от вашей конфигурации. Но в целом это может дать положительный эффект.

Откройте файл темы functions.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 );

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

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


Дубли

Многие знают, что несколько лет назад появилась проблема с так называемым relytocom - дублями страниц, которые попадают в поиск и понижают сайт в выдаче. Причиной этой проблемы были древовидные комментарии WordPress. Хочу сообщить, что в данной теме эффект replytocom заблокирован изначально. Если у вас новый сайт и вы ставите на него тему Make Progress 2, то не столкнетесь с этой проблемой. Если же сайт ведется давно и имеет сложности с replytocom, то тема, конечно, не сможет волшебным образом исправить ваши позиции в выдаче. Шаблон работает только с новыми комментариями. Старые уже проиндексированы, убрать их из поиска можно только через robots.txt.

Emoji

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

Кэш и картинки

Используйте кэширование, обязательно включите на сайте какой-нибудь из популярных кэширующих плагинов, например, WP Super Cache. Следите за размером загружаемых изображений, делайте их вес меньше при помощи сервисов типа tools.dynamicdrive.com/imageoptimizer или compressnow.com. Тогда ваш сайт будет открываться быстрее.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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








© GoodwinPress, 2018