افزودن دکمه بارگذاری پست های بیشتر در وردپرس با افزونه Ajax Load More

آیا میخواهید دکمه بارگذاری پست ها را در سایت وردپرسی خود نمایش دهید؟ بسیاری از پلتفرم های محبوب به کاربران خود اجازه می دهند تا وقتی که کاربر به انتهای صفحه رسید بتواند با کلیک بر روی دکمه ای پست های بیشتری را مشاهده کند. در این مقاله به شما نشان خواهیم داد که چگونه میتوانید دکمه بارگذاری پست ها را به سایت وردپرسی خود اضافه کنید.

افزونه Ajax Load More

چه موقع و چرا باید دکمه بارگذاری پست ها را به وردپرس اضافه کرد؟

بسیاری از سایت ها از روش قدیمی “پست های قدیمی تر” در صفحه اصلی سایت خود استفاده می کنند تا کاربران با کلیک بر روی آن بتواند سایر پست های سایت را مشاهده کند. برخی از سایت ها نیز از روش “صفحه بندی” استفاده می کنند. اما سایت هایی نیز وجود دارند که می توانند از اسکرول بی نهایت یا دکمه بارگذاری پست ها بسیار سود ببرند.

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

اضافه کردن دکمه بارگذاری پست ها در وردپرس

قبل از هر کاری لازم است افزونه Ajax Load More را از انتهای همین آموزش دریافت کرده و سپس آن را نصب کنید. در صورتیکه با نصب پلاگین در وردپرس آشنا نیستید، می توانید مقاله سه روش مختلف نصب پلاگین (افزونه) در وردپرس را مطالعه کنید.

بعد از نصب و فعالسازی پلاگین، قسمت جدیدی تحت عنوان Ajax Load More به منو سمت راست پیشخوان وردپرس اضافه خواهد شد (طبق تصویر زیر):

برای اینکه وارد صفحه تنظیمات پلاگین شوید، طبق تصویر بالا روی گزینه Settings کلیک کنید. بعد از کلیک بر روی گزینه مورد نظر وارد صفحه تنظیمات افزونه خواهید شد (طبق تصویر زیر):

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

Repeater Template

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

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

برای رفع این مشکل شما باید کدهایی که قالب شما از آنها برای نمایش پست ها در سایت استفاده می کند را کپی کرده و در این قسمت قرار دهید. معمولا این کدها در فایل هایی تحت عنوان index.php یا page.php یا archive قرار دارند و یا اگر قالب شما از فرمت های مختلف پشتیبانی می کند ممکن است این کدها در فایل هایی تحت عنوان content-page.php یا content-status.php و فایل هایی از این دست یافت می شوند البته شما باید به دنبال فایل کلی با نام content.php در این گونه فایل ها بگردید و کدهای درون آن را کپی کرده و در این قسمت قرار دهید.

برای مثال یک نمونه کد که در قالب پیش فرض وردپرس برای نمایش مطالب در سایت استفاده شده است را می توانید در زیر ببینید:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
        // تصویر بندانگشتی
        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
            /* %s: نام پستی است که نمایش داده می شود */
            the_content( sprintf(
                __( 'ادامه مطالعه %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
        // بیوگرافی نویسنده
        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( __( 'ویرایش', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
    </footer><!-- .entry-footer -->
 
</article><!-- #post-## -->

بعد از اینکه کدهای مربوطه را پیدا کردید، آن ها در بخشی که در تصویر زیر مشخص شده است باید قرار دهید:

بعد از وارد کردن کدها بر روی دکمه Save Template کلیک کنید تا تنظیمات انجام شده ذخیره شود.

 Shortcode Builder

بعد از انجام تنظیمات بالا، بر روی گزینه Shortcode Builder در منو سمت راست پیشخوان که زیرمجموعه همان قسمت Ajax Load More کلیک کنید. در این قسمت شما باید شورت کد مربوطه را ایجاد کرده و آن را درون قالب خود قرار دهید تا در سایت نمایش داده شود.

این بخش شامل تنظیمات بسیار زیادی است که به شما امکان شخصی سازی و سفارشی سازی را می دهد. اول از همه باید نوع container را انتخاب کنید. در صورتیکه اطلاعی از این قسمت ندارید بهتر است نگاهی به کدی که در سایت خود برای نمایش حلقه مطالب استفاده کرده اید بیندازید. بیشتر قالب های جدیدی که طراحی می شوند از تگ <div> استفاده می کنند.

پس گزینه < div > را طبق تصویر زیر انتخاب کنید:

بعد از آن در قسمت Button Labels تنظیمات مربوط به دکمه بارگذاری بیشتر را انجام دهید:

• Label: در این قسمت شما باید متنی را که میخواهید بر روی دکمه نمایش داده شود را وارد کنید.
• Loading Label: در این قسمت باید متنی را که وقتی محتوا در حال بارگذاری برای نمایش است، باید به کاربر نمایش داده شود را وارد کنید.

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

بعد از آن کافی است در قسمت Shortcode Output شورت کد ایجاد شده را کپی کرده و در هر جایی از قالب که میخواهید نمایش داده شود قرار دهید (طبق تصویر زیر):

اضافه کردن دکمه بارگذاری پست ها به قالب

این قسمت از آموزش نیاز به اضافه کردن کد به قالب دارد. پس حتما قبل از هر تغییری بک آپ (فایل پشتیبان) تهیه کنید.

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

باید توجه داشته باشید که شورت کد مربوطه را باید درست بعد از تگ endwhile; قرار دهید.

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

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

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

پیش نمایش تصویری قبل از کلیک بر روی دکمه:

پیش نمایش تصویری بعد از کلیک بر روی دکمه:

همین طور که مشاهده کردید این افزونه امکانات فوق العاده ای داشته و از قابلیت سفارشی سازی بسیاری بالایی برخوردار است که هر کاربر بسته به نیاز سایت خود می تواند تنظیمات مربوطه به انجام دهد.

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

دانلود افزونه Ajax Load More