Привет друзья. Сегодня мы будем учиться делать каталог товаров на wordpress. Совсем недавно я написал серию статей посвященных созданию интернет магазина на wordpress, так вот задача создания каталога товаров на wordpress, это не совсем одно и тоже. Давайте подумаем в чем различия между этими двумя понятиями. Интернет магазин должен содержать в себе обязательный функционал по осуществлению покупок online, в то же время каталог товаров на wordpress, просто должен выводить список продаваемых товаров.
В принципе, если из интернет магазина удалить функционал позволяющий производить online продажи, то мы могли бы вплотную приблизиться к нашей задаче создания каталога товаров на wordpress. Но в то же время, если мы так и сделаем, это не будет идеальным решением. Есть намного более элегантный способ решить данную задачу. И именно об этом способе, дальше и пойдет речь.
Каталог товаров на wordpress.
Сейчас я расскажу немного о теории, как можно провернуть элегантный и легкий способ создания каталога товаров на wordpress.
Во главе данного способа, стоит плагин под названием: Page List.Советую сразу же установить плагин к себе на сайт. Вся гениальность плагина состоит в том, что он позволяет на отдельной странице выводить список дочерних страниц, в том числе если по колдовать с параметрами то можно добиться вывода миниатюр данных страниц, а также произвольные поля содержащие определенные характеристики товара, к примеру цену или цвет.Вот такого результата я добился за 10 минут:
Давайте теперь я расскажу как это сделать.Весь гениальный замысел состоит в том, что бы создать страницу под названием к примеру «Каталог товаров» , и создать для этой страницы дочерние страницы.О том как создать страницу на wordpress я уже рассказывал,единственное о том о чем я там забыл упомянуть, это создание дочерних страниц,давайте посмотрим как это сделать.
При создании страницы товара, выберите справа в выпадающем списке родительской ранее созданную страницу «Каталог товаров»
Как видите из рисунка, я создал три страницы и назвал их соответственно:HTC One X, Iphone 5 и Samsung galaxy s4. Как обычно добавил миниатюры.Так как плагин Page list не содержит никаких настроек, то он вызывается при помощи шорткодов wordpress. Теперь все что осталось сделать это добавить на главную страницу «Каталог товаров» шорткод:
[pagelist_ext show_content = "0" image_width="200" image_height="200"]
После сохранения странички Вы не увидите такой же результат как и у меня, потому что еще нужно заменить соответствующие CSS стили в файле wp-content/plugins/page-list/css/page-list.css для .page-list-ext .page-list-ext-item у меня они находятся в 27 строке:
width: 200px; height: 275px; display: inline-block; vertical-align: top; background: #fff; position: relative; padding: 10px; margin: 20px 12px 20px 0; border: 1px solid #E2E7E9; box-shadow: 0 0 3px 1px #E2E7E9;
После сохранения файла, можно посмотреть на результат.
Как вывести произвольные поля в каталоге товаров на wordpress?
Чуть выше я говорил о том, что выводить кроме миниатюры можно также произвольные поля. К примеру под миниатюрой можно вывести цену, а делается это вот как:
1)Для каждого товара нужно добавить произвольное поле.Для этого отредактируйте страницу с товаром, и пропишите в произвольное поле значение price:
Если у Вас нет такого поля, значит нужно нажать «Настройки экрана» и поставить галочку возле раздела «Произвольные поля».
2)Поменять шорткод, который вставляется на страницу «Каталог товаров» на:
[pagelist_ext show_content = "0" image_width="200" image_height="200" show_meta_key="price" meta_template="Цена: %meta%"]
Удачи всем, если будет что то не получаться, то не стесняйтесь и задавайте вопросы в комментариях.