Как создать интернет-магазин на WordPress: с нуля до результата

Приблизительное время чтения: 13 минут

В нашей сегодняшней статье мы рассмотрим, как создать интернет-магазин на платформе WordPress с нуля. Главной задачей будет найти максимально простой и понятный способ создать магазин. Он должен получиться производительным, привлекательным, но главное гибким и удобным для посетителей. Мы рассмотрим основные блоки и элементы для его создания, использование плагина WooCommerce и настройку сайта через админку, что значит – вам не потребуются навыки программирования. Данная статья будет полезна как для новичков, так и для тех, кто уже работал с WordPress.

Инструменты

В первую очередь нужно определиться с тем, что потребуется для создания собственного интернет-магазина. В первую очередь это сама CMS WordPress. Она представляет собой бесплатный движок, на основе которого можно сгенерировать веб-сайт. Когда мы говорим о том, как создать интернет-магазин, то преимуществами данной системы являются:

использование собственного хостинга;
нет регулярных платежей за использование CMS;
гибкие настройки движка благодаря плагинам и шаблонам;
интуитивно понятная система управления.

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

Разработку ресурса мы будем вести на основе премиум шаблона Bono, который является наиболее удобным для данной задачи. Он выполнен полностью на русском языке, а также легко настраивается через административную панель. Также нам потребуется выбрать хостинг и домен, где можно разместить свой сайт.

Полезно: Eat СТОП – адаптивный сайт бистро с шаблоном Foodo

Хостинг

Разработка любого веб-ресурса начинается с места его расположения. То есть нам потребуется зарегистрировать хостинг и доменное имя. Также рекомендуется сразу установить для своего сайта SSL-сертификат, он позволит ему открываться по протоколу https, являющемуся наиболее безопасным.

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

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

После установки SSL-сертификата должно пройти около 1 часа, чтобы он успел выпустить и установиться для вашего домена. Помимо активации безопасного соединения следует в настройках выбрать перенаправление с http на https. Для каждого хостинга это выполняется по-разному, поэтому лучше уточнять этот момент у службы поддержки.

Установка CMS

Выбранную нами CMS мы будем устанавливать самостоятельно, так как мы хотим максимально подробно понять, как создать интернет-магазин. Поэтому в первую очередь создаем базу данных MySQL, которая потребуется для работы нашего сайта. Далее заходим на официальный сайт WordPress и скачиваем сам движок. Вносим корректировки в файл wp-config.php и перегружаем наш архив на хостинг, распаковываем и запускаем установку. Процесс выполняется стандартно, для наглядности можно изучить несколько видео-уроков. Когда установка завершена, перед нами появляется сайт со стандартным шаблоном.

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

Шаблон

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

Основными недостатками бесплатных шаблонов являются:

маленький выбор качественных версий;
скучный и устаревший дизайн;
небольшое количество настроек в административной панели, из-за чего часть опций дополняется через кодирование;
редкие обновления или их отсутствие, что негативно влияет на безопасность сайта.

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

Платные шаблоны имеют ряд плюсов, которые точно придутся по вкусу каждому:

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

Именно поэтому мы отдаем преимущество платным шаблонам. Заплатив единожды, вы получаете отличный и качественный сайт, с которым будет комфортнее работать.

Наиболее крупным магазином шаблонов во всем мире считается ThemeForest. Только в категории электронной коммерции мы можем найти более 1300 вариантов тем, внутри большинства которых есть еще приличный список демонстрационный материалов той или иной тематики. Еще одним вариантом, где можно найти шаблоны, являются веб-студии. Иногда они разрабатывают интересные шаблоны, которые при этом не представлены в магазине.

Полезно: Какие сайты WordPress выстрелят в 2021

Bono

Сегодня мы разберем шаблон Bono от студии WPshop. На его основе будем разрабатывать наш интернет-магазин. В нем предусмотрен только один демонстрационный материал с мебельной тематикой, но он впишется и в любое другое направление. Будет достаточно поменять логотип, товары, категории, а также изменить несколько аспектов в дизайне – и мы получаем совершенно новый магазин.

Перейти к теме Bono

Это достаточно важно, ведь в большинстве вариантов опций слишком много. Например, ThemeForest предлагает мощные варианты, но чаще всего их функционал – это огромное количество настроек, в которых придется долго разбираться. Bono же предлагает только самые нужные опции для интернет-магазина.

Дизайн шаблона минималистичный, главный фокус направлен на саму продукцию. Такая стратегия актуальна для любого современного магазина. Стоимость обычной лицензии шаблона составит 3800 рублей.

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

Выбирая шаблон желательно познакомиться с его возможностями заранее. Обычно для этого есть демо-версии, функционирующие в режиме реального времени. С их помощью можно увидеть административную панель и понять, с чем вам придется работать в дальнейшем. В примере же мы разберем вариант настройки темы Bono.

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

Инструкция

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

После установки и активации темы есть несколько вариантов действий. Первый – сразу создавать итоговый интернет-магазин с контентом и товарами. Второй – используем демонстрационные данные и редактируем сайт под собственные требования. В нашей статье будем разбирать второй вариант развития событий. Он является более наглядным для новичков.

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

Полезно: Как найти товары WooCommerce в базе данных

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

Установка демонстрационного контента выполняется по инструкции, которую можно найти в документации к выбранному вами шаблону. В случае с Bono требуется:

скачать архив;
распаковать файлы;
зайти в «Инструменты» и выбрать «Импорт»;
нажать «Установить»;
кликнуть по ссылке «Запустить импорт» и выбрать распакованный файл xml, а затем нажать «Загрузить и импортировать файл».

Настройки темы импортируются в разделе «Внешний вид». Здесь нужно в специально отведенном месте вставить код из документации. Виджеты и меню настраиваются самостоятельно.

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

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

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

Контент

Следующим шагом мы можем разобрать, какие типы контента встречаются в интернет-магазинах. В первую очередь это статические страницы, которые формируются единожды и редактируются только при необходимости. Их можно разделить на обязательные и второстепенные.

Обязательные для каждого магазина страницы генерируются автоматически при установке плагина WooCommerce, среди них:

корзина;
каталог товаров;
оформление заказа;
личный кабинет покупателя;
избранное;
сравнение.

Второстепенные страницы вы можете создать самостоятельно. Наиболее популярными вариантами для них являются;

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

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

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

Карточка товара

Интернет-магазин состоит из товаров, для каждого из которых предусмотрена собственная карточка. Давайте разберемся, из чего она состоит:

название – лучше всего использовать основное ключевое слово, потому что оно также является заголовком;
описание – располагает в нижней части карточки;
краткое описание;
метки позволяют дополнительно группировать товары в объемном каталоге;
каталог;
главная картинка для отображения в каталоге;
галерея фото;
данные о товаре – настройки для каждого продукта.

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

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

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

Полезно: 15 тем для интернет-магазина на первую половину 2021

Настройки

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

Во вкладке запасы заполняется артикул и складской статус. Также здесь можно управлять запасами, выставляя определенное количество товара, которые доступно для заказа. Когда эта цифра будет достигнута, на сайте отобразится что продукта «нет в наличии».

В разделе с доставкой указывается вес и размеры товара. Сопутствующими параметрами будут апсейл и кросселы. Первое предполагает товары, которые могут быть интересны клиентам. Второе – это другие товары, которые вы хотели добавить в корзину, но передумали.

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

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

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

Когда товаров большое количество, то сортировать его помогут:

категории;
метки;
атрибуты.

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

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

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

слайдер;
HTML;
товары;
посты.

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

Настройка WooCommerce

Ранее мы пропустили шаг с настройкой плагина электронной коммерции. Но говоря о том, как создать интернет-магазин, мы должны подробнее познакомиться с WooCommerce. Его можно также редактировать через параметры шаблона, что в разы упрощает настройку нового магазина. В функционал темы включено:

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

Если встроенных настроек вам не хватает, то всегда можно подключить дополнительные стили, а также использовать код CSS.

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

Перейти к плагину WooCommerce

Переходим к работе с WooCommerce. Стоит отметить, что единой системы настроек нет, так как они подбираются индивидуально для каждого сайта и вида товаров. Основные параметры предоставляют для заполнения адрес магазина, если он где-либо располагает в физическом пространстве. Также можно выбрать страны, для которых доступна продажа. Пункт доставка заполняется аналогичным образом. Помимо этого, можно сразу включить учет налогов и возможность использования купонов.

Далее в плагине следует настроить валюту – российский рубль, либо же необходимую для вас валюту. Для доставки полезным будет знать габариты товара. А отзывы помогут покупателям скорее решиться на приобретение продукта.

Настройка с запасами актуальна только в том случае, когда количество товара ограничено. Подобная опция подходит только для физических товаров.

Скаченные виртуальные товары можно «Принудительно скачивать», а также «Ограничивать доступ». Следующим шагом можно выбрать параметры доставки:

зона доставки;
способы доставки;
единая ставка;
бесплатная доставка;
самовывоз;
расчеты;
классы доставки.

Что касается методов оплаты, в WooCommerce есть 4 стандартных варианта:

банковский перевод;
чековый платеж;
PayPal;
оплата при доставке.

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

Полезно: Все о WooCommerce

WooCommerce позволяет редактировать все электронные почты, которые используются для оформления заказов. В дополнительных параметрах можно автоматически или вручную прописать нужные страницы. Clearfy Pro – это отличный плагин, который поможет улучшить ваш интернет-магазин на WordPress. Он оптимизирует код и улучшает показатели скорости сайта и SEO характеристики.

Зарегистрироваться на сайте должен иметь возможность любой посетитель, поэтому в плагин WooCommerce сразу интегрирован функционал личного кабинета. Для отдельных покупателей вы сможете добавлять скидочные купоны, которые являются отличным маркетинговым шагом. Не менее важным этапом продаж является аналитика, где будет отображена статистика по продажам, заказам и другим подобным занятиям.

Заключение

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