Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WooCommerce
Code

Как установить и настроить новую тему WordPress WooCommerce

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)

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

Но вам действительно нужно использовать тему WooCommerce?

Хотя это и не требуется, я настоятельно рекомендую.

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

Не говоря уже о том, что установка и настройка новой темы WordPress WooCommerce не сложнее, чем настройка любой другой темы WordPress.

Позвольте мне показать вам, как это сделать.

Как установить и настроить новую тему WordPress WooCommerce

Если у вас уже установлена WooCommerce, это здорово! Если нет, я настоятельно рекомендую «Руководство для начинающих» Рэчел Макколлин по использованию WooCommerce. Оно познакомит вас с WooCommerce и проведет вас через все шаги, необходимые для запуска вашего интернет-магазина.

Теперь давайте начнем с того, как установить и настроить новую тему WordPress WooCommerce.

Шаг 1: установка фиктивных данных

Если вы уже добавили свои продукты в WooCommerce, я рекомендую пропустить этот шаг и начать с шага 2.

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

Фиктивные данные включены в ваш плагин WooCommerce. Если вы установили WooCommerce в администраторе WordPress, продолжайте загрузку плагина из каталога плагинов WordPress на свой компьютер. Это будет проще, чем войти в ваш FTP, войти в свой каталог плагинов и загрузить фиктивные данные оттуда.

После завершения загрузки разархивируйте файл, чтобы подготовить файл dummy-data.xml.

Перейдите в Инструменты и нажмите «Импорт»:

How to Install and Setup a New WordPress WooCommerce Theme

Не позволяйте «Налоговые ставки WooCommerce (CSV)» путать вас. Это можно сделать позже, если хотите. Для WooCommerce Dummy Data вам нужно выбрать WordPress.

How to Install and Setup a New WordPress WooCommerce Theme

Скорее всего, у вас не будет установлен плагин WordPress Importer, так что давайте начнем установку и сейчас.

How to Install and Setup a New WordPress WooCommerce Theme

После установки идите и активируйте Plugin & Run Importer.

Вы помните, где вы скачали и распаковали плагин WooCommerce? Большой! Теперь вам нужно щелкнуть «Выбрать файл» и перейти к нему.

How to Install and Setup a New WordPress WooCommerce Theme

Ваши фиктивные данные должны быть в вашей распакованной папке: (woocommerce.version.number)> woocommerce> dummy-data.

How to Install and Setup a New WordPress WooCommerce Theme

Откройте папку dummy-data, выберите dummy-data.xml, и вы готовы загрузить файл и импортировать его.

Это последнее, что вам нужно сделать перед импортом всех фиктивных данных.

Некоторые из них являются личными предпочтениями, но вот что я делаю (снимок экрана ниже):

Импортируйте автора по умолчанию «wooteam» вместо создания нового автора или использования существующего автора. Таким образом, вы знаете, какой контент был импортирован, а какой создан в этом процессе на основе имени автора (я рекомендую удалить автора при удалении фиктивных данных после того, как вы закончили установку и настройку новой темы WordPress WooCommerce).

Я также рекомендую вам загружать и импортировать вложения, чтобы у вас были изображения, связанные с каждым продуктом (опять же, вам нужно убедиться, что носитель будет удален, когда вы закончите с фиктивными данными).

После того, как вы сделали эти выборы, отправьте:

How to Install and Setup a New WordPress WooCommerce Theme

Посетите веб-сайт yourwebsite.com/shop/, и вы увидите полностью импортированное тестовое хранилище:

How to Install and Setup a New WordPress WooCommerce Theme

О да! Ты сделал это!

Хотя все это не очень хорошо спроектировано, не так ли? Хорошо, что мы собираемся установить замечательную тему WordPress WooCommerce, такую как Savoy.

(ПРИМЕЧАНИЕ. После завершения установки и настройки темы не забудьте удалить продукты и изображения из фиктивного импорта данных, прежде чем добавлять собственные продукты.)

Шаг 2. Установка темы WordPress WooCommerce

Теперь давайте посмотрим, как установить тему WooCommerce. Если вы еще не загрузили свою тему электронной торговли WordPress, загрузите ее на свой компьютер (убедитесь, что знаете, где ее загружаете, чтобы получить к ней доступ).

Вы можете установить свою тему двумя способами:

  1. Доступ к веб-сайту с помощью FTP
  2. От администратора WordPress

FTP Вашей темы

Если вам удобно пользоваться FTP, перейдите на страницу и подключитесь к серверу и перейдите в каталог wp-content> themes. Здесь вы хотите отправить свою тему. Однако перед отправкой распакованной папки на сервер убедитесь, что вы отправляете свою тему. Давайте рассмотрим более подробно, используя нашу тему WordPress ThemeForest.

После разархивирования загрузки вы увидите, что существует несколько разных папок:

How to Install and Setup a New WordPress WooCommerce Theme

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

Тема Savoy - Minimalist AJAX WooCommerce включает некоторые дополниения, такие как документация, активы и т.д. Если вы заглянете в папку Theme Files для Savoy, вы найдете свою тему (savoy.zip).

Если вы устанавливаете с помощью FTP, перейдите в папку с темами и загрузите папку распакованной темы (например, « savoy»). Если вы не уверены в использовании FTP или предпочтете установить у администратора WordPress, это нормально. Я предпочитаю использовать WordPress Admin тоже.

От администратора WordPress

Для установки темы WordPress от администратора требуется, чтобы папка темы была заархивирована (themefolder.zip). Как мы уже обсуждали ранее, вам нужно убедиться, что вы работаете с фактической папкой темы, а не с папкой, в которую может быть упакована ваша тема.

В WordPress Admin в разделе «Внешний вид» выберите «Темы»:

How to Install and Setup a New WordPress WooCommerce Theme

Добавить новую тему:

How to Install and Setup a New WordPress WooCommerce Theme

Загрузить тему:

Вы помните, где находится ваш почтовый файл темы?

(Наше название темы называется: savoy.zip)

Нажмите «Выбрать файл» и пройдите к нему:

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

Как вы видите (ниже), тема Savoy успешно установлена, поэтому мышь переходим и активируем:

How to Install and Setup a New WordPress WooCommerce Theme

Теперь, когда ваша тема WordPress WooCommerce успешно установлена и активирована, давайте настроим ее.

Шаг 3. Настройте тему WordPress WooCommerce

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

Рекомендуемые / Необходимые плагины

После установки и активации темы Savoy вы будете уведомлены о рекомендуемых плагинах:

How to Install and Setup a New WordPress WooCommerce Theme

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

Нажмите Начать установку плагинов в теме Savoy, чтобы просмотреть список рекомендуемых подключаемых модулей:

How to Install and Setup a New WordPress WooCommerce Theme

Опять же, это будет варьироваться от темы к теме, но в этом случае вы можете и не устанавливать все это.

Например, если Savoy рекомендует контактную форму 7 и включает в себя стиль для нее, вы можете не использовать этот плагин для своей контактной формы. Вы можете использовать что-то вроде Gravity Forms или Ninja Forms.

Такой плагин, как Regenerate Thumbnails, является прекрасным плагином для тех, у кого уже настроен магазин, и настроил их изображения для предыдущей темы. Этот плагин будет проходить через вашу медиабиблиотеку WordPress и изменит размер всех ваших изображений для работы с вашей новой темой. Вы можете или не хотите делать это с фиктивными данными, и вы можете вообще пропустить этот плагин (но я все равно рекомендую это сделать, чтобы все носители были правильно рассчитаны для тестирования).

Однако плагин, такой как Envato Toolkit, очень важен для тем, приобретенных через ThemeForest, гарантируя, что вы будете уведомлены об обновлениях темы.

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

После того, как вы установили все, некоторые или ни один из рекомендуемых и/или требуемых плагинов, не забудьте активировать их:

How to Install and Setup a New WordPress WooCommerce Theme

Если вы используете тему, купленную в ThemeForest, например, в нашем примере темы Savoy, не забудьте ввести свое имя в Marketplace и секретный ключ API в Envato WordPress Toolkit, чтобы обеспечить правильное обновление темы.

Кастомизация

Это часть установки и настройки темы WordPress WooCommerce, когда она становится действительно интересной, и вы начинаете видеть, как ваш сайт оживает.

Вы можете получить доступ к Настройщику WordPress из меню в WordPress: Внешний вид> Настроить. Или перейдите на страницу «Темы» в разделе «Внешний вид»> «Темы» и затем нажмите кнопку «Настроить»:

How to Install and Setup a New WordPress WooCommerce Theme

Добро пожаловать в Настройщик WordPress:

How to Install and Setup a New WordPress WooCommerce Theme

Здесь мы сделаем несколько настроек, прежде чем переходить к более глубокой настройке.

Первое, что вы увидите - Идентификация сайта. Здесь вы можете изменить тег и заголовок сайта.

How to Install and Setup a New WordPress WooCommerce Theme

Иногда здесь вы также можете добавить собственный заголовок  и/или значок сайта (это будет варьироваться от темы к теме).

Затем настройте меню:

How to Install and Setup a New WordPress WooCommerce Theme

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

Вы можете легко добавить и создать новое меню:

How to Install and Setup a New WordPress WooCommerce ThemeHow to Install and Setup a New WordPress WooCommerce Theme

После того, как вы добавили меню (или несколько), вы можете выбрать, где вам нужно меню, а также различные пункты меню (например, пользовательские ссылки, сообщения, страницы, продукты и т.д.).

How to Install and Setup a New WordPress WooCommerce Theme

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

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

How to Install and Setup a New WordPress WooCommerce Theme

Пометить главную страницу в качестве статической страницы и выбрать главную страницу для своей страницы магазина. Страница «Магазин» была автоматически создана, когда вы установили плагин WooCommerce.

Что касается страницы «Сообщения», это зависит от того, где вы хотите вести блог на своем сайте WooCommerce. Если это так, вам нужно создать страницу в блоге и выбрать ее на этой странице в Настройщике WordPress или в Настройках администратора WordPress> Чтение.

Результаты

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

How to Install and Setup a New WordPress WooCommerce Theme

Отдельные страницы продукта выглядят потрясающе:

How to Install and Setup a New WordPress WooCommerce Theme

Он включает в себя также сопутствующие продукты:

How to Install and Setup a New WordPress WooCommerce Theme

Тема Savoy - Minimalist AJAX WooCommerce позволяет вам легко дорабатывать многие элементы вашего сайта и еще много чего может вам дать, что я рассмотрел в этом учебнике (не забудьте прочитать документацию по вашей теме, чтобы узнать больше о вашей теме). Я только показал вам изменения, которые могут быть внесены в Настройщик WordPress, и, как правило, они могут быть сделаны практически по любой теме, которую вы можете использовать.

Вывод

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

Есть много полезных плагинов WordPress WooCommerce, доступных на CodeCanyon, и некоторые красиво оформленные и эффективные темы WordPress WooCommerce на ThemeForest.

Если посмотреть на некоторые из наиболее популярных тем ThemeForest WooCommerce, можно начать с хорошего места (Savoy по-прежнему остается моим фаворитом). Я уверен, вы обязательно найдете то, что идеально подходит вашему магазину электронной коммерции. Или просмотрите нашу демонстрационную витрину, чтобы найти подходящую для вашего магазина:

Что вы используете в WooCommerce для продажи?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.