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

Поделиться записью:
Агентство Romapad
Агентство Romapad
Работаем с 2009 года. Реализовано более 400 проектов. Слаженная команда профессионалов. Создание и администрирование сайтов. Техническая поддержка. Помощь новичкам.
Оставьте комментарий

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

Подпишитесь на рассылку новостей
Отправляя заявку, вы даете согласие на обработку персональных данных
Комментарии к публикациям

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

Прокрутить наверх

Оставьте Ваши контакты, и мы с Вами свяжемся

Отправляя заявку, вы даете согласие на обработку персональных данных

Заявка отправлена!
Ожидайте звонка менеджера.

Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed 

Join our newsletter and get 20% discount
Promotion nulla vitae elit libero a pharetra augue