Делаем ajax пагинацию страниц на главной странице WordPress

В этом примере представлен код и решение, как я это осуществил на сайте VseSkupki.

Для начала ставим плагин "Search & Filter", и делаем ему такие настройки:

General

Display Results

Далее внедряем фильтр в нужное место на главной странице.

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".

В дополнение приведу стили для пагинации.

CSS

/*Пагинация*/
.wp-pagenavi {
	margin: 10px 0 0 0;
	display: flex;
	justify-content: center;}
.wp-pagenavi a, .wp-pagenavi span {
    text-decoration: none;
    border: 2px solid #a2000d;
    padding: 3px 13px;
    margin: 2px;
    border-radius: 5px;
	color: #000000;}