Добавляем поддержку 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

add_theme_support('woocommerce');

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

<?php woocommerce_content(); ?>

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

<?php
  /**
   * woocommerce_before_main_content hook
   *
   * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
   * @hooked woocommerce_breadcrumb - 20
   */
  do_action('woocommerce_before_main_content');
?>

  <?php while (have_posts()) : the_post(); ?>
    <?php woocommerce_get_template_part('content', 'single-product'); ?>
  <?php endwhile; ?>

<?php
  /**
   * woocommerce_after_main_content hook
   *
   * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
   */
  do_action('woocommerce_after_main_content');
?>

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

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

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

<?php get_template_part('templates/page', 'header'); ?>

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

add_filter('woocommerce_show_page_title', '__return_false');
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);

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

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

    files: ['{lib,templates}/**/*.php', '*.php'],

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

    files: ['{lib,templates,woocommerce}/**/*.php', '*.php'],

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