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

زهرا جعفری

تاریخ بروزرسانی: ۲۴ مرداد ۱۳۹۷ تعداد بازدید : 374 بازدید بدون دیدگاه

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

اضافه کردن لیست شماره صفحات بدون افزونه

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

به صورت پیش فرض شماره بندی صفحات در وردپرس ساده است و دو لینک “صفحه بعد” و “صفحه قبل” در انتهای صفحه اضافه می‌شود. با استفاده از کد زیر شما می‌توانید حرفه‌ای تر کار کنید و بدون استفاده از افزونه لیست اعداد صفحات سایت را نیز علاوه بر لینک های صفحه بعد و صفحه قبل در انتهای صفحه اضافه کنید.

اگر شما بخواهید برای اضافه کردن لیست اعداد صفحات سایت در انتهای صفحه از افزونه استفاده کنید‚ می‌توانید از افزونه WP-PageNavi استفاده نمایید.

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

برای اضافه کردن لیست شماره صفحات سایت در انتهای هر صفحه می‌توانید از یکی از دو استایل زیر استفاده نمایید.

روش اول اضافه کردن لیست شماره صفحات بدون افزونه

برای این کار در ابتدای فایل functions.php و بعد از <?php کد زیر را قرار داده و آن را ذخیره نمایید.

function pagination($pages = '', $range = 4)

{

$showitems = ($range * 2)+1;

global $paged;

if(empty($paged)) $paged = 1;

if($pages == '')

{

global $wp_query;

$pages = $wp_query->max_num_pages;

if(!$pages)

{

$pages = 1;

}

}

if(1 != $pages)

{

echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";

if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";

if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

for ($i=1; $i <= $pages; $i++)

{

if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))

{

echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";

}

}

if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";

if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;

</a>";

echo "</div>\n";

}

}

function pagination($pages = '', $range = 4)

{

$showitems = ($range * 2)+1;

global $paged;

if(empty($paged)) $paged = 1;

if($pages == '')

{

global $wp_query;

$pages = $wp_query->max_num_pages;

if(!$pages)

{

$pages = 1;

}

if(1 != $pages)

{

echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";

if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>";

if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

for ($i=1; $i <= $pages; $i++)

{

if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))

{

echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";

}

if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";

if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »

</a>";

echo "</div>\n";

}

پس از این کار برای این که به ظاهر آن استایل بدهید می‌توانید در انتهای فایل style.css قالب خود کد زیر را قرار داده و سپس آن را ذخیره کنید.

.pagination {

clear:both;

padding:20px 0;

position:relative;

font-size:11px;

line-height:13px;

}

.pagination span, .pagination a {

display:block;

float:left;

margin: 2px 2px 2px 0;

padding:6px 9px 5px 9px;

text-decoration:none;

width:auto;

color:#fff;

background: #555;

}

.pagination a:hover{

color:#fff;

background: #3279BB;

}

.pagination .current{

padding:6px 9px 5px 9px;

background: #3279BB;

color:#fff;

}

.pagination {

clear:both;

padding:20px ;

position:relative;

font-size:11px;

line-height:13px;

}

.pagination span, .pagination a {

display:block;

float:left;

margin: 2px 2px 2px ;

padding:6px 9px 5px 9px;

text-decoration:none;

width:auto;

color:#fff;

background: #555;

}

.pagination a:hover{

color:#fff;

background: #3279BB;

}

.pagination .current{

padding:6px 9px 5px 9px;

background: #3279BB;

color:#fff;

}

سپس کد زیر را در مکانی که قصد دارید شماره بندی صفحات در آن جا قرار بگیرد قرار دهید. به عنوان مثال در فایل index.php یا archive.php.

<?php if (function_exists("pagination")) {

pagination($additional_loop->max_num_pages);

} ?>

<?php if (function_exists("pagination")) {

pagination($additional_loop->max_num_pages);

} ?>

نکته: دقت کنید که کد بالا را خارج از حلقه مطالب (Loop) قرار دهید.

در پایان خروجی صفحه بندی به شکل زیر خواهد بود.

روش دوم اضافه کردن لیست شماره صفحات بدون افزونه

روش دوم برای اضافه کردن لیست شماره صفحات این است که در ابتدای فایل functions.php و بعد از <?php کد زیر را اضافه کنید.

function topwp_numeric_posts_nav() {

 
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://tiktheme.com/keeps-logging-out/" target="_blank" class="u1e48f7fd54eb6654e3ba27ff8700de11"><style>.u1e48f7fd54eb6654e3ba27ff8700de11{padding:0;margin:0;padding-top:1em!important;padding-bottom:1em!important;width:100%;display:block;font-weight:700;background-color:inherit;border:0!important;border-left:4px solid #27AE60!important;text-decoration:none}.u1e48f7fd54eb6654e3ba27ff8700de11:active,.u1e48f7fd54eb6654e3ba27ff8700de11:hover{opacity:1;transition:opacity 250ms;webkit-transition:opacity 250ms;text-decoration:none}.u1e48f7fd54eb6654e3ba27ff8700de11{transition:background-color 250ms;webkit-transition:background-color 250ms;opacity:.95;transition:opacity 250ms;webkit-transition:opacity 250ms}.u1e48f7fd54eb6654e3ba27ff8700de11 .ctaText{font-weight:700;color:#27AE60;text-decoration:none;font-size:16px}.u1e48f7fd54eb6654e3ba27ff8700de11 .postTitle{color:#2C3E50;text-decoration:underline!important;font-size:16px}.u1e48f7fd54eb6654e3ba27ff8700de11:hover .postTitle{text-decoration:underline!important}</style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">بیشتر بدانید:</span>  <span class="postTitle">آموزش رفع مشکل خروج ناخواسته از سایت وردپرس</span></div></a></div>
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";

 

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

function topwp_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";

}

سپس کد 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:#33ce74;border-radius:3px;cursor:pointer;padding:12px;padding:0.75rem;}

.navigation li a:hover,

.navigation li.active a{background-color:#29b564;}

.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:#33ce74;border-radius:3px;cursor:pointer;padding:12px;padding:0.75rem;}

.navigation li a:hover,

.navigation li.active a{background-color:#29b564;}

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

<?php topwp_numeric_posts_nav(); ?>

1	<?php topwp_numeric_posts_nav(); ?>

خروجی این کد به صورت تصویر زیر خواهد شد.

در صورتی که کمی با css آشنایی داشته باشید می‌توانید با ایجاد تغییرات ساده ظاهر آن را به شکل دلخواه خود درآورید.

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

مطالب مرتبط:

با چه افزونه ای امکانات بیشتر و عالی به ووکامرس اضافه کنیم؟

تغییر مسیر پوشه های اصلی در وردپرس

چگونه در وردپرس از هشتگ استفاده کنیم؟

چگونه توابع سفارشی را به وردپرس بیافزاییم؟

منبع: تیک‌تم – ارائه دهنده: قالب تفریحی وردپرس – قالب فروشگاهی وردپرس – قالب فیلم وردپرس