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

 <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>}

<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;

<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 قرار بدید:

برای توضیح کد جی کوئری باید گفت:

در:

ما ابتدا تمام لینک هایی که داخل کلاس wp98_page_numbers بودند رو به صورت on سلکت کردیم. دلیل این کار (سلکت کردن به صورت on) این هست که وقتی بخش های جدید به صفحه از طریق DOM اضافه میشه، حالت click ساده روی اونها کار نمی کنه.

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

همچنین برای اینکار قبلا از تابع live به جای on استفاده میشد، که توی نسخه های جدید جی کوئری تابع live حذف شده است. (در اینجا اگر از قالب خودتون استفاده می کنید و قالبتون دارای شماره صفحات به صورت پیشفرض هست، به جای wp98_page_numbers کلاس تگی که لینک های شماره صفحات در اون هستند رو قرار بدید)

در:

ما آدرس لینکی که کاربر روی اون کلیک کرده رو در متغییر href_ ذخیره می کنیم. (برای کارهای بعدی)

در:

در این خط ما شفافیت div کل (تگی که تمام نوشته های اون صفحه در اون قرار داره) رو کم می کنیم، تا مشخص بشه که عملیاتی در حال انجام هست. (این قسمت رو در شماره صفحات گوگل شاید دیده باشید)

هم چنین شما به جای اینکار می تونید یک div برای preloader درست کنید و وقتی روی لینک کلیک شد، اون div رو نشون بدید. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)

در:

ابتدا باید گفت توی جی کوئری تابع های دیگری هم برای کار با ajax هست که کامل ترینشون هم تابع .ajax هست ولی در اینجا با همین تابع ساده .load می تونیم کارمون رو انجام بدیم.

در این خط کا اول می گیم که در primary# محتوای جدید بارگذاری (load) شود، که محتوای جدید از لینک صفحه جدیدی که روش کلیک شده خونده میشه.

و در

هم گفته ایم که محتوا باید از آدرس صفحه متغیر href_ (لینکی که روش کلیک شده) خونده بشه.

همچنین پارامتر دوم تابع load هم callback تابع هست، یعنی وقتی محتوا از صفحه دیگر با موفقیت دریافت شد، اجرا میشه. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)

در:

گفته ایم که div محتوا رو که محوش کرده بودیم، نمایان بشه. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)

در:

هم گفته ایم که با انمیشن، اسکرول به بالای صفحه بیاد. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)

در آخر هم با return false گفته ایم که وقتی روی لینکی کلیک میشه، رفتار پیشفرض مرورگر (که کاربر به صفحه ای که کلیک کرده باید انتقال داده بشه) غیرفعال بشه.

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