آموزش افزونه Ajax Load More برای پیمایش بی پایان در وردپرس
همه مدیران وب سایت ها تمام سعی خود را می کنند تا کارایی سایت خود را بالاتر برده و بازدیدکنندگان را برای بازگشت مجدد به سایت ترغیب کنند. یکی از بهبودهایی که می توانید در سایت خود اعمال کرده و کارایی آن را بالاتر ببرید تکنیک infinite scrolling یا اسکرول کردن بی پایان است. در این مقاله به آموزش افزونه Ajax Load More برای پیمایش نامحدود در وب سایت که منجر به افزایش سرعت وردپرس و تجربه کاربری بهتر می شود، می پردازیم.
در مقاله راهنمای جامع افزایش سرعت وردپرس می توانید با روش های دیگر افزایش سرعت سایت وردپرس، آشنا شوید.
بسیاری از وبلاگ ها از یک لینک ” نوشته های قدیمی” در انتهای صفحه اصلی، وبلاگ یا دیگر صفحات آرشیو برای تشویق کاربران به خواندن نوشته های دیگر سایت استفاده می کنند. اما سایت های دیگری نیز وجود دارند که از مزایای اسکرول کردن بی پایان (infinite scrolling) یا دکمه “بارگذاری نوشته های بیشتر” بهره می برند. بعضی از سایت هایی که می توانند از این ویژگی استفاده زیادی کنند، عبارتند از: وب سایت های عکاسی، وب سایت های محتواهای لیست شده (listicles) و وب سایت های محتوای ویروسی (وایرال).
در تکنیک infinite scrolling به جای بارگذاری تمام صفحه جدید، دکمه “Load More Posts” کار می کند و از جاوا اسکریپت برای فچ کردن مجموعه بعدی محتوا استفاده می شود. این کار تجربه کاربری بهتری ایجاد کرده و شانس دیده شدن محتواهای بیشتر سایت را افزایش می دهد.
افزونه Ajax Load More یکی از بهترین افزونه های اسکرول کردن بی پایان وردپرس برای بارگذاری تنبل نوشته ها، پست های تکی، صفحات، کامنت ها و بسیاری موارد دیگر با کوئری های قدرت گرفته از Ajax است. به همین دلیل این افزونه جزء بهترین افزونه های Lazy Load وردپرس است.
اگر می خواهید ویژگی اسکرول بی پایان را برای محصولات فروشگاه ووکامرس خود استفاده کنید می توانید از افزونه YITH Infinite Scrolling استفاده کنید، در این آموزش به بررسی افزونه Ajax Load More می پردازیم.
آموزش افزونه Ajax Load More و نحوه اسکرول کردن بی پایان (Infinite Scrolling) صفحات در وردپرس
ابتدا افزونه را از پایین صفحه دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید. اگر منو افزونه را ندیدید یا اطلاعات جزئی تری لازم دارید، به راهنمای گام به گام ما در مورد آموزش نصب افزونه وردپرس مراجعه کنید.
بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه منوی جدیدی به نام Ajax Load More به پیشخوان وردپرس اضافه خواهد شد.
در منوی Ajax Load More زیرمنوهای مختلفی وجود دارد که هریک بخشی از قابلیت های این افزونه را فعال می کند. در ادامه آموزش به بررسی این زیرمنوها می پردازیم.
آموزش تنظیمات عمومی افزونه Ajax Load More
با کلیک کردن بر روی زیر منوی Settings وارد صفحه تنظیمات عمومی افزونه می شوید. در این صفحه نمی توانید تغییرات زیادی اعمال کنید تنها می توانید دو ویژگی را بدون اینکه عملکرد هسته افزونه را مختل کنید، تغییر دهید.
Button/Loading Style: در این قسمت می توانید یک استایل برای لود کردن انتخاب کنید. می توانید یک دکمه یا یک اسکرول بی پایان برای این کار در نظر بگیرید. اگر استایل infinite Scroll را انتخاب کنید، محتواها تنها با اسکرول کردن و بدون نیاز به کلیک بر روی دکمه خاصی بارگذاری می شوند.
Editor Button: اگر می خواهید در ویرایشگر نوشته دکمه شورت کد را پنهان کنید باید این گزینه را فعال کنید.
اگر با CSS آشنایی داشته باشید می توانید استایل خود را نیز اضافه کنید.
تمپلیت تکرار کننده
افزونه Ajax Load More از یک سیستم قالب دهی برای مدیریت نمایش فرانت اند و استایل دهی محتوای Ajax loaded استفاده می کند که به آن Repeater Template گفته می شود و در این بخش به آموزش آن می پردازیم.
روی زیرمنوی Repeater Template کلیک کنید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.
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 تنظیمات زیادی را می توانید پیکربندی کنید. اما مفیدترین باکس هایی که می توانید تنظیمات آنها را پیکربندی کنید را در ادامه آموزش شرح می دهیم.
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: مهم این است که این گزینه فعال باشد به طوری که نوشته ها با اسکرول کردن کاربر به سمت پایین به صورت خودکار بارگذاری شوند. بهتر است جزئیات تکنیکی این قسمت را تغییری ندهید.
هنگامی که همه تنظیمات را پیکربندی کردید، شورت کدی که در سمت راست صفحه در اختیار شما قرار داده شده است را کپی کنید.
تمام کاری که باید انجام دهید این است که این شورت کد را به صفحه ای که می خواهید 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 دقیقه وقت شما را نخواهد گرفت.
امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.
دانلود افزونه
سلام
خسته نباشید
مطلب جالبی گذاشتین…
بخشید آیا این افزونه برای محصولات ووکامرس هم جواب میده؟
بله، با ووکامرس کاملا سازگاری دارد…