031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

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

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

۲۲ام اسفند ۱۳۹۴
پشتیبانی وب یار
112

نمایش مطالب بیشتر با افزونه 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;?>

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

تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
پشتیبانی وب یار

مطالب مرتبط

طراحی فروشگاه اینترنتی تجارت پویا

سایت فروشگاهی تجارت پویا

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

طراحی فروشگاه اینترنتی جین ایران

فروشگاه اینترنتی جین ایران

طراحی فروشگاه اینترنتی جین ایران طراحی سایت اختصاصی جین ایران عرضه کننده انواع پوشاک زنانه و مردانه در اصفهان از نمونه کارهای حرفه ای طراحی سایت تیم وب یار می باشد.طراحی فروشگاه اینترنتی جین ایران برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف فروش و عرضه انواع پوشاک و سایر محصولات می […]

طراحی سایت فرهنگی سایت کودک

طراحی سایت فرهنگی کودک خلاق

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

طراحی سایت بازرگانی ایراکو

طراحی سایت اختصاصی بازرگانی ایراکو طراحی قالب سایت اختصاصی بازرگانی ایراکو با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت و سئو سایت وب یار است. این سایت در زمینه ی بازرگانی و تجارت با عراق فعالیت دارد. طراحی سایت بازرگانی ایراکو برای مشتریان عزیزی که کسب و کارشان در حوزه های […]

ارسال دیدگاه

*    

*