شماره صفحات آجاکسی
ابتدا باید گفت، که این مقاله بیشتر جنبه آموزشی داره و برای استفاده از این مقاله نیاز دارید تا کمی با جی کوئری، پی اچ پی و وردپرس آشنایی داشته باشید.
فناوری ایجکس در وب هم باعث کاهش فشار در سرور و هم به اینترنت ضعیف ما کمک می کنه. مثلا توی سایتی اگر در حال خوندن مقالات یه دسته بندی خاص هستید و باید به صفحات دیگر مراجعه کنید، هر موقع شما وارد صفحه دیگری میشید تمام عکس ها و المنت های صفحه از نو بارگذاری می شوند و نیازی به این کار نیستید.
ایجکس کردن قسمت شماره صفحات در وردپرس کار بسیار ساده ای است (البته به لطف جی کوئری) و این کارو حتما در قالب خود انجام دهید.
برای شروع باید گفت که ما این کار رو در قالب دو هزار و دوازده وردپرس انجام می دیم.
قالب ۲۰۱۲ به صورت پیشفرض قابلیت شماره صفحات رو نداره، برای اضافه کردن شماره صفحات به این قالب ابتدا تابع زیر رو در فایل functions.php قرار بدید:
|
1
|
<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->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 '<divphp plain">.$class.'">';</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' => $paginate_base,</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre"> </span>'format' => $paginate_format,</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre"> </span>'total' => $wp_query->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' => 10,</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre"> </span>'current' => ($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' => 'list',</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre"> </span>'prev_text' => __('&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' => __('Next &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 "</div>";</font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre"> </span>} |
خب حالا توی همین فایل (functions.php) خط ۲۴۹ تا ۲۵۳ را حذف کنید و به جاش کد زیر رو قرار بدید:
|
1
|
<span class="Apple-tab-span" style="white-space: pre;"> </span><nav id="<?php echo $html_id; ?>" class="navigation" role="navigation"></font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre"> </span><h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3></font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre"> </span><div class="nav-previous"><?php page_numbers(); ?></div></font></div><div><font face="Tahoma, Arial, sans-serif" size="2"><span class="Apple-tab-span" style="white-space:pre"> </span></nav><!-- #<?php echo $html_id; ?> .navigation --> |
حالا اگر صفحه رو یکبار رفرش کنید، به جای لینک های “صفحه بعدی” و “صفحه قبلی” شماره صفحات رو مشاهده می کنید.
نکته: اگر شما از قالبی به جز قالب ۲۰۱۲ استفاده می کنید و خود قالب دارای بخش شماره صفحات است، نیازی به این مرحله نیست، شما فقط نیاز دارید تا بتوانید بخش شماره صفحات رو select کنید، به زبان ساده باید class یا ID تگی که بخش شماره صفحات داخل اون هست رو داشتید باشید.
حالا قالب ما دارای بخش شماره صفحات است که div اون دارای کلاس wp98_page_numbers هست.
مرحله بعد این هست که جی کوئری رو به قالبمون اضافه کنیم. اگر جی کوئری به قالب شما ضمیمه نشده، کد زیر رو در فایل functions.php قرار بدید:
|
1
|
<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"> |
مرحله بعد و آخر هم این هست که چند خط کد ساده جی کوئری رو در هدر قالب قرار بدیم تا بخش شماره صفحات ایجکسی کامل بشه. کد کامل جی کوئری ما به صورت زیر هست:
|
1
|
<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 قرار بدید:
|
1
|
<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 '<script type="text/javascript"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>jQuery(document).ready(function($){</div><div><span style="white-space:pre"> </span>$("body").on( "click", ".wp98_page_numbers a", function(){</div><div><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 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 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 style="white-space:pre"> </span>return false;</div><div><span style="white-space:pre"> </span>});</div><div><span style="white-space:pre"> </span>});</div><div><span style="white-space:pre"> </span></script>';</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>} |
برای توضیح کد جی کوئری باید گفت:
در:
|
1
|
</div><div>$("body").on( "click", ".wp98_page_numbers a", function(){</div><div> |
ما ابتدا تمام لینک هایی که داخل کلاس wp98_page_numbers بودند رو به صورت on سلکت کردیم. دلیل این کار (سلکت کردن به صورت on) این هست که وقتی بخش های جدید به صفحه از طریق DOM اضافه میشه، حالت click ساده روی اونها کار نمی کنه.
یعنی نمی تونستیم، از کد زیر برای سلکت تمام لینک های شماره صفحات استفاده کنیم:
|
1
|
</div><div>$('.wp98_page_numbers a').click( function(){...</div><div> |
همچنین برای اینکار قبلا از تابع live به جای on استفاده میشد، که توی نسخه های جدید جی کوئری تابع live حذف شده است. (در اینجا اگر از قالب خودتون استفاده می کنید و قالبتون دارای شماره صفحات به صورت پیشفرض هست، به جای wp98_page_numbers کلاس تگی که لینک های شماره صفحات در اون هستند رو قرار بدید)
در:
|
1
|
</div><div>var _href = $(this).attr("href");</div><div> |
ما آدرس لینکی که کاربر روی اون کلیک کرده رو در متغییر href_ ذخیره می کنیم. (برای کارهای بعدی)
در:
|
1
|
</div><div>$("#primary").fadeTo("slow",0.4);</div><div> |
در این خط ما شفافیت div کل (تگی که تمام نوشته های اون صفحه در اون قرار داره) رو کم می کنیم، تا مشخص بشه که عملیاتی در حال انجام هست. (این قسمت رو در شماره صفحات گوگل شاید دیده باشید)
هم چنین شما به جای اینکار می تونید یک div برای preloader درست کنید و وقتی روی لینک کلیک شد، اون div رو نشون بدید. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در:
|
1
|
</div><div>$("#primary").load( _href+" #primary",function(){</div><div> |
ابتدا باید گفت توی جی کوئری تابع های دیگری هم برای کار با ajax هست که کامل ترینشون هم تابع .ajax هست ولی در اینجا با همین تابع ساده .load می تونیم کارمون رو انجام بدیم.
در این خط کا اول می گیم که در primary# محتوای جدید بارگذاری (load) شود، که محتوای جدید از لینک صفحه جدیدی که روش کلیک شده خونده میشه.
و در
|
1
|
</div><div>_href+" #primary"</div><div> |
هم گفته ایم که محتوا باید از آدرس صفحه متغیر href_ (لینکی که روش کلیک شده) خونده بشه.
همچنین پارامتر دوم تابع load هم callback تابع هست، یعنی وقتی محتوا از صفحه دیگر با موفقیت دریافت شد، اجرا میشه. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در:
|
1
|
</div><div>$("#primary").fadeTo("slow",1);</div><div> |
گفته ایم که div محتوا رو که محوش کرده بودیم، نمایان بشه. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در:
|
1
|
</div><div>$("html, body").animate({scrollTop: $("#primary").offset().top-10},"fast");</div><div> |
هم گفته ایم که با انمیشن، اسکرول به بالای صفحه بیاد. (اگر از قالب خودتون استفاده می کنید، به جای #primary باید کلاس یا ID تگی که تمام نوشته های اون صفحه و شماره صفحات در اون هستند رو قرار بدید)
در آخر هم با return false گفته ایم که وقتی روی لینکی کلیک میشه، رفتار پیشفرض مرورگر (که کاربر به صفحه ای که کلیک کرده باید انتقال داده بشه) غیرفعال بشه.
البته هدف از این مقاله بیشتر آموزش بود. امیدوارم استفاده لازم رو کرده باشید.
مطالب زیر را حتما بخوانید:
قوانین ارسال دیدگاه در سایت
- چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
- چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
- چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
- چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
- چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.
نظرات کاربران