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

Создаём интернет магазин с помощью WordPress (Часть 6).

Подправим отображение копирайтов в футоре.

Заметил, что в футоре (в конце сайта) нашего магазина копирайты смещены в правую часть. Давайте поставим по центру. Всё достаточно просто, заходим в редактор темы, ищем наш любимый файл стилей «style.css», в нём ищем строку «.site-info» и добавляем строку text-align: center; Должно получиться так:

В итоге копирайты будут по центру.

Добавляем хлебные крошки.

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

Нашей темой они уже предусмотрены, осталось их только настроить. Идём в визуальный редактор (Внешний вид -> Настроить), ищем там «Breadcrumb Setting»

Видим четыре позиции:

1. Отображать хлебные крошки на страницах архива.
2. Отображать хлебные крошки на страницах продуктов.
3. Отображать хлебные крошки на обычных страницах.
4. Отображать хлебные крошки на постах.

Зайдём например в первый пункт, видим всего две опции отображать или нет и добавить изображение (рекомендуемый размер 2000×156 px). Я оставил включёнными только в продуктах и простых страницах, так как нет постов и архивов. Не забываем сохранять.

Добавляем виджеты в правые и левый сайдбары.

К примеру если мы сейчас зайдём на страницу витрины, то увидим такую картину:

Согласитесь, не очень приятная полоса, и непонятно зачем она там. Похожая ситуация будет и на странице товара, только справа. Давайте добавим туда виджетов. В визуальном редакторе ищем Все милости и мягкости у Нас! Огромный выбор изделий, отличное качество, низкие цены! Круглосуточная доставка по Москве и Московской области. далее «Shop Sidebar» (он появляться только когда мы на странице связанной с товарами, к примеру если вы зайдёте на созданную страницу, не привязанной к WooCommerce, то такой опции не будет).

Нажимаем «Добавить виджет». Я добавил три виджета:

• WooComerce Категории товара.
• WooComerce Фильтр по цене.
• WooComerce Товары.
  

  WordPress сайдбар добавляем виджеты

   

Теперь если мы зайдём в витрину или товар то увидим такую прелесть

Ещё есть косяки с отображением на обычных страницах, к примеру я создал страницу «О Нас», если на неё зайти в правой части увидим виджеты не относящиеся к магазину (архивы, поиск, рубрики). По аналогии заходим в визуальный редактор «Виджет» -> «AP: Right Sidebar» (напомню, что необходимо быть на странице), удаляем ненужные и добавляем нужные. Я добавил категории товаров и поиск по товарам. Итог:

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

Читайте продолжение: WordPress — Как создать интернет магазин (Часть 7)

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