Як зробити каталог товарів на WordPress

45

Від автора: вітаю вас, друзі. У цій статті ми з вами спробуємо дізнатися, як зробити каталог товарів на WordPress і чи реально це зробити взагалі. Спробуємо?

З попередньої статті ви повинні пам’ятати, що для створення інтернет-магазину або каталогу товарів є безліч різних CMS, як платних, так і безкоштовних. Також є можливість зовсім не звертатися до спеціалізованих CMS і замість цього спробувати зробити каталог товарів або магазин на вашої улюбленої CMS. Моєю улюбленою є WordPress, тому спробуємо накидати каталог товарів саме на WordPress.

Відразу обмовлюся, що створювати закінчене рішення ми не будемо, оскільки це навряд чи поміститься в рамки окремої невеликої статті. Тут ми саме набросаєм рішення, яке ви можете використовувати і розвивати далі. Якщо ж вас зацікавить тема створення інтернет-магазину на WordPress, тоді ви завжди можете подивитися наш невеликий курс Створення інтернет-магазину на CMS WordPress.

Отже, нам потрібен встановлений WordPress. Я встановив останню на сьогодні версію WordPress 4.6.1. Також нам знадобиться відповідний плагін, я використовую плагін WP Shop.

Встановимо плагін, це можна зробити в меню додавання плагінів в адмінці. Оскільки моя мета саме каталог товарів, а не інтернет-магазин, тому додаткових плагінів я встановлювати не буду. Перший же знайдений плагін за запитом wp shop — наш:

Встановлюємо і активуємо його. Тепер настав час додати товари. По суті, нам необхідно додати звичайні записи, які і будуть товарами. Крім цього, таким записам необхідно встановити ціну, оскільки це все ж товар. Додамо кілька записів.

Зверніть увагу на довільне поле cost_1 — це ніщо інше, як ціна товару. Також всіх товарах, які ми захочемо виводити на головній сторінці нашого каталогу, необхідно додати однакові мітки, наприклад, home. Таким же чином додамо ще кілька товарів.

Тепер поглянемо на головну сторінку сайту, де за замовчуванням у нас виводяться останні записи. Ну а оскільки товар у нас є записом, то там повинні виводитися щойно додані товари.

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

Ось тут нам і знадобиться мітка home (або інша), яку ми давали кожному товару. По цій мітці ми виведемо на головній сторінці каталог товарів. Зробити це простіше простого. Створимо нову сторінку і вкажемо для неї вибраний ярлик home (або інший, якщо ви вказували іншу мітку для товарів).

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

Ну і тепер справа залишилася за малим, нам необхідно вказати плагіну, що на головній сторінці ми хочемо бачити вітрину товарів. Зробити це можна за допомогою спеціального шорткода, який пропонує нам плагін WP Shop: [vitrina home 3 500 2 100]. Розшифровку шорткода ви можете знайти на сторінці документації до директорії. Ключовим тут є назва шорткода vitrina і мітка home, за якою будуть обрані товари. Цифри відповідають за кількість колонок, висоту блоку товару, кількість рядків і довжину опису товару відповідно.

Додамо цей шорткод на створену раніше сторінку. Тепер подивимося зміни на головній сторінці.

Супер, товари виводяться на сторінці. Зрозуміло, що страждає трохи дизайн, але це ми без проблем зможемо поправити при наявності знань в області верстки. Зробити це можна переважно через файл стилів теми, в окремих випадках — через файли модуля, в яких можливо доведеться покопатися. Зокрема, зараз нам необхідно все ж прибрати кнопку додавання товару в корзину поле вибору кол-ва товару.

Як це зробити? Через консоль ми можемо побачити, що ця кнопка знаходиться в комірці таблиці з класом wpshop_button:

Йдемо в плагін та шукаємо всі файли, де зустрічається в коді даний клас. Найпростіше це зробити через пошук файлів. Наприклад, в редакторі Sublime Text комбінація клавіш Ctrl + Shift + F включає пошук файлів. Нам залишається вказати рядок для пошуку та шлях до папки з файлами.

З результатів знайденого ми бачимо, що шуканий елемент знаходиться у файлі wp-shop-original\views\good.widget.inc.php. Йдемо туди і пробуємо просто видалити непотрібні нам дві клітинки таблиці (з кнопкою додати в кошик і полем кол-ва товару).

Перевіряємо результат. У нас все вийшло.

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

На цьому у мене все. Якщо ви хочете спробувати написати власну CMS для каталогу товарів, тоді рекомендую познайомитися з курсом Створення каталогу товарів. Удачі!