遷移無しページネーション

100ウェブ

ページ遷移しない投稿一覧のページネーションを、jQueryで手軽に実装する | WordPressカスタマイズ事例【10... 投稿一覧にページネーションは付きものです。 100ウェブ事例紹介でも、一覧ページにおける通常のメインループでのページネーションについては何度も書いています。参考ま...

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>

        .list-group > li:nth-child(5n+1) {
            border-top: 1px solid rgba(0,0,0,.125);
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
        }

        .list-group > li:nth-child(5n+0) {
            border-bottom-left-radius: .25rem;
            border-bottom-right-radius: .25rem;
        }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/alfrcr/paginathing/dist/paginathing.min.js"></script>

<script>
jQuery(function () {
  jQuery('.js-pagination').paginathing({ //親要素のclassを記述
    perPage: 5, //10件ずつ
    prevNext: true,
    firstLast: false,
    prevText: '＜',
    nextText: '＞',
    containerClass: 'side-pagination-container', //この辺のクラスは自由に設定
    ulClass: 'pnavi', //この辺のクラスは自由に設定
    activeClass: 'current', //この辺のクラスは自由に設定
  })
});
</script>

<section class="" id="top008">
	<div class="inner">
		<a id="news"></a>
		<div class="baloon century">News</div>
		<h3 class="cmnH3 fs36">ニュース</h3>

		<div class="container">
			<div class="row">

				<!-- 				<div class="col-lg-8 offset-lg-2"> -->
				<div class="">
					<!--             <h4>Paginate <code><li></code></h4> -->
					<div class="panel panel-primary">
						<div class="panel-heading">
							<!--                     <h6 class="panel-title">List of item.</h6> -->
						</div>
						<ul class="list-group js-pagination">

							<?php

							$args = array(
								'post_type' => 'news-item',
								'posts_per_page' => -1,
								'orderby' => 'publish_date',
								'order' => 'DESC',
							);
							$query = new WP_Query($args);

							while($query->have_posts()) {
								$query->the_post();

								echo '
                <dl>
                    <dt>'.get_the_date('Y.m').'<span>'.get_field('category').'</span></dt>
                    <dd><a href="'.get_field('url').'" target="_blank">'.get_the_title().'</a></dd>
                </dl>';
							}	

							?>

						</ul>
					</div>
				</div>
			</div>
		</div>

	</div>
</section>

遷移無しページネーション

関連記事