رفتن به صفحه قبل و بعد با کمک آژاکس ساده

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

خب برای شروع ابتدا کد زیر را در فایل 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('  ', ('&laquo; صفحه بعدی'), ('صفحه قبلی &raquo;')); ?>
</div>

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

منبع : همیاروردپرس

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *