نمایش مطالب بیشتر با افزونه Ajax infinite Scroll

خانه » بلاگ » افزونه » نمایش مطالب بیشتر با افزونه Ajax infinite Scroll

نمایش مطالب بیشتر با افزونه Ajax infinite Scroll

بار گذاری صفحات سایت ورد پرسی بدون لود صفحه با ایجکس مطالب:

با سلام, با آموزش بسیار جالب و خواندنی نمایش مطالب بیشتر با افزونه Ajax infinite Scroll و ارتباط تکنولوژی ای جکس و ورد پرس با شما همراه هستیم,و میخواهیم زمانی که اسکرول صفحه را ادامه میدهیم تمام مطالب سایت در همان صفحه بدون لود مجدد بارگذاری شوند.افزونه های بسیار زیادی برای سایت ورد پرسی وجود دارند که کمک کننده برای مدیریت سایت شما هستند. قبل از آن که به آموزش ایجکس کردن با افزونه بپردازیم ،مختصری توضیحات در خصوص ای جکس به شما میدهیم:

AJAX چیست و چرا استفاده می شود؟

AJAX مخفف Asynchronous JavaScript And XML است. به طور خلاصه، استفاده از شی XMLHttpRequest برای برقراری ارتباط با سرورها است. این می تواند اطلاعات را در قالب های مختلف از جمله JSON، XML، HTML و فایل های متنی ارسال و دریافت کند.

 

تکنولوژی های ایجکس:

 

• نمایش استاندارد با استفاده از XHTML و CSS.
• نمایش پویایی و تعاملات با استفاده از Document Object Model (DOM).
• تبادل و دستکاری داده با استفاده از XML و XSLT.
• بازیابی داده‌ها بصورت غیر هدفمند با استفاده از XMLHttpRequest. و جاوااسکریپت برای سرهم بندی همه چیز با هم.

اسکرول آژاکس بی نهایت چیست؟

Infinite Ajax Scroll یک افزونه مدرن جاوا اسکریپت است که هر صفحه بندی را در عرض چند دقیقه به یک اسکرول بی نهایت تبدیل می کند.

تعاریف/مفاهیم Infinite Ajax Scroll

Container: این عنصری است که عناصر فرزند (اقلام) در آن اضافه می شود. این معمولاً یک تگ div، ul یا جدول است، اما می تواند هر چیزی باشد.
اقلام: عناصری هستند که در داخل Containerزندگی می کنند. این می تواند div’s، li’s، مقاله، ردیف های جدول (tr) یا هر چیز دیگری باشد. مهم این است که عناصر فرزند مستقیم Container هستند. آیتم های صفحه بعد، بعد از آخرین مورد داخل کانتینتر درج خواهند شد.
صفحه بندی: این عنصری است که شامل پیوندهای صفحه بندی شما، مانند صفحه بعدی و قبلی است. Infinite Ajax Scroll به طور خودکار این عنصر را پنهان می کند.
بعدی: این عنصر (برچسب) لینک صفحه بعد است. href برای بارگذاری صفحه بعدی در پس‌زمینه و اضافه کردن موارد استفاده می‌شود.

آموزش ایجکس کردن وردپرس با افزونه نمایش مطالب بیشتر در وردپرس:

1- چگونگی وارد کردن ایجکس به وردپرس:

ابتدا با کد زیر ای جکس را به ورد پرس معرفی میکنیم.

<script>

   $(document).ready(function(){

        $.ajaxSetup({cache:false});

        $(“.post-link”).click(function(){

            var post_link = $(this).attr(“href”);

            $(“#single-post-container”).html(“لطفا صبر کنید…”);

            $(“#single-post-container”).load(post_link);

        return false;

        });

    });

</script>

کد بالا را می توانید در هدر سایت خود قرار دهید تا از اجرای این کد در تمامی صفحات سایت مطمئن شوید

نکته: باید حتما از کتابخانه jquery در سایت خود استفاده کنید.

۲– حال لازم است که کد زیر را در هرکجای قالب که دوست دارید قرار دهید، این کد همان لینکی است که قرار است برای لود محتوا کلیک شود:

<a class=”post-link” rel=”57″ href=”http://localhost/rahyaft/?page_id=57″>map</a>

لازمه  به چند خصوصیت این لینک اشاره کنم. این لینک دارای کلاسی با نام post-link می باشد که می توانید استایل مورد علاقه خود را به این کلاس بدهید.

در لینک بالا از rel=”۵۷″ استفاده شده که این همان id صفحه ای است که قرار است صدا زده شود، شما id نوشته خودتان را قرار دهید و یا از تابع فراخوانی id نوشته در وردپرس استفاده کنید:

<?php the_ID(); ?>

و همچنین آدرس لینک: این آدرس صفحه ای است که قرار است محتوای آن صفحه لود شود که می توان از تابع فراخوانی وردپرس هم استفاده کرد:

<?php the_permalink(); ?>

۳– حالا باید قسمتی برای نمایش محتوای فراخوانی شده قرار دهیم. قرار است محتوای فراخوانی شده در بین تگ زیر قرار بگیر:

<div id=”single-post-container”></div>

با استفاده از روش بالا اگر فایل single.php شما قالب گذاری شده باشد، با کلیک بر روی لینک ای جکس شده کل محتوای صفحه فراخوانی می شود. پس باید فقط کد زیر را در فایل single.php قرار دهید و می توانید این کد را قالب گذاری کنید:

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

                <?php the_title();?>

                <?php the_content();?>

    <?php endwhile;?>