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

18

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

Стаття написана з деякими припущеннями з приводу вашого середовища розробки:

У вас встановлені WordPress і WooCommerce.

Ви знайомі з створенням тем WordPress і використанням HTML і CSS.

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

Налаштування плагіна 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:

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. Він буде виглядати приблизно так:

Замініть свій цикл на цикл WooCommerce:

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

Висновок

Тепер ви знаєте основи інтеграції платформи WooCommerce eCommerce в свої теми WordPress. Навички, описані в цій статті, допоможуть вам у більшості ситуацій в WooCommerce. Якщо вам потрібна більш досконала або гнучка інтеграція теми, наступним кроком буде вивчення різних хуков, фільтрів і умовних операторів, доступних для використання з WooCommerce.