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

В сегодняшнем материале приведем пример создания каталога товаров на Вордпресс при помощи плагина Page-list. Обращаем Ваше внимание на то, что данный каталог создавался для определенного проекта под конкретные требования с учетом структура сайта, дизайна и номенклатуры товаров для его дальнейшей внутренней SEO-оптимизации. Подробнее про внутреннюю SEO-оптимизацию сайта самостоятельно можно прочитать в этом материале http://labcopy.ru/analytics/seo-optimizaciya-sajta-svoimi-rukami.

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

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

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

[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' => '',

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

1
2
'show_meta_key_2' => '',
'show_meta_key_3' => '',

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

1
if ( $show_meta_key != '' ) {

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 template
if ($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 соответственно.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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 template
if ($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 template
if ($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 template
if ($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 стили для вывода произвольных полей

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

<div class="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-м участкам кода которые мы копировали друг под другом, и заменяем строки:

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

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

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

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

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

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

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

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

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

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