شماره صفحات ایجکسی

pagenavi ajax

 

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

فناوری ایجکس در وب هم باعث کاهش فشار در سرور و هم به اینترنت ضعیف ما کمک می کنه. مثلا توی سایتی اگر در حال خوندن مقالات یه دسته بندی خاص هستید و باید به صفحات دیگر مراجعه کنید، هر موقع شما وارد صفحه دیگری میشید تمام عکس ها و المنت های صفحه از نو بارگذاری می شوند و نیازی به این کار نیستید.
ایجکس کردن قسمت شماره صفحات در وردپرس کار بسیار ساده ای است (البته به لطف جی کوئری) و این کارو حتما در قالب خود انجام دهید.
برای شروع باید گفت که ما این کار رو در قالب دو هزار و دوازده وردپرس انجام می دیم.
قالب 2012 به صورت پیشفرض قابلیت شماره صفحات رو نداره، برای اضافه کردن شماره صفحات به این قالب ابتدا تابع زیر رو در فایل functions.php قرار بدید:
 <span class="Apple-tab-span" style="white-space: pre;">	</span>function page_numbers($class = "wp98_page_numbers") {</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">		</span>global $wp_rewrite,$wp_query,$paged;</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">		</span>$paginate_base = get_pagenum_link(1);</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">		</span>if (strpos($paginate_base, '?') || ! $wp_rewrite-&gt;using_permalinks()) {</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>$paginate_format = '';</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>$paginate_base = add_query_arg('paged', '%#%');</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">		</span>} else {</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>$paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">				</span>user_trailingslashit('page/%#%/', 'paged');;</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>$paginate_base .= '%_%';</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">		</span>}</font></div><div><span class="Apple-tab-span" style="white-space:pre"><font face="Tahoma, Arial, sans-serif" size="2">		</font></span></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">		</span>echo '&lt;div class="'.$class.'"&gt;';</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">		</span>echo paginate_links( array(</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>'base' =&gt; $paginate_base,</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>'format' =&gt; $paginate_format,</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>'total' =&gt; $wp_query-&gt;max_num_pages,</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>'mid_size' =&gt; 10,</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>'current' =&gt; ($paged ? $paged : 1),</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>'type' =&gt; 'list',</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>'prev_text' =&gt; __('&amp;laquo; Previous', 'default'),</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>'next_text' =&gt; __('Next &amp;raquo;', 'default'),</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">		</span>));</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">		</span>echo "&lt;/div&gt;";</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">	</span>}
خب حالا توی همین فایل (functions.php) خط 249 تا 253 را حذف کنید و به جاش کد زیر رو قرار بدید:
<span class="Apple-tab-span" style="white-space: pre;">		</span>&lt;nav id="&lt;?php echo $html_id; ?&gt;" class="navigation" role="navigation"&gt;</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>&lt;h3 class="assistive-text"&gt;&lt;?php _e( 'Post navigation', 'twentytwelve' ); ?&gt;&lt;/h3&gt;</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">			</span>&lt;div class="nav-previous"&gt;&lt;?php page_numbers(); ?&gt;&lt;/div&gt;</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">		</span>&lt;/nav&gt;&lt;!-- #&lt;?php echo $html_id; ?&gt; .navigation --&gt;
حالا اگر صفحه رو یکبار رفرش کنید، به جای لینک های “صفحه بعدی” و “صفحه قبلی” شماره صفحات رو مشاهده می کنید.
نکته: اگر شما از قالبی به جز قالب 2012 استفاده می کنید و خود قالب دارای بخش شماره صفحات است، نیازی به این مرحله نیست، شما فقط نیاز دارید تا بتوانید بخش شماره صفحات رو select کنید، به زبان ساده باید class یا ID تگی که بخش شماره صفحات داخل اون هست رو داشتید باشید.
حالا قالب ما دارای بخش شماره صفحات است که div اون دارای کلاس wp98_page_numbers هست.
مرحله بعد این هست که جی کوئری رو به قالبمون اضافه کنیم. اگر جی کوئری به قالب شما ضمیمه نشده، کد زیر رو در فایل functions.php قرار بدید:
<span class="Apple-tab-span" style="white-space: pre;">	</span>add_action('init', 'add_jquery_func');</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">	</span>function add_jquery_func(){</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">		</span>wp_enqueue_script('jquery');</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre">	</span>}</font></div><div><font face="Tahoma, Arial, sans-serif" size="2">
 
مرحله بعد و آخر هم این هست که چند خط کد ساده جی کوئری رو در هدر قالب قرار بدیم تا بخش شماره صفحات ایجکسی کامل بشه. کد کامل جی کوئری ما به صورت زیر هست:
<span class="Apple-tab-span" style="white-space:pre">			</span>jQuery(document).ready(function($){</div><div><span class="Apple-tab-span" style="white-space:pre">				</span>$("body").on( "click", ".wp98_page_numbers a", function(){</div><div><span class="Apple-tab-span" style="white-space:pre">					</span>var _href = $(this).attr("href");</div><div><span class="Apple-tab-span" style="white-space:pre">					</span>$("#primary").fadeTo("slow",0.4);</div><div><span class="Apple-tab-span" style="white-space:pre">					</span>$("#primary").load( _href+" #primary",function(){</div><div><span class="Apple-tab-span" style="white-space:pre">						</span>$("#primary").fadeTo("slow",1);</div><div><span class="Apple-tab-span" style="white-space:pre">						</span>$("html, body").animate({scrollTop: $("#primary").offset().top-10},"fast");</div><div><span class="Apple-tab-span" style="white-space:pre">					</span>});</div><div><span class="Apple-tab-span" style="white-space:pre">					</span>return false;</div><div><span class="Apple-tab-span" style="white-space:pre">				</span>});</div><div><span class="Apple-tab-span" style="white-space:pre">			</span>});
البته اگر نمی خواهید برای اینکار دوباره فایلی رو به قالبتون اضافه کنید، کدتون رو به صورت زیر در functions.php قرار بدید:
<span class="Apple-tab-span" style="white-space:pre">	</span>add_action('wp_head', 'ajax_pagination');</div><div><span class="Apple-tab-span" style="white-space:pre">	</span>function ajax_pagination() {</div><div><span class="Apple-tab-span" style="white-space:pre">		</span>echo '&lt;script type="text/javascript"&gt;</div><div><span class="Apple-tab-span" style="white-space:pre">			</span>jQuery(document).ready(function($){</div><div><span class="Apple-tab-span" style="white-space:pre">				</span>$("body").on( "click", ".wp98_page_numbers a", function(){</div><div><span class="Apple-tab-span" style="white-space:pre">					</span>var _href = $(this).attr("href");</div><div><span class="Apple-tab-span" style="white-space:pre">					</span>$("#primary").fadeTo("slow",0.4);</div><div><span class="Apple-tab-span" style="white-space:pre">					</span>$("#primary").load( _href+" #primary",function(){</div><div><span class="Apple-tab-span" style="white-space:pre">						</span>$("#primary").fadeTo("slow",1);</div><div><span class="Apple-tab-span" style="white-space:pre">						</span>$("html, body").animate({scrollTop: $("#primary").offset().top-10},"fast");</div><div><span class="Apple-tab-span" style="white-space:pre">					</span>});</div><div><span class="Apple-tab-span" style="white-space:pre">					</span>return false;</div><div><span class="Apple-tab-span" style="white-space:pre">				</span>});</div><div><span class="Apple-tab-span" style="white-space:pre">			</span>});</div><div><span class="Apple-tab-span" style="white-space:pre">		</span>&lt;/script&gt;';</div><div><span class="Apple-tab-span" style="white-space:pre">	</span>}
برای توضیح کد جی کوئری باید گفت:
در:
</div><div>$("body").on( "click", ".wp98_page_numbers a", function(){</div><div>
ما ابتدا تمام لینک هایی که داخل کلاس wp98_page_numbers بودند رو به صورت on سلکت کردیم. دلیل این کار (سلکت کردن به صورت on) این هست که وقتی بخش های جدید به صفحه از طریق DOM اضافه میشه، حالت click ساده روی اونها کار نمی کنه.
یعنی نمی تونستیم، از کد زیر برای سلکت تمام لینک های شماره صفحات استفاده کنیم:
</div><div>$('.wp98_page_numbers a').click( function(){...</div><div>
همچنین برای اینکار قبلا از تابع live به جای on استفاده میشد، که توی نسخه های جدید جی کوئری تابع live حذف شده است. (در اینجا اگر از قالب خودتون استفاده می کنید و قالبتون دارای شماره صفحات به صورت پیشفرض هست، به جای wp98_page_numbers کلاس تگی که لینک های شماره صفحات در اون هستند رو قرار بدید)
در:
</div><div>var _href = $(this).attr("href");</div><div>
ما آدرس لینکی که کاربر روی اون کلیک کرده رو در متغییر href_ ذخیره می کنیم. (برای کارهای بعدی)
در:
</div><div>$("#primary").fadeTo("slow",0.4);</div><div>
در این خط ما شفافیت div کل (تگی که تمام نوشته های اون صفحه در اون قرار داره) رو کم می کنیم، تا مشخص بشه که عملیاتی در حال انجام هست. (این قسمت رو در شماره صفحات گوگل شاید دیده باشید)
هم چنین شما به جای اینکار می تونید یک div برای preloader درست کنید و وقتی روی لینک کلیک شد، اون div رو نشون بدید. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در:
</div><div>$("#primary").load( _href+" #primary",function(){</div><div>
ابتدا باید گفت توی جی کوئری تابع های دیگری هم برای کار با ajax هست که کامل ترینشون هم تابع .ajax هست ولی در اینجا با همین تابع ساده .load می تونیم کارمون رو انجام بدیم.
در این خط کا اول می گیم که در primary# محتوای جدید بارگذاری (load) شود، که محتوای جدید از لینک صفحه جدیدی که روش کلیک شده خونده میشه.
و در
</div><div>_href+" #primary"</div><div>
هم گفته ایم که محتوا باید از آدرس صفحه متغیر href_ (لینکی که روش کلیک شده) خونده بشه.
همچنین پارامتر دوم تابع load هم callback تابع هست، یعنی وقتی محتوا از صفحه دیگر با موفقیت دریافت شد، اجرا میشه. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در:
</div><div>$("#primary").fadeTo("slow",1);</div><div>
گفته ایم که div محتوا رو که محوش کرده بودیم، نمایان بشه. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در:
</div><div>$("html, body").animate({scrollTop: $("#primary").offset().top-10},"fast");</div><div>
هم گفته ایم که با انمیشن، اسکرول به بالای صفحه بیاد. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در آخر هم با return false گفته ایم که وقتی روی لینکی کلیک میشه، رفتار پیشفرض مرورگر (که کاربر به صفحه ای که کلیک کرده باید انتقال داده بشه) غیرفعال بشه.
البته هدف از این مقاله بیشتر آموزش بود. امیدوارم استفاده لازم رو کرده باشید.
مشاوره آموزشی رایگان
شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، از مشاوره رایگان کارشناسان آموزشی مجموعه همیار آکادمی استفاده نمائید.
 
مشاوران آموزشی
همیار آکادمی
پاسخگوی شما هستند
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

دیدگاهتان را بنویسید

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. سلام شما که لالایی بلدی چرا خودت خوابت نمی بره چرا خودت تو سایتت وقتی روی شماره صفحات کلیک میکنی همه صفحه لود میشه؟؟/؟؟؟؟

  2. بخش شماره صفحات رو select کنید، به زبان ساده باید class یا ID تگی که بخش شماره صفحات داخل اون هست رو داشتید باشید.

    این دقیقا با کدوم بخش اون کد ی که می‌ذاریمش تو هدر جایگزین می‌شه؟ با wp98_page_numbers ؟

  3. وحید به جان خودم اگه فهیمده باشم 😀 … ساده تر توضیح بده ..
    یه سوال یک قالب که هیچکدام را نداره چی میشه ؟ یعنی نه مثله قالب 2012 باشه که صفحات قبلی و صفحات بعدی داره ، و نه شماره صفحات رو داشته باشه .؟ بگو از کدوم مرحله شروع کنم ؟

  4. سلام ببخشید اما مثل اینکه کدها درست نمایش داده نشده چون وقتی من این ها رو کپی میکنم و تو صفحخ function میزارم کدهای درستی نمایش داده نمیشه

مطالب زیر را حتما بخوانید

دوره‌های آموزشی