no-img
اِمیلاسلام کاربر مهمان. امروز چهارشنبه ۲۰ آذر ۱۳۹۸


ادامه مطلب

بروزرسانی؛
۰۵ آذر ۱۳۹۸
ساخت صفحه بندی در وردپرس بدون پلاگین
امتیاز 5.00 ( 3 رای )
حمایت از emila.ir

ساخت صفحه بندی در وردپرس بدون پلاگین

بروزرسانی؛ ۰۵ آذر ۱۳۹۸

زمانی سایت و وبلاگی دارای هزاران و صدها مطلب باشد، نیاز به صفحه بندی صحیح مطالب وجود دارد، اگر سایت شما با وردپرس طراحی و راه اندازی شده برای ایجاد صفحه بندی یا باید از پلاگینی مانند WP-Pagenavi استفاده کنید و یا با استفاده از کد این قابلیت را به قالب وب سایت اضافه کنید.

مزیت کد نسبت به پلاگین در این است که کد اکثر مواقع بسیار سبک تر و سریع تر و البته تمیز تر از یک پلاگین است.

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

تعداد گزینه های صفحه بندی را با تغییر عدد mid_size می توانید تغییر دهید.

<?php the_posts_pagination( array( 'mid_size'  => 10 ) ); ?>

اگر هم در حال حاظر از پلاگین برای این کار استفاده می کنید  همین حالا تصمیم بگیرید کد فعلی را جایگزین و پلاگین را حذف کنید.

کد بالا به صورت پیشفرض استایل سی اس اس ندارد. می توانید کد سی اس اس emila را در انتهای فایل style.css قالب خود استفاده کنید.

/* ------------------------------------ Pagination ------------------------------------ */
.page-numbers
{
    background: #fafafa;
    border: 1px solid #e9e9e9;
    display: inline-block;
    font-family: Yekan;
    font-size: 16px;
    padding: 9px 18px !important;
    border-radius: 3px;
    margin: 0 3px;
}
 
a.page-numbers:hover
{
    border: 1px solid #27ae5f;
}
 
span.page-numbers.current
{
    border: 1px solid #119c4a;
}
 
.navigation
{
    padding: 36px 0 0;
}
 
.navigation h2
{
    display: none;
}
 
a.last
{
    border-left: 1px solid #e9e9e9;
    border-radius: 3px 0 0 3px;
}
 
span.pages
{
    border-radius: 0 3px 3px 0;
}
 
span.pages
{
    margin-right: 0 !important;
}

روشی دیگر برای شماره گذاری صفحات وردپرس

در این روش با افزودن قطعه کد در فایل فانکشن قالب وردپرس تان می توانید مطالب را صفحه بندی کنید، این روش یکی از بهترین روش ها جهت صفحه بندی و شماره گذاری مطالب در وردپرس نسبت به استفاده از افزونه است چون به دلیل بارگذاری نشدن فایلهای css و js مربوط به افزونه، نهایت بهینه بودن در کدنویسی و افزایش سرعت بارگذاری قالب و صفحه وب را موجب می شود.

کد زیر را به فایل functions.php قالب وردپرس تان اضافه کنید.

<?php
function wpbeginner_numeric_posts_nav() {
    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="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 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 wpbeginner_numeric_posts_nav(); ?>

اکنون شماره گذاری صفحات در وردپرس به اتمام رسید جهت زیباتر شدن کار می توانید کدهای css زیر را در فایل شیوه نامه style.css قالب وردپرس تان کپی کنید و با اندکی ویرایش و تغییر شماره ها را مطابق سلیقه تان ایجاد کنید.

.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: #6FB7E9;
border-radius: 3px;
cursor: pointer;
padding: 12px;
padding: 0.75rem;
}
.navigation li a:hover,
.navigation li.active a {
background-color: #3C8DC5;
}

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

وردپرسی باشید 😁

 


موضوع : وب/ برچسب : , , / لینک کوتاه : https://emila.ir/?p=13686
designer