От автора: WooCommerce — самая популярная и настраиваемая E-Commerce платформа для создания интернет-магазинов. WooCommerce распространяется бесплатно, но всю силу можно увидеть при подключении плагинов WordPress WooCommerce и тем.
Но нужно ли использовать WooCommerce темы? Это не обязательно, но я крайне рекомендую. Темы WordPress тема WooCommerce не только спроектирована под E-Commerce, она полностью сосредоточена на стиле WooCommerce. CSS, используемый WooCommerce для отображения товаров, также используется темой WooCommerce WordPress для связки всех элементов, что выливается в самый красивый дизайн E-Commerce площадок.
Стоит отметить, что установка и настройка новой темы WordPress WooCommerce не сложнее настройки любой другой темы WordPress. Давайте я покажу.
Установка и настройка новой WooCommerce темы для WordPress
Если у вас уже установлен WooCommerce, замечательно! Если нет, очень рекомендую прочитать руководство Rachel McCollin для начинающих по WooCommerce. Оно познакомит вас с WooCommerce и поэтапно покажет, как поднять свой магазин. Давайте начнем с установки и настройки новой WooCommerce темы для WordPress.
Шаг 1: установка шаблонных данных
Если у вас уже есть товары, можете пропустить этот шаг и перейти к шагу 2.
Установка шаблонных данных добавляет не настоящие товары в магазин, помогая визуализировать наполнение магазина товарами. После установки и настройки новой WooCommerce темы для WordPress вы захотите удалить все шаблонных данные перед добавлением своих товаров. Иначе вы случайно можете удалить настоящие товары.
Шаблонные данные встроены в плагин WooCommerce. Если вы установили WooCommerce через панель администратора WordPress, загрузите плагин из WordPress Plugin Directory на компьютер.
Это легче, чем подключиться по FTP, зайти в папку плагинов и загрузить шаблонные данные оттуда. После скачивания распакуйте файл, чтобы подготовиться к импорту файла dummy-data.xml. Перейдите в tools и кликните import:
Не позвольте WooCommerce Tax Rates (CSV) запутать себя. Это можно настроить позже, если нужно. Шаблонные данные WooCommerce находятся в WordPress.
Скорее всего, у вас нет плагина WordPress importer, поэтому установите его.
После установки активируйте плагин и запустите importer. Помните куда положили распакованный плагин WooCommerce? Теперь нужно кликнуть choose file и найти его.
Шаблонные данные должны быть в распакованной папке: (woocommerce.version.number) > woocommerce > dummy-data.
Откройте папку dumy-data и выберите файл dummy-data.xml. Теперь можно загружать и импортировать файл.
Это последнее, что нужно сделать перед импортом всех шаблонных данных. Ниже показаны личные настройки, в частности мои (скриншот ниже):
Импортируйте стандартного автора wooteam, не создавайте нового и не используйте стандартных. Так вы сможете отличать импортированный/созданный контент по имени автора (рекомендую удалить автора при удалении шаблонных данных после завершения установки и настройки новой WooCommerce темы для WordPress).
Также рекомендую загрузить и импортировать вложения, чтобы у вас на каждый товар было изображение (и опять их нужно будет удалить после того, как закончите работать с шаблонными данными). После выбора файлов нажмите submit:
Откройте yourwebsite.com/shop/ — должен импортироваться весь тестовый магазин:
Да, у вас получилось! Дизайн не очень, правда? Но мы установим хорошую WooCommerce тему для WordPress Savoy. (Обратите внимание: после установки и настройки темы не забудьте удалить товары и изображения из шаблонных данных перед добавлением настоящих товаров.)
Шаг 2: установка WooCommerce темы для WordPress
Теперь давайте разберем, как установить WooCommerce тему. Если вы еще не скачали свою WordPress Commerce тему, сейчас самое время (не забудьте папку загрузки). Есть 2 способа установки темы: через FTP и из панели администратора WordPress.
Установка темы по FTP
Если вам удобнее работать с FTP, подключитесь к серверу и найдите папку wp-content > themes. В эту папку необходимо загрузить вашу тему. Перед отправкой распакованной папки на сервер убедитесь, что это папка темы. Давайте разберем пример темы WordPress с ThemeForest. После распаковки вы увидите несколько папок:
Не все загружаемые темы так упакованы. Иногда в архиве лежит сразу папка темы. Посмотрите, что в архиве заранее, содержимое может отличаться.
Savoy — минималистичная WooCommerce тема с AJAX. Вместе с ней идет дополнительный материал: документация, файлы и т.д. Если открыть папку Theme Files, там будет лежать сама тема savoy.zip.
Если вы работаете с FTP, загрузите распакованную папку темы (например, savoy) в папку themes. Если вам не нравится FTP, и вы предпочитаете установить тему через панель администратора WordPress, ничего страшного. Мне тоже больше нравится панель администратора.
Установка темы через панель администратора WordPress
Для установки через панель администратора необходимо, чтобы папка темы была запакована (themefolder.zip). Выше мы уже упомянули, нужно убедиться, что вы работаете с папкой темы, а не папкой, в которую может быть вложена тема. В панели администратора под appearance кликните themes:
Add new theme:
Upload theme:
Помните, где лежит zip файл темы? Наш пример savoy.zip. Кликните choose file и найдите его:
После установки откройте Appearance > Themes, чтобы проверить, установилась тема или нет. Там же можете активировать тему. На скриншоте ниже видно, что Savoy успешно установилась. Наведите курсор на тему и нажмите activate:
Ваша WooCommerce тема для WordPress успешно установлена и активирована. Давайте ее настроим.
Шаг 3: настройка WooCommerce темы для WordPress
Не все темы настраиваются одинаково. Дизайн и разработка темы сильно влияют на это, поэтому в уроке могут быть некоторые расхождения с конкретно вашей темой. В целом, этот шаг должен помочь вам настроить WooCommerce WordPress тему вне зависимости от используемой вами темы (с ThemeForest она или нет).
Рекомендуемые/обязательные плагины
После установки и активации темы Savoy вы получите уведомление о рекомендуемых плагинах:
Иногда тема сама уведомляет вас о рекомендуемых плагинах, в других темах рекомендации могут содержаться в документации. Там можно найти дизайнерские функции темы (например, необязательные слайдеры), которые не зашиты в тему, но совместимы с ней. Кликните Begin installing plugins в теме Savoy, чтобы увидеть список рекомендуемых плагинов:
Список может отличаться в других темах. В этом конкретном случае вы можете установить все плагины или отказаться от некоторых.
Например, Savoy рекомендует Contact Form 7, в теме есть стили для плагина, но вы можете отказаться от использования этого плагина в качестве контактной формы. Может, вы хотите использовать что-то вроде Gravity Forms или Ninja Forms.
Плагин Regenerate Thumbnails – замечательный инструмент для тех, у кого уже есть работающих магазин, а изображения настроены под старую тему. Этот плагин пройдется по медиа библиотеке WordPress и изменит размер всех изображений под новую тему. С шаблонными данными этого можно и не делать. Вы также можете вообще пропустить этот плагин (но я рекомендую сделать это в целях тестирования, чтобы все файлы четко подходили по размерам).
Плагин Envato Toolkit очень важен для тем, купленных на ThemeForest. Он проверяет уведомления об обновлениях темы.
Советую установить все рекомендуемые плагины в самом начале. Плагин всегда можно удалить потом, если он не нужен. С другой же стороны, если вы не установили необходимый плагин, тема может «не работать» или не делать того, что вам понравилось в демо.
После установки всех плагинов или полного отказа от рекомендованных и/или обязательных плагинов не забудьте активировать их:
Если вы купили тему на ThemeForest, как наш пример Savoy, не забудьте ввести Marketplace Username и Secret API Key в Envato WordPress Toolkit, чтобы обновлялась именно эта тема.
Настройка
В этой части по установке и настройке WordPress WooCommerce темы все пойдет интереснее, так как вы увидите, как оживает ваш сайт.
Открыть WordPress Customizer можно через меню в WordPress: Appearance > Customize. Или откройте страницу Themes под Appearance > Themes и кликните кнопку customize:
Добро пожаловать в WordPress Customizer:
Здесь мы внесем пару правок перед погружением в настройки. Первое, что вы увидите, это Site Identity. Здесь можно поменять заголовок сайта и слоган.
Иногда здесь же можно добавить свое изображение в хедер и/или иконку сайта (все зависит от темы). Далее, настройте меню:
Если вы только установили WooCommerce или просто не создали еще ни одной страницы, вам, возможно, еще нечего настраивать. Однако после установки WooCommerce автоматически добавляется несколько страниц, которые, я считаю, вы захотите добавить в меню. Вы легко можете добавить и создать новое меню:
После добавления меню (или нескольких) можно выбрать расположение меню, а также различные элементы меню (например, кастомные ссылки, посты, страницы, товары и т.д.).
Кастомайзер помогает гибко настроить функционал WooCommerce. Не бойтесь играться с настройками, можете сделать это и потом. Перед уходом с WordPress Customizer вы захотите указать первую страницу магазина:
Отметьте Front page displays как A static page и в качестве страницы shop укажите front page. Страница shop автоматически создается при установке плагина WooCommerce.
Страница posts зависит от того, нужен вам или нет блог на WooCommerce сайте. Если нужен, то вам необходимо создать страницу блога и выбрать ее на этой странице WordPress Customizer или в WordPress Admin Settings > Reading.
Результат
Внеся парочку базовых настроек, вы видите, как замечательно выглядит ваш интернет-магазин с темой WordPress WooCommerce:
Страницы отдельных товаров выглядят поразительно:
Даже есть сопутствующие товары:
Savoy — минималистичная WooCommerce тема с AJAX, с помощью которой можно с легкостью тонко настроить множество элементов на сайте и зайти еще дальше. Далеко за рамки этого урока. Прочитайте документацию к своей теме, чтобы знать ее тонкости. Я показал лишь те изменения, которые можно внести через WordPress Customizer. Обычно они доступны в любой теме.
Заключение
Видно, насколько просты эти первые шаги в настройке WordPress WooCommerce темы, а насколько хорошо выглядит сама тема. Просто используйте WordPress тему, спроектированную специально для WooCommerce.
Автор: Eric Dye
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
