Skip to content

Instantly share code, notes, and snippets.

@Ozzy182

Ozzy182/ajaxpagination.php

Last active April 3, 2023 05:41
Show Gist options
  • Save Ozzy182/53f22a8fec8250ca35c5ac707c389f2d to your computer and use it in GitHub Desktop.
Save Ozzy182/53f22a8fec8250ca35c5ac707c389f2d to your computer and use it in GitHub Desktop.
Download ZIP
Wp-pagination
Raw
ajaxpagination.php
<?php
function ajax_pagination($news, $paged, $count){
if($news->found_posts > $count) {
/** Stop execution if there's only 1 page */
if( $news->max_num_pages <= 1 )
return;
// $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$max = intval( $news->max_num_pages );
/** Add current page to the array */
if ( $paged >= 1 )
$links[] = $paged;
/** Add the pages around the current page to the array */
if ( $paged >= 3 ) {
$links[] = $paged - 1;
// $links[] = $paged - 2;
}
if ( ( $paged + 2 ) <= $max ) {
// $links[] = $paged + 2;
$links[] = $paged + 1;
}
echo '<div class="pagination"><ul class="pagination__list">' . "\n";
/** Previous Post Link */
if($paged != '1') echo '<li class="pagination__item -prev"><a class="" href="'.get_pagenum_link($paged - 1).'"></a></li>';
/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="pagination__item -active"' : '';
printf( '<li%s class="pagination__item"><a class="" href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
if ( ! in_array( 2, $links ) )
echo '<li class="pagination__item -dots">…</li>';
}
/** Link to current page, plus 2 pages in either direction if necessary */
sort( $links );
foreach ( (array) $links as $link ) {
$class = $paged == $link ? ' class="pagination__item -active"' : '';
printf( '<li%s class="pagination__item"><a class="" href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
}
/** Link to last page, plus ellipses if necessary */
if ( ! in_array( $max, $links ) ) {
if ( ! in_array( $max - 1, $links ) )
echo '<li class="pagination__item -dots">…</li>' . "\n";
$class = $paged == $max ? ' class="pagination__item -active"' : '';
printf( '<li%s class="pagination__item"><a class="" href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** Next Post Link */
if ($paged != $max ) echo '<li class="pagination__item -next"><a class="" href="'.get_pagenum_link($paged + 1).'"></a></li>';
echo '</ul></div>' . "\n";
}
}
ajax_pagination($news, $paged, $count);
Raw
loop.php
<ul class="news-list__list">
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_type' => 'post',
'paged' => $paged,
'posts_per_page' => 10,
'post_status' => 'publish',
);
$column = new WP_Query($args);
if($column->have_posts() ) {
while( $column->have_posts() ) {
$column->the_post(); ?>
<li class="news-list__item">
<a href="<?php the_permalink(); ?>" class="news-card news-card--bg-light-gray">
<img src="<?php echo get_the_post_thumbnail_url(); ?>" class="news-card__img" alt="<?php the_title(); ?>">
<div class="news-card__content">
<span class="news-card__time"><?php echo get_the_date('Y/m/d') . ' ' . get_the_time('h:i'); ?></span>
<p class="news-card__desc">
<?php echo mb_strimwidth( get_the_title(), 0, 113, '...' ); ?>
</p>
</div>
</a>
</li>
<?php
}
}
wp_reset_postdata();
?>
</ul>
<?php if( function_exists('pagination') ) { pagination($column->max_num_pages); } ?>
Raw
pagination.css
.pagination {
&__list {
display: flex;
justify-content: center;
}
&__item {
background-color: $c-black;
height: 30px;
min-width: 30px;
&:not(:last-of-type) {
margin-right: 10px;
}
a {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: $c-white;
height: 100%;
padding: 7px;
transition: all 0.25s ease;
&:hover {
opacity: 0.7;
}
}
&.-dots {
background-color: transparent;
min-width: auto;
a {
color: $c-black;
padding-left: 0;
padding-right: 0;
}
}
&.-active {
background-color: $c-white;
border: 1px solid $c-black;
a {
color: $c-black;
}
}
&.-prev,
&.-next {
a {
position: relative;
width: auto;
&::after {
content: "";
background-image: url(../img/pagination-arrow.svg);
background-repeat: no-repeat;
background-size: contain;
height: 6px;
width: 8px;
position: absolute;
}
}
}
&.-prev a {
padding: 5px 7px 5px 20px;
&:after {
left: 7px;
top: 50%;
transform: translateY(-50%);
}
}
&.-next a {
padding: 5px 20px 5px 7px;
&:after {
right: 7px;
top: 50%;
transform: translateY(-50%) rotate(180deg);
}
}
}
}
Raw
pagination.html
<div class="pagination">
<ul class="pagination__list">
<li class="pagination__item -prev"><a href="#">最初へ</a></li>
<!-- <li class="pagination__item"><a href="#">1</a></li>
<li class="pagination__item -dots"><a>・・・</a></li>
<li class="pagination__item"><a href="#">9</a></li>
<li class="pagination__item"><a href="#">10</a></li> -->
<li class="pagination__item -active"><a href="#">1</a></li>
<li class="pagination__item"><a href="#">2</a></li>
<li class="pagination__item"><a href="#">3</a></li>
<li class="pagination__item -dots"><a>・・・</a></li>
<li class="pagination__item"><a href="#">10</a></li>
<li class="pagination__item -next"><a href="#">最初へ</a></li>
</ul>
</div>
Raw
pagination.php
<?php
/**
*
* Pagination
*
*/
function mypagination($pages = '', $range = 1)
{
// $showitems = ($range * 2)+1;
$showitems = ($range) + 1;
global $paged;
if (empty($paged)) $paged = 1;
/** Add current page to the array */
if ($paged >= 1)
$links[] = $paged;
/** Add the pages around the current page to the array */
if ($paged >= 3) {
$links[] = $paged - 1;
$links[] = $paged - 2;
}
if (($paged + 2) <= $pages) {
$links[] = $paged + 2; // Upcoming
$links[] = $paged + 1; // Next
}
if ($pages == '') {
global $wp_query;
$pages = $wp_query->max_num_pages;
if (!$pages) {
$pages = 1;
}
}
if (1 != $pages) {
echo "<ul class=\"pagination__list\">";
// if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li class='mx-2'><a href='".get_pagenum_link(1)."'><i class=\"fa fa-angle-double-left\"></i></a></li>";
if ($paged > 1 && $showitems < $pages) echo '<li class="pagination__item -prev"><a href="' . get_pagenum_link($paged - 1) . '"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="20" viewBox="0 0 11 20"><g id="Group_1666" data-name="Group 1666" transform="translate(-481 -1483)"><path id="Path_33" data-name="Path 33" d="M0,0V2.684L8.048,10H11Z" transform="translate(492 1503) rotate(180)"></path><path id="Path_34" data-name="Path 34" d="M8.048,8.242,0,15.558v2.684l11-10Z" transform="translate(492 1501.242) rotate(180)"></path></g></svg></a></li>';
if (!in_array(1, $links)) {
$class = 1 == $paged ? ' class="-active"' : '';
printf('<li%s class="pagination__item"><a href="%s">%s</a></li>' . "\n", $class, esc_url(get_pagenum_link(1)), '1');
if (!in_array(2, $links))
echo '<li class="pagination__item--dots"><a>・・・</a></li>';
}
// for ($i=1; $i <= $pages; $i++)
// {
// if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
// {
// echo ($paged == $i)? "<li class=\"pagination__item -active\"><a>".$i."</a></li>":"<li class='pagination__item'><a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a></li>";
// }
// }
sort($links);
foreach ((array) $links as $link) {
$class = $paged == $link ? ' class="pagination__item -active"' : '';
printf('<li%s class="pagination__item"><a href="%s">%s</a></li>' . "\n", $class, esc_url(get_pagenum_link($link)), $link);
}
/** Link to last page, plus ellipses if necessary */
if (!in_array($pages, $links)) {
if (!in_array($pages - 1, $links))
echo '<li class="pagination__item--dots"><a>・・・</a></li>' . "\n";
$class = $paged == $pages ? ' class="-active"' : '';
printf('<li%s class="pagination__item"><a href="%s">%s</a></li>' . "\n", $class, esc_url(get_pagenum_link($pages)), $pages);
}
if ($paged < $pages && $showitems < $pages) echo '<li class="pagination__item -next"><a href="' . get_pagenum_link($paged + 1) . '"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="20" viewBox="0 0 11 20"><g id="Group_1668" data-name="Group 1668" transform="translate(-724 -1482)"><path id="Path_33" data-name="Path 33" d="M0,0V2.684L8.048,10H11Z" transform="translate(724 1482)"></path><path id="Path_34" data-name="Path 34" d="M8.048,8.242,0,15.558v2.684l11-10Z" transform="translate(724 1483.758)"></path></g></svg></a></li>';
// if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<li class='mx-2'><a class='block bg-primary text-white flex justify-center items-center p-2 rounded border-primary border h-10 w-10 hover:bg-white hover:text-primary no-underline' href='".get_pagenum_link($pages)."'><i class=\"fa fa-angle-double-right\"></i></a></li>";
echo "</div></ul>\n";
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment