افزودن اسکرول نامحدود به وردپرس؛ با افزونه و کد

یه سناریوی آشنا رو با هم مرور کنیم. کاربر وارد آرشیو وبلاگتون می‌شه، چهار تا مطلب رو نگاه می‌کنه، می‌رسه ته صفحه، چشمش می‌خوره به شماره‌های ۱ و ۲ و ۳ و بعد صفحه رو می‌بنده و می‌ره. این اتفاق روزی چند بار توی سایتتون می‌افته و توی گزارش‌های آنالیتیکس هم چیزی جز یه عدد خشک نشون نمی‌ده.

اسکرول نامحدود دقیقاً برای همین لحظه ساخته شده. توی این مقاله قراره سه تا کار بکنیم: اول ببینیم این قابلیت واقعاً به درد سایتتون می‌خوره یا نه (چون برای خیلی از سایت‌ها نمی‌خوره)، بعد با افزونه راهش بندازیم، و آخرش هم برای اونایی که دوست ندارن به‌خاطر یه قابلیت ساده افزونه نصب کنن، بدون افزونه انجامش بدیم. بحث سئو و سرعت رو هم که همیشه دغدغه‌ست، جدا و مفصل بررسی می‌کنیم.

اسکرول نامحدود چیست؟

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

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

اسکرول نامحدود، دکمه Load More یا صفحه‌بندی کلاسیک؟

اینجا یه سوءتفاهم رایج هست. خیلیا فکر می‌کنن انتخاب فقط بین «اسکرول نامحدود» و «صفحه‌بندی» هست، درحالی‌که یه گزینه‌ی وسط هم داریم که معمولاً بهترین انتخابه. این جدول رو ببینین:

اگه حوصله‌ی خوندن بقیه‌ی مقاله رو ندارین، خلاصه‌ش اینه: برای اکثر سایت‌های ایرانی، دکمه Load More انتخاب درست‌تریه تا اسکرول نامحدود خالص. ولی خب، بمونین، چراش رو می‌گیم.

مزایای اسکرول نامحدود

کاربر بیشتر می‌بینه. این واضح‌ترین سودشه. هر کلیک یه مانعه و هر مانعی یه بخشی از کاربرها رو می‌ریزه. وقتی مانع رو برمی‌دارین، تعداد مطلب یا محصولی که یه نفر توی یه بازدید می‌بینه به شکل محسوسی بالا می‌ره. توی فروشگاه‌ها این عدد مستقیم روی نرخ تبدیل اثر می‌ذاره؛ آدمی که ۴۰ تا محصول دیده، خیلی محتمل‌تره یکیش رو بپسنده تا آدمی که ۱۲ تا دیده.

موبایل، موبایل، موبایل. احتمالاً بالای ۷۰ درصد ترافیک سایتتون از موبایله. روی صفحه‌ی ۶ اینچی، زدن روی شماره‌ی صفحه‌ی بعد یعنی هدف گرفتن یه مربع کوچیک با انگشت شست. اسکرول کردن اما طبیعی‌ترین حرکت ممکنه. عملاً دارین یه اصطکاک رو با یه حرکت بدون‌فکر عوض می‌کنین.

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

عیب‌های اسکرول نامحدود

اینجا رو با دقت بخونین، چون قسمت اعظم پشیمونی‌ها از همین‌جا شروع می‌شه.

از بین رفتن فوتر

این بزرگ‌ترین ایراده. وقتی محتوا بی‌وقفه لود می‌شه، کاربر هیچ‌وقت به فوتر نمی‌رسه؛ چون تا نزدیک می‌شه، یه دسته مطلب جدید جلوش سبز می‌شه. اگه توی فوتر سایتتون لینک تماس، نماد اعتماد، فرم عضویت خبرنامه یا لینک‌های مهم دارین، عملاً دارین اونا رو خاموش می‌کنین.

کلافه شدن کاربر از دکمه Back

این ایراد کمتر گفته می‌شه ولی توی عمل آزاردهنده‌ترینه. کاربر ۶۰ تا محصول اسکرول کرده، روی یکی کلیک می‌کنه، خوشش نمی‌آد، دکمه Back رو می‌زنه و برمی‌گرده به بالای صفحه‌ی اول. همه‌ی اون اسکرول از بین رفته. اکثر کاربرها اینجا سایت رو می‌بندن. افزونه‌های خوب برای این مشکل راه‌حل دارن (با تغییر URL موقع اسکرول)، ولی افزونه‌های ضعیف نه، و این دقیقاً یکی از معیارهای انتخاب افزونه‌ست.

تاثیر روی Core Web Vitals

اینجا سه تا معیار گوگل درگیر می‌شن:

• CLS (پرش لایوت): محتوای جدیدی که اضافه می‌شه، اگه ارتفاعش از قبل رزرو نشده باشه، صفحه رو می‌پرونه. مخصوصاً وقتی تصاویر بعد از متن لود می‌شن.
• INP (سرعت پاسخ به تعامل): هر بار که یه دسته پست جدید به DOM اضافه می‌شه، مرورگر باید دوباره رندر کنه. بعد از پنج‌شش بار لود، صفحه سنگین می‌شه و کلیک‌ها با تأخیر جواب می‌دن.
• مصرف حافظه: روی گوشی‌های میان‌رده، بعد از ۱۰ بار لود ممکنه تب مرورگر کلاً هنگ کنه.

فشار روی سرور

هر بار اسکرول یعنی یه ریکوئست جدید به سرور و یه کوئری جدید به دیتابیس. کاربری که سریع اسکرول می‌کنه، توی چند ثانیه چند تا ریکوئست پشت‌سرهم می‌فرسته. اگه روی هاست اشتراکی ضعیف هستین و ترافیک بالایی دارین، این می‌تونه واقعاً اذیتتون کنه. رعایت محدودیت تعداد لود خودکار (که پایین‌تر می‌گیم) اینجا خیلی کمک می‌کنه.

دسترس‌پذیری

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

پس برای چه‌کسانی مناسب است؟

بذارین به‌جای جواب کلی، تفکیک‌شده بگیم:

خیلی مناسبه: گالری تصویر، سایت پرتفولیو، فید ویدیو، سایت‌های عکس‌محور، اپلیکیشن‌های وب.

با دکمه Load More مناسبه: فروشگاه ووکامرس، آرشیو وبلاگ، سایت خبری، سایت دانلود.

اصلاً مناسب نیست: سایت شرکتی و خدماتی (که کاربر باید به فرم تماس توی فوتر برسه)، سایت‌های محتوای طولانی و تحقیقی (که کاربر می‌خواد بدونه کجای آرشیو هست)، سایت‌های تک‌صفحه‌ای.

معیار ساده‌ش اینه: اگه کاربر داره «مرور» می‌کنه، اسکرول نامحدود خوبه. اگه داره «دنبال چیز مشخصی می‌گرده»، صفحه‌بندی بهتره.

اسکرول نامحدود و سئو

این بخش رو خیلیا اشتباه توضیح می‌دن، پس دقیق بریم جلو.

آیا گوگل محتوای لودشده با جاوااسکریپت رو می‌بینه؟

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

پس راه حل چیست؟

قانون طلایی: لینک صفحه‌بندی رو از HTML حذف نکنین.

خیلیا وقتی اسکرول نامحدود رو فعال می‌کنن، می‌رن توی قالب و کد the_posts_pagination() رو کلاً پاک می‌کنن که «شلوغ نباشه». این بدترین کاریه که می‌تونین بکنین. با این کار مسیر رسیدن گوگل به صفحه‌ی ۲، ۳، ۴ و مطالب قدیمی‌تر رو بستین.

راه درست اینه که لینک‌های صفحه‌بندی توی سورس HTML باقی بمونن و فقط با CSS مخفی بشن، یا اینکه افزونه خودش مدیریتشون کنه. افزونه‌های استاندارد هم دقیقاً همین کار رو می‌کنن: لینک صفحه‌ی بعد رو از DOM می‌خونن، محتواش رو می‌گیرن، و URL مرورگر رو هم با History API به /page/2/ تغییر می‌دن. این کار هم برای سئو خوبه، هم مشکل دکمه Back رو حل می‌کنه.

تکلیف rel=”next” و rel=”prev” چیه؟

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

چطور تست کنیم؟

بعد از راه‌اندازی، این دو تا کار رو انجام بدین:

۱. توی سرچ کنسول، ابزار URL Inspection رو روی آدرس /page/2/ سایتتون اجرا کنین و گزینه‌ی «View Crawled Page» رو ببینین. اگه پست‌ها اونجا هستن، خیالتون راحت باشه.

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

روش اول: افزونه Ajax Load More

از این افزونه شروع می‌کنیم چون بهترین گزینه‌ی فعلیه: مرتب آپدیت می‌شه، کاربرهای زیادی داره، و هم اسکرول نامحدود می‌ده هم دکمه Load More.

مرحله ۱، نصب. از مسیر «افزونه‌ها ← افزودن»، عبارت Ajax Load More رو جستجو و نصبش کنین.

مرحله ۲، ساخت Repeater Template. بعد از فعال‌سازی، منوی Ajax Load More به پیشخوان اضافه می‌شه. بخش Repeater Templates رو باز کنین. اینجا تعیین می‌کنین هر پست چطور نمایش داده بشه (تصویر شاخص، عنوان، خلاصه). قالب پیش‌فرضش کار می‌کنه، ولی برای اینکه با ظاهر سایتتون یکی بشه، بهتره کلاس‌های CSS قالب خودتون رو بهش بدین.

مرحله ۳، ساخت شورت‌کد. به بخش Shortcode Builder برین. اینجا کلی گزینه دارین که مهم‌هاش اینان:

• Posts Per Page: چند تا پست در هر بار لود بشه. عدد ۶ تا ۱۲ منطقیه.
• Pause: اگه روشنش کنین، به‌جای لود خودکار، دکمه نشون می‌ده (همون Load More).
• Scroll Distance: چند پیکسل مونده به انتهای صفحه شروع به لود کنه.
• Post Type: می‌تونین روی نوشته‌ها، محصولات یا هر Custom Post Type دیگه‌ای تنظیمش کنین.
• Max Pages: حداکثر چند بار لود خودکار انجام بشه و بعدش دکمه بیاد. اینو حتماً روی ۲ یا ۳ بذارین.

مرحله ۴، قرار دادن شورت‌کد. شورت‌کد ساخته‌شده (چیزی شبیه [ajax_load_more post_type="post" posts_per_page="8"]) رو کپی کنین و توی صفحه یا قالب آرشیو قرارش بدین. اگه از صفحه‌ساز استفاده می‌کنین، یه ویجت شورت‌کد بذارین و همون رو داخلش پیست کنین.

روش دوم: افزونه Catch Infinite Scroll

اگه دنبال چیز خیلی ساده‌این و نمی‌خواین با شورت‌کد سروکله بزنین، این افزونه گزینه‌ی سبک‌تریه. بعد از نصب و فعال‌سازی، از پیشخوان واردش بشین:

• Load On: مهم‌ترین گزینه. حالت Scroll یعنی اسکرول نامحدود، حالت Click یعنی دکمه Load More. پیشنهاد ما: Click.
• Navigation Selector / Content Selector: اینا سلکتورهای CSS قالب شما رو می‌گیرن. مقادیر پیش‌فرض با اکثر قالب‌های استاندارد کار می‌کنن، ولی اگه افزونه کار نکرد، ۹۰ درصد مشکل از همین دو تاست (پایین‌تر توضیح دادیم).
• Image: گیف لودینگ. می‌تونین پیش‌فرض رو نگه دارین یا تصویر خودتون رو آپلود کنین.
• Finish Text: متنی که وقتی مطالب تموم شدن نشون داده می‌شه. یه چیز باحال بنویسین، مثلاً «همینا بود! دیگه مطلبی نمونده 🙂»

آخرش Save Changes رو بزنین.

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

روش سوم: بدون افزونه

اگه از نصب افزونه برای هر کار کوچیکی خوشتون نمی‌آد، سه تا راه دارین.

با صفحه‌ساز

اگه از المنتور پرو استفاده می‌کنین، ویجت Loop Grid و Posts هر دو توی تب Pagination گزینه‌ی Load More و Infinite Scroll رو دارن. سه تا کلیکه، تمام. بریکس بیلدر هم توی المان Query Loop همین قابلیت رو داره. اگه صفحه‌ساز دارین، اصلاً سراغ افزونه نرین.

قالب‌هایی که این قابلیت را دارند

خیلی از قالب‌های ایرانی و خارجی این امکان رو توی تنظیمات دارن. قبل از هر کاری، توی تنظیمات قالبتون دنبال کلمه‌ی «صفحه‌بندی»، Pagination یا Load More بگردین.

با کد سفارشی

این روش تمیزترین خروجی رو می‌ده، چون از IntersectionObserver مدرن استفاده می‌کنه و هیچ لایبرری اضافه‌ای لود نمی‌کنه. منطقش ساده‌ست: لینک «صفحه بعد» رو از خود صفحه می‌خونیم، محتواش رو با fetch می‌گیریم، پست‌هاش رو جدا می‌کنیم و می‌چسبونیم ته لیست.

قدم اول: این کد رو توی functions.php قالب فرزندتون بذارین:

php

function mis_enqueue_infinite_scroll() {
    if ( is_home() || is_archive() ) {
        wp_enqueue_script(
            'mis-infinite-scroll',
            get_stylesheet_directory_uri() . '/js/infinite-scroll.js',
            array(),
            '1.0',
            true
        );
    }
}
add_action( 'wp_enqueue_scripts', 'mis_enqueue_infinite_scroll' );

قدم دوم: فایل js/infinite-scroll.js رو بسازین و این کد رو داخلش بذارین:

js

document.addEventListener('DOMContentLoaded', function () {
  // این سه تا سلکتور رو با ساختار قالب خودتون تنظیم کنین
  const POSTS_CONTAINER = '.site-main';
  const POST_ITEM       = 'article.post';
  const NEXT_LINK       = '.next.page-numbers';

  const container = document.querySelector(POSTS_CONTAINER);
  if (!container) return;

  let nextUrl = document.querySelector(NEXT_LINK)?.href || null;
  if (!nextUrl) return;

  let loading  = false;
  let autoLoad = 0;
  const MAX_AUTO = 2; // بعد از دو بار لود خودکار، دکمه نشون می‌ده

  // ساخت المان نگهبان، دکمه و لودینگ
  const sentinel = document.createElement('div');
  sentinel.style.height = '1px';
  container.after(sentinel);

  const button = document.createElement('button');
  button.textContent = 'نمایش مطالب بیشتر';
  button.style.display = 'none';
  button.className = 'mis-load-more';
  sentinel.before(button);

  const spinner = document.createElement('div');
  spinner.textContent = 'در حال بارگذاری...';
  spinner.style.display = 'none';
  sentinel.before(spinner);

  async function loadNext() {
    if (loading || !nextUrl) return;
    loading = true;
    spinner.style.display = 'block';
    button.style.display  = 'none';

    try {
      const res  = await fetch(nextUrl);
      const html = await res.text();
      const doc  = new DOMParser().parseFromString(html, 'text/html');

      doc.querySelectorAll(POST_ITEM).forEach(function (post) {
        container.appendChild(document.importNode(post, true));
      });

      // آدرس مرورگر رو آپدیت می‌کنیم؛ هم برای سئو، هم برای دکمه Back
      history.pushState(null, '', nextUrl);

      nextUrl = doc.querySelector(NEXT_LINK)?.href || null;
      autoLoad++;
    } catch (e) {
      console.error('خطا در بارگذاری صفحه بعد:', e);
    } finally {
      loading = false;
      spinner.style.display = 'none';
      if (!nextUrl) {
        observer.disconnect();
        sentinel.textContent = 'همینا بود!';
      } else if (autoLoad >= MAX_AUTO) {
        button.style.display = 'block';
      }
    }
  }

  const observer = new IntersectionObserver(function (entries) {
    if (entries[0].isIntersecting && autoLoad < MAX_AUTO) {
      loadNext();
    }
  }, { rootMargin: '300px' });

  observer.observe(sentinel);
  button.addEventListener('click', loadNext);
});

سه تا ثابت بالای فایل رو باید با ساختار قالب خودتون تنظیم کنین. برای پیدا کردنشون، توی مرورگر روی لیست پست‌ها راست‌کلیک و Inspect بزنین و ببینین پست‌ها داخل چه المانی هستن و هر پست چه تگ و کلاسی داره.

اسکرول نامحدود توی فروشگاه ووکامرس

فروشگاه‌ها یه سری نکته‌ی مخصوص خودشون دارن:

اول، حتماً Load More بذارین نه اسکرول خودکار. کاربر فروشگاه دنبال محصول مشخصیه؛ اگه گمش کنه و نتونه برگرده، خریدش رو از دست دادین.

دوم، حواستون به فیلترها باشه. اگه از افزونه‌ی فیلتر محصول استفاده می‌کنین، بعد از هر بار لود جدید ممکنه رویدادهای فیلتر روی محصولات تازه کار نکنن. حتماً بعد از راه‌اندازی، فیلتر رو تست کنین و بعدش اسکرول کنین.

سوم، تعداد محصول در هر بار لود رو کم بذارین. کارت محصول ووکامرس تصویر داره و سنگینه. ۸ تا محصول در هر لود، تعادل خوبیه بین سرعت و تجربه کاربری.

چهارم، دکمه‌های «افزودن به سبد» رو تست کنین. توی بعضی قالب‌ها، Ajax سبد خرید فقط روی محصولاتی کار می‌کنه که موقع لود اولیه توی صفحه بودن.

چک‌لیست قبل از انتشار

اینا رو رعایت کنین تا بعداً پشیمون نشین:

• بعد از ۲ تا ۳ بار لود خودکار، دکمه نشون بدین (هم فوتر نجات پیدا می‌کنه، هم سرور).
• برای تصاویر width و height مشخص کنین تا صفحه موقع لود نپره.
• Lazy Load تصاویر رو فعال نگه دارین.
• URL مرورگر رو موقع رفتن به صفحه‌ی بعد آپدیت کنین.
• لینک‌های صفحه‌بندی رو از HTML حذف نکنین.
• یه انیمیشن یا متن لودینگ بذارین که کاربر بفهمه چیزی داره میاد.
• متن پایان بذارین؛ صفحه‌ای که یهو تموم می‌شه، حس خرابی می‌ده.
• روی یه گوشی واقعی و با اینترنت موبایل تستش کنین، نه فقط روی لپ‌تاپ با وای‌فای.

مشکلات رایج و راه‌حلشون

اصلاً کار نمی‌کنه و هیچ اتفاقی نمی‌افته. ۹۰ درصد مواقع مشکل از سلکتورهاست. توی تنظیمات افزونه (یا کد بالا) باید سلکتور درست کانتینر پست‌ها و لینک صفحه بعد رو بدین. با Inspect مرورگر پیداشون کنین.

پست‌ها تکراری لود می‌شن. معمولاً وقتی پیش می‌آد که یه افزونه‌ی دیگه (مثل افزونه‌ی نمایش پست تصادفی یا Sticky Post) توی کوئری دخالت کرده. ترتیب مرتب‌سازی آرشیو رو روی حالت پیش‌فرض بذارین.

بعد از فعال کردن، چیزی لود نمی‌شه ولی خطا هم نمی‌ده. کنسول مرورگر رو با F12 باز کنین. اگه خطای مربوط به jQuery می‌بینین، احتمالاً افزونه‌ی بهینه‌سازیتون داره jQuery رو به فوتر منتقل یا defer می‌کنه. توی تنظیمات افزونه‌ی کش، jQuery رو از حالت defer خارج کنین.

با افزونه‌ی کش تداخل داره. فایل جاوااسکریپت اسکرول رو از لیست فایل‌های ادغام‌شده (Combine JS) مستثنی کنین.

روی موبایل کار نمی‌کنه ولی روی دسکتاپ سالمه. معمولاً به‌خاطر نسخه‌ی موبایل مجزای کشه، یا قالبیه که توی موبایل ساختار HTML متفاوتی داره.

سؤالات متداول

جمع‌بندی

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

۱. برای اکثر سایت‌ها، دکمه Load More جواب بهتری می‌ده تا اسکرول کاملاً خودکار.

۲. هر کاری می‌کنین، لینک‌های صفحه‌بندی رو از HTML حذف نکنین.

۳. بعد از دو سه بار لود خودکار، کنترل رو به کاربر برگردونین.

پیشنهاد عملی: اول روی یه بخش کوچیک از سایت (مثلاً آرشیو یه دسته‌بندی) پیاده‌ش کنین، یکی دو هفته آمار نرخ پرش و مدت حضور رو نگاه کنین، و اگه نتیجه داد به کل سایت گسترشش بدین.

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

گ

تیم تولید محتوا

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