افزودن دکمه «بازگشت به بالا» در وردپرس بدون افزونه

در وب‌سایت‌های وردپرسی که محتوای طولانی یا صفحات زیادی دارند، فراهم کردن یک دکمه «بازگشت به بالا» نقش مؤثری در بهبود تجربه کاربری و کاهش خستگی اسکرول دارد. افزون بر این، می‌توان با کدنویسی دستی در فایل‌های قالب (بدون نیاز به افزونه) این قابلیت را به صورت سبُک و بهینه پیاده‌سازی کرد. در این راهنما با ترکیب HTML، CSS و JavaScript خواهید آموخت چگونه این دکمه را مستقیماً در footer.php اضافه کرده و ظاهر و رفتار آن را طبق نیاز سایت تنظیم نمایید.

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

دکمه «بازگشت به بالا» چیست؟

دکمه «بازگشت به بالا» (Back to Top) یک لینک یا آیکون شناور کوچک است که به کاربر اجازه می‌دهد با یک کلیک به ابتدای صفحه بازگردد. وقتی صفحات وب طولانی باشند، این قابلیت باعث کاهش تلاش برای اسکرول زیاد و افزایش راحتی کاربران می‌شود. به‌ویژه در دستگاه‌های موبایل یا کاربرانی با محدودیت حرکتی، این دکمه می‌تواند تجربه‌ی دسترسی (accessibility) سایت را ارتقاء دهد.

آیا دکمه بازگشت به بالا منسوخ شده است؟

با وجود گرایش به طراحی مینیمالیستی و قابلیت اسکرول نرم (smooth scrolling)، همچنان دکمه «بازگشت به بالا» در بسیاری از سایت‌های محتوا‌محور کاربرد دارد. اگر به نحوی در صفحات بزرگ‌تر اجرا شود که مزاحم دید کاربران نشود، اثربخشی آن از لحاظ بهره‌وری بالاست. بسیاری از کاربران همچنان ترجیح می‌دهند گزینه‌ای واضح برای بازگشت سریع داشته باشند.

چه نوع وب‌سایت‌هایی به آن نیاز دارند؟

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

افزودن کد HTML در footer.php

برای اینکه دکمه بازگشت به بالا در تمامی صفحات نمایش داده شود، باید کد HTML را در فایل footer.php قالب قرار دهید، دقیقاً بالای تگ بسته </body>:

<a href="#top" id="back-to-top" aria-label="بازگشت به بالا" title="بازگشت به بالا">⇧</a>

در اینجا نماد «⇧» به عنوان فلش بالا عمل می‌کند و نیاز به کتابخانه آیکون ندارد (که باعث کاهش بار افزونه و بهبود سرعت می‌شود). صفت aria-label برای ابزارهای خواندن صفحه (screen readers) مفید است.

در این مرحله، دکمه هنوز ظاهر نشده است — فقط اسکلت آن اضافه شده است.

افزودن JavaScript برای بارگذاری تنبل (Lazy Load)

برای اینکه دکمه تنها وقتی کاربر اسکرول کرده باشد نمایان شود، از کد زیر در انتهای فایل footer.php، درست قبل از </body> استفاده کنید:

<script>
document.addEventListener("DOMContentLoaded", function(){
  const btn = document.getElementById("back-to-top");
  window.addEventListener("scroll", function(){
    if (window.scrollY > 300) {
      btn.classList.add("show");
    } else {
      btn.classList.remove("show");
    }
  });
});
</script>

این اسکریپت وضعیت اسکرول را گوش می‌دهد؛ اگر کاربر بیش از ۳۰۰ پیکسل به پایین اسکرول کرده باشد، کلاس show به دکمه افزوده می‌شود تا ظاهر شود، و در غیر این صورت مخفی می‌گردد. اگر بخواهید دکمه همیشه نمایان باشد، می‌توانید این مرحله را حذف کنید، اما استفاده از lazy load به دکمه بازگشت به بالا ظاهر تمیزتری می‌دهد.

استایل دادن به دکمه با CSS

می‌توانید کد CSS زیر را در بخش Additional CSS در سفارشی‌ساز وردپرس (Appearance → Customize) اضافه کنید تا تغییرات پس از آپدیت قالب حفظ شوند:

#back-to-top {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  background-color: #13406d;
  color: #fff;
  font-family: "Fira Code", monospace;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, background-color 0.3s, visibility 0.3s;
}
#back-to-top.show {
  opacity: 0.6;
  visibility: visible;
}
#back-to-top:hover {
  opacity: 1;
  background-color: #06c;
}

در این استایل، دکمه به صورت شناور در پایین صفحه قرار گرفته و با افزودن کلاس show ناپدید یا ظاهر می‌شود. رنگ زمینه و ابعاد قابل تغییر هستند. افکت‌های انتقال (transition) باعث می‌شوند ظاهر و مخفی شدن دکمه ملایم تر باشد.

چرا دکمه در سمت چپ قرار گرفته؟

در نمونه بالا، از left: 20px; استفاده شده است تا دکمه در سمت چپ نمایش داده شود. با این حال، در صورت تمایل، شما می‌توانید آن را به سمت راست منتقل کنید، کافی است left: 20px را به right: 20px تغییر دهید.