Автор: Stasyuk Eugene 78 Мітки: 22.05.2022

Нещодавно надійшов запит зробити бюджетний інтернет-магазин з адмін панеллю. Звісно, у цьому питанні я вирішив використовувати WordPress спільно з Woocommerce. Однією з запропонованих тем плагіна електронної комерції магазину є Storefront. Безкоштовна версія, як і очікувалося, не пропонує багато налаштувань. Проте вийшло хоч щось схоже на сучасний інтернет-магазин. Ось результат:

storefront

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

storefront

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

Як підключити дочірню тему?

1) Щоб створити дочірню тему, нам потрібно зайти в папку з темами: wp-content/themes.

Тут створюємо папку з назвою нашої теми та з приставкою child:
storefront-child

Насправді папку можна назвати як завгодно. Але для зручності використання краще робити так.

2) Далі заходимо до папки та створюємо обов’язковий файл style.css. У самому файлі нам потрібно додати коментарі. Для того щоб тема запрацювала, нам достатньо два поля:

    • Theme Name. (обов’язково) Назва дочірньої теми.
    • Template. (обов’язково) Назва папки батьківської теми, регістрозалежне.

style-css

3) Після цього заходимо до адмін-панелі. У меню вибираємо Зовнішній вигляд -> Теми. У запропонованому списку тим вибираємо нашу дочірню. Готово! Тепер ми можемо працювати з нею.

админка

Як працювати з дочірньою темою?

Працювати із дочірньою темою досить просто. Достатньо того, що ви берете файл шаблону з оригінальної теми, перекидаєте до себе в дочірню та вносите до неї зміни. Таким чином WordPress замість існуючого файлу Storefront буде використовувати шаблон в Storefront-child.

Що ж до файлу function.php, то WordPress не замінює код оригіналу на наш код, а лише доповнює його.

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

  • header.php і footer.php, в яких я видалив все зайве.
  • Папка assets в якій була папка css з файлом style.css . Так склалося, що мені зручніше стилі зберігати в окремій папці, а не правити основний файл style.css. Тут був основний пласт коду, яким я поставив зовнішній вигляд сайту.
  • Файл functions.php – тут я підключив файл стилів, а також переписав функцію, яка додає інформацію до підвалу без використання напису storefront:

Вийшло приблизно наступне:
child-ready

child-ready

Інші статті

Спливаюче вікно на сайті (попап, модальне вікно) pop-up window

Спливаюче вікно на сайті (попап, модальне вікно)

Спливаюче вікно на сайті (попап, модальне вікно)

Коли я тільки освоював ази розробки, спливаюче вікно я робив вручну. Так, так – замість того, щоб знайти якесь готове рішення, я займався цією невдячною справою 🤪. Мені здавалося, що особливо нічого складного в цьому немає. Але, тільки через якийсь час роботи над цим питанням, я почав усвідомлювати, що зробити це не так вже й […]

Хостинг Cloudabove: як програмно очистити кеш на сервері.

Хостинг Cloudabove: як програмно очистити кеш на сервері.

Хостинг Cloudabove: як програмно очистити кеш на сервері.

Cloudabove має можливість прискорити сайт шляхом кешування на сервері. За замовчуванням цей кеш очищається кожні 15 хвилин. Це досить вагомо прискорює сайт, але при цьому впливає на відображення контенту. Наприклад, у моєму випадку опублікований користувачем відгук на товар з’являвся тільки через 15 хвилин. Очистити кеш досить просто. В основі цього лежить GET запит на https://scout.cloudabove.com/api/cache/purge. […]