Добавляем поддержку woocommerce для Sage


Дорогие читатели! Во-первых, всех с прошедшими новогодними праздниками. Счастья в Новом Году и успешной разработки!

Sage — это стартовая тема для WordPress. То есть вы берете ее за основу и создаете свои уникальные шаблоны. Sage выделяется на фоне других стартовых тем (таких как _s и прочие) следующими особенностями:

  1. Удобное развертывание с помощью git и npm. Буквально 4 команды в консоли — и вы получаете готовый к разработке шаблон.
  2. Удобная разработка благодаря встроенной поддержке sass, gulp, bootstrap и browser sync (можно добавить самостоятельно поддержку других требуемых компонентов). Gulp уже настроен на первоочередные задачи — линтинг скриптов, минификация скритов и стилей, организация всех стилей, скриптов, картинок и шрифтов в дистрибутив, а также для отображения всех текущих изменений в браузере без перезагрузки страницы.
  3. Уникальный DRY-подход к разработке (Don’t Repeat Yourself) выражающийся прежде всего в особой структуре шаблона и обертке base.php
  4. Продуманная работа в различных средах — development и production (опять же за счет gulp)
  5. Одно из важнейших преимуществ, на мой взгляд — возможность познакомиться и освоить самые передовые технологии разработки, а также стать частью вот этой тусовки: https://discourse.roots.io/ — здесь постоянно обсуждаются самые разные темы связанные с wordpress-разработкой — создание шаблонов, развертывание проектов, deployment, работа с версиями проекта, готовые среды разработки под wordpress

У Roots — компании, которая делает Sage, есть еще два интересных проекта:

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

Trellis — готовый LEMP-стак для быстрого развертывания полноценной среды разработки с помощью Vargant (это тоже особая тема, достойная отдельной статьи).

Я пока освоил разработку на Sage и в новом проекте приступил к внедрению Bedrock, и пока что всем очень доволен. Стало намного проще писать стили с помощью sass, намного проще отслеживать текущие изменения, держать код чистым и организованным, сохранять все версии проекта.

Недостатки:

  • несовместимость с некоторыми плагинами. Решается небольшими доработками кода.
  • несколько непривычный код и структура файлов и папок. Если вы воспитаны на типовой иерархии файлов в wordpress-шаблоне, то вам нужно будет несколько раз вчитаться в код, чтобы понять, что там и как.

О настройке самого шаблона лучше расскажу в отдельном посте, а пока перейду к текущему насущному вопросу:

Как подружить тему Sage с woocommerce?

Работаем с версией Sage 8.4.0 от 1 декабря 2015

  1. Объявляем поддержку woocommerce в файле /lib/setup.php

2. Как минимум, добавляем в корень шаблона два файла: archive-product.php и single-product.php со следующим содержимым:

3. Если требуется больший контроль над шаблонами woocommerce, то можно добавить в вышесозданные файлы содержимое из оригинальных аналогичных файлов woocommerce (находятся в папке plugins/woocommerce/templates/ вместо woocommerce_content(); Открываете, к примеру, файл single-product.php и копируете из него все между get_header(‘shop’) и do_action(‘woocommerce_sidebar’), затем вставляете в аналогичный файл внутри Sage, не забывая убедиться, что у вас нигде не появилось лишнего открывающего или закрывающего тега PHP. То есть получится примерно так:

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

Если вы заметите, что на некоторых страницах woocommerce html-код будет немного отличаться от остальных страниц. Вы можете обновить эти страницы, чтобы они использовали header по умолчанию с помощью следующих необязательных шагов:

  • добавьте следующий код в файлы single-product.php и archive-product.php:

  • добавьте в файл lib/extra.php код, которые уберет header, предоставляемый самим woocommerce:

(лично мне делать эти два шага не понадобилось, и без них все отлично работало).

 

Если вы создали внутри шаблона папку woocommerce с вашими версиями вукоммерсовских файлов, то нелишне будет внести некоторые правки в файл gulpfile.js, чтобы ваши изменения в этой папке подхватывались browser sync. Открываем файл gulpfile.js, находим там задачу «watch» и внутри нее следующую строку:

добавляем в список папок woocommerce (а может вам понадобится добавить туда и другие)

Материал частично взят отсюда: https://roots.io/using-woocommerce-with-sage/

Поделитесь полезной информацией с друзьями или подпишитесь на рассылку новых статей:

рассылка на почту всех новых статей сайта romapad.ru не чаще одного раза в неделю ->

Помогла статья или комментарий автора? Отблагодарите автора:


Про Роман Моренец

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

Оставьте комментарий

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