رفتن به صفحه قبل و بعد با کمک آژاکس ساده
شاید بعضی ها به وردپرس برای استفاده کم آژاکس توی سایت ایراد بگیرند و اون رو یک ضعف به حساب بیاورند اما باید خدمت دوستان عزیز عرض کنم که وردپرس در قسمت مدیریت بسیار از آژاکس و جی کوئری استفاده کرده و کارها رو بسیار ساده کرده . خب ما در همراز وردپرس قصد داریم کمی ظاهر سایت های وردپرسی را آژاکسی تر کنیم.امروز میخواهیم با ترفندی بسیار ساده انتقال کاربران به صفحات قبل و بعد وبتون رو با کمک آژاکس انجام بدید تا اینطوری هم پهنای باند حفظ بشه و کاربران به مطالب شما دسترسی آسانتری داشته باشند.برای اینکار امروز همراه ما باشید…
خب برای شروع ابتدا کد زیر را در فایل header.php خود و یا هدر سایت خود قرار دهید :
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript" charset="utf-8" src="<?php bloginfo(url); ?>/wp-includes/js/jquery/jquery.js"></script> <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function(){ jQuery('#postPagination a').live('click', function(e){ e.preventDefault(); var link = jQuery(this).attr('href'); jQuery('#content').fadeOut(500).load(link + ' #contentInner', function(){ jQuery('#content').fadeIn(500); }); }); }); </script> |
خب برای مرحله بعد به سراغ فایل index.php و یا هرفایلی که میخواهید آژاکس به کار برده شود بروید , سپس کد زیر را قبل از شروع حلقه پست قرار دهید .
یعنی مثلا کد زیر را بیابید :
1 | <?php if (have_posts()) : while (have_posts()) : the_post(); ?> |
1 2 | <div id='content'> <div id='contentInner'> |
برای مثال کد زیر را بیابید :
1 | <?php endif; ?> |
1 2 | </div> </div> |
1 2 3 | <div id='postPagination'> <?php posts_nav_link(' ', ('« صفحه بعدی'), ('صفحه قبلی »')); ?> </div> |
موفق باشید.
دیدگاه ها