Фильтр по произвольным полям на Wordpress

Фильтр и поиск записей по произвольным полям на WordPress

Нередко на WordPress создают сайты в виде каталога товаров. И как правило, для больших каталогов требуется продвинутый фильтр товаров или поиск по произвольным полям - параметрам. Именно такой поиск и фильтр на WordPress нам пришлось разрабатывать. Посмотреть действующий пример можно в каталоге мобильных устройств (вскоре будет ссылка). И вот как мы это сделали...

Закажите разработку фильтра для сайта

Разработаем фильтр и поиск по произвольным полям специально для Вашего сайта. Оформим форму в соответствии с дизайном сайта. Сверстаем страницу с результатами поиска.

от 4 900 рублей

Заказать фильтр

Принцип поиска и фильтра записей в WordPress

Дан был сайт, где товары (в данном случае мотоциклы) добавлялись в виде стандартных WordPress записей c произвольными полями. Для работы с произвольными полями был установлен плагин Types. Произвольные поля отвечали за дополнительные параметры товара, по которым в дальнейшем подразумевался фильтр и поиск.

Также товары группировались в рубрики, название которых были в виде наименования производителей.

WordPress Фильтр товаров по произвольным полям

HTML и PHP код - форма фильтра

Далее была доработана HTML форма поиска и фильтра WordPress записей. А именно, был создан файл moto_filtr_form.php и наполнен следующим кодом:

<form name="search" role="search" action="/" method="get">
<ul>

<li><label>Цена</label><div class="input"><input placeholder="От:" class="price_input" type="text" name="price1" value="" /> <input placeholder="До:" class="price_input" type="text" name="price2" value="" /></div></li>

<li><label>Модель</label><div class="input"><input type="text" name="s" value="" /></div></li>

<li><label>Марка</label><div class="input"><select name="mark">
<option selected value="">Все марки</option>
<?php
$categories = get_categories();
if ($categories) {
foreach ($categories as $category) {
$option = '<option value="'.$category->category_nicename.'">';
$option .= $category->cat_name;
$option .= ' ('.$category->category_count.')';
$option .= '</option>';
echo $option;
}
}
?>
</select></div>
</li>

<li><label>Тип</label><div class="input"><select name="type_moto">
<option selected value="">Все</option>
<?php
$type_moto_key = 'wpcf-type_moto';
$type_moto_counties = $wpdb->get_col($wpdb->prepare("SELECT DISTINCT meta_value FROM $wpdb->postmeta WHERE meta_key = %s ORDER BY meta_value ASC", $type_moto_key) );
if ($type_moto_counties) {
foreach ($type_moto_counties as $type_moto) {
echo "<option value=\"" . $type_moto . "\">" . $type_moto . "</option>";
}
}
?>
</select></div>
</li>

<li><label>Год выпуска</label><div class="input">
<select class="price_input" name="year_moto_ot">
<option selected value="">От:</option>
<OPTION value="2012" >2012</OPTION>
<OPTION value="2011" >2011</OPTION>
<OPTION value="2010" >2010</OPTION>
<OPTION value="2009" >2009</OPTION>
<OPTION value="2008" >2008</OPTION>
<OPTION value="2007" >2007</OPTION>
<OPTION value="2006" >2006</OPTION>
<OPTION value="2005" >2005</OPTION>
<OPTION value="2004" >2004</OPTION>
<OPTION value="2003" >2003</OPTION>
<OPTION value="2002" >2002</OPTION>
<OPTION value="2001" >2001</OPTION>
<OPTION value="2000" >2000</OPTION>
<OPTION value="1999" >1999</OPTION>
<OPTION value="1998" >1998</OPTION>
<OPTION value="1997" >1997</OPTION>
<OPTION value="1996" >1996</OPTION>
<OPTION value="1995" >1995</OPTION>
<OPTION value="1994" >1994</OPTION>
<OPTION value="1993" >1993</OPTION>
<OPTION value="1992" >1992</OPTION>
<OPTION value="1991" >1991</OPTION>
<OPTION value="1990" >1990</OPTION>
<OPTION value="1989" >1989</OPTION>
<OPTION value="1988" >1988</OPTION>
<OPTION value="1987" >1987</OPTION>
<OPTION value="1986" >1986</OPTION>
<OPTION value="1985" >1985</OPTION>
<OPTION value="1984" >1984</OPTION>
<OPTION value="1983" >1983</OPTION>
<OPTION value="1982" >1982</OPTION>
<OPTION value="1981" >1981</OPTION>
<OPTION value="1980" >1980</OPTION>
<OPTION value="1979" >1979</OPTION>
<OPTION value="1978" >1978</OPTION>
<OPTION value="1977" >1977</OPTION>
<OPTION value="1976" >1976</OPTION>
<OPTION value="1975" >1975</OPTION>
<OPTION value="1974" >1974</OPTION>
<OPTION value="1973" >1973</OPTION>
<OPTION value="1972" >1972</OPTION>
<OPTION value="1971" >1971</OPTION>
<OPTION value="1970" >1970</OPTION>
</select>

<select class="price_input" name="year_moto_do">
<option selected value="">До:</option>
<OPTION value="2012" >2012</OPTION>
<OPTION value="2011" >2011</OPTION>
<OPTION value="2010" >2010</OPTION>
<OPTION value="2009" >2009</OPTION>
<OPTION value="2008" >2008</OPTION>
<OPTION value="2007" >2007</OPTION>
<OPTION value="2006" >2006</OPTION>
<OPTION value="2005" >2005</OPTION>
<OPTION value="2004" >2004</OPTION>
<OPTION value="2003" >2003</OPTION>
<OPTION value="2002" >2002</OPTION>
<OPTION value="2001" >2001</OPTION>
<OPTION value="2000" >2000</OPTION>
<OPTION value="1999" >1999</OPTION>
<OPTION value="1998" >1998</OPTION>
<OPTION value="1997" >1997</OPTION>
<OPTION value="1996" >1996</OPTION>
<OPTION value="1995" >1995</OPTION>
<OPTION value="1994" >1994</OPTION>
<OPTION value="1993" >1993</OPTION>
<OPTION value="1992" >1992</OPTION>
<OPTION value="1991" >1991</OPTION>
<OPTION value="1990" >1990</OPTION>
<OPTION value="1989" >1989</OPTION>
<OPTION value="1988" >1988</OPTION>
<OPTION value="1987" >1987</OPTION>
<OPTION value="1986" >1986</OPTION>
<OPTION value="1985" >1985</OPTION>
<OPTION value="1984" >1984</OPTION>
<OPTION value="1983" >1983</OPTION>
<OPTION value="1982" >1982</OPTION>
<OPTION value="1981" >1981</OPTION>
<OPTION value="1980" >1980</OPTION>
<OPTION value="1979" >1979</OPTION>
<OPTION value="1978" >1978</OPTION>
<OPTION value="1977" >1977</OPTION>
<OPTION value="1976" >1976</OPTION>
<OPTION value="1975" >1975</OPTION>
<OPTION value="1974" >1974</OPTION>
<OPTION value="1973" >1973</OPTION>
<OPTION value="1972" >1972</OPTION>
<OPTION value="1971" >1971</OPTION>
<OPTION value="1970" >1970</OPTION>
</select>
</div></li>

<li><label>Пробег</label><div class="input"><select name="km_moto">
<option selected value="">До:</option>
<option value="5000">5000 км</option>
<option value="10000">10000 км</option>
<option value="15000">15000 км</option>
<option value="20000">20000 км</option>
<option value="25000">25000 км</option>
<option value="30000">30000 км</option>
<option value="50000">50000 км</option>
<option value="75000">75000 км</option>
<option value="100000">100000 км</option>
<option value="150000">150000 км</option>
</select></div>
</li>

<li><label>Объем</label><div class="input"><select class="price_input" name="v_moto_ot">
<option selected value="">От:</option>
<option value="50">50</option>
<option value="80">80</option>
<option value="150">150</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="750">750</option>
<option value="1000">1000</option>
<option value="1250">1250</option>
<option value="1500">1500</option>
</select>
<select class="price_input" name="v_moto_do">
<option selected value="">До:</option>
<option value="50">50</option>
<option value="80">80</option>
<option value="150">150</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="750">750</option>
<option value="1000">1000</option>
<option value="1250">1250</option>
<option value="1500">1500</option>
</select></div>
</li>

<li style="text-align: right; margin: 15px 0;"><input class="red button" type="submit" value="Найти" /></li>

</ul>
</form>

Эта форма вызывалась в сайдбаре (sidebar.php) с помощью php кода:

<?php get_template_part( 'moto_filtr_form' ); ?>

Вот что получилось

Форма поиска по произвольным полям WordPress

HTML форма позволяет выставить необходимые параметры поиска товаров на WordPress сайте и отправляет запрос методом GET (запрос формируется путем изменения URL страницы).

Фильтр WordPress записей по произвольным полям

После этого, мы добавили фильтр товаров по параметрам, которые формировались запросом HTML формы. Фильтр представляет из себя следующий код, которые мы добавили в файл filtr.php, и затем вызвали этот файл в шаблоне index.php. Содержимое файла filtr.php:

<?php if (!empty($_GET["mark"])) { $mark = $_GET['mark']; } ?>
<?php if (!empty($_GET["price1"])) { $price1 = $_GET['price1']; } else { $price1 = '0';} ?>
<?php if (!empty($_GET["price2"])) { $price2 = $_GET['price2']; } else { $price2 = '999999999';} ?>

<?php if (!empty($_GET["model"])) { $model = $_GET['model']; } ?>
<?php if (!empty($_GET["type_moto"])) { $type_moto = $_GET['type_moto']; } ?>
<?php if (!empty($_GET["year_moto"])) { $year_moto = $_GET['year_moto']; } ?>
<?php if (!empty($_GET["km_moto"])) { $km_moto = $_GET['km_moto']; } ?>
<?php if (!empty($_GET["v3_moto"])) { $v3_moto = $_GET['v3_moto']; } ?>

<?php if (!empty($_GET["v_moto_ot"])) { $v_moto_ot = $_GET['v_moto_ot']; } else { $v_moto_ot = '0';} ?>
<?php if (!empty($_GET["v_moto_do"])) { $v_moto_do = $_GET['v_moto_do']; } else { $v_moto_do = '999999999';} ?>
<?php if (!empty($_GET["year_moto_ot"])) { $year_moto_ot = $_GET['year_moto_ot']; } else { $year_moto_ot = '0';} ?>
<?php if (!empty($_GET["year_moto_do"])) { $year_moto_do = $_GET['year_moto_do']; } else { $year_moto_do = '999999999';} ?>
<?php if (!empty($_GET["km_moto"])) { $km_moto = $_GET['km_moto']; } else { $km_moto = '999999999';} ?>

<?php

if ($price1 or $price2 or $mark or $model or $type_moto or $year_moto or $km_moto or $v3_moto or $v_moto_ot or $v_moto_do or $year_moto_ot or $year_moto_do or $s) {
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$args=array(
'category_name' => $mark,
'paged'=>$paged,
's'=>$s,
'meta_query' => array(
array(
'key' => 'product-price',
'value' => array( $price1, $price2 ),
'type' => 'numeric',
'compare' => 'BETWEEN'
),

array(
'key' => 'wpcf-type_moto',
'value' => $type_moto
),

array(
'key' => 'wpcf-year_moto',
'value' => array( $year_moto_ot, $year_moto_do ),
'type' => 'numeric',
'compare' => 'BETWEEN'
),

array(
'key' => 'wpcf-km_moto',
'value' => array( 0, $km_moto ),
'type' => 'numeric',
'compare' => 'BETWEEN'
),

array(
'key' => 'wpcf-v3_moto',
'value' => array( $v_moto_ot, $v_moto_do ),
'type' => 'numeric',
'compare' => 'BETWEEN'
),
)

);

query_posts($args);

} else {
echo '';
} ?>

Содержимое файла index.php:

<?php get_header(); ?>
<?php get_template_part( 'filtr'); ?>

<div class="content box">
<h1 class="center-title">Мотоциклы</h1>
<?php get_template_part( 'loop', 'table' ); ?>
</div>

<? wp_reset_query(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Не забудьте в файл index.php добавить  <? wp_reset_query(); ?> после вызова петли (loop) - это крайне необходимо.

Код в файле filtr.php работает следующим образом. Он получает значения параметров, которые были переданы HTML формой в URL, и на основе полученных данных формирует выдачу записей. Пояснять код более подробно нет смысла, т.к. тот кто решил реализовать  подобный поиск WordPress записей по произвольным полям, должен понимать с чем имеет дело, и должен обладать необходимыми знаниями. Подобный фильтр работает на основе функции <? query_posts($args); ?>. Вот так был создан поиск и фильтр WordPress записей по произвольным полям.