Интернет-магазина на WordPress БЕСПЛАТНО| Как оформить главную страницу

Главная страница интернет-магазина

Здравствуйте, дорогие друзья!

Продолжаем создавать интернет-магазин на WordPress. Давайте создадим главную страницу со своей структурой:

  • сделаем её на всю ширину,
  • добавим слайд-шоу,
  • заголовок и SEO текст,
  • выведем новые поступления товаров,
  • товары со скидкой и рекомендуемые товары.

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

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

Желаю Вам приятного просмотра!

Видео инструкция

Для получения чек-листа пройдите опрос на этой странице:

Опрос по созданию интернат-магазина на WordPress

Создание слайдера

Чтобы создать слайдер на главной странице интернет-магазина воспользуемся плагином MetaSlider

Плагин MetaSlider

Как добавить слайды подробно показано в видео инструкции выше на 1 минуте 37 секунде.

Оформляем главную страницу и назначаем её в качестве главной

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

  1. 1.В административной части сайта переходим в раздел «Настройки»«Чтение».
  2. 2.В списке «На главной странице отображать» выбираем пункт «Статическую страницу».
  3. 3.Из раскрывающегося списка выбираем нужную страницу и нажимаем на кнопку «Сохранить изменения» внизу.
    Как задать статическую главную страницу?

Добавляем заголовок H1 и SEO текст

После того как страница стала главной у неё отключился заголовок по умолчанию, который выводился в теге H1, следовательно теперь нам нужно его задать вручную и включить в него ключевой запрос. Так же на главной странице нужно будет добавить небольшое SEO текст, включающий в себя ключевые запросы по основным направлениям продаж нашего интернет-магазина.

В видео-инструкции на 10 минуте 41 секунде выше показано как это сделать.

Добавляем новые товары на главной странице интернет-магазина

Для вывода новых товаров в WooCommerce есть специальный шорткод:

В параметре limit — задаем количество выводимых товаров
В парметре columns – задаем количество товаров в 1 строке

Оформляем заголовки при помощи CSS

  1. 1.Добавляем заголовку H1 css-класс home-page-title:

  2. 2.Добавляем заголовку H2 css-класс home-title:
  3. 3.В разделе «Внешний вид»«Настроить»«Дополнительные стили» или в файле style.css дописываем код:

Все пояснения показаны в видео инструкции на 14 минуте 25 секунде.

Добавление акционных товаров и вывод их на главной странице интернет-магазина

Добавляем специальный шорткод WooCommerce:

В параметре limit — задаем количество выводимых товаров
В парметре columns – задаем количество товаров в 1 строке

Исправляем текст надписи «Распродажа» и правим оформление

  1. 1.В административной части сайта переходим в раздел «Внешний вид»«Редактор тем»
  2. 2.На панели сбоку выбираем файл «Функции темы (functions.php)»
  3. 3.В самом конце файла добавляем код:

    Вместо «Акция!» можно задать свое значение. Важно чтобы кавычки остались как есть, меняем только текст!

  4. 4.Переходим в раздел «Внешний вид»«Настроить»«Дополнительные стили» и добавляем в самом конце такой код:

Добавляем рекомендуемые товары на главной странице интернет-магазина

  1. 1.Создаем категорию «Рекомендуемые товары» и добавляем в неё несколько товаров на своё усмотрение.
  2. 2.На главную страницу добавляем шорткод:

    Вместо rekomenduemye нужно вставить ярлык категории, которую вы хотите вывести.

  3. 3.Чтобы получит этот ярлык нужно перейти в раздел «Товары» — «Категории» и скопировать его в столбце «Ярлык» напротив названия нужной категории.
    Ярлык категории Woocommerce

Как получить чек-лист «Пошаговый план проверки интернет-магазина перед стартом»

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

Для того чтобы пройти опрос Вам нужно перейти по этой ссылке:

Спасибо что дочитали статью до конца! Если у вас возникли вопросы вы можете задать их в комментариях и я с удовольствием на них отвечу!

Успехов Вам в создании интернет-магазина!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif