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

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

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

Оглавление:

  1. Изменяем и настраиваем главное меню
  2. Изменяем главную страницу
  3. Добавляем слайдер на главную страницу
  4. Добавляем каталог товаров на главную страницу

Изменяем и настраиваем главное меню.

  1. И так, давайте уберём лишние пункты из меню и добавим нужные.  Для этого нам необходимо в панели администратора WordPress перейти на вкладку «Внешний вид» -> «Меню»

    WordPress Внешний вид Меню

    WordPress Внешний вид Меню

  2. Далее необходимо ввести новое название меню, в левой форме выбрать страницы которые бы мы хотели добавить в меню, так же удаляем ненужные пункты. Не забудьте поставить галочку на пункте «Primary Menu». Если вы хотите поменять пункты местами, просто перетащите их мышкой.

    WordPress меняем вид меню

    WordPress меняем вид меню

  3. Нажимаем сохранить. В итоге моё меню выглядит так:

    WordPress вид меню

    WordPress вид меню

Страницы «О нас» и «Контакты» необходимо создать отдельно и тогда они появятся в выборе.

Изменяем главную страницу.

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

WordPress добавляем новую страницу

WordPress добавляем новую страницу

Вводим название страницы и выбираем шаблон «HomePage», нажимаем «Опубликовать».

WordPress добавляем новую страницу

WordPress добавляем новую страницу

Страница создана. Теперь необходимо в панели администратора зайти в «Настройки» -> «Чтение»

WordPress изменяем настройки главной страницы

WordPress изменяем настройки главной страницы

Выбираем пункт «Статическую страницу (выберите ниже)» и там указываем нашу созданную страницу «Главная».

WordPress изменяем настройки главной страницы

WordPress изменяем настройки главной страницы

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

Добавляем слайдер на главную страницу.

Как же сайт и без слайдера, и как нам его добавить? Для начала давайте настроим наш слайдер. В онлайн редакторе переходим в пункт «Slider Setting» -> «Basic Slider Settings»

WordPress настройка слайдера

WordPress настройка слайдера

  1. Отображать слайдер или нет.
  2. Показать страницу.
  3. Показать или скрыть кнопки контроля.
  4. Автоматическая смена слайдеров.
  5. Анимация слайдера (смещает в бок или пропадает постепенно).
  6. Скорость замены слайдера.
  7. Пауза между слайдерами.
  8. Показывать ли на слайдере текст.

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

WordPress создаём слайд

WordPress создаём слайд

Вписываем тему нашей записи, вставляем описание (можно без него) и добавляем «Изображение записи», публикуем (на слайдере это будет отображаться если в настройках включен 7 пункт, если нет просто картинка).

WordPress создаём слайд

WordPress создаём слайд

Возвращаемся в онлайн редактор, находим опять «Slider Setting», видим опции «Slider 1», «Slider 2» и так далее.

WordPress создаём слайд

WordPress создаём слайд

Заходим в «Slider 1». Видим три поля. В первом выбираем нашу запись, во втором поле указываем ссылку, к примеру если необходима кнопка со ссылкой на товар, в третьем поле указываем название кнопки (второе и 3 поле можно оставить пустым). Не забываем нажимать сохранить. В итоге получим такой слайдер:

WordPress слайд создан

WordPress слайд создан

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

Добавляем каталог товаров на главную страницу.

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

WordPress добавляем товар

WordPress добавляем товар

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

WordPress добавляем товар шаг 2

WordPress добавляем товар шаг 2

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

Товары мы создали, теперь надо их вывести на главную страницу. Для этого переходим во вкладку «Внешний вид» -> «Виджеты».

WordPress размещаем слайдер с товарами на главной

WordPress размещаем слайдер с товарами на главной

Нам необходимо перетащить виджет  «Ap : WooCommerce Product Slider» в поле «Product Listing Widget 1». Далее в поле «Title» пишем название, «Select Product Type» выбираем тип товара (новый, скидки и т.д.), «Select Product Category» выбираем нужную категорию продуктов, внизу указываем желаемое число отображаемых товаров, сохраняем.

WordPress выводим слайдер товаров на главную

WordPress выводим слайдер товаров на главную

В итоге на главной странице у нас будет отображаться слайдер с товарами.

WordPress слайдер товаров на главной

WordPress слайдер товаров на главной

На этом всё, буду дальше развивать тему и расскажу как добавить плюшки на главную страницу.

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

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

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

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

CrazyKing

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

Один комментарий

  1. Спасибо за информацию коротко и понятно.
    Вопрос — как убрать тег в этой теме, который прописан как название сайта., получается, что 2 тега, где вообще это сделать?
    Спасибо, если поможете…

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