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

آخرین بروز رسانی: اسفند ۲۴, ۱۳۹۴

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

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

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

 میباشد که در لینک داده شده به صورت بسیار کاربردی به شما عزیزان آموزش داده شده است.

افزونه Ajax infinite Scroll

نمایش مطالب بیشتر

 

 

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

ای جکس چیست؟؟؟؟

ای جکس مجموعه ای از فناوری ها و تکنولوژی هایی هست که هر یک در جای خود تکنولوژی کامل و موفقی است ،و مجموع این تکنولوژی ها ی کامل به نحوی در کنار هم قرار گرفته اند که ای جکس امروزه را تشکیل میدهند. همه شگفتی ای‌جکس در معماری‌ایست که برای ساخت یک برنامه وب، با استفاده از این تکنولوژی‌ها ارائه می‌دهد

 

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

 

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

 

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

گام اول:

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

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

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

باز هم با ما همراه باشید. امیدوارم که از آموزش امروز لذت برده باشید.

مطالب مرتبط

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017