در قسمت معرفی پلاگین معرفی پلاگین WP-PageNavi  این پلاگین معرفی شد.حال نحوه کار با آن در این آموزش بررسی می شود.

ابتدا باید  پلاگین را از  پلاگین WP-PageNavi  دانلود و در قسمت پلاگین ها آن را استخراج کرده و نصب را انجام داد.اگر سایت وردپرسی به صورت آنلاین می باشد می توان آن را در قسمت افزونه ها -> افزودن و در جستوجو پلاگین WP-PageNavi   را جستجو و نصب کرد.

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

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

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>

و به جای آن کد زیر را قرار داد.

<?php wp_pagenavi(); ?>

برای چند صفحه ای می توان کد زیر را پیدا کرده 

<?php wp_link_pages( ... ); ?>

و به جای آن کد زیر را قرار داد

<?php wp_pagenavi( array( 'type' => 'multipart' ) ); ?>

برای تنظیمات آن به 

 WP-Admin -> Settings -> PageNavi

یا 

مدیریت -> تنطیمات -> PageNavi

می توان مراجعه کرد.تنظیمات آن شامل موارد زیر می شود.در زیر به  توضیح درباره برخی از آنها می پردازیم

Text For Number Of Pages:

در این قسمت متن مربوط به  صفحه جاری و  تعداد صفحات  را وارد کرد 

Page %CURRENT_PAGE% of %TOTAL_PAGES%

صفحه %صفحه جاری % of %مجموع صفحات %

 

Text For Current Page:

متن برای صفحه جاری 

%PAGE_NUMBER%

%صفحه%

Text For First Page

متن برای اولین برگه 

« First

%صفحه%

Text For Last Page

متن برای آخرین برگه 

« Last

 

و… که می توان آن ها را تنظیم کرد.

تنظیمات css 

اگر نیاز به تغییر فایل های css داشته باشید صفحه  pagenavi-css.css را از پلاگین رونوشت (copy) کرده و در قالب فعال جای گذاری(paste) نمایید و تنظیمات را در این صفحه انجام داده تا تنظیمات اصلی پلاگین از بین نرود. 

کلاس های پیشفرض css برای تغییر 

.wp-pagenavi a { font-weight: bold; } /* Previous and Next links only */
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last { font-weight: normal; } /* Other links */

مثال:

.wp-pagenavi a, .wp-pagenavi span {
	padding: 5px; margin-right: 10px;
	font-size: 15px; color: #03719c; text-decoration: none;
	border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	background: #03719c;
	color: #fff;
	border: 3px solid #AFAFAF;
	}
.wp-pagenavi span.current { font-weight: bold; }

فیلتر ها

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

  • wp_pagenavi_class_pages
  • wp_pagenavi_class_first
  • wp_pagenavi_class_previouspostslink
  • wp_pagenavi_class_extend
  • wp_pagenavi_class_smaller
  • wp_pagenavi_class_page
  • wp_pagenavi_class_current
  • wp_pagenavi_class_larger
  • wp_pagenavi_class_nextpostslink
  • wp_pagenavi_class_last

مثال:کارایی فیلتر ها

// Simple Usage - 1 callback per filter
add_filter('wp_pagenavi_class_previouspostslink', 'theme_pagination_previouspostslink_class');
add_filter('wp_pagenavi_class_nextpostslink', 'theme_pagination_nextpostslink_class');
add_filter('wp_pagenavi_class_page', 'theme_pagination_page_class');

function theme_pagination_previouspostslink_class($class_name) {
  return 'pagination__control-link pagination__control-link--previous';
}

function theme_pagination_nextpostslink_class($class_name) {
  return 'pagination__control-link pagination__control-link--next';
}

function theme_pagination_page_class($class_name) {
  return 'pagination__current-page';
}

// More Concise Usage - 1 callback for all filters
add_filter('wp_pagenavi_class_previouspostslink', 'theme_pagination_class');
add_filter('wp_pagenavi_class_nextpostslink', 'theme_pagination_class');
add_filter('wp_pagenavi_class_page', 'theme_pagination_class');

function theme_pagination_class($class_name) {
  switch($class_name) {
    case 'previouspostslink':
      $class_name = 'pagination__control-link pagination__control-link--previous';
      break;
    case 'nextpostslink':
      $class_name = 'pagination__control-link pagination__control-link--next';
      break;
    case 'page':
      $class_name = 'pagination__current'
      break;
  }
  return $class_name;
}

 

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

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

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

 

<?php if(have_posts()) : ?>;
<?php while(have_posts()) : the_post(); ?>
 ...
 <?php endwhile; ?>
<div><?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?></div>
<?php endif; ?>

مثال:

ساخت صفحه با توجه به تصویر زیر با css

 

ابتدا در منوی تنظیمات موارد زیر را جایگذاری کنید.

 

“Text For First Page” به جای آن   “«” را قرار می دهیم

“Text For Last Page” به جای آن   “»”را قرار می دهیم 

“Text For Previous Page”به جای آن  “« Previous”را قرار می دهیم
“Text For Next Page”به جای آن  “Next »”را قرار می دهیم
تعداد  “Number Of Pages To Show” را برا بر با   “5”  قرار می دهیم
 

حال کدهای css زیر را در فایل  pagenavi-css.css که در قالب  خود گذاشته ایم قرار می دهیم

.wp-pagenavi .extend{
display: none;
}

.wp-pagenavi .pages{
display: none;
}


.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited, .wp-pagenavi span.current{
border: 1px solid #CCC;
color: #666;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-moz-box-shadow: inset 0 0 1px #fff;
-ms-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
box-shadow: inset 0 0 1px white;
background: #FAFAFA; /* For IE and older browsers */
background-image: -moz-linear-gradient(top,#FAFAFA 0,#d5d4d4 100%);
background-image: -ms-linear-gradient(top,#FAFAFA 0,#d5d4d4 100%);
background-image: -o-linear-gradient(top,#FAFAFA 0,#d5d4d4 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(100%,#d5d4d4));
background-image: -webkit-linear-gradient(top,#FAFAFA 0,#d5d4d4 100%);
background-image: linear-gradient(to bottom,#FAFAFA 0,#d5d4d4 100%);
display: inline-block;
line-height: 2.48em;
height: 2.4em;
text-decoration: none;
margin: 0 .3em 12px;
padding: 0 .85em;
font-size: 12px;
text-shadow: 0 1px 0 #fff;
}

.wp-pagenavi span.current{
background: #d5d4d4; /* For IE and older browsers */
background-image: -moz-linear-gradient(top,#d5d4d4 0,#FAFAFA 100%);
background-image: -ms-linear-gradient(top,#d5d4d4 0,#FAFAFA 100%);
background-image: -o-linear-gradient(top,#d5d4d4 0,#FAFAFA 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#d5d4d4),color-stop(100%,#FAFAFA));
background-image: -webkit-linear-gradient(top,#d5d4d4 0,#FAFAFA 100%);
background-image: linear-gradient(to bottom,#d5d4d4 0,#FAFAFA 100%);
border: 1px solid #999;
moz-box-shadow: inset 0 0 10px rgba(0,0,0,.35);
-ms-box-shadow: inset 0 0 10px rgba(0,0,0,.35);
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.35);
}


.wp-pagenavi a:hover{
border: 1px solid #aeacac !important;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.25);
-ms-box-shadow: 0 0 3px rgba(0,0,0,.25);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.25);
box-shadow: 0 0 3px rgba(0,0,0,.25);
}

پروژه نهایی 

 

Page 4 of 10«23456»



در صورت نیاز با مردان وردپرس در ارتباط باشید.

منبع :‌ مردان وردپرس

تاریخ آخرین بروزرسانی : ۸ شهریور ۱۳۹۵
میلاد میلادی

باور هایت را که پرورش دهی به هرچیزی دست خواهی یافت.

ارسال نظر

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.