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

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

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

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

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

if ( ! function_exists( 'rokesh_pagination' ) ) :
	function rokesh_pagination() {
		global $wp_query;
		$big = 999999999; // need an unlikely integer
		echo paginate_links( array(
			'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
			'format' => '?paged=%#%',
			'current' => max( 1, get_query_var('paged') ),
			'prev_next'    => True,
			'prev_text'    => __('« قبلی'),
			'next_text'    => __('بعدی »'),
			'total' => $wp_query->max_num_pages
		) );
	}
endif;

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

<div class="pagination">
<?php rokesh_pagination(); ?>
</div>

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

div.pagination {
    margin: 20px 0;
}
div.pagination a, div.pagination span {
    background: none repeat scroll 0 0 #C0C0C0;
    border-radius: 2px;
    color: #000000;
    font-weight: bold;
    padding: 5px 10px;
}
div.pagination a:hover {
    background: none repeat scroll 0 0 #ddd;
    color: #000;
}
div.pagination span {
    background: none repeat scroll 0 0 #DDDDDD;
    color: #A8A8A8;
}

پس از انجام کلیه موارد بالا نتیجه کار باید مانند تصویر زیر شود.

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

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

افزودن شماره صفحات به قالب وردپرس توسط افزونه WP-PageNavi

اگر می خواهید فقط با چند کلیک ساده شماره صفحات را به قالب اضافه کنید پیشنهاد ما استفاده از افزونه WP-PageNavi می باشد. برای شروع افزونه را دانلود و نصب نمایید پس از فعال سازی افزونه به مسیر تنظیمات > شماره صفحات بروید تا با بخش تنظیمات افزونه آشنا شوید. در بخش تنظیمات این افزونه شما می توانید متن دکمه ها, تعداد دکمه ها و موارد متعدد دیگری را مطابق با میل خود تنظیم کنید.

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

حال باید کد زیر را در قالب سایت خود قرار دهید. مثلا می توانید این کد را در فایل index.php یا هر فایل دیگری که می خواهید در آن شماره صفحات ظاهر شوند قرار دهید. البته برای اینکه نوابری صفحات پیشفرض قالب حذف شود شما کد زیر را با کدهای پیشفرض ( old previous_posts_link و next_posts_link ) جایگزین کنید.

<?php wp_pagenavi(); ?>

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

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

.wp-pagenavi {
    clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
    background-color: #312A1E;
    color: #EF9E10;
    float: right;
    margin: 2px;
    padding: 5px 10px;
    text-decoration: none;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
    background-color: #EF9E10;
    color: #312A1E;
}
.wp-pagenavi span.current {
    background-color: #EF9E10;
    font-weight: bold;
}

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

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

دیدگاه کاربران

  1. amir h

    سلام
    من از قالب زیر استفاده میکنم
    http://rokesh.ir/wordpress-personal-theme-wordpress-personal-theme-iconic-one/
    من میخوام که این شماره صفحات اینجا بیفته
    شماره صفحات وردپرس
    من از کد استفاده میکنم
    ممنون

  2. amir h

    سلام
    میخوام سه تا چیز بهش اضافه بشه
    ۱-بنویسه (صفحه ۲ از ۵۱۷)
    ۲-یه قسمتی هم باشه بنام آخرین صفحه
    ۳-خط زیر اعداد و خط بعدی و .. برداشته بشه
    باید چیکار کنم؟
    ممنون

    • سعید شعبانی

      اگر از افزونه WP-PageNavi استفاده کنید این بخش ها را می توانید به راحتی به آن اضافه کنید.

      • amir h

        یعنی به طورت کد نمیشه؟

        • سعید شعبانی

          با استفاده از کد فعلی خیر. اما شما کد زیر را به جای کد قبلی در فانکشن قرار دهید:

          function rokesh_pagination() {
          global $wp_query;
          $big = 12345678;
          $page_format = paginate_links( array(
              'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
              'format' => '?paged=%#%',
              'current' => max( 1, get_query_var('paged') ),
              'next_text' => 'بعدی &raquo;',
              'prev_text' => '&laquo; قبلی',
              'total' => $wp_query->max_num_pages,
              'type'  => 'array'
          ) );
          if( is_array($page_format) ) {
                      $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
                      echo '<span>صفحه '. $paged . ' از ' . $wp_query->max_num_pages .'</span>';
                      foreach ( $page_format as $page ) {
                              echo "$page";
                      }
          }
          }
          

          و این بخش از کد css راهم جایگزین قبلی کنید.

          div.pagination a, div.pagination span {
              background: none repeat scroll 0 0 #C0C0C0;
              border-radius: 2px;
              color: #000000;
              font-weight: bold;
              margin-left: 4px;
              padding: 5px 10px;
          }
          

          نتیجه کار به این شکل خواهد شد

          صفحه بندی وردپرس

  3. سلام.

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

    • سعید شعبانی

      شما اول تیک گزینه استفاده از pagenavi-css.css داخل تنظیمات افزونه را بردارید تا فایل استایل افزونه اجرا نشه بعد هم کد های css زیر را جایگزین کد های قبلی در استایل قالب سایت خود کنید:

      .wp-pagenavi {
          clear: both;
          margin-right: 85px;
      }
      .wp-pagenavi a, .wp-pagenavi span {
          background-color: #312A1E;
          color: #EF9E10;
          display: inline-block;
          margin: 0 0 0 5px;
          padding: 5px 10px;
          text-decoration: none;
      }
      .wp-pagenavi a:hover, .wp-pagenavi span.current {
          background-color: #EF9E10;
          color: #312A1E;
      }
      .wp-pagenavi span.current {
          background-color: #EF9E10;
          font-weight: bold;
      }
      
  4. amir h

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

  5. این کدارو کجا قرار بدم ؟؟؟؟
    میشه آی دیتون رو بدید ؟؟من مشکلای دیگه ایم دارم

  6. برای من این شکلی شده الان باید چیکار کنم تا رنگش به قالب جدید بخوره ؟؟و اینکه در هم نباشه ؟؟
    http://8pic.ir/images/03359016475789382147.jpg

    من تونستم اون کادر قرمز رو حذف کنم..حالا بگین اینو چجوری کوچیک کنم و رنگش از ابی تغییر کنه و شبیه قالب بشه

    http://8pic.ir/images/99514885182453204456.jpg

    • سعید شعبانی

      ببخشید چند روز نبودم تا جواب سوال ها را بدم. برای تغییر رنگ ها باید داخل css تغییراتی را ایجاد کنید.
      برای تغییر رنگ پس زمینه باید کلاس wp-pagenavi را در کد های css پیدا کنید و رنگ اون که در حال حاظر EBF3F5 هست را تغییر بدید.

      .wp-pagenavi {
          background: none repeat scroll 0 0 #EBF3F5;
          border: 1px solid #82BEDE;
          border-radius: 7px;
          clear: both;
          margin-right: 7px;
          padding-bottom: 10px;
          padding-right: 79px;
          padding-top: 10px;
          width: 484px;
      }
      

      برای تغییر رنگ کلی دکمه ها باید کلاس wp-pagenavi a و wp-pagenavi span را پیدا کنید و رنگ پس زمینه اون ها که در حال حاظر ۸۲BEDE هست را تغییر بدید.

      .wp-pagenavi a, .wp-pagenavi span {
          background-color: #82BEDE;
          color: #266282;
          display: inline-block;
          margin: 0 0 0 5px;
          padding: 5px 10px;
          text-decoration: none;
      }
      

      برای دکمه های فعال هم باید کلاس wp-pagenavi span.current را پیدا کنید و رنگ اون که در حال حاظر ۵۶A7D2 هست را تغییر بدید.

      .wp-pagenavi span.current {
          background-color: #56A7D2;
          font-weight: bold;
      }
      
  7. مرسی…حالا من چجوری رنگ اینارو مثل واسه قالبم بکنم ؟؟میخوام دقیق رنگ کادر قالب بشه..کد رنگایی که میخوامو از کجا پیدا کنم..

    • سعید شعبانی

      اگر با کد نویسی css آشنایی داری خیلی راحت می تونید کد رنگ های قسمت های مختلف قالب را پیدا کنید اما اگر با کد نویسی آشنایی ندارید می تونید از افزونه های مرورگر استفاده کنید. مثلا برای موزیلا افزونه Rainbow Color Tools و چندین افزونه دیگه هست که به راحتی می تونید کد رنگ هر قسمت از قالب را بدست بیارید.

      • مرسی تغییر دادم رنگاشو ولی فرقی نکرد کوکی هارم پاک کردم.
        بعد اینکه اون گزینه ی ۱از ۴۲ بجا اینکه اول باشه رفته اخر..
        و اینکه اندازه کادر شماره هارو چجوری کوچیک کنم ؟؟؟

        • سعید شعبانی

          ۱- تغییر پیدا نکردن رنگ منو ها به خاطر فعال بودن استایل پیشفرض افزونه هست شما استایل افزونه را از طریق تنظیماتش غیر فعال کنید رنگش تغییر می کنه.
          ۲- این مشکل هم به خاطر استایل قالب جدیدتون هست که با استفاده از float: none به شکل زیر حل میشه

          .wp-pagenavi a, .wp-pagenavi span {
              background-color: rgb(224, 224, 224);
              color: rgb(38, 98, 130);
              display: inline-block;
              float: none;
              margin: 0 0 0 5px;
              padding: 5px 10px;
              text-decoration: none;
          }
          

          ۳- برای تغییر اندازه دکمه ها هم می تونید padding را کم و زیاد کنید.

          .wp-pagenavi a, .wp-pagenavi span {
              background-color: #82BEDE;
              color: #266282;
              display: inline-block;
              margin: 0 0 0 5px;
              padding: 5px 10px;
              text-decoration: none;
          }
          
  8. الان برو توی سایت من ببین رنگشون تازه تغییر کرد..میخوام اون کادر ابیش حذف بشه و کادری که خود قالب داره رو کمی کوچیک کنم تا دور شماره هارو بگیره..چجوری اون کادر ابیو حذف کنم و کادر قالبو کوچیک کنم ؟؟

    اون گزینه ی ۱ از ۴۲ رو هم بیارم سمت راست اول صفحات..

  9. کل اون کد رو با مقدارش رو برداشتم..
    اون کادر سفیده خوده قالب که دور صفحه هاس رو چجوری کوچیک کنم تا بیاد به شماره گزاری صفحات ؟؟

    • سعید شعبانی

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

  10. آقا دستت طلا.. اول من از افزونه پیج نووی استفاده میکردم وقتی صفحاتم به ۲۰ رسید صفحه سفید می شد ولی از کدهاتون استقاده کردم مشکلم حل شد من همه جا گشتم ولی اکثرا مشکل داشتند …بازم ممنون بخاطر کدهاتون فقط تنها مشکل اینه که رنگش خاکستریه این هم آدرسه http://takamooz.com اگه میشه یه جک کنید … ممنون

  11. ی مشکل دیگه داره اینه که بخش نظرات نداره ..چجوری میشه اضاقه کرد؟

  12. آقاممنون بابت راهنماییتون..

  13. ارش

    نتونستم,خواهش کنم میشه اینکارو برام انجام بدین؟حرفه ای هستین واسه شما که کاری نداره.میکنید؟

  14. سلام من کاری رو ک گفتین انجام دادم(همون کدهای بالا راجب شماره گذاری صفحه)
    اما بازم تغیری تو وبم ایجاد نشد
    ممنون میشم اگه بازم راهنماییم کنید
    مرسی

  15. سلام
    ممنونم قالب رو عوض کردم مشکلم حل شد

  16. ali

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

  17. با سلام
    بسیار کاربردی بود
    من از افزونه و کد و استایل استفاده کردم
    فقط راهنمایی بفرمایید که در فایل آرشیو با شورت کد به صورت wp_pagenavi();
    ?> قرار گیرد و در بقیه فایل ها آنگونه که شما ارئه نموده اید وگرنه با مشکل صفحه سفید مواجه می شود
    با سپاس فراوان

  18. خیلی ممنون از مطالب خوب سایتتون.

  19. چرا برای من به صورت عمودی نشون میده ؟

    کد ها رو کپی کردم . ولی به صورت ستونی نشون میده .

  20. سلام
    ممنون از آموزش
    یه سوال داشتم وقتی من تو سایتم مثلا میخوام برم پیج ۵ روی نوار تب سایتم میزنه
    دانلود فیلم و آهنگ-Page 5
    در صورتی که میخوام قسمت Page-5 نباشه و با تغییر صفحه عنوان سایت همون بمونه
    برای اینکار باید چیکار کنم؟
    ممنون میشم جواب بدید

  21. سلام ممنون از مطلب فوق
    یه سوالی این کد :
    چند مطلب در هر صفحه میشه داخلش بزاریم
    من کدی می خوام برای صفحه اول سایتم که
    مطالبم را صفحه بندی کنه و بهش بگم مثلا
    در هر صفحه ۴ مطلب باشه ..
    ممنون اگه میشه راهنمایی کنید

  22. فریبرز

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

  23. میثم

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

  24. مهشید

    با سلام

    چطور میتونم شماره بندی صفحات سایتم رو از
    http://www.site.ir/page/1
    به
    http://www.site.ir/page/N1
    تغییر بدم؟

    میخوام قبل از عدد N اضافه کنم.

  25. سلام در صفحه اول ارشیو ماهانه را دارم اما زمانی که بر روی آن کلیک میکنم فقط صفخه اول نمایش داده میشه وبا کلیک کردن بر روی شماره صفحات دیگر تغییری ایجاد نمیشه لطفا راهنمایی فرمایید

    • سعید شعبانی

      کد زیر را جایگزین کد قبلی در فایل فانکشن قالب کنید ببینید درست میشه.

      if ( ! function_exists( 'rokesh_pagination' ) ) :
      	function rokesh_pagination() {
      		global $wp_query;
      		$big = 999999999; // need an unlikely integer
      		echo paginate_links( array(
      			'format' => '?paged=%#%',
      			'current' => max( 1, get_query_var('paged') ),
      			'prev_next'    => True,
      			'prev_text'    => __('« قبلی'),
      			'next_text'    => __('بعدی »'),
      			'total' => $wp_query->max_num_pages
      		) );
      	}
      endif;
      
  26. سعید

    فقط می تونم بگم که دستت درد نکنه . موفق باشی . در پناه خدا

  27. mina

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

  28. با سلام
    من یه مشکل دارم و داخل هر سایتی این مشکل رو گفتم جواب درستی به من ندادند گفتن باید کمی با برنامه نویسی آشنا باشید
    مشکل من اینه که من وقتی کد
    (افزونه wp_pagenavi هم در سایتم نصبه)
    رو داخل بخش index.php قالبم قرار میدم دیگه سایتم بالا نمیاد
    از قالب logger استفاده میکنم
    ممنون میشم راهنماییم کنید

  29. javdane

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

  30. 111111

    سلام خسته نباشی‌ می‌خواسم بدونم چطوری مثل قالب اصلیم برای محصولاتمم تعداد نوشته در هر صفحه تعیین کنم تو صحفه محصولات

  31. hn.moarraq

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

  32. amazingha

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

    صفحه ی اول

    صفحه ی دوم
    کمکم کنید

کاربر گرامی برای ارسال دیدگاه اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.