Плюсы и минусы Bootstrap

Разработка #Фреймворки #HTML/CSS Введение Bootstrap – один из самых популярных инструментов, который используется при создании сайтов и веб-приложений....

7 самых популярных фреймворков JavaScript

Разработка #Фреймворки #Обзор #JavaScript Статья посвящена самым популярным фреймворкам, библиотекам и инструментам JavaScript. Каждый из них может значительно облегчить...

Amazon UK: как создать и продвигать свой интернет-магазин?

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

Сокращение ТТМ запуска продуктов в компании: кейс Авито

Мнение рынка #Менеджмент #Разбор #Продуктология #Аналитика #Оптимизация При запуске нового продукта важно как можно быстрее и дешевле проверить...

Как стать full-stack разработчиком

Разработка #Карьера #Веб-дизайн #JavaScript #HTML/CSS Традиционно разработчики делятся на frontend и backend разработчиков; это обусловлено разделением ответственности между...

Введение в J2Store

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

Диджитал-реклама сегодня: интервью с Павлом Баракаевым из eLama

Мнение рынка #Реклама #Таргетинг #Социальные сети #ВКонтакте #Конверсия В гостях у Комьюнити побывал Павел Баракаев, евангелист сервиса eLama,...

Обзор фреймворка Yii

Общее Yii – это объектно-ориентированный фреймворк, написанный на PHP. Если вы не знаете, что такое фреймворк и чем...

Как установить MongoDB на Ubuntu 18.04

Разработка #VDS #Ubuntu #Базы данных MongoDB – это бесплатная СУБД с открытым исходным кодом. Это документоориентированная СУБД, реализованная при...

Google представил нейросеть Gemini 1.5 – за раз она может обработать 11-часовое аудио

Новости #Google #Боты #Нейросети #Обновления Реклама. ООО «ТаймВэб». erid: LjN8KZYK5 Два месяца назад компания Google анонсировала новую языковую модель Gemini,...

Взгляд в будущее: смогут ли метавселенные заменить реальность

Разработка #Технологии #Тренды #Facebook #Криптовалюта Краткое введение в метавселенные. Что они собой представляют, как работают и стоит ли...

Как сделать дейлики эффективными: интервью с Настей Ткаченко

Мнение рынка #Менеджмент #Разбор #Программы #Мессенджеры В гостях у Комьюнити побывала Настя Ткаченко, проджект-менеджер конструктора сайтов Craftum. У...

Что такое формат JSON

Разработка #IDE #Разбор #JavaScript За представление структурированных данных на основе синтаксиса JavaScript отвечает стандартный текстовый формат под названием JSON,...

Авторизация и аутентификация пользователя при помощи JWT. Часть 1: Что такое JWT и как его создать?

Разработка #Хостинг #Серверы #JavaScript #OpenSource #Безопасность Реклама. ООО «ТаймВэб». erid: LjN8KaXqo Что такое JWT? JWT или JSON Web...

Обзор Vue.js

Разработка #Фреймворки #Обзор #JavaScript Vue.js или просто Vue – это прогрессивный JavaScript-фреймворк, который используется для создания пользовательских интерфейсов....

Что такое Progressive Web Apps и в чем их преимущества

Разработка #Программы #JavaScript #HTML/CSS #Оптимизация Progressive Web Apps (PWA) — это сайты, которые похожи на приложения для смартфонов не только...

Что такое API

Разработка #Веб-дизайн #API #OpenSource #Безопасность Краткий ликбез по API. Выясняем, что он собой представляет, как работает и зачем нужен....

Что такое Sass

Разработка #Обзор #HTML/CSS Sass – это своего рода расширение, созданное для упрощения каскадных таблиц стилей (CSS). Все те, кто начинает...

Обзор HostCMS

Введение HostCMS – это система управления сайтом, которая входит в пятерку самых популярных платных платформ по версии CMSmagazine....

Как выбрать шаблон для Drupal

Разработка #Шаблоны #Разбор #Drupal Drupal – это открытый гибкий бесплатный движок для создания уникального сайта. Вебмастер может пользоваться...

Выбор темы для интернет-магазина на 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

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

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

ProStore


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

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

Trendy TShirts


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

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

Artcraft


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

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

Shop Isle


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

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

Shophistic Lite


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

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

Boutique


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

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

Storefront


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

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

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.

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

Межтекстовые Отзывы
Посмотреть все комментарии
guest