В этом примере представлен код и решение, как я это осуществил на сайте VseSkupki.
Для начала ставим плагин "Search & Filter", и делаем ему такие настройки:
Далее внедряем фильтр в нужное место на главной странице.
Filter
<div class="filter-onmain-option">
<? echo do_shortcode( '[searchandfilter id="148"]' ); ?>
</div>
Далее добавляем блок где будет выводится результат, получится вот так. Здесь же и наша пагинация.
Result
<div class="filter-onmain-option">
<? echo do_shortcode( '[searchandfilter id="148"]' ); ?>
</div>
<div id="upfilter" class="container-004" style="padding: 50px 0 0 0;">
<div class="container-004-content">
<div id="filter-result" class="container__filter-result">
<div class="container-004__items">
<?php
$args = array(
'post_type' => 'post',
);
$args['search_filter_id'] = 148;
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
?>
<div class="container-004__items-itm">
<div class="container-004__items-itm-logo">
<?$logo = get_field('logo');?>
<img class="container-004__items-itm-logo-img" src="<?=$logo;?>" alt="">
</div>
<div class="container-004__items-itm-info">
<div class="container-004__items-itm-info-name">
<div class="container-004__items-itm-info-nameblock">
<img class="container-004__items-itm-info-name-img" src="<?=$logo;?>" alt="">
<a class="container-004__items-itm-info-name-link" href="<?php echo get_the_permalink() ?>"><?php echo get_the_title() ?></a>
</div>
<div class="container-004__items-itm-info-name-feedback">
<a class="container-004__items-itm-info-name-feedback-link" href="">46 отзывов</a>
<p class="container-004__items-itm-info-name-feedback-star">★★★★★</p>
<p class="container-004__items-itm-info-name-feedback-rang">4.9</p>
</div>
</div>
<div class="container-004__items-itm-info-location">
<?php
$filial = get_field('filial');
foreach($filial as &$item) {
?>
<div class="container-004__items-itm-info-location-itm">
<div class="container-004__items-itm-info-location-itm-adress">
<p class="container-004__items-itm-info-location-itm-adress-txt"><?=$item['adress'];?></p>
</div>
<div class="container-004__items-itm-info-location-itm-metro">
<?php
foreach($item['metro'] as &$val) {
?>
<div class="container-004__items-itm-info-location-itm-metro-itm">
<img class="container-004__items-itm-info-location-itm-metro-img" src="/wp-content/themes/vseskupki/assets/images/metro.png" alt="">
<p class="container-004__items-itm-info-location-itm-metro-txt"><?=$val['station'];?></p>
</div>
<?php
}
?>
</div>
<div class="container-004__items-itm-info-location-itm-phone">
<?php
foreach($item['phone'] as &$val) {
?>
<div class="container-004__items-itm-info-location-itm-phone-itm">
<a class="container-004__items-itm-info-location-itm-phone-link" href="tel:<?=$val['phone_link'];?>"><?=$val['phone_number'];?></a>
</div>
<?php
}
?>
</div>
</div>
<?
}
?>
</div>
</div>
</div>
<?php
}
wp_reset_postdata();
}
?>
</div>
<div class="container-004__pagenation">
<?php wp_pagenavi( array( 'query' => $query ) ); ?>
</div>
</div>
</div>
</div>
Теперь добавим стили, в которых мы скроем условия фильтрации, конечно если они не нужны (просто есть возможность делать фильтрацию на главной странице) и придадим стилей результирующему блоку.
CSS часть кода
.filter-onmain-option {
display: none;}
.container__filter-result {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;}
.container-004__items {
width: 100%;}
.container-004__items-itm {
margin: 0 0 20px 0;
padding: 10px 20px;
display: flex;
justify-content: space-between;
border: 1px solid #c7c7c7;
border-radius: 10px;
transition: 0.5s;}
На этом все, вот так просто мы сделали ajax пагинацию на главной странице без перезагрузки с помощью плагина "Search & Filter".