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

Інші статті

Як перекласти тему WordPress іншою мовою перевод

Як перекласти тему WordPress іншою мовою

Як перекласти тему WordPress іншою мовою

Працюючи над створенням теми на WordPress, ми досить часто стикаємося з такими написами як “завантажити ще, автор, мітки” і т.д. Наприклад, як у моєму блозі: Добре, коли сайт однією мовою. Тоді з ними робити нічого і не потрібно. Але що робити, коли сайт мультимовний. Якщо замовнику в переспективі немає потреби у майбутньому змінювати їх назви, […]

Як витягти вміст svg в тезі img? svg

Як витягти вміст svg в тезі img?

Як витягти вміст svg в тезі img?

Графіка у форматі svg – досить зручний формат зображення, який широко використовується. Наприклад з svg за допомогою стилів css ми можемо змінювати його колір. І як ми знаємо – цю процедуру ми можемо зробити тільки якщо на сторінці є розмітка svg. А що робити, якщо таке зображення підключено до сторінки за допомогою тега img. У […]