آموزش افزونه Ajax Load More برای پیمایش بی پایان در وردپرس

آموزش افزونه Ajax Load More

در این مقاله به آموزش افزونه Ajax Load More برای infinite scrolling یا اسکرول کردن بی پایان در وب سایت که منجر به افزایش سرعت وردپرس و تجربه کاربری بهتر می شود، می پردازیم.

همه مدیران وب سایت ها تمام سعی خود را می کنند تا کارایی سایت خود را بالاتر برده و بازدیدکنندگان را برای بازگشت مجدد به سایت ترغیب کنند. یکی از بهبودهایی که می توانید در سایت خود اعمال کرده و کارایی آن را بالاتر ببرید تکنیک infinite scrolling یا اسکرول کردن بی پایان است.

بسیاری از وبلاگ ها از یک لینک ” نوشته های قدیمی” در انتهای صفحه اصلی، وبلاگ یا دیگر صفحات آرشیو برای تشویق کاربران به خواندن نوشته های دیگر سایت استفاده می کنند. اما سایت های دیگری نیز وجود دارند که از مزایای اسکرول کردن بی پایان (infinite scrolling) یا دکمه “بارگذاری نوشته های بیشتر” بهره می برند. بعضی از سایت هایی که می توانند از این ویژگی استفاده زیادی کنند، عبارتند از: وب سایت های عکاسی، وب سایت های محتواهای لیست شده (listicles) و وب سایت های محتوای ویروسی (وایرال).

در تکنیک infinite scrolling به جای بارگذاری تمام صفحه جدید، دکمه “Load More Posts” کار می کند و از جاوا اسکریپت برای فچ کردن مجموعه بعدی محتوا استفاده می کند. این کار تجربه کاربری بهتری ایجاد کرده و شانس دیده شدن محتواهای بیشتر سایت را افزایش می دهد.

افزونه Ajax Load More یکی از بهترین افزونه های اسکرول کردن بی پایان وردپرس برای بارگذاری تنبل نوشته ها، پست های تکی، صفحات، کامنت ها و بسیاری موارد دیگر با کوئری های قدرت گرفته از Ajax است. به همین دلیل این افزونه جزء بهترین افزونه های Lazy Load وردپرس است. در این آموزش به بررسی این افزونه می پردازیم.

آموزش افزونه Ajax Load More و نحوه اسکرول کردن بی پایان (Infinite Scrolling) صفحات در وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه منوی جدیدی به نام Ajax Load More به پیشخوان وردپرس اضافه خواهد شد.

آموزش افزونه Ajax Load More

در منوی Ajax Load More زیرمنوهای مختلفی وجود دارد که هریک بخشی از قابلیت های این افزونه را فعال می کند. در ادامه آموزش به بررسی این زیرمنوها می پردازیم.

آموزش تنظیمات عمومی افزونه Ajax Load More

با کلیک کردن بر روی زیر منوی Setting وارد صفحه تنظیمات عمومی افزونه می شوید. در این صفحه نمی توانید تغییرات زیادی اعمال کنید تنها می توانید دو ویژگی را بدون اینکه عملکرد هسته افزونه را مختل کنید، تغییر دهید.

آموزش افزونه Ajax Load More

Button/Loading Style: در این قسمت می توانید یک استایل برای لود کردن انتخاب کنید. می توانید یک دکمه یا یک اسکرول بی پایان برای این کار در نظر بگیرید. اگر استایل infinite Scroll را انتخاب کنید محتواها تنها با اسکرول کردن و بدون نیاز به کلیک بر روی دکمه خاصی بارگذاری می شوند.

Editor Button: اگر می خواهید در ویرایشگر نوشته دکمه شورت کد را پنهان کنید باید این گزینه را فعال کنید.

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

Repeater Template

افزونه Ajax Load More از یک سیستم قالب دهی برای مدیریت نمایش فرانت اند و استایل دهی محتوای Ajax loaded استفاده می کند که به آن Repeater Template گفته می شود و در این بخش به آموزش آن می پردازیم.

روی زیرمنوی Repeater Template کلیک کنید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

آموزش افزونه Ajax Load More

Repeater Template (قالب تکرار کننده) قالبی برای چگونگی نمایش نوشته ها است وقتی اسکرول کردن بی پایان برای آنها اعمال می شود. ویرایش این صفحه نیاز به دانستن اطلاعات کدنویسی و آشنایی با زبان برنامه نویسی PHP دارد. اما قالب پیش فرض برای اکثر کاربران مناسب است.

اما ممکن است این قالب با قالب سایت شما هماهنگی نداشته باشد. برای حل این مشکل باید کدی که قالب شما از آن برای نمایش نوشته ها در صفحات وبلاگ، آرشیو و ایندکس استفاده می کند را پیدا کرده و آن را در این قسمت کپی کنید.

این کد در حالت عادی در فولدر template-parts قالب شما قرار دارد. در این فولدر می توانید قالب ها را برای نمایش محتواهای مختلف سایت مشاهده کنید. به عنوان مثال content-page.php، content-search.php و بسیاری موارد دیگر. شما باید به دنبال قالب content.php گشته و آن را پیدا کنید. مثالی از فایل content.php در زیر نشان داده شده است.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
        // Post thumbnail.
        twentyfifteen_post_thumbnail();
    ?>
 
    <header class="entry-header">
        <?php
            if ( is_single() ) :
                the_title( '<h1 class="entry-title">', '</h1>' );
            else :
                the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
            endif;
        ?>
    </header><!-- .entry-header -->
 
    <div class="entry-content">
        <?php
            /* translators: %s: Name of current post */
            the_content( sprintf(
                __( 'Continue reading %s', 'twentyfifteen' ),
                the_title( '<span class="screen-reader-text">', '</span>', false )
            ) );
 
            wp_link_pages( array(
                'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
                'after'       => '</div>',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
                'separator'   => '<span class="screen-reader-text">, </span>',
            ) );
        ?>
    </div><!-- .entry-content -->
 
    <?php
        // Author bio.
        if ( is_single() && get_the_author_meta( 'description' ) ) :
            get_template_part( 'author-bio' );
        endif;
    ?>
 
    <footer class="entry-footer">
        <?php twentyfifteen_entry_meta(); ?>
        <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
    </footer><!-- .entry-footer -->
 
</article><!-- #post-## -->

هنگامی که آن را پیدا کردید باید محتوای داخل این فایل را کپی کرده و در بخش Repeater Template افزونه Ajax Load More همانطور که در قسمت بالای آموزش گفته شد، پیست کنید.

فراموش نکنید که روی دکمه Save Template کلیک کنید تا تنظیمات شما ذخیره شود.

اگر می خواهید از قالب پیش فرض افزونه استفاده کنید، نکته مهمی که باید در نظر بگیرید این است که قالب تکرار کننده پیش فرض تنها نوشته های منتخب را نشان می دهد و شامل تمام نوشته ها نمی شود. اگر می خواهید تمام نوشته ها نشان داده شود باید در خط آخر قبل از تگ بسته </i> عبارت excerpt را با content جایگزین کنید.

اگر با زبان برنامه نویسی PHP آَشنایی دارید می توانید این قالب را عوض کنید. در غیر این صورت مقدار پیش فرض نیز می تواند نیازهای شما را کاملاً برطرف کند. نسخه رایگان افزونه اجازه استفاده از بیش از یک repeater template را نمی دهد. شما با خریداری Custom Repeaters Add-on می توانید قالب های مختلفی برای انواع مختلف پست ها نصب و راه اندازی کنید.

برای فعال کردن Ajax Infinite Scrolling در نوشته ها و برگه های سایت خود باید یک شورت کد تولید کرده و آن را در هر صفحه اعمال کنید. این کار در زیرمنوی Shortcode Builder انجام می شود که در ادامه آموزش افزونه Ajax Load More به بررسی این زیرمنو می پردازیم.

Shortcode Builder

در منوی Ajax Load More پیشخوان وردپرس روی زیرمنوی Shortcode Builder کلیک کنید.

آموزش افزونه Ajax Load More

در این صفحه از افزونه Ajax Load More تنظیمات زیادی را می توانید پیکربندی کنید. اما مفیدترین باکس هایی که می توانید تنظیمات آنها را پیکربندی کنید را در ادامه آموزش شرح می دهیم.

Lable: در این قسمت می توانید متنی را که هنگام بارگذاری بیشتر نوشته ها روی دکمه بارگذاری نشان داده می شود تغییر دهید. افزونه به صورت پیش فرض از Older Posts استفاده می کند اما شما می توانید آن را تغییر دهید یا حتی این متن را فارسی کنید.

Post Type: در این باکس به صورت پیش فرض تنها نوشته ها فعال هستند اما بهتر است برگه ها یا دیگر پست های سفارشی را نیز فعال کنید.

Category: در این قسمت می توانید دسته های خاصی را شامل infinite scroll کنید و دسته های خاصی را از آن مستثنی نمایید.

Author: در این باکس می توانید infinite scroll را برای یک نویسنده خاص اضافه کنید.

Posts per Page: در این قسمت می توانید مشخص کنید که افزونه Ajax Load More چند نوشته را در هر بروزرسانی باید بارگذاری کند.

Pause: این قسمت یک ویژگی بسیار مهم است. برای infinite scroll کردن درست باید این قسمت را False انتخاب کنید. اگر True را انتخاب کنید کاربران برای دیدن نوشته های بیشتر باید روی یک دکمه Load More کلیک کنند.

Scrolling: مهم این است که این گزینه فعال باشد به طوری که نوشته ها با اسکرول کردن کاربر به سمت پایین به صورت خودکار بارگذاری شوند. بهتر است جزئیات تکنیکی این قسمت را تغییری ندهید.

هنگامی که همه تنظیمات را پیکربندی کردید، شورت کدی که در سمت راست صفحه در اختیار شما قرار داده شده است را کپی کنید.

آموزش افزونه Ajax Load More

تمام کاری که باید انجام دهید این است که این شورت کد را به صفحه ای که می خواهید infinite scroll برای آن ظاهر شود، اضافه کنید. به عنوان مثال می توانید یک صفحه به نام وبلاگ ایجاد کرده و شورت کد را در آن وارد کنید. سپس از این صفحه به عنوان صفحه پیش فرض وبلاگ استفاده کنید. توجه داشته باشید که در ویرایشگر گوتنبرگ وردپرس باید از بلوک کد کوتاه استفاده کنید.

همچنین می توانید شورت کد ایجاد شده را در فایل های قالب وردپرس استفاده کنید. فراموش نکنید که قبل از اعمال هر تغییری در ابتدا از قالب وردپرس خود پشتیبان گیری کنید. این کار را می توانید با استفاده از بهترین افزونه های پشتیبان گیری وردپرس انجام دهید.

شما باید فایل های قالب خود را که می خواهید شورت کد را در آنها قرار دهید، پیدا کنید. بسته به اینکه قالب شما چگونه سازمان دهی شده است این فایل ها معمولاً index.php، archives.php، categories.php و بسیاری موارد دیگر است. شما باید شورت کدی که کپی کرده اید را درست بعد از تگ endwhile وارد کنید.

اگر شورت کد را در فایل قالب اضافه می کنید باید این کار را از طریق تابع do_shortcode به صورت زیر انجام دهید.

echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]');

سپس تغییرات را ذخیره کرده و سایت خود را مشاهده کنید.

ویژگی infinite scroll برای تمام وب سایت های وردپرسی لازم نیست. اما اگر سایت شما محتواهایی با اهمیت یکسان را منتشر می کند، با پیاده سازی infinite scroll می توانید بونس ریت سایت و تعداد صفحات در هر بازدید را بهبود دهید.

افزونه Ajax Load More آسان ترین روش برای اضافه کردن infinite scrolling به وردپرس است. اگر شما اسکرول کردن بی پایان پایه را می خواهید، به هیچ Add-on دیگری نیاز نخواهید داشت. نصب و راه اندازی افزونه نیز بسیار ساده است و بیشتر از 15 الی 30 دقیقه وقت شما را نخواهد گرفت.

امیدواریم این آموزش در سایت مدیر وردپرس مورد توجه شما قرار گرفته باشد و توانسته باشید از افزونه Ajax Load More برای افزایش سرعت وب سایت وردپرسی خود بهره ببرید.

دانلود افزونه

دانلود افزونه
صفحه افزونه

درباره ی مینا قدسی

مطلب پیشنهادی

WP Reset

WP Reset افزونه ریست کردن وردپرس و بازگشت به تنظیمات اولیه

اگر مدتی است که با وردپرس کار کرده اید، حتماً با شرایطی روبرو شده اید …

۲ دیدگاه

  1. سلام
    خسته نباشید
    مطلب جالبی گذاشتین…
    بخشید آیا این افزونه برای محصولات ووکامرس هم جواب میده؟

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

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