آموزش صفحه بندی صفحات وردپرس بدون افزونه

سلام خدمات کاربران عزیز سیترال وب

در این آموزش میخایم به شما یاد بدیم که چطور میشه بدون استفاده از افزونه برای صفحات وردپرس صفحه بندی ایجاد کنیم .

یک کد نویسی سبک و حتی بسیار پیشرفته تر از افزونه های موجود نظیر wp-page-navi و یا wp-page-number

در این آموزش حتی به شما یاد میدیم که چطور برای کوئری هایتون صفحه بندی بسازین . صفحه بندی query وردپرس توسط افزونه هایی که در بالا تر ذکر شد امکان پذیر نیست چرا که این افزونه ها قادر به تشخیص Query نیستند و نمیتونند تشخیص بدن که یک کوئری چه زمانی نیاز به صفحه بندی داره و یا اینکه تعداد صفحات رو نشون میدن ولی وقتی به عنوان مثال رو صفحه مد نظر کلیک میکنید همچنان محتویات صفحه اول بالا میاد .

در این آموزش چند خطی که بصورت کاملا تختصصی توسط سیترال وب ارائه شده به شما آموزش داده میشه که با چند خط کد چطور صفحه بندی برای سایت وردپرسیتون داشته باشین .

در گام اول میبایست محتویات زیر رو به function.php قالب مد نظرتون اضافه کنید .

توجه * اگر بعد از قرار دادن کد در فایل functions.php و ذخیره آن صفحه سفید شد نگران نباشید . با توجه به اینکه بعضی مرور گر های اعداد موجود در کد زیر رو فارسی اجرا میکنن ، شما تنها میبایست تمام اعداد موجود در فایل زیر رو با اعداد اگلیسی جایگزین کنید .

function custom_pagination($numpages = '', $pagerange = '', $paged='') {

if (empty($pagerange)) {
    $pagerange = 2;
}

/**
 * This first part of our function is a fallback
 * for custom pagination inside a regular loop that
 * uses the global $paged and global $wp_query variables.
 *
 * It's good because we can now override default pagination
 * in our theme, and use this function in default queries
 * and custom queries.
 */
global $paged;
if (empty($paged)) {
    $paged = 1;
}
if ($numpages == '') {
    global $wp_query;
    $numpages = $wp_query->max_num_pages;
    if(!$numpages) {
        $numpages = 1;
    }
}

/**
 * We construct the pagination arguments to enter into our paginate_links
 * function.
 */
$pagination_args = array(
    'base'            => get_pagenum_link(1) . '%_%',
    'format'          => 'page/%#%',
    'total'           => $numpages,
    'current'         => $paged,
    'show_all'        => False,
    'end_size'        => 1,
    'mid_size'        => $pagerange,
    'prev_next'       => True,
    'prev_text'       => __('« برگه قبلی'),
    'next_text'       => __('» برگه بعدی'),
    'type'            => 'plain',
    'add_args'        => false,
    'add_fragment'    => ''
);

$paginate_links = paginate_links($pagination_args);

if ($paginate_links) {
    echo "<div class='navigation'><ul>";
    echo "<li>" . $paginate_links . "</li> ";
    echo "</ul></div>";
}


}



function wpbeginner_numeric_posts_nav() {
 if( is_singular() )
 return;
 global $wp_query;
 /** Stop execution if there's only 2 page */
 if( $wp_query->max_num_pages <= 1 )
 return;
 $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
 $max = intval( $wp_query->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="navigation"><ul>' . "\n";
 /** Previous Post Link */
 if ( get_previous_posts_link() )
 printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
 /** Link to first page, plus ellipses if necessary */
 if ( ! in_array( 1, $links ) ) {
 $class = 1 == $paged ? ' class="active"' : '';
 printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
 if ( ! in_array( 2, $links ) )
 echo '<li>…</li>';
 }
 /** Link to current page, plus ۲ pages in either direction if necessary */
 sort( $links );
 foreach ( (array) $links as $link ) {
 $class = $paged == $link ? ' class="active"' : '';
 printf( '<li%s><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( $max, $links ) ) {
 if ( ! in_array( $max - 1, $links ) )
 echo '<li>…</li>' . "\n";
 $class = $paged == $max ? ' class="active"' : '';
 printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
 }
 /** Next Post Link */
 if ( get_next_posts_link() )
 printf( '<li>%s</li>' . "\n", get_next_posts_link() );
 echo '</ul></div>' . "\n";
}

* اگر این فایل رو ندارید ، خودتون در پوشه قالب مد نظرتون بسازیدش .

* دقت داشته باشین که کد های مذکور در بین دو تگ بصورت زیر قرار گرفته باشند .

<?php 



کد های مد نظر


?>

حال کافیست کد زیر را در صفحات مد نظر برای فایل archive.php قالبتون و سایر پست تایپ ها اضافه کنید .

<div class="pagenumber">
<?php wpbeginner_numeric_posts_nav(); ?>
</div>

و برای کوئری ها میبایست ابتدا از کد نویس مختص آن برای نمایش آرشیو پست ها یا پست تایپ های دلخواهتان استفاده کنید .

<?php 
if ( get_query_var('paged') ) { $paged = get_query_var('paged'); }
elseif ( get_query_var('page') ) { $paged = get_query_var('page'); }
else { $paged = 1; }
  $query_args = array(
	'post_status' => 'publish',
	'post_type' => 'post',
	'order' => 'descending',
	'orderby' => 'ID',
	'posts_per_page' => '6',
      'paged' => $paged
  );
  $the_query = new WP_Query( $query_args );
?>
<ul>
<?php if($the_query->have_posts()) :
while($the_query->have_posts()) : $the_query->the_post(); ?>
کد های مد نظر برای نمایش یک پست در کوئری ایجاد شده
<?php endwhile;endif;
wp_reset_query();
?>
</ul>

سپس برای نمایش صفحه بندی کد زیر رو در انتهای صفحه کوئری تولید شده قرار بدین .

<div class="pagenumber">
    <?php
      if (function_exists(custom_pagination)) {
        custom_pagination($the_query->max_num_pages,"",$paged);
      }
    ?>
</div>

تا اینجا کار تمام شده و شما یک صفحه بندی حرفه ای برای قالب وردپرسیتون دارید .

ولی صفحه بندیتون هیچ ظاهر خوشکلی نداره . درسته ؟

خب برای این کار کد های زیر رو به style.css قالبتون اضافه کنید .

/*--pagenumber--*/
.pagenumber {
width:100%;
text-align:center;
display:inline-block;
margin-top:10px;
margin-bottom:25px;
}
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
 color: #fff;
 text-decoration:none;
}
 
.navigation li {
 display: inline;
}
 
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
 background-color: #000000;
 border-radius: 10px;
 cursor: pointer;
 border:0px solid #ffffff;
 padding: 7px;
}
 
.navigation li a:hover,
.navigation li.active a {
 background-color: #0164C9
}



.navigation span ,
.navigation span:hover,
.navigation span.active ,
.navigation span.disabled {
 color: #fff;
 text-decoration:none;
}
 
.navigation span {
 display: inline;
}
 
.navigation span ,
.navigation span:hover,
.navigation span.active ,
.navigation span.disabled {
 background-color: #000000;
 border-radius: 10px;
 cursor: pointer;
 border:0px solid #ffffff;
 padding: 7px;
}
 
.navigation span:hover,
.navigation span.active {
 background-color: #0164C9
}

تمام شد . حالا شما یک صفحه بندی اختصاصی دارید . اگه یکم هم دانش css داشته باشین خیلی راحت میتونید یه ظاهر خیلی شیک در آخرین باکس بالا ایجاد کنید و ظاهر مد نظر خودتون پیاده کنید .

امیدوارم که بهره لازم رو از آموزش برده باشین .

تشکر