Eric Dye Last updated Jul 19, 2016
Read Time: 9 min
WooCommerce — самая популярная и «самая настраиваемая платформа для электронной коммерции для создания вашего онлайн-бизнеса». Вы можете бесплатно загрузить WooCommerce, но вы действительно обнаружите всю ее мощь, когда начинаете использовать плагины и темы WordPress WooCommerce.
Но вам действительно нужно использовать тему WooCommerce?
Хотя это и не требуется, я настоятельно рекомендую.
Дизайн не только связан с темами WooCommerce, но все они сосредоточены вокруг стилей WooCommerce. CSS, который WooCommerce использует для определения того, как отображаются товары, затем используется темой WordPress WooCommerce, чтобы собрать все вместе — для некоторых из самых красиво оформленных витрин электронной коммерции.
Не говоря уже о том, что установка и настройка новой темы WordPress WooCommerce не сложнее, чем настройка любой другой темы WordPress.
Как установить и настроить тему ASTRA WordPress (2023) — ШАГ ЗА ШАГОМ
Позвольте мне показать вам, как это сделать.
Как установить и настроить новую тему WordPress WooCommerce
Если у вас уже установлена WooCommerce, это здорово! Если нет, я настоятельно рекомендую «Руководство для начинающих» Рэчел Макколлин по использованию WooCommerce. Оно познакомит вас с WooCommerce и проведет вас через все шаги, необходимые для запуска вашего интернет-магазина.
Теперь давайте начнем с того, как установить и настроить новую тему WordPress WooCommerce.
Шаг 1: установка фиктивных данных
Если вы уже добавили свои продукты в WooCommerce, я рекомендую пропустить этот шаг и начать с шага 2.
Установка фиктивных данных добавляет вымышленные продукты к вашему магазину, чтобы помочь вам визуализировать свой магазин с помощью продуктов. После того, как вы завершили установку и создали новую тему WordPress WooCommerce, вы должны удалить все фиктивные данные перед добавлением ваших продуктов. В противном случае вы рискуете случайно удалить свои собственные данные о продукте.
Фиктивные данные включены в ваш плагин WooCommerce. Если вы установили WooCommerce в администраторе WordPress, продолжайте загрузку плагина из каталога плагинов WordPress на свой компьютер. Это будет проще, чем войти в ваш FTP, войти в свой каталог плагинов и загрузить фиктивные данные оттуда.
После завершения загрузки разархивируйте файл, чтобы подготовить файл dummy-data.xml.
Перейдите в Инструменты и нажмите «Импорт»:
Не позволяйте «Налоговые ставки WooCommerce (CSV)» путать вас. Это можно сделать позже, если хотите. Для WooCommerce Dummy Data вам нужно выбрать WordPress.
Установка шаблона (темы) на WordPress — 3 способа как установить тему на вордпресс за 8 минут
Скорее всего, у вас не будет установлен плагин WordPress Importer, так что давайте начнем установку и сейчас.
После установки идите и активируйте Plugin woocommerce> dummy-data.
Откройте папку dummy-data, выберите dummy-data.xml, и вы готовы загрузить файл и импортировать его.
Это последнее, что вам нужно сделать перед импортом всех фиктивных данных.
Некоторые из них являются личными предпочтениями, но вот что я делаю (снимок экрана ниже):
Импортируйте автора по умолчанию «wooteam» вместо создания нового автора или использования существующего автора. Таким образом, вы знаете, какой контент был импортирован, а какой создан в этом процессе на основе имени автора (я рекомендую удалить автора при удалении фиктивных данных после того, как вы закончили установку и настройку новой темы WordPress WooCommerce).
Я также рекомендую вам загружать и импортировать вложения, чтобы у вас были изображения, связанные с каждым продуктом (опять же, вам нужно убедиться, что носитель будет удален, когда вы закончите с фиктивными данными).
После того, как вы сделали эти выборы, отправьте:
Посетите веб-сайт yourwebsite.com/shop/, и вы увидите полностью импортированное тестовое хранилище:
О да! Ты сделал это!
Хотя все это не очень хорошо спроектировано, не так ли? Хорошо, что мы собираемся установить замечательную тему WordPress WooCommerce, такую как Savoy.
(ПРИМЕЧАНИЕ. После завершения установки и настройки темы не забудьте удалить продукты и изображения из фиктивного импорта данных, прежде чем добавлять собственные продукты.)
Шаг 2. Установка темы WordPress WooCommerce
Теперь давайте посмотрим, как установить тему WooCommerce. Если вы еще не загрузили свою тему электронной торговли WordPress, загрузите ее на свой компьютер (убедитесь, что знаете, где ее загружаете, чтобы получить к ней доступ).
Вы можете установить свою тему двумя способами:
- Доступ к веб-сайту с помощью FTP
- От администратора WordPress
FTP Вашей темы
Если вам удобно пользоваться FTP, перейдите на страницу и подключитесь к серверу и перейдите в каталог wp-content> themes. Здесь вы хотите отправить свою тему. Однако перед отправкой распакованной папки на сервер убедитесь, что вы отправляете свою тему. Давайте рассмотрим более подробно, используя нашу тему WordPress ThemeForest.
После разархивирования загрузки вы увидите, что существует несколько разных папок:
Не каждая загружаемая вами тема будет упакована следующим образом. Иногда папка, которую вы загружаете, является фактической папкой темы. Это всегда хорошо бы проверить, так как это варьируется от места к месту.
Тема Savoy — Minimalist AJAX WooCommerce включает некоторые дополниения, такие как документация, активы и т.д. Если вы заглянете в папку Theme Files для Savoy, вы найдете свою тему (savoy.zip).
Если вы устанавливаете с помощью FTP, перейдите в папку с темами и загрузите папку распакованной темы (например, « savoy»). Если вы не уверены в использовании FTP или предпочтете установить у администратора WordPress, это нормально. Я предпочитаю использовать WordPress Admin тоже.
От администратора WordPress
Для установки темы WordPress от администратора требуется, чтобы папка темы была заархивирована (themefolder.zip). Как мы уже обсуждали ранее, вам нужно убедиться, что вы работаете с фактической папкой темы, а не с папкой, в которую может быть упакована ваша тема.
В WordPress Admin в разделе «Внешний вид» выберите «Темы»:
Добавить новую тему:
Вы помните, где находится ваш почтовый файл темы?
(Наше название темы называется: savoy.zip)
Нажмите «Выбрать файл» и пройдите к нему:
После установки вы можете посетить «Внешний вид»> «Темы» в WordPress Admin, чтобы узнать, установлен ли он, или нажмите, чтобы сразу активировать его.
Как вы видите (ниже), тема Savoy успешно установлена, поэтому мышь переходим и активируем:
Теперь, когда ваша тема WordPress WooCommerce успешно установлена и активирована, давайте настроим ее.
Шаг 3. Настройте тему WordPress WooCommerce
Не каждая тема настраивается одинаково. То как тема разрабатывается, является большим фактором, поэтому могут быть некоторые различия между этим учебным пособием и тем, с чем вы можете столкнуться. В целом, однако, это должно помочь вам настроить тему WordPress WooCommerce — независимо от темы, которую вы используете с ThemeForest или что-либо еще.
Рекомендуемые / Необходимые плагины
После установки и активации темы Savoy вы будете уведомлены о рекомендуемых плагинах:
Иногда ваша тема уведомляет вас о рекомендуемых плагинах, в то время как другие включают рекомендации в свою документацию. Могут быть функции оформления темы, такие как дополнительные ползунки, которые не закодированы в теме, но предназначены для.
Нажмите Начать установку плагинов в теме Savoy, чтобы просмотреть список рекомендуемых подключаемых модулей:
Опять же, это будет варьироваться от темы к теме, но в этом случае вы можете и не устанавливать все это.
Например, если Savoy рекомендует контактную форму 7 и включает в себя стиль для нее, вы можете не использовать этот плагин для своей контактной формы. Вы можете использовать что-то вроде Gravity Forms или Ninja Forms.
Такой плагин, как Regenerate Thumbnails, является прекрасным плагином для тех, у кого уже настроен магазин, и настроил их изображения для предыдущей темы. Этот плагин будет проходить через вашу медиабиблиотеку WordPress и изменит размер всех ваших изображений для работы с вашей новой темой. Вы можете или не хотите делать это с фиктивными данными, и вы можете вообще пропустить этот плагин (но я все равно рекомендую это сделать, чтобы все носители были правильно рассчитаны для тестирования).
Однако плагин, такой как Envato Toolkit, очень важен для тем, приобретенных через ThemeForest, гарантируя, что вы будете уведомлены об обновлениях темы.
Я рекомендую установить все рекомендуемые плагины, когда вы начнете. Вы всегда можете удалить плагин позже, если он вам не нужен, в то время как если вы не установите необходимый плагин, вы можете разочароваться, потому что тема не «работает» или не делает то, что вам понравилось в демоверсии.
После того, как вы установили все, некоторые или ни один из рекомендуемых и/или требуемых плагинов, не забудьте активировать их:
Если вы используете тему, купленную в ThemeForest, например, в нашем примере темы Savoy, не забудьте ввести свое имя в Marketplace и секретный ключ API в Envato WordPress Toolkit, чтобы обеспечить правильное обновление темы.
Кастомизация
Это часть установки и настройки темы WordPress WooCommerce, когда она становится действительно интересной, и вы начинаете видеть, как ваш сайт оживает.
Вы можете получить доступ к Настройщику WordPress из меню в WordPress: Внешний вид> Настроить. Или перейдите на страницу «Темы» в разделе «Внешний вид»> «Темы» и затем нажмите кнопку «Настроить»:
Добро пожаловать в Настройщик WordPress:
Здесь мы сделаем несколько настроек, прежде чем переходить к более глубокой настройке.
Первое, что вы увидите — Идентификация сайта. Здесь вы можете изменить тег и заголовок сайта.
Иногда здесь вы также можете добавить собственный заголовок и/или значок сайта (это будет варьироваться от темы к теме).
Затем настройте меню:
Если это новая настройка WooCommerce или вы не создали ни одной страницы, вам может быть не так много для вас, чтобы «настроить». Однако с помощью WooCommerce она автоматически добавила несколько страниц, которые, я уверен, вы захотите сразу добавить в меню.
Вы можете легко добавить и создать новое меню:
После того, как вы добавили меню (или несколько), вы можете выбрать, где вам нужно меню, а также различные пункты меню (например, пользовательские ссылки, сообщения, страницы, продукты и т.д.).
Это дает вам большую гибкость в том, как вы хотите, чтобы ваш сайт WooCommerce функционировал. Не бойтесь поиграть с ним или изменить его позже.
Прежде чем мы покинем Настройщик WordPress, вы захотите сообщить WordPress, чтобы на первой странице вашего магазина было:
Пометить главную страницу в качестве статической страницы и выбрать главную страницу для своей страницы магазина. Страница «Магазин» была автоматически создана, когда вы установили плагин WooCommerce.
Что касается страницы «Сообщения», это зависит от того, где вы хотите вести блог на своем сайте WooCommerce. Если это так, вам нужно создать страницу в блоге и выбрать ее на этой странице в Настройщике WordPress или в Настройках администратора WordPress> Чтение.
Результаты
С некоторой базовой конфигурацией вы можете увидеть, как выглядит ваш интернет-магазин с помощью темы WordPress WooCommerce:
Отдельные страницы продукта выглядят потрясающе:
Он включает в себя также сопутствующие продукты:
Тема Savoy — Minimalist AJAX WooCommerce позволяет вам легко дорабатывать многие элементы вашего сайта и еще много чего может вам дать, что я рассмотрел в этом учебнике (не забудьте прочитать документацию по вашей теме, чтобы узнать больше о вашей теме). Я только показал вам изменения, которые могут быть внесены в Настройщик WordPress, и, как правило, они могут быть сделаны практически по любой теме, которую вы можете использовать.
Вывод
Вы можете ясно видеть, насколько легки эти первоначальные первые шаги по настройке вашей новой темы WordPress WooCommerce и насколько хороши они выглядят — просто с помощью темы WordPress, разработанной специально для WooCommerce.
Есть много полезных плагинов WordPress WooCommerce, доступных на CodeCanyon, и некоторые красиво оформленные и эффективные темы WordPress WooCommerce на ThemeForest.
Если посмотреть на некоторые из наиболее популярных тем ThemeForest WooCommerce, можно начать с хорошего места (Savoy по-прежнему остается моим фаворитом). Я уверен, вы обязательно найдете то, что идеально подходит вашему магазину электронной коммерции. Или просмотрите нашу демонстрационную витрину, чтобы найти подходящую для вашего магазина:
WooCommerce
15 лучших тем для WooCommerce: сделать лучший интернет-магазин
Бренда Бэррон
Что вы используете в WooCommerce для продажи?
Источник: code.tutsplus.com
Как установить и настроить тему WordPress для сайта
Здравствуйте, друзья! Сегодня у нас дополнительный урок по настройке темы для вашего сайта.
В WordPress есть много интересных тем, выбор достаточно объемный.
Каждый сможет выбрать тему по своему усмотрению и соответствующую направленности вашего сайта.
Содержание скрыть
По каким параметрам и как лучше выбрать тему
Но стоит помнить, что тема должна быть адаптивной, легкой, а так же не очень запутанной.
В ней должно присутствовать простое меню навигации по вашему сайту.
Еще очень важный момент, когда вы выбираете тему, обратите внимание какой шрифт написания в ней предложен. Чем проще и крупнее шрифт, тем легче будет вашему читателю.
Согласитесь, что посещая какой- либо сайт с «навороченной» темой, иногда не знаешь как найти на том сайте нужную информацию, а шрифт такой мелкий и мудреный, что и читать не хочется, особенно если статьи довольно объемные.
Поэтому при выборе темы обязательно обращайте внимание на эти нюансы.
Выбрать темы для вашего сайта можно нажав в левой колонке админки вашего сайта на «Внешний вид» «Темы» и перед нами откроется большой выбор разных по дизайну шаблонов.
Жмем на «Добавить новую», выбираем и просматриваем как будет выглядеть та или иная тема на вашем сайте.
Обязательно читайте описание к каждой теме и повторюсь, обращайте внимание на шрифт, это очень важно.
Стоит конечно же попробовать несколько. Для этого при наведении мышки на тему появятся всплывающие пункты «Установить» и «Посмотреть».
Не торопитесь устанавливать все темы подряд. Сначала жмем на «Посмотреть» и вы увидите, как примерно будет выглядеть оформление.
Так же можно попробовать настроить еще не установленную тему. Для этого в меню жмем «Внешний вид» «Настроить» и смотрите сколько настроек доступно для данной темы.
Настройки откроются перед вами в левой колонке, следует посмотреть можно ли добавить изображение, сколько мест для расположения меню имеет данная тема. Присутствует ли выбор цвета и так далее.
Если тема вам понравилась, то только тогда жмем «Установить» и начинаем настраивать ее по вашему вкусу.
Настройка темы Frontier
Расскажу об основных настройках на примере темы Frontier. Эта тема имеет большой выбор настроек. Можно сделать сайт в два столбца, можно в три.
После установки темы жмем на «Внешний вид» «Настройка темы Frontier» и начинаем настройку.
Первое меню у нас «Показывать», открываем его и настраиваем, те записи которые будут видны при открытии сайта.
Затем в теме Frontier можно регулировать высоту шапки, настраиваем ту, которая вас устраивает. Если у вас имеется логотип, то можно загрузить его со своего компьютера. Но это не обязательно.
Теперь настраиваем «Главное меню», для этого стоит лишь поставить птичку в соответствующем пункте.
Чем интересна эта тема, так это тем, что запись в подвале сайта легко размещается. Для этого стоит лишь прописать нужное, а именно часть выдержки из политики конфиденциальности, которую мы с вами настраивали вот здесь.
После внесения настроек, жмем на «Сохранить изменения».
Далее переходим в пункт «Разметка». Здесь нам следует выбрать, как будет выглядеть ваш сайт.
Если вы выбираете разметку в два столбика, рекомендую размер 65% для контента и 35% для сайдбара.
Сделать это можно при помощи ползунка, расположенного ниже этих пунктов.
Такая разметка подходит для личных блогов, Информационных сайтов, в которых достаточно объемный контент. И еще, сайдбар лучше расположить с правой стороны, в таком случае навигация по вашему сайту будет более удобной.
Если же у вас контента не много, и вы занимаетесь бизнесом, вам следует размещать много банеров и рекламных виджетов, то рекомендую выбрать разметку сайта в три столбца.
Для этого спускаемся к соответствующему пункту меню и при помощи ползунка устанавливаем размеры колонок. На данном примере установлены следующие размеры: сайдбар 1 21%, сайдбар 2 23% и контент 56 %.
В таком случае остается достаточно места для контента и остается достаточно места для размещения рекламных продуктов. После всех настроек не забываем нажать на пункт «Сохранить изменения».
Переходим в пункт «Вид блога». В пункте «Показ статей» отмечаем «Expert». Далее стоит везде проставить птички, кроме пункта «Дата обновлена».
В пункте «Миниатюра записи» выбираете то, что вам больше нравится. У меня выбран «Квадрат». После настроек жмем на «Сохранить изменения».
Переходим к пункту «Одна страница». Здесь проставляем птички, как показано на скриншоте.
Единственно пункт «Миниатюра записи» не обязательна. Под этим пунктом выводится тот тизер, который вы будете располагать в «Изображении записи» при написании статей. И если в вашей публикации есть похожий, то от данного пункта следует отказаться.
Но если вы создаете отдельный тизер для «Изображения записи», этот пункт следует включить.
Отметив необходимые пункты, не забываем сохранять изменения.
Далее переходим в пункт «Виджеты». В этом пункте мы настраиваем как выглядят наши записи на странице. Отметьте необходимые пункты и нажмите «Сохранить изменения». У меня выбраны следующие пункты:
Единственно, если вы хотите сделать и нижнее меню, то тоже следует отметить этот пункт. И как всегда сохраняем настройки.
Далее переходим в пункт «Цвета». Здесь настраиваем в каком цвете будет наш сайт.
Что замечательно в этой теме, так это то, здесь очень широкий спектр изменения цвета, можно изменить цвет практически всех записей, виджетов, цвет фона и заголовка.
Настраивайте цветовую гамму по вашему вкусу. В последствии всегда можно вернуться к настройкам и изменить внешний вид сайта.
Так же в теме Frontier есть функция показа слайдов. Для настройки показа, переходим в пункт «Слайдер» и ставим птичку в пункте «Активировать слайдер.
Слайдер отображается на главной странице и страницах записей». Далее настраиваем рубрики, из которых вы хотите настроить показ слайдов, количество слайдов для показа.
Продолжительность показа и скорость анимации можно оставить предложенный темой.
В «Позиции слайда» выбираем поле для показа. У меня выбрано «Перед содержимым».
Спускаемся ниже, там стоит отметить «Элементы слайдера», а именно поставить птички в пунктах «Показать заголовок записи» и если хотите, то «Показать текст записи».
В пункте «Стиль изображения слайдера» лучше отметить пункт «Растянуть изображение по размеру слайдера». Сохраняем изменения.
Показ слайдов осуществляется на главной странице и выглядит вот так:
Если вы решили отключить показ слайдов, то стоит зайти в меню настройки темы и убрать птичку из пункта » Активировать слайдер. Слайдер отображается на главной странице и страницах записей.» и сохранить изменения.
Далее, в настройке темы есть пункты «Произвольный CSS» и «Разное», эти пункты мы оставляем без изменений.
После всех внесенных настроек, если вы хотите установить изображение в шапке сайта. Заходим в пункт «Внешний вид» «Настройки» и в левой панели откроется меню.
Где следует нажать на «Изображение заголовка» и перенести готовое изображение с вашего компьютера в этот пункт.
Изображение заголовка стоит подготовить заранее, в этой теме идеален размер 1391 × 140 пикселей. Но если ваше изображение шире, не беда, при вставке имеется пункт «обрезать изображение».
Далее в пункте «Свойства сайта» можно установить иконку она должна быть квадратной и как минимум размером в 512 × 512 пикселов. Иконка сайта- это то что вы видите на вкладках браузера, панелях закладок.
Но если у вас уже есть фавикон, то иконку сайта устанавливать не следует. Так как в браузере у вас уже есть свой фирменный знак.
Вот пожалуй и все не хитрые настройки темы оформления вашего сайта. Во многих других темах настройки производятся только через левую панель. То есть вам стоит лишь установить тему, активировать, зайти в меню «Внешний вид» «Настроить» и выполнить необходимые действия.
На этом дополнительный урок по установке и настройке темы WordPress заканчиваю. Всем успехов и красивых сайтов!
Источник: galank.ru