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

دسته بندی ها: کد های وردپرس آذر ۱, ۱۳۹۶

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

خب برای شروع ابتدا کد زیر را در فایل header.php خود و یا هدر سایت خود قرار دهید :

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

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 و یا هرفایلی که میخواهید آژاکس به کار برده شود بروید , سپس کد زیر را قبل از شروع حلقه پست قرار دهید .
یعنی مثلا کد زیر را بیابید :

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

1	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

و کد زیر را قبل از کد بالا قرار دهید :

<div id='content'>
    <div id='contentInner'>

1 2	<div id='content'> <div id='contentInner'>

خب آخر حلقه را هم بیابید و کد های بالا را ببندید :
برای مثال کد زیر را بیابید :

<?php endif; ?>

1	<?php endif; ?>

و بعد از آن کد زیر را قرار دهید :

</div>
</div>

1 2	</div> </div>

خب حالا کافیست کد زیر را در هر جاکه میخواهید صفحات قبلی / بعدی نمایش داده شود قرار دهید (درون حلقه پست باشد )

مطلب پیشنهادی ما: محافظت ساده از فایل های افزونه

<div id='postPagination'>
    <?php posts_nav_link('  ', ('&laquo; صفحه بعدی'), ('صفحه قبلی &raquo;')); ?>
</div>

<?php posts_nav_link(' ', ('« صفحه بعدی'), ('صفحه قبلی »')); ?>

</div>

موفق باشید.

برچسب‌ها :

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

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

مطالب مرتبط

دیدگاه ها

دیدگاهتان را بنویسید لغو پاسخ

ابزارک ها

آخرین آپدیت های محصولات