html Як створити дочірню тему для WooCommerce Як створити дочірню тему для WooCommerce

Припустімо, у вас є магазин WooCommerce, який працює.

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

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

У цій статті ми розглянемо, як ви можете стилізувати свій магазин WooCommerce за допомогою тем. Потім ми покажемо вам, як створити власну дочірню тему за п’ять кроків. Розпочнемо!

Швидкий огляд тем WooCommerce

З запуском плагіна WooCommerce у 2011 році, WordPress став найпопулярнішою електронною комерційною платформою. Наразі WooCommerce використовується для підтримки 25% усіх онлайн-магазинів, що робить його на 6% популярнішим за найближчого конкурента.

Один з елементів, який зробив WooCommerce таким успішним, це те, наскільки легко створити унікальний магазин з мінімальними зусиллями. Однак це саме по собі не пояснює популярність платформи.

Ще одним важливим фактором успіху WooCommerce є майже необмежені можливості налаштування, які він пропонує. Поєднуючи з правильною темою, ви отримуєте доступ до значної гнучкості дизайну.

WooCommerce сумісний майже з усіма темами WordPress. Однак, більшість з них не буде оптимізована для роботи з унікальними можливостями плагіна.

На щастя, тема Storefront є відмінним варіантом. Це офіційна тема WooCommerce, створена спеціально для інтеграції з плагіном. Вона виглядає переконливо прямо з коробки, з простим та чистим дизайном, який акцентує увагу на ваших продуктах:

Цей мінімалістичний дизайн також робить Storefront ідеальною базою для кастомізації. Це місце, де стають у пригоді дочірні теми, на які ми подивимося далі.

Чому вам може знадобитися створити дочірню тему WooCommerce

Якщо ви багато часу провели, читаючи про WordPress, то, ймовірно, ви вже зустрічали дочірні теми.

Скорочено, дочірня тема починає своє життя як копія іншої теми, яка відома як ‘батьківська тема’. Потім ви можете вносити зміни в дочірню тему і тестувати їх, не редагуючи безпосередньо батьківську тему. Це важливо, оскільки зміна оригінальної теми може призвести до незворотних помилок і навіть пошкоджень вашого вебсайту.

Ви можете створити дочірню тему, оскільки хочете використовувати іншу тему як основу, замість того, щоб створювати нову тему з нуля. Або ж ви можете хотіти внести лише деякі незначні зміни в брендинг теми або її загальну естетику. Небо справді є межею, залежно від того, скільки часу ви готові приділити проекту.

Щодо WooCommerce, більшість дочірніх тем базуються на Storefront:

Ви можете завантажити кілька варіантів дочірніх тем з офіційного магазину WooCommerce або з інших сайтів, як-от ThemeForest. Однак можливо, що жодна з існуючих дочірніх тем не відповідає вашим потребам, або ви просто хочете створити унікальний вигляд. Більше того, ви можете не хотіти витрачати гроші на преміум тему, якщо відчуваєте, що можете зробити краще самостійно.

У публікації на офіційному блозі WooCommerce, розробники плагіна обговорюють найпоширенішу мотивацію використання дочірньої теми для вашого онлайн-магазину:

«Мета наших власних дочірніх тем Storefront полягає у створенні ідеального досвіду магазину для вашої ніші. Після встановлення Galleria, не змінюючи жодних налаштувань, ви одразу отримуєте магазин, придатний для продажу товарів високої моди. З ProShop, ви можете швидко налаштувати стильний спортивний магазин.»

Фактичний процес створення дочірньої теми є однаковим, чи робите ви її спеціально для WooCommerce, чи для більш загального сайту WordPress. Однак, вам потрібно буде враховувати мету вашого магазину, коли ви налаштовуєте вашу дочірню тему. Адже сайт електронної комерції вимагає іншої філософії дизайну, ніж блог. Давайте подивимося, як цей процес виглядає на практиці!

Як створити дочірню тему WooCommerce (у 5 кроках)

Зараз ми покажемо вам, як створити дочірню тему WooCommerce. У цьому прикладі ми створимо базову тему, яка використовує Storefront як батьківську, хоча ви можете використовувати будь-яку тему як основу.

Ми покажемо вам, як працює процес, починаючи з нуля. Однак, якщо ви хочете пропустити декілька цих кроків і відразу перейти до налаштування вашого сайту, ви також можете завантажити та встановити зразок дочірньої теми Storefront.

Нарешті, ми високо рекомендуємо створити резервну копію вашого сайту перед тим як продовжити. Це забезпечить безпеку вашого магазину, якщо щось піде не так під час процесу розробки.

Також розумно використовувати тимчасовий сайт для створення та налаштування вашої дочірньої теми. Після того, як ви вжили цих заходів безпеки, можете переходити до першого кроку!

Крок 1: Створіть папку для Вашої дочірньої теми WooCommerce

Перше, що вам потрібно зробити, це створити папку, яка міститиме вашу тему. Якщо ви додаєте дочірню тему безпосередньо на існуючий сайт, найкращий спосіб зробити це — через SFTP. Ви можете зробити це, використовуючи безкоштовну програму, як FileZilla.

Як тільки програма запрацює, увійдіть на свій сайт за допомогою ваших хостингових облікових даних. Потім вам потрібно перейти до папки wp-content/themes/. Ось де встановлені теми вашого сайту.

Все, що вам потрібно зробити, це створити нову папку в цій:

При створенні дочірньої теми краще дати їй назву, яка відображатиме батьківську. Наприклад, ми створюємо дочірню тему для Storefront, тому назвемо нашу папку “storefront-child”.

Перше, що вам потрібно створити та розмістити в цій папці, – це простий текстовий файл під назвою functions.php. Це важливий основний файл, який допомагає визначати, як ваш сайт виглядає та функціонує. Однак, більшість дочірні теми можуть використовувати функції, які містяться в файлі батьківської теми, і їм не потрібен власний.

З цієї причини цей файл можна наразі залишити порожнім. Просто створіть текстовий файл з назвою functions.php, і збережіть його у папці вашої дочірньої теми:

Ваша тема тепер майже готова до активації та використання. Однак спочатку їй потрібен буде стилевий файл.

Крок 2: Створіть таблицю стилів вашої дочірньої теми

Наступний файл, який вам потрібно створити, це каскадна таблиця стилів (CSS) вашої теми. Цей файл визначає стилі, які будуть застосовані до сторінок та контенту вашого сайту. Іншими словами, він дозволяє вам вказати вигляд окремих елементів на вашому вебсайті. Коли люди говорять про оновлення стилів, зазвичай це означає оновлення файлу CSS сайту.

Ваша батьківська тема вже міститиме таблицю стилів, але CSS дочірньої теми може бути використаний для перевизначення цих стилів. Ми розглянемо, як саме це працює пізніше.

Наразі вам потрібно лише створити файл CSS. Для цього знову додайте текстовий файл до папки wp-content/themes/storefront-child (або як ви назвали свою власну дочірню тему). Цей файл повинен мати назву style.css:

Вам також потрібно буде додати деяку базову інформацію. Скопіюйте та вставте наступний фрагмент у ваш новий файл style.css:

/*
Theme Name: Storefront Child
Theme URI: http://example.com/storefront-child/
Description: Мій перший дочірній тема WooCommerce
Author: Ваше Ім’я
Author URI: http://example.com
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Це деталі вашої теми, які ви побачите при перегляді її в каталозі тем або на вашій панелі керування WordPress. Будь ласка, замініть тестові дані на інформацію, більш конкретну для вас та вашої теми.

Крок 3: Налаштуйте Дочірню Тему для Наслідування Стилів Батьківської Теми

Як ми вже згадували, ви захочете, щоб ваша дочірня тема використовувала стилі батьківської теми за замовчуванням. Однак, вам також потрібно буде змінити стилі, які ви хочете змінити. Це може здатися складним — і CSS дійсно може бути хитрим — але в основі своїй дочірня тема завжди використовуватиме стилі батьківської теми, якщо тільки вона спеціально не містить заміни.

Наприклад, припустимо, що батьківська тема визначає стиль для заголовків h1 як 20px і червоний. Якщо файл style.css дочірньої теми не містить запису для заголовків H1, тоді стиль батьківської теми буде застосований до всього вмісту H1. Однак, якщо ми додамо стиль H1 до таблиці стилів дочірньої теми, який визначатиме ці заголовки як 18px і синій, це перевизначить вказівки батьківської теми.

Додавання цієї функціональності до вашої дочірньої теми насправді дуже просте. Все, що вам потрібно зробити, це посилатися на вашу батьківську тему у таблиці стилів вашої дочірньої теми.

Просто додайте наступний фрагмент після інформації, яку ви вставили раніше у файл style.css:

Шаблон: storefront

Цей код визначає батьківську тему і забезпечить використання стилів Storefront у вашій дочірній темі там, де ви не вказали заміну. Якщо ви створюєте дочірню тему для іншої теми, ви можете просто використати назву її папки.

Крок 4: Активація дочірньої теми

На цьому етапі ваша дочірня тема технічно готова. Вона налаштована для роботи на вашому сайті, тож активуємо її і подивимося, як вона виглядає.

Перейдіть до Appearance > Themes на вашій панелі керування WordPress, і ви побачите, що ваша дочірня тема вже встановлена:

Виберіть Активувати, щоб зробити його поточною темою вашого сайту. Тепер ви можете переглянути його з frontend:

Як ви можете бачити, зараз воно виглядає точно так само, як оригінальна тема. Поки активна дочірня тема, вона лише використовує стилі з вашої батьківської теми. Щоб налаштувати її зовнішній вигляд, вам потрібно проявити креативність у таблиці стилів вашої дочірньої теми.

Крок 5: Додавання стилів до дочірньої теми

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

Щоб продемонструвати, як редагування вашої дочірньої теми працює, ми змінимо вигляд кнопок нашого магазину. На даний момент вони сірі з чорним текстом, але ми могли б оновити цей стиль, щоб вони краще виділялися:

Відкрийте файл style.css вашої дочірньої теми знову та додайте наступний код після останнього */ в заголовку файлу:

a.button,
button.button,
input.button,
#review_form #submit {
background: pink;
color: red;
}

Якщо ви збережете файл і переглянете його на фронтенді зараз, ви побачите зміни в дії. Кнопки тепер будуть яскраво-рожеві з червоним текстом:

Ви також можете вносити зміни до файлів шаблону вашої теми. Вам просто потрібно скопіювати файл шаблону, який ви хочете змінити, наприклад header.php, із вашої батьківської теми до папки вашої дочірньої теми.

Однак, вам також потрібно внести деякі зміни, щоб вказати, яку функцію WordPress використовує для посилання на файли шаблонів. Це вимагає використання функції get_stylesheet_directory(); замість get_template_directory() для посилання на ваші шаблони.

Щоб дізнатися більше про те, як це зробити, ви можете прочитати про всі шаблони, які використовує WooCommerce.

На цьому етапі ви створили дочірню тему WooCommerce! Звичайно, ви можете зробити ще багато, але тепер ви знаєте, як почати експериментувати. Ми рекомендуємо вам підтягнути знання з CSS, щоб максимально використовувати можливості стилізації!

Створіть дочірню тему WooCommerce

WooCommerce полегшує створення інтернет-магазину, і ви навіть можете змінити його зовнішній вигляд за допомогою теми Storefront або однієї з багатьох кастомних тем.

Однак, вам не доводиться покладатися на креативність інших. Створення власної дочірньої теми WooCommerce не таке складне, як може здатися, і це дає вам майже повний контроль над зовнішнім виглядом та функціональністю вашого магазину.

Успішних продажів!