وردپرس: افزودن صفحه بندی عددی به صفحات سایت بدون افزونه
کد تخفیف در جریان devme1397 %10 تا آخر پاییز97

صفحه بندی وب سایت یکی از مهم ترین قابلیت هایی است که به کاربران سایتتان این اجازه را خواهد تا به راحتی دیگر مطالب سایتتان را دنبال کنند. در حالت عادی، به صورت پیش فرض در وردپرس یک روش صفحه بندی بخش های مختلف سایت شما وجود دارد که به صورت لینک های “مطالب قدیمی تر” و “مطالب جدیدتر” نمایش داده می شود. اکثر قالب های وردپرسی موجود در مخزن وردپرس از این نوع صفحه بندی استفاده می کنند اما روش بهتر صفحه بندی، صفحه بندی عددی است.

به این صورت که صفحات دیگر سایتتان به صورت عددی نمایش داده خواهند شد و کاربران راحت تر می توانند تصمیم بگیرند که کدام صفحه را مشاهده کنند. اما در حالت پیش فرض (صفحه بندی داخلی وردپرس) کاربران را وادار می کند که صفحات دیگر را به نوبت مشاهده نمایند.

WordPress numeric pagination

اگر قالبتان از صفحه بندی پیش فرض وردپرس استفاده می کند اما می خواهید از صفحه بندی عددی بهره مند شوید اما قصد ندارید برای اینکار از افزونه استفاده کنید، این مستند از مارکت دِومی را از دست ندهید.

 


برای انجام اینکار، ابتدا نیاز است تا کد زیر را در فایل functions.php قالبتان قرار دهید:

function devme_pagination_paged() {

  if( is_singular() )
    return;

  global $wp_query;

  /** Stop execution if there's only 1 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="dvmenum"><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 2 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 devme_pagination_paged(); ?>

فایل هایی از قالب که باید کد بالا را در آنها قرار دهید شامل فایل های زیر هستند:

  • category.php
  • archive.php
  • search.php
  • tag.php

البته در برخی از قالب ها که به صورت داخلی از پست تایپ های سفارشی نیز استفاده کرده باشند، فایل های دیگری وجود دارند که می توانند از صفحه بندی عددی استفاده کنند. مثال برای پست تایپ download برای افزونه EDD :

  • archive-download.php
  • taxonomy-download_category.php
  • taxonomy-download_tag.php

محل قرار گیری کد دوم:

در فایل هایی که در بالا ذکر کردیم، زمانی که وارد آن شوید باید حلقه مطلب که به صورت if (have_posts()) : while (have_posts()) نوشته شده است را پیدا کنید. در انتهای این حلقه، یعنی پس از <?php endif; ?> (جایی که حلقه مطالب بسته شده است) ، کد دوم (تابع فراخوانی صفحه بندی عددی) را قرار دهید.

در صورتی که این کد را داخل حلقه استفاده کنید، صفحه بندی به خوبی عمل نخواهد کرد.

 


استایل دهی صفحه بندی عددی

در صورتی که دو کد بالا را استفاده کردید، به حتم شمارنده صفحات به صورت اعداد ساده در کنار هم قرار خواهند داشت که کاربر پسند نیست. برای اینکار نیاز است تا کمی از کدهای CSS را نیز چاشنی کار کنیم و ظاهر بهتری به این اعداد بدهیم.

برای اینکار کدهای زیر را در یکی از فایل های css قالبتان که مطمئن هستید در سایت اجرا می شود، قرار دهید.

/* Devme.ir Panination */
.dvmenum {
  float: right;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.dvmenum li a,
.dvmenum li a:hover,
.dvmenum li.active a,
.dvmenum li.disabled {
  color: #fff;
  text-decoration:none;
}
.dvmenum li {
  display: inline;
}
.dvmenum li a,
.dvmenum li a:hover,
.dvmenum li.active a,
.dvmenum li.disabled {
  background-color: #607D8B;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px;
}
.dvmenum li a:hover,
.dvmenum li.active a {
  background-color: #2196f3;
  /* D E V - M E */
}

هم اکنون شمارنده صفحات سایتتان مانند صفحه بندی عددی مارکت دِومی خواهد بود که تصویر آن در بالای این مستند نیز قرار داده شده است.

 

توجه : در صورتی که پیش از این ، قالب شما دارای ویژگی صفحه بندی دیگری بود، می بایست جهت جلوگیری از تداخلات کدها در خروجی سایت، صفحه بندی های قبلی را حذف نمایید. برای یافتن آنها به فایل هایی که ذکر شده رفته و به دنبال توابعی باشید که مربوط به صفحه بندی هستند.

هنوز دیدگاهی ارسال نشده! نظر شما چیست؟

دیدگاه شما درباره این صفحه چیست؟