Введение в создание WooCommerce-тем для WordPress

Введение в создание WooCommerce-тем для WordPress

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

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

У вас установлены WordPress и WooCommerce.

Вы знакомы с созданием тем WordPress и использованием HTML и CSS.

Вы использовали инструменты разработчика Chrome или аналогичные инструменты для веб-разработки, такие как Firebug.

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее

Настройка плагина WooCommerce CSS

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

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

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

Вы можете отключить стили по умолчанию и начать с нуля.

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

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

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

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

Просматриваю сайт и нахожу стили, которые мне нужно изменить.

Далее я использую инструменты разработчика Chrome (или аналогичный инструменты) для идентификации классов и вношу изменения в браузер, чтобы убедиться, что понимаю, как это будет выглядеть. Обычно это делается щелчком правой кнопкой мыши на странице и выбором «инспектировать элемент» в раскрывающемся списке.

Затем я копирую CSS-код из инструментов разработчика Chrome в CSS -файл моей темы.

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

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

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

Введение в создание WooCommerce-тем для WordPress

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

Введение в создание WooCommerce-тем для WordPress

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

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

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее
define('WOOCOMMERCE_USE_CSS', false);

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

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

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

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

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

add_theme_support( 'woocommerce' );

Немного углубимся: редактирование шаблонов

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

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

В каталоге темы создайте новую папку под названием «woocommerce».

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

Во вновь созданной папке «woocommerce» скопируйте файл шаблона, который вы хотите отредактировать. Не забудьте сохранить структуру каталогов. Если шаблон, который вы хотите изменить, находится внутри подпапки, не забудьте создать эту подпапку в каталоге темы.

Отредактируйте файл из папки «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

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

Это самая простая интеграция и создание пользовательского шаблона 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 eCommerce в свои темы WordPress. Навыки, описанные в этой статье, помогут вам в большинстве ситуаций в WooCommerce. Если вам нужна более совершенная или гибкая интеграция темы, следующим шагом будет изучение различных хуков, фильтров и условных операторов, доступных для использования с WooCommerce.

Автор: Joe Clifton

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Интернет-магазин на WooCommerce

Создание магазина с уникальным шаблоном на CMS WooCommerce

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree