Разбираемся с настройкой тем WooCommerce под WordPress

Опубликовано: 01.09.2018

видео Разбираемся с настройкой тем WooCommerce под WordPress

Натяжка на WooCommerce. HTML2WC. Введение. Настройка окружения. Инструменты

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



Перед началом чтения убедитесь в том, что:

У вас установлены WordPress и WooCommerce на сайте. Вы знаете, как создавать темы для WordPress и умеете работать с HTML и CSS. Вы знаете, как работать со средствами разработки Chrome Developer Tools и с такими инструментами, как Firebug.

Смотрите также :


Настройка WooCommerce

Настройка WooCommerce CSS

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

Поэтому у нас есть 2 пути для редактирования CSS в теме оформления WooCommerce:


Бесплатные темы WordPress от Themeforest

Можно использовать базовые стили и переписать их поверх существующих. Можно отключить стили по умолчанию и вместо них начать с нуля.

Помните, что WooCommerce добавляет класс " woocommerce " ко всем своим страницам.

Отключаем стили по умолчанию

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

Скопируйте содержимое всего файла WooCommerce CSS, он расположен по адресу:

wp-contentpluginswoocommerceassetscsswoocommerce.css или woocommerce.less

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

Рекомендую использовать следующий подход:

Найдите на сайте все стили, которые надо заменить. Затем используйте Chrome Developer Tools (или аналогичный инструментарий) для идентификации классов и внесения правок в браузере, чтобы сразу видеть, что и как будет выглядеть после редактирования. Сделать это можно правым кликом на странице и выбрав инспектирование элементов в выпадающем меню. Скопируйте полученный код CSS из Chrome Developer Tools в файл вашей темы с таблицей стилей. Не забудьте сменить значения переменных, чтобы сохранить целостность таблицы стилей и связь стилей и контента для разных браузеров. Если вы найдете что-то, что не меняется в кастомизированном файле, то можете удалить это значение: если оно не меняется, нет смысла включать его в кастомный файл CSS.

Такой подход хорошо экономит вам время.

В Google Chrome можно кликнуть правой кнопкой мыши на элементе в режиме окна Developer Tools для проверки разных состояний элемента. Так вы увидите все состояния элементов без необходимости выискивать их в файле таблицы стилей.

Отключаем родную таблицу стилей и начинаем с нуля

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

define('WOOCOMMERCE_USE_CSS', false);

Самый простой и быстрый способ создания всех классов — скопировать их из существующего оригинального файла WooCommerce CSS в новый, а затем внести там все необходимые правки и изменения.

Включаем поддержку WooCommerce в своей теме

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

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

add_theme_support( 'woocommerce' );

Редактируем шаблоны

Редактирование CSS в WooCommerce может отнять немало времени. Но есть способ сделать эту рутинную долгую работу не такой скучной.

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

В папке с темой создаем вложенную папку с названием " woocommerce ". Переходим в папку с плагином WooCommerce и открываем папку " templates ". Здесь много вложенных папок, в которых хранятся шаблоны, используемые в WooCommerce. К счастью, структура здесь сравнительно простая и визуально понятная. В новой папке " woocommerce " поместим все файлы шаблонов, скопированные из первоисточника, которые мы хотим отредактировать. Не забудьте сохранить ту же структуру папок, что и в первоисточнике. Не забудьте переименовать связанные папки, если вносите в названиях какие-то изменения. После редактирования всех необходимых файлов и папок сохраняем изменения в папке " woocommerce ".

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

К примеру, нам надо поменять код в разделе с заказанными товарами в WooCommerce.

Для начала определим нужный нам шаблон. Секция " My Orders " находится в " My Account ". Структура пути к файлу выглядит так:

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

Делаем вложенную папку " woocommerce ", а в ней — вторую вложенную с названием " myaccount ". Копируем туда файл my-orders.php .

У вас должен получиться путь:

/wp-content/themes/вашатема/woocommerce/myaccount/my-orders.php

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

WooCommerce и циклы

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

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

Создание шаблона происходит в несколько шагов:

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

Заключение

Теперь вы знаете основы работы с подключением и настройкой тем для торговой платформы WooCommerce на WordPress.

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

Источник:
rss