Статьи

Введение в тематическую WooCommerce для WordPress

Март 3, 2019

WooCommerce — это популярная платформа электронной коммерции для WordPress, которая быстро развивается WooThemes. В этой статье я собираюсь познакомить вас с основами создания тем для WooCommerce.

Эта статья делает несколько предположений о вашей среде разработки:

  1. У вас установлены WordPress и WooCommerce.
  2. Вы знакомы с созданием тем WordPress и использованием HTML и CSS.
  3. Вы использовали инструменты разработчика Chrome или аналогичные инструменты веб-разработки, такие как Firebug.

Настройка CSS WooCommerce

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

Таким образом, существует два способа редактирования CSS для темы WooCommerce:

  1. Вы можете использовать стили по умолчанию в качестве основы и переопределить их.
  2. Вы можете отключить стили по умолчанию и начать с нуля.
WooCommerce добавляет класс тела «woocommerce» на все свои страницы

Переопределение стилей по умолчанию

Переопределение стилей по умолчанию — самый быстрый способ начать работу и, вероятно, подойдет большинству людей.

Вы можете скопировать весь CSS-файл WooCommerce по умолчанию (расположенный в wp-content\plugins\woocommerce\assets\css\woocommerce.css или woocommerce.less ), удалить все, что вам не нужно, и изменить все, что вам нужно; Однако это может занять много времени и может привести к многократному повторению CSS.

Для этого я обычно использую следующий подход:

  1. Я перемещаюсь по сайту, находя стили, которые мне нужно изменить.
  2. После этого я использую Chrome Developer Tools (или аналогичный инструмент), чтобы идентифицировать классы, и даже вносить изменения в браузер, чтобы убедиться, что я понимаю, как он будет выглядеть. Обычно это делается щелчком правой кнопкой мыши на странице и выбором «проверить элемент» в раскрывающемся списке.
  3. Затем я копирую CSS из Chrome Developer Tools в CSS-файл моей темы.
  4. Я рассматриваю CSS в Chrome Developer Tools, так как он может зачеркнуть или затереть любые стили с префиксом вендора для других браузеров. Важно изменить эти значения, чтобы сохранить согласованность CSS в разных браузерах, которые могут использовать ваши посетители.
  5. Наконец, я удаляю все значения, которые я не изменил в скопированном CSS. Например, если я изменил ширину чего-либо, но не изменил высоту, то мне не нужно включать высоту в свой пользовательский файл CSS.

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

Осмотреть элемент
В Google Chrome можно щелкнуть правой кнопкой мыши элемент в окне инструментов разработчика, чтобы переключать различные состояния (наведение, активное и т. Д.). Это позволяет просматривать все состояния без поиска в исходном файле CSS.
Состояние Силового Элемента

Отключение таблицы стилей по умолчанию и запуск с нуля

Таблицу стилей по умолчанию можно отключить, добавив небольшой фрагмент кода в ваши темы functions.php :

1
define(‘WOOCOMMERCE_USE_CSS’, false);

Самый быстрый способ получить все классы WooCommerce — это скопировать оригинальный CSS-файл WooCommerce и удалить все, что вам не нужно.

Объявление поддержки WooCommerce в вашей теме

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

Без специального объявления поддержки WooCommerce в вашей теме пользователям будет показано сообщение об ошибке при установке WooCommerce, и оно будет оставаться там до тех пор, пока не будет отклонено.

К счастью, все это можно решить с помощью небольшого фрагмента кода, вставленного в файл functions.php вашей темы:

1
add_theme_support( ‘woocommerce’ );

Дайвинг чуть глубже: редактирование шаблонов

Редактирование CSS в WooCommerce продвинет вас довольно далеко, но что если вы действительно хотите настроить макет страниц? К счастью, есть хороший способ сделать это.

Плагин WooCommerce поставляется с рядом внешних HTML-шаблонов, а также шаблонами электронной почты. Вместо того, чтобы редактировать эти файлы непосредственно внутри плагина (что является очень плохой идеей, потому что после обновления плагина и все ваши изменения будут потеряны!), Вы можете скопировать их в свою тему:

  1. В каталоге вашей темы создайте новую папку под названием «woocommerce».
  2. Перейдите в каталог плагинов WooCommerce и откройте папку «Шаблоны». Папка шаблонов содержит множество подпапок со всеми различными шаблонами, которые использует WooCommerce. К счастью, структура файла шаблона и наименование в WooCommerce очень просты.
  3. В созданной вами папке «woocommerce» скопируйте файл шаблона, который вы хотите редактировать. Не забудьте сохранить структуру каталогов здесь. Если шаблон, который вы хотите редактировать, находится внутри подпапки, не забудьте создать эту подпапку в каталоге вашей темы.
  4. Отредактируйте файл в папке «woocommerce» и сохраните изменения.

Практический пример

Допустим, мы хотим изменить часть HTML-кода на экране «Мои заказы» в WooCommerce.

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

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

Затем создайте папку в вашей теме под названием «woocommerce» и в этой папке создайте вторую папку «myaccount». После этого скопируйте файл my-orders.php в этот каталог.

Вы должны остаться со следующим:

/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php

Любые изменения, внесенные в этот файл, теперь будут переопределять оригинал.

WooCommerce Loop

Если вы уже создавали или редактировали темы WordPress ранее, вы должны быть знакомы с The Loop . WooCommerce имеет свой собственный цикл, который вы можете использовать для настройки страниц WooCommerce. Например, вы можете сделать это, когда вы хотите загрузить другую боковую панель для своих страниц WooCommerce.

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

Создание шаблона — простой процесс:

  • Дублируйте файл page.php вашей темы и переименуйте его в woocommerce.php.
  • Найдите цикл WordPress в вашем файле woocommerce.php . Это будет выглядеть примерно так:
1
2
3
4
<?php if (have_posts()) : while (have_posts()) : the_post();
<?php the_title();
<?php the_content();
<?php endwhile;
  • Замените ваш цикл на цикл WooCommerce: <?php woocommerce_content(); ?> <?php woocommerce_content(); ?>
  • Теперь внесите любые дальнейшие изменения, которые вы хотите внести, такие как замена на другой боковой панели или изменение макета.

Давайте завернем это

Теперь вы знаете основы интеграции платформы электронной коммерции WooCommerce в ваши темы WordPress.

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

Полезные ссылки: Плагины WooCommerce от CodeCanyon.

38
Share: