Выбор темы для интернет-магазина на WordPress

1 комментарий
Выбор темы для интернет-магазина на WordPress

«WordPress для блога!» — говорили они.

«Но ведь… есть плагины и темы...» — говорю я и тысячи поклонников этой CMS. 

Самым известным плагином для создания интернет-магазина на базе WordPress является WooCommerce. Об этом и других популярных плагинах рассказала Кристина в статье «23 самых популярных плагина WordPress». А мы с вами поговорим о том, как не запутаться в многообразии тем, узнаем, на что обращать внимание при выборе, и научимся устанавливать темы. 

Начнем с терминологии. В документации WordPress указано:

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

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

Как правильно выбрать тему

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

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

  • Вдохновитесь дизайном существующих интернет-магазинов. Обратите внимание на то, как расположены разделы, меню, кнопки, удобно ли вам выбирать товары и находить дополнительную информацию (о доставке, оплате и т.д.). Так вам будет легче продумать «скелет» своего будущего сайта (об этом, собственно, в следующем пункте). 
  • Подумайте, какие элементы должны быть на страницах вашего сайта, где будет расположено основное меню, какие разделы будут находиться в хедере (шапке сайта), а какие в футере (подвале) и т.д.
  • Набросайте на бумаге примерную структуру вашего интернет-магазина, чтобы в дальнейшем при просмотре тем не забыть о важных элементах интерфейса.

Когда вы уже имеете некое представление о том, как будет выглядеть ваш сайт, можно приступить к выбору темы для интернет-магазина на WordPress. 

Рассмотрим несколько критериев, на которые стоит обратить внимание в первую очередь.


Тот самый «скелет»

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

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


Адаптивность

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

Адаптивность
На картинке выше пример неадаптивного сайта помечен крестиком. На примере, отмеченным галочкой, показано, как все элементы сайта подстроились под размер окна браузера, это и есть адаптивность. Адаптивными могут быть как платные, так и бесплатные темы для интернет-магазина WordPress.

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


Мультиязычность

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


Техническая поддержка

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


SEO-дружественность

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

Как понять, что тема адаптирована под SEO? Обычно это указано в её описании (например, «дружественна к SEO» или «оптимизирована под поисковые системы»). Если вас заинтересовала тема WordPress для интернет-магазина без описания на русском языке, ориентируйтесь на фразы «SEO friendly», «SEO optimized», «optimized for search engines».


Дополнительная информация

На странице темы, как правило, можно посмотреть её демо-версию, это позволяет оценить базовые возможности и внешний вид темы до того, как вы её установите. Количество скачиваний и отзывы пользователей тоже могут помочь вам определиться с выбором. Также на странице темы обычно указана дата последнего изменения. Стоит учитывать, что любой программный продукт, в том числе тема для CMS, требует своевременного обновления. Если она несколько лет не обновлялась, вероятно, автор её больше не развивает и не исправляет ошибки. В итоге, тема может быть несовместима с какими-либо новыми функциями WordPress и некорректно работать.

Где можно купить или скачать тему

Чтобы уберечь себя от установки некачественной темы, я выбираю крупные и надежные площадки, которые уже зарекомендовали себя на рынке. Перед тем, как разместиться на таком ресурсе, тема проходит проверку. Если вам интересны бесплатные варианты, поищите в каталоге WordPress. Он доступен как на официальном сайте, так и в админке WordPress (в разделе Внешний вид -> Темы -> Добавить новую). Среди источников платных тем могу отметить themeforest.net и templatemonster.com, это популярные маркетплейсы, где можно найти лучшие темы для интернет-магазина на WordPress и других CMS. Ещё один хороший вариант: выбрать тему там же, где вы заказали хостинг для WordPress. К примеру, в магазине шаблонов Timeweb вы найдете темы на любой вкус.

Подборка лучших тем

Какая тема — лучшая? Та, что решает задачи вашего бизнеса. Число тем для Wordpress уже не сосчитать, а переключать страницы каталогов можно бесконечно. Наверняка прямо сейчас создается очередная новинка :) Поэтому предлагаю рассмотреть несколько популярных тем, платных и бесплатных. Вы можете выбрать тему прямо из этого списка или вдохновиться дизайном и понять, в какую сторону двигаться дальше.


Natural Foods

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

Смотреть демо >
 

Organica

Organica

Простая и современная тема для магазина WordPress WooCommerce, подходит для продажи косметики и органических продуктов. 

Смотреть демо >


ProStore

ProStore
Универсальная тема с чистым и минималистичным дизайном, SEO-дружественна и поддерживает адаптивность.

Смотреть демо >


Trendy TShirts

Trendy TShirts
Стильная тема с эффектами анимации и функцией онлайн-чата, адаптивна и дружит с SEO.

Смотреть демо >


Artcraft

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

Смотреть демо >


Shop Isle

Shop Isle
Адаптивная минималистичная тема, которую можно использовать для интернет-магазинов одежды, электроники и других товаров.

Смотреть демо >


Shophistic Lite

Shophistic Lite
Простая и универсальная тема для интернет-магазина Wordpress Woocommerce с поддержкой адаптивности.

Смотреть демо >


Boutique

Boutique
Тема с простым, сдержанным дизайном, разработанная для небольших магазинов.

Смотреть демо >


Storefront

Storefront
Гибкая тема от создателей ядра WooCommerce. Поддерживает адаптивность, имеет в запасе несколько вариантов разметки и цветовых схем.

Смотреть демо >


VW Ecommerce Store

VW Ecommerce Store
Тема подходит для интернет-магазина любого типа, многофункциональна, адаптивна и SEO-дружественна.

Смотреть демо >

Как установить тему

Установить тему можно через админку WordPress или по FTP. На мой взгляд, удобнее через админку, рассмотрим этот способ.

  1. Перейдите в админку WordPress.
  2. В меню выберите Внешний вид -> Темы -> Добавить новую -> Загрузить тему.
  3. Нажмите «Загрузить файл», выберите архив с темой и кликните по кнопке «Установить».
  4. Когда установка завершится, нажмите «Активировать».

Если тема требует наличия определенных плагинов, после установки вы увидите сообщение об этом. Тогда выполните следующее:

  1. Нажмите «Начать установку плагинов» (если нужен один плагин, то будет предложено установить именно его).
  2. Отметьте плагины галочками.
  3. Выберите действие «Install» и нажмите «Применить».

Если тема содержит какой-либо фреймворк (например, CherryFramework), сначала нужно установить фреймворк (по алгоритму установки темы), затем тему, после этого загрузить демо-данные. В зависимости от темы, наличия или отсутствия фреймворка, алгоритм может отличаться, рассмотрим процесс загрузки демо-данных на примере CherryFramework:

  1. Перейдите в Плагин Cherry -> Импорт контента -> Продолжить -> Выбрать файлы.
  2. Загрузите все файлы из папки theme/sample_data.
  3. После завершения загрузки нажмите «Продолжить установку» и дождитесь окончания установки.
  4. Готово!

Также инструкция по установке темы обычно содержится прямо в архиве с темой, в текстовом файле «Readme» (в нем много информации, ищите пункт «Installation»). 

Пример:

== Installation ==
1. In your admin panel, go to Appearance -> Themes and click the 'Add New' button.
2. Type in Storefront in the search form and press the 'Enter' key on your keyboard.
3. Click on the 'Activate' button to use your new theme right away.
4. Go to https://docs.woocommerce.com/documentation/themes/storefront/ guides on how to customize this theme.
5. Navigate to Appearance > Customize in your admin panel and customize to taste.

Вы использовали какие-то из представленных тем? У вас есть свои любимые темы? Поделитесь опытом в комментариях :)

Комментарии

Спасибо за действительно полезную статью!