آخرین بازبینی: ۱۴۰۵/۰۸/۰۷

وردپرس: نمایش شماره صفحه در دسته‌بندی و بلاگ

وردپرس به‌صورت پیش‌فرض برای حرکت بین صفحات مطالب فقط دو پیوند «صفحه‌ی قبل» و «صفحه‌ی بعد» نشان می‌دهد. اگر می‌خواهید خواننده مستقیم به صفحه‌ی ۳ یا ۷ برود، باید شماره صفحه‌ها را خودتان نمایش دهید و این کار بدون افزونه هم شدنی است.

در این مطلب دو روش را مرحله‌به‌مرحله می‌بینید:

پیوندهای ساده‌ی قبلی/بعدی با توابع آماده‌ی وردپرس
صفحه‌بندی شماره‌دار (۱ ۲ ۳ … ۹ ۱۰) با تابع paginate_links() و یک تابع سفارشی در functions.php

در پایان مطلب هم استایل آماده، نکته‌های مربوط به کوئری سفارشی و اشکالات متداول آمده است.

پیش از ویرایش functions.php از قالب پشتیبان بگیرید و ترجیحا تغییرات را در قالب فرزند (child theme) انجام دهید تا با به‌روزرسانی قالب از بین نرود.

۱- روش اول - پیوندهای ساده‌ی قبلی و بعدی

ساده‌ترین راه، استفاده از دو تابع previous_posts_link() و next_posts_link() است که هیچ افزونه‌ای لازم ندارد. کد زیر را در فایلی که لیست نوشته‌ها را نشان می‌دهد (برای مثالindex.php، archive.php یا category.php)، درست بعد از پایان حلقه‌ی while قرار دهید:

<div class="pagination-container">
    <div class="prev-container">
        <?php previous_posts_link( __( 'صفحه‌ی قبل', 'your-textdomain' ) ); ?>
    </div>
    <div class="next-container">
        <?php next_posts_link( __( 'صفحه‌ی بعد', 'your-textdomain' ) ); ?>
    </div>
</div>

<?php previous_posts_link( __( 'صفحه‌ی قبل', 'your-textdomain' ) ); ?>

</div>

<?php next_posts_link( __( 'صفحه‌ی بعد', 'your-textdomain' ) ); ?>

</div>

چند نکته درباره‌ی این کد:

your-textdomain را با دامنه‌ی ترجمه‌ی قالب خودتان جایگزین کنید (مثلاroka). اگر قالب شما ترجمه‌پذیر نیست، تابع __() را حذف کنید و فقط متن را بنویسید.
در وردپرس، next_posts_link() به نوشته‌های قدیمی‌تر می‌رود و previous_posts_link() به نوشته‌های جدیدتر.
اگر پیوند در صفحه‌ی اول یا آخر وجود نداشته باشد، وردپرس خودش آن را نمایش نمی‌دهد و لازم نیست شرط بنویسید.
در کوئری سفارشی (WP_Query) باید شماره‌ی آخرین صفحه را دستی بدهید: next_posts_link( 'صفحه‌ی بعد', $query->max_num_pages );

۲- روش دوم - صفحه‌بندی شماره‌دار با تابع سفارشی

برای نمایش شماره‌ی تک‌تک صفحه‌ها از تابع داخلی paginate_links() استفاده می‌کنیم. کد زیر را در انتهای فایل functions.php قالب (یا قالب فرزند) قرار دهید:

/**
 * نمایش صفحه‌بندی شماره‌دار.
 *
 * @param WP_Query|null $query کوئری سفارشی؛ اگر خالی باشد از کوئری اصلی استفاده می‌شود.
 */
function mytheme_pagination( $query = null ) {
    global $wp_query;

    if ( ! $query instanceof WP_Query ) {
        $query = $wp_query;
    }

    $total = (int) $query->max_num_pages;

    // اگر فقط یک صفحه داریم، چیزی نمایش نده.
    if ( $total <= 1 ) {
        return;
    }

    // صفحه‌ی جاری: در آرشیوها paged و در صفحه‌ی نخست ایستا page است.
    $current = max( 1, absint( get_query_var( 'paged' ) ), absint( get_query_var( 'page' ) ) );

    $links = paginate_links( array(
        'base'      => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
        'format'    => '',
        'total'     => $total,
        'current'   => $current,
        'mid_size'  => 2,   // تعداد شماره‌ها در دو طرف صفحه‌ی جاری
        'end_size'  => 1,   // تعداد شماره‌ها در ابتدا و انتهای لیست
        'prev_text' => 'قبلی',
        'next_text' => 'بعدی',
        'type'      => 'list',
    ) );

    if ( ! $links ) {
        return;
    }

    printf(
        '<nav class="pagination" aria-label="%1$s"><span class="pages">%2$s</span>%3$s</nav>',
        esc_attr__( 'صفحه‌بندی', 'your-textdomain' ),
        esc_html( sprintf( 'صفحه %s از %s', number_format_i18n( $current ), number_format_i18n( $total ) ) ),
        $links // خروجی paginate_links() از قبل امن است.
    );
}

/**

* نمایش صفحه‌بندی شماره‌دار.

* @param WP_Query|null $query کوئری سفارشی؛ اگر خالی باشد از کوئری اصلی استفاده می‌شود.

function mytheme_pagination( $query = null ) {

global $wp_query;

if ( ! $query instanceof WP_Query ) {

$query = $wp_query;

}

$total = (int) $query->max_num_pages;

// اگر فقط یک صفحه داریم، چیزی نمایش نده.

if ( $total <= 1 ) {

return;

}

// صفحه‌ی جاری: در آرشیوها paged و در صفحه‌ی نخست ایستا page است.

$current = max( 1, absint( get_query_var( 'paged' ) ), absint( get_query_var( 'page' ) ) );

$links = paginate_links( array(

'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),

'format' => '',

'total' => $total,

'current' => $current,

'mid_size' => 2, // تعداد شماره‌ها در دو طرف صفحه‌ی جاری

'end_size' => 1, // تعداد شماره‌ها در ابتدا و انتهای لیست

'prev_text' => 'قبلی',

'next_text' => 'بعدی',

'type' => 'list',

) );

if ( ! $links ) {

return;

}

printf(

'<nav class="pagination" aria-label="%1$s"><span class="pages">%2$s</span>%3$s</nav>',

esc_attr__( 'صفحه‌بندی', 'your-textdomain' ),

esc_html( sprintf( 'صفحه %s از %s', number_format_i18n( $current ), number_format_i18n( $total ) ) ),

$links // خروجی paginate_links() از قبل امن است.

);

}

تابع بالا این کارها را انجام می‌دهد:

فقط وقتی بیش از یک صفحه وجود دارد خروجی می‌دهد.
عبارت «صفحه ۲ از ۱۰» را نشان می‌دهد؛ با number_format_i18n() ارقام مطابق زبان سایت چاپ می‌شوند.
خروجی را به شکل لیست (ul.page-numbers) می‌سازد که استایل‌دهی آن آسان است.
هم با کوئری اصلی و هم با WP_Query سفارشی کار می‌کند.

mid_size و end_size را می‌توانید برای شلوغی کمتر یا بیشتر تغییر دهید؛ مثلا با mid_size = 2 در صفحه‌ی ۵ چیزی شبیه «۱ … ۳ ۴ ۵ ۶ ۷ … ۱۰» می‌بینید.

۳- نمایش صفحه‌بندی در قالب

تابع را در هر فایل قالب که لیست نوشته‌ها را نمایش می‌دهد، بعد از پایان حلقه صدا بزنید:

<?php if ( have_posts() ) : ?>

    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; ?>

    <?php
    if ( function_exists( 'mytheme_pagination' ) ) {
        mytheme_pagination();
    }
    ?>

<?php endif; ?>

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', get_post_format() ); ?>

<?php endwhile; ?>

<?php

if ( function_exists( 'mytheme_pagination' ) ) {

mytheme_pagination();

}

<?php endif; ?>

اگر از WP_Query سفارشی استفاده می‌کنید، باید پارامتر paged را به کوئری بدهید و خود کوئری را به تابع بفرستید:

<?php
$paged = max( 1, get_query_var( 'paged' ), get_query_var( 'page' ) );

$query = new WP_Query( array(
    'post_type'      => 'post',
    'posts_per_page' => 6,
    'paged'          => $paged,
) );

if ( $query->have_posts() ) :
    while ( $query->have_posts() ) : $query->the_post();
        the_title( '<h2>', '</h2>' );
    endwhile;

    mytheme_pagination( $query );

    wp_reset_postdata();
endif;
?>

<?php

$paged = max( 1, get_query_var( 'paged' ), get_query_var( 'page' ) );

$query = new WP_Query( array(

'post_type' => 'post',

'posts_per_page' => 6,

'paged' => $paged,

) );

if ( $query->have_posts() ) :

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

the_title( '<h2>', '</h2>' );

endwhile;

mytheme_pagination( $query );

wp_reset_postdata();

endif;

استایل‌دهی با CSS

خروجی تابع یک nav با لیست شماره‌هاست. کد زیر را در style.css قالب بگذارید تا شماره‌ها به‌صورت دکمه‌های مرتب و واکنش‌گرا نمایش داده شوند:

.pagination {
    margin: 30px 0;
    text-align: center;
}

.pagination .pages {
    display: block;
    margin-bottom: 10px;
    color: #666;
    font-size: 14px;
}

.pagination ul.page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination .page-numbers a,
.pagination .page-numbers span {
    display: block;
    min-width: 38px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #333;
    text-decoration: none;
    line-height: 1.2;
}

.pagination .page-numbers a:hover,
.pagination .page-numbers .current {
    border-color: #0073aa;
    background: #0073aa;
    color: #fff;
}

.pagination .page-numbers .dots {
    border: 0;
    background: transparent;
}

.pagination {

margin: 30px 0;

text-align: center;

}

.pagination .pages {

display: block;

margin-bottom: 10px;

color: #666;

font-size: 14px;

}

.pagination ul.page-numbers {

display: inline-flex;

flex-wrap: wrap;

justify-content: center;

gap: 6px;

margin: 0;

padding: 0;

list-style: none;

}

.pagination .page-numbers a,

.pagination .page-numbers span {

display: block;

min-width: 38px;

padding: 8px 12px;

border: 1px solid #ddd;

border-radius: 4px;

background: #fff;

color: #333;

text-decoration: none;

line-height: 1.2;

}

.pagination .page-numbers a:hover,

.pagination .page-numbers .current {

border-color: #0073aa;

background: #0073aa;

color: #fff;

}

.pagination .page-numbers .dots {

border: 0;

background: transparent;

}

چون از flex و gap استفاده شده، این قالب برای سایت‌های فارسی و انگلیسی هردو مناسب است. فقط رنگ‌ها را با رنگ اصلی قالب خود هماهنگ کنید.

۵- خطاهای رایج و نکته‌ها

اگر صفحه‌بندی ظاهر نشد یا لینک‌ها خطای ۴۰۴ دادند، این موارد را بررسی کنید:

مشکل	علت	راه‌حل
صفحه‌بندی نمایش داده نمی‌شود	کمتر از دو صفحه نوشته دارید، یا تابع خارج از حلقه‌ی صحیح صدا زده شده	تعداد «نوشته‌ها در هر صفحه» را در تنظیمات ← خواندن کم کنید و محل فراخوانی را بررسی کنید
همیشه صفحه‌ی ۱ باز می‌شود	در `WP_Query` پارامتر `paged` داده نشده	`'paged' => $paged` را به آرگومان‌های کوئری اضافه کنید
پیوند صفحه‌ی ۲ خطای ۴۰۴ می‌دهد	پیوندهای یکتا به‌روز نشده‌اند	از تنظیمات ← پیوندهای یکتا فقط دکمه‌ی «ذخیره» را بزنید
صفحه‌ی سفید یا خطای headers already sent	فاصله یا خط خالی بعد از `?>` در `functions.php`	تگ پایانی `?>` را از پایان فایل حذف کنید
صفحه‌بندی در برگه‌ی نخست ایستا کار نمی‌کند	آنجا `page` به‌جای `paged` استفاده می‌شود	همان‌طور که در کد بالا هست، هر دو را بخوانید

دو نکته‌ی دیگر:

ساده‌ترین راه بدون کد اضافه: از وردپرس ۴.۱ به بعد تابع آماده‌ی the_posts_pagination() هم هست و در اغلب قالب‌ها همین یک خط کافی است:

the_posts_pagination( array(
    'mid_size'  => 2,
    'prev_text' => 'قبلی',
    'next_text' => 'بعدی',
) );

the_posts_pagination( array(

'mid_size' => 2,

'prev_text' => 'قبلی',

'next_text' => 'بعدی',

) );

کش سایت: پس از تغییر قالب، افزونه‌ی کش را پاک کنید تا صفحه‌بندی جدید دیده شود.

وردپرس: نمایش شماره صفحه در دسته‌بندی و بلاگ

۱- روش اول - پیوندهای ساده‌ی قبلی و بعدی

۲- روش دوم - صفحه‌بندی شماره‌دار با تابع سفارشی

۳- نمایش صفحه‌بندی در قالب

استایل‌دهی با CSS

۵- خطاهای رایج و نکته‌ها

بیشتر بخوانید:

دیدگاهتان را بنویسید لغو پاسخ