Плагин Page-list для WordPress: создаем каталог товаров

Пошаговая инструкция: создаем каталог товаров на Вордпресс при помощи плагина Page-list, выводим дополнительные (2-е, 3-е и т.д.) произвольные поля show_meta_key, дорабатываем файл page-list.php и работаем с css стилями плагина.

В сегодняшнем материале приведем пример создания каталога товаров на Вордпресс при помощи плагина Page-list. Обращаем Ваше внимание на то, что данный каталог создавался для определенного проекта под конкретные требования с учетом структура сайта, дизайна и номенклатуры товаров для его дальнейшей внутренней SEO-оптимизации. Подробнее про внутреннюю SEO-оптимизацию сайта самостоятельно можно прочитать в этом материале.

Каталог товаров на Вордпресс

Какие шорткоды были задействованы

Данный шорткод был установлен на родительскую страницу на которой выводились дочерние страницы (карточки товаров) в точности как на изображении выше:

[pagelist_ext parent="17" show_content="0" show_meta_key="meta_key" show_meta_key_2="meta_key_2" show_meta_key_3="meta_key_3" image_width="200" image_height="200"]

За что отвечают переменные:

1
pagelist_ext parent="17"

– выводим ID родительской страницы.

1
show_content="0"

– скрываем вывод описания (анонса).

1
show_meta_key="meta_key"

– выводим 1-е произвольное поле (в нашем случае Цену).

1
show_meta_key_2="meta_key_2"

– выводим 2-е произвольное поле (в нашем случае Артикул).

1
show_meta_key_3="meta_key_3"

– выводим 3-е произвольное поле (в нашем случае Хит Продаж).

1
image_width="200" image_height="200"

– задаем размеры миниатюры.

По аналогии были прописаны шорткоды на всех остальных родительских страницах с которых требовалось вывести дочерние страницы.

Выводим дополнительные произвольные поля show_meta_key

В родном файле page-list.php вывод произвольного поля show_meta_key предусмотрен только один раз. Наша задача — вывести еще два произвольных поля.

Мы находим строку:

1
!function_exists('pagelist_unqprfx_ext_shortcode')){

в файле page-list.php (при помощи CTRL+F). Именно эта функция там одна, поэтому результат поиска появится сразу.

В данной конструкции находим строку:

1
'show_meta_key'=>'',

Прямо под данной строкой дописываем:

12
'show_meta_key_2'=>'','show_meta_key_3'=>'',

Далее, аналогично через CTRL+F в этом же файле находим строку (она тоже единственная в коде):

1
if($show_meta_key!=''){

Копируем весь участок кода:

12345678910111213
if($show_meta_key!=''){$post_meta= get_post_meta($page->ID,$show_meta_key,true);if(!empty($post_meta)){// hide empty$meta_pos=strpos($meta_template,'%meta%');// check if we have %meta% marker in templateif($meta_pos===false){// %meta% not found in template$meta_template_html=$meta_template.' '.$post_meta;$list_pages_html.='<div class="page-list-ext-meta">'.$meta_template_html.'</div>';}else{// %meta% found in template$meta_template_html=str_replace('%meta%',$post_meta,$meta_template);$list_pages_html.='<div class="page-list-ext-meta">'.$meta_template_html.'</div>';}}}

и дублируем (в нашем случае 2 раза) друг под другом, заменяя во втором и в третьем участках переменную $show_meta_key на $show_meta_key_1 и на $show_meta_key_2 соответственно.

В итоге у нас получилось вот так:

1234567891011121314151617181920212223242526272829303132333435363738394041
if($show_meta_key!=''){$post_meta= get_post_meta($page->ID,$show_meta_key,true);if(!empty($post_meta)){// hide empty$meta_pos=strpos($meta_template,'%meta%');// check if we have %meta% marker in templateif($meta_pos===false){// %meta% not found in template$meta_template_html=$meta_template.' '.$post_meta;$list_pages_html.='<div class="page-list-ext-meta">'.$meta_template_html.'</div>';}else{// %meta% found in template$meta_template_html=str_replace('%meta%',$post_meta,$meta_template);$list_pages_html.='<div class="page-list-ext-meta">'.$meta_template_html.'</div>';}}} if($show_meta_key_2!=''){$post_meta= get_post_meta($page->ID,$show_meta_key_2,true);if(!empty($post_meta)){// hide empty$meta_pos=strpos($meta_template,'%meta%');// check if we have %meta% marker in templateif($meta_pos===false){// %meta% not found in template$meta_template_html=$meta_template.' '.$post_meta;$list_pages_html.='<div class="page-list-ext-meta-vip">'.$meta_template_html.'</div>';}else{// %meta% found in template$meta_template_html=str_replace('%meta%',$post_meta,$meta_template);$list_pages_html.='<div class="page-list-ext-meta-vip">'.$meta_template_html.'</div>';}}} if($show_meta_key_3!=''){$post_meta= get_post_meta($page->ID,$show_meta_key_3,true);if(!empty($post_meta)){// hide empty$meta_pos=strpos($meta_template,'%meta%');// check if we have %meta% marker in templateif($meta_pos===false){// %meta% not found in template$meta_template_html=$meta_template.' '.$post_meta;$list_pages_html.='<div class="page-list-ext-meta-dop">'.$meta_template_html.'</div>';}else{// %meta% found in template$meta_template_html=str_replace('%meta%',$post_meta,$meta_template);$list_pages_html.='<div class="page-list-ext-meta-dop">'.$meta_template_html.'</div>';}}}

Данными действиями мы задали команды для отображения 2-го и 3-го произвольных полей.

Редактируем CSS стили для вывода произвольных полей

Обратите внимание на вышеуказанный участок кода, а именно на строку:

<divclass="page-list-ext-meta"></div>

В стандартной версии плагина не предусмотрена возможность вывода дополнительных произвольных полей и не заданы стили. Для того чтобы реализовать поставленную перед нами задачу мы создаем дополнительные стили в файле page-list.css. Поле «Цена» мы не трогаем, так как это поле выводится по умолчанию.

Для отображения «Хиты Продаж»:

.page-list-ext .page-list-ext-meta-vip {position: absolute;top: -1px;left: -1px;background-color: #f22e2f;color: #fff;font-size: 0.6em;font-family: calibri2;line-height: 1.3em;text-align: center;font-weight: 500;text-shadow: 0 1px 2px #000000;z-index: 2;padding: 5px 5px;box-shadow: 0px 9px 10px -2px rgba(0, 0, 0, 0.57);}

Для отображения «Артикул»:

.page-list-ext .page-list-ext-meta-dop {position: absolute; top: -1px; right: -1px; background-color: #dd127b; color: #fff; font-size: 0.4em; font-family: calibri2; line-height: 1.3em; text-align: center; font-weight: 500; text-shadow: 0 1px 2px #000000; z-index: 2; padding: 5px 5px; box-shadow: 0px 9px 10px -2px rgba(0, 0, 0, 0.57);}

Теперь возвращаемся к файлу page-list.php, а именно к 3-м участкам кода которые мы копировали друг под другом, и заменяем строки:

<divclass="page-list-ext-meta"></div>

на следующие:

<divclass="page-list-ext-meta-vip"></div>

(меняется во втором участке).

<divclass="page-list-ext-meta-dop"></div>

(меняется в третьем участке).

Все, задача выполнена.

Используя данный мануал, Вы сможете реализовать каталог товаров на Вордпресс у себя на сайте при помощи плагина Page-list. Помните, что все наработки могут слететь если Вы обновите версию измененного плагина через панель администрирования, поэтому, призываем хранить актуальную резервную копию файлов.

Также, еще раз обращаем внимание на то, что css стили в Вашем случае могут не работать или отображаться не совсем корректно, так как все зависит от Вашей верстки.

Экспериментируйте под Ваши нужды. Спасибо за внимание!