كيفية إعداد زر “العودة إلى الأعلى” (Back to Top) في موقع ووردبريس

يُعد زر “العودة إلى الأعلى” من الميزات المفيدة التي تساعد زوار موقعك على التنقل بسرعة بين أقسام الصفحة الطويلة. بدلاً من التمرير المستمر للوصول إلى رأس الصفحة، يقدم هذا الزر تجربة أكثر سهولة واحترافية. في هذا الدليل، سنستعرض كيفية إعداد زر “العودة إلى الأعلى” على موقع ووردبريس الخاص بك دون الحاجة إلى استخدام إضافات خارجية، مع شرح كل خطوة بشكل واضح ومبسط.

الخطوة الأولى: إضافة كود HTML للزر

ابدأ بإنشاء عنصر HTML يمثل زر “العودة إلى الأعلى”. يمكنك وضعه في تذييل الموقع (Footer) أو أي مكان آخر تفضله، مثل ملف header.php أو footer.php داخل القالب أو القالب الفرعي (Child Theme). على سبيل المثال:


<a href="#" id="back-to-top" class="back-to-top">
   ↑ العودة إلى الأعلى
</a>

ملاحظة: استخدمنا href="#" لأننا سنعتمد على جافاسكربت للتمرير للجزء العلوي من الصفحة. يمكنك أيضًا ربطه بعنصر id محدد على رأس الصفحة إذا كنت تفضل ذلك.

الخطوة الثانية: إضافة الأكواد الجافاسكربت (JavaScript)

الآن نحتاج إلى كود جافاسكربت يجعل الزر ينقل المستخدم إلى الأعلى، ويظهر فقط عند التمرير للأسفل. يمكنك إضافة الكود في ملف functions.php عبر wp_enqueue_script أو داخل ملف footer.php أو header.php مباشرة، لكن يُنصَح باستخدام القالب الفرعي أو إضافة المظهر المخصص. مثال بسيط:


<script>
document.addEventListener("DOMContentLoaded", function() {
  // الحصول على عنصر زر العودة إلى الأعلى
  var backToTopBtn = document.getElementById("back-to-top");
  
  // إظهار / إخفاء الزر عند التمرير
  window.addEventListener("scroll", function() {
    // إذا تجاوز التمرير 300 بكسل من أعلى الصفحة
    if (window.scrollY > 300) {
      backToTopBtn.style.display = "block";
    } else {
      backToTopBtn.style.display = "none";
    }
  });
  
  // عند النقر على الزر، العودة إلى الأعلى بسلاسة
  backToTopBtn.addEventListener("click", function(e) {
    e.preventDefault(); // منع إعادة تحميل الصفحة
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  });
});
</script>

شرح هذا الكود:

document.addEventListener(“DOMContentLoaded”): نتأكد من تنفيذ الكود بعد تحميل عناصر الصفحة الأساسية.
scroll event: نراقب موضع التمرير (ScrollY). إذا تجاوز 300 بكسل، نعرض الزر (display:block)، وإلا نخفيه (display:none).
click event: يمنع السلوك الافتراضي للرابط (preventDefault()) ويعيد المستخدم إلى أعلى الصفحة بسلاسة عبر window.scrollTo.

الخطوة الثالثة: تنسيق مظهر الزر عبر CSS

كي يظهر زر “العودة إلى الأعلى” بشكل جذاب، ويمكن للمستخدم رؤيته بسهولة، تحتاج إلى إضافة بعض التنسيقات (CSS). يمكنك وضع هذه الأكواد في ملف style.css الخاص بالقالب الفرعي أو في خانة CSS إضافي في المظهر > تخصيص:


.back-to-top {
  position: fixed;      /* لجعل الزر ثابتاً أثناء التمرير */
  bottom: 40px;         /* المسافة من أسفل الشاشة */
  right: 40px;          /* المسافة من يمين الشاشة */
  background-color: #0073aa;
  color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  text-decoration: none;
  display: none;        /* إخفاؤه افتراضياً */
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: opacity 0.2s ease-in-out;
}

.back-to-top:hover {
  background-color: #005177;
  opacity: 0.8;
}

.back-to-top:active {
  background-color: #003754;
  opacity: 1;
}

شرح هذا التنسيق:

position: fixed; يبقي الزر في نفس المكان حتى عند التمرير.
bottom و right: تحددان موضع الزر في أسفل يمين الشاشة.
display: none; لإخفاء الزر افتراضيًا، قبل أن يصبح مرئيًا عند التمرير للأسفل.
transition: لتأثير تدريجي على الشفافية (opacity).

الخطوة الرابعة: إدراج الكود في قالبك أو القالب الفرعي

كي تعمل جميع الخطوات السابقة بسلاسة، عليك إدراج الكود في الأماكن المناسبة:

ملف HTML للزر: داخل footer.php أو ملف مخصص لتذييل الموقع.
سكربت جافاسكربت: في أسفل footer.php أو عبر functions.php باستخدام wp_enqueue_script.
تنسيقات CSS: في ملف style.css الخاص بقالبك الفرعي، أو في القسم المخصص لـ CSS إضافي في لوحة التحكم.

بعد إتمام هذه الخطوات، توجّه إلى موقعك واختبر التمرير للأسفل ثم تحقق من ظهور الزر ونقره للعودة إلى الأعلى.

نصائح إضافية لتحسين تجربة الزر

استخدام الأيقونات: يمكنك استبدال نص الزر بأيقونة سهم للأعلى باستخدام Font Awesome أو أي مكتبة أيقونات أخرى.
التحجيم والتصميم: عدّل حجم الزر وموضعه حسب تصميم موقعك وعملية الاستخدام المتوقعة.
إضافة فواصل وقت (timeouts): إذا رغبت في تأخير ظهور أو إخفاء الزر، يمكنك إضافة مؤقت (setTimeout) في الكود الجافاسكربت.
التوافق مع الأجهزة المختلفة: تأكد من اختبار الزر على الهواتف والأجهزة اللوحية، وعدّل قيم bottom وright عند الحاجة.

أهمية وجود موقع احترافي مع إتقان

أداة بسيطة مثل زر “العودة إلى الأعلى” يمكن أن تحدث فارقًا كبيرًا في سهولة استخدام موقعك. ومع ذلك، لا يتوقف تطور موقع ووردبريس على هذه الإضافة وحدها. إن تصميم الموقع، وسرعة التحميل، والأمان، وترتيب المحتوى كلها عناصر مهمة لنجاح موقعك في العصر الرقمي.

هنا يبرز دور إتقان، إذ نقدم خبرة واسعة في بناء وتطوير المواقع العربية باستخدام ووردبريس. سواء كنت تحتاج إلى تعديلات بسيطة أو حلول معقدة، نحن جاهزون لمساعدتك على:

تصميم جذاب ومتجاوب: يعكس هوية مشروعك ويعمل بسلاسة على مختلف الأجهزة.
حلول تقنية متقدمة: من الأمان والنسخ الاحتياطي إلى تحسين السرعة وتجربة المستخدم.
دعم واستشارات: فريقنا مستعد لتقديم النصائح والإرشادات لضمان نجاح مشروعك على الإنترنت.

تواصل معنا الآن!

إذا كنت تبحث عن تطوير موقعك وجعله أكثر احترافية من خلال إضافة ميزات مثل زر “العودة إلى الأعلى” أو أي وظائف أخرى، لا تتردد في التواصل مع إتقان. ابدأ رحلتك الرقمية معنا عبر الرابط التالي:

تواصل مع إتقان

اجعل تجربة المستخدم على موقعك أكثر سهولة وأناقة، ودع فريق إتقان يوفّر لك الحلول المثلى لبناء حضور رقمي مميز!

إضافة “العودة إلى الأعلى” (Back to Top) في موقع ووردبريس