Инструкция Romb

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

Больше видео на нашем канале YouTube »

Процесс установки темы происходит как обычно на WordPress: Админка -> Внешний вид -> Темы -> Добавить новую -> Загрузить.

Увеличить

После активации темы (Скриншот 1) вам необходимо будет пройти в ее настройки (в боковой консоли пункт "Настройки темы") и на вкладке "Лицензия" указать код лицензии (Скриншот 2), который вы можете получить у себя в кабинете магазина WP-R.ru (Скриншот 3).

Скриншот 1. Увеличить

Скриншот 2. Увеличить

Скриншот 3. Увеличить

В боковой консоли переходим: Внешний вид -> Настроить

Увеличить

Здесь нас интересуют пункты настроек темы Romb:

• Общий дизайн
• Шапка
• Статья
• Шрифты
• Нижняя часть
• Сайдбар
• Дополнительно

Увеличить

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

Увеличить

"Включить обтекание для содержания статьи?" сработает для плагина Table Of Content Plus (TOC+) и если рядом с содержанием будет картинка.

В пункте "Шапка" вы выбираете каким будет логотип сайта (Скриншот 1): просто картинкой 300*60px или картинка + текст (название сайта, которое берется из Админка -> Настройки -> Общие -> Название сайта (Скриншот 2).

Скриншот 1. Увеличить

Скриншот 2. Увеличить

Здесь же поле "Баннер над шапкой" позволяет вывести рекламный баннер над меню и логотипом, по всей ширине страницы (width:100%). Ставьте адаптивную рекламу или используйте плагин AdsPlace'r Pro (Единый шорткод) для таргетинга с разделением на PC и Mobile.

Увеличить

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

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

Увеличить

В пункте "Нижняя часть" задаются параметры для подвала сайта. В частности, вы можете здесь написать текст ,который будет выводиться в подвале (копирайты, политика отказа от ответственности и прочее), а так же в ставить визуальные счетчики статистики или иконки (Li.ru, Rambler.ru и прочие).

Увеличить

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

Увеличить

В пункте "Дополнительно" вы размещаете свои коды в теме, без необходимости лезть непосредственно в файлы .php темы. Обычно это счетчики статистки Яндекс и Google, пиксели от социалок, скрипты партнерок и прочее.

Увеличить

Речь пойдет об этих настройках:

Увеличить

Настройки разделены по типам страниц.

Главная

Вы можете выбирать в каком стиле вводить Главную страницу - в по умолчанию (оформление плитками, как на romb) или в классическом блоговом стиле (лента от новых записей к старым, как на mojwp.ru).

Увеличить

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

Увеличить

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

Увеличить

Запись

Настройки для всех записей.

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

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

Хлебные крошки от. Вы можете использовать хлебные крошки "вшитые" в тему Romb, либо использовать их от плагина Yoast SEO (не забудьте в плагине тогда включить эту опцию).

Авто-вставка блока "Задать вопрос". Простой аналог плагина Aske'r. Выводит после указанного абзаца фото автора, его имя, текст из специального поля в профиле и кнопку задать вопрос, которая "перекидывает" на комментарии.

Пишем текст в своем профиле на сайте

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

Отключить слайдер для галереи? В этом случае стандартная галарея WordPress выводится классически - плиткой.

Отключить рейтинг в записи? Отключает рейтинг сверху записи, который автоматически появляется после активации плагина kk Star Ratings. Сделано на случай, если вы выводите этот рейтинг в конце записи, чтобы не дублировало.

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

Баннер в конце записи. Место для рекламы после комментариев.

Похожие записи. Можете выводить похожие записи при помощи нашего решения (Похожие записи Romb), либо использовать заготовку для плагина YARPP (Yet Another Related Posts Plugin, настройки для этого плагина описаны ниже). А можете отключить и использовать свой другой плагин.

Комментарии. Выбираете необходимо ли вам отображать дату в комментариях.

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

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

Рубрика

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

Увеличить

Для компаний

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

Фоновое изображение для виджета. Загружаете картинку большого размера для специального виджета с контактами. Данный виджет вы можете размещать и на Главной, и в сайдбаре. Делать это можно одновременно, т.к. на Главной нет сайдбара.

Увеличить

Телефоны. Задаете номера телефонов в международном формате и тогда они будут кликабельны с мобильных телефонов (сразу смогут набрать кто кликнет с Android или iOS). Тут же при необходимости можете загрузить иконку напротив нужного номера телефона.

Увеличить

Далее прописываете адрес вашей компании, время работы и можете вставить карту с Google Maps или Яндекс.Карты.

Увеличить

Внимание!!! Чтобы карта смотрелась хорошо, задайте ей по ширине 100%. Смотрите ниже:

Задав телефон для мобильной кнопки, вы включите аналог функционала плагина CallPhone’r. Если выводить не нужно, то просто удалите номер их этого поля. Цвет кнопки берется из основного цвета темы.

Увеличить

Формируется главная страница из виджетов с названиями "Romb / Главная / ... (всего 6 виджетов) и виджетов "Romb / Контакты" + "Romb / Последние комментарии".

Увеличить

Просто перетягиваете их в специальную область и настраиваете под себя.

Увеличить

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

Так же вы можете выбирать из какой рубрики или рубрик будет выводиться информация в том или ином виджете.

Поля "Ссылка" и "Ссылка (анкор)" нужны для такого:

Виджет "Romb / Главная / Разделы" выведет заданное вами количество рубрик на главной странице с указанными параметрами. А иконку для рубрик задаете непосредственно на странице редактирования самой рубрики.

В настройках любой рубрики у вас появился такой функционал:

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

Описание снизу. Позволит вывести текст после списка статей рубрики и только на первой страницы. Все для нужд SEO.

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

Увеличить

При помощи "Метки рубрики" вы можете задать дополнительный текст для виджета "Romb / Главная / Разделы".

Задаваемая "Миниатюра рубрики" отобразится в соответствующем виджете на Главной странице.

Галка "Комерческий раздел" отключит во всех виджетах и внутри записи признаки "блоговости": дата, автор, количество комментариев и прочее. Это необходимо, если у вас сайт коммерческой тематики.

Увеличить

В теме предусмотрено 2 меню:

• Верхнее меню
• Нижнее меню

Создаете новое меню и выбираете для него область (верхнее или нижнее).

Увеличить

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

Данное меню выводится через виджет "Romb / Произвольное меню (с иконками)" в сайдбаре сайта.

Увеличить

Вам нужно будет выбрать в этом виджете ранее созданное меню (остановимся на процессе создания ниже).

Увеличить

Как создать меню с иконками.

Увеличить

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

В Google PageSpeed нам удалось достичь таких цифр на внутренних страницах (статьях):

На мобильниках. Увеличить

На компьютерах. Увеличить

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

• Плагины. Почти каждый плагин подключает свои скрипты, что сказывается на общем показателе скорости.
• Скрипты. Это счетчики статистики, контекстная (РСЯ/AdSense) и тизерная реклама, трекеры, пиксели ретаргетинга и прочее.
• Видео. Если оно подгружается со сторонних сервисов.
• Кеширование. Зависит какой тип кеширования используете и его настройки.
• Изображения. Обжаты ли они и используют ли современные форматы? Включена плавная подгрузка?
• Сервер. Насколько он у вас мощный, корректно настроен и как далеко находится от серверов Google. При этом вы можете наблюдать разные цифры от проверки к проверке. Берите среднее значение.
• Прочее.

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

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

Autoptimize

Страница плагина >>

Оптимизирует файлы CSS, JS и разметку HTML.

Настройки.

Обратите внимание как стоят галочки.

WP-FFPC

Страница плагина >>

Необходим для кеширования по технологии Memcached. Включается на сервере. Мы используем хостинг Beget, в котором есть такая услуга.

Подробнее о настройках >>

EWWW Image Optimizer

Страница плагина >>

Оптимизирует качество изображений на сайте.

Настройки. Все по-умолчанию.

Запустить процесс оптимизации можно так:

Увеличить

kk Star Ratings

Страница плагина >>

Добавляет на сайт рейтинг со звездами. Благодаря микроразметке появляется в выдаче Google.

В теме Romb уже предусмотрено место для размещения рейтинга. Достаточно просто активировать плагин.

Увеличить

Настройки.

Table of Contents Plus

Страница плагина >>

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

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

Настройки.

Responsive Lightbox & Gallery

Страница плагина >>

Красиво оформляет изображения на странице, увеличивая их по клику.

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

Увеличить

Yet Another Related Posts Plugin

Плагин похожих записей в конце страницы.

С конца 2018 года был удален из репозитория WordPress.org. Поэтому мы сделали свое решение для похожих записей:

Увеличить

Если вы все же сторонник плагина YARPP, то мы предусмотрели для него шаблон ввода оформления:

Увеличить

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

Увеличить

В теме мы предусмотрели шаблон страницы карты сайта HTML. Ее еще называют "Карта сайта для людей".

Просто создайте новую страницу и выберите соответствующий шаблон.

Увеличить

В теме мы уже прописали стили для формы контактов через плагин Contact Form 7 (страница плагина).

В сети очень много статей на русском по настройке данного плагина.

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

Увеличить

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

Загрузить свой фавикон для сайта вы можете через встроенный функционал WordPress. Для этого в админке пройдите по пути: Внешний вид -> Настроить -> Свойства сайта.

Увеличить

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

Просто поставьте галку в нужном поле и нажмите "Сохранить":

Увеличить

Мы заготовили для вас 4 блока внимания (цитаты).

Увеличить

На сайте они будут иметь такой вид:

Увеличить

Просто выделите нужный текст и нажмите кнопку блока внимания.

Вы так же можете поменять дизайн этих блоков в настройках темы "Внещний вид" - "Настройка" - "Статья".

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

Рекомендуем вставлять в эти зоны шорткод от плагина AdsPlace'r Pro и таргетировать баннера на Мобильных и PC пользователей. Таким образом вы сможете подобрать оптимальные размеры баннеров, чтобы их не ужимало на маленьких экранах.

Вы можете использовать заготовленные нами кнопки для "слива" трафика по вашим рефкам на товар или сервисы.

Выделите нужный текст и нажмите на одну из кнопок XL (большая) или S (маленькая):

Увеличить

Цвет берется от основной цветовой гаммы темы, а иконка задается тут:

Увеличить

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

Что за картинка Image в миниатюрах

Увеличить

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

Увеличить

Правила сайта. Ссылка в форме комментариев

Речь идет об этой ссылке:

Увеличить

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

Увеличить

Для тех, кто знает для чего это: