WordPress — Как создать интернет магазин (Часть 6)

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

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

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

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

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

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

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

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

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

WordPress хлебные крошки

WordPress хлебные крошки

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

WordPress хлебные крошки настройка

WordPress хлебные крошки настройка

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

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

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

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

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

WordPress левый сайдбар

WordPress левый сайдбар

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

WordPress левый сайдбар

WordPress левый сайдбар

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

  • WooComerce Категории товара.
  • WooComerce Фильтр по цене.
  • WooComerce Товары.
    WordPress сайдбар добавляем виджеты

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

     

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

WordPress сайдбар итог

WordPress сайдбар итог

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

WordPress сайдбар на странице "о нас"

WordPress сайдбар на странице «О Нас»

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

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

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

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

CrazyKing

Печенько-кодер :Р

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