Автор: Stasyuk Eugene 83 Мітки: 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

Інші статті

Як витягнути вміст svg із цього img? Варіант 2 svg

Як витягнути вміст svg із цього img? Варіант 2

Як витягнути вміст svg із цього img? Варіант 2

Якщо ми використовуємо php при розробці, щоб витягнути вміст svg із зображення, буде ще простого. Для цього нам достатньо мати шлях до картинки. У цьому випадку нам на допомогу приходить функція file_get_contents() . Детальніше про нее можна прочитати тут. Приклад використання цієї функції буде виглядати так: Тут потрібно звернути увагу на два моменти: Щоб содержимое […]

FAQ question

FAQ

FAQ

Як прибрати префікс “Категорія, Мітка…” зі сторінок архіву? Помістити фільтр у файл functions.php у папці з нашою темою Як прибрати scale зображень під час завантаження медіа? Помістити фільтр у файл functions.php у папці з нашою темою Як стилізувати скролбар (css)? Чому на сайті WordPress іншими мовами не працює пошук? Можливо варто звернути увагу на значення […]