إليك 4 طرق لإضافة زر “الرجوع إلى الأعلى” في موقعك (Back-To-Top ) 2025

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

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

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

طرق لإضافة زر العودة إلى الأعلى في ووردبريس

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

1- استخدم قالبًا يدعم هذه الميزة (الخيار الأفضل)

الخيار الأفضل هو اختيار أحد أفضل سمات WordPress. ببساطة، فهو متكامل ويدعم مجموعة واسعة من الميزات التي تسمح لك بتطوير متجر أو موقع ويب احترافي.

إقرأ أيضا:فوائد الرياضة للأطفال

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

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

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

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

2- الاعتماد على الإضافات الاحترافية

إذا كان القالب الخاص بك لا يدعم هذه الميزة، فيمكنك استخدام أحد مكونات WordPress الإضافية، مثل المكون الإضافي WPFront Scroll Top المجاني. لا يستغرق الأمر سوى بضع نقرات قبل أن يصبح جاهزًا للعرض على موقعك.

إقرأ أيضا:إليك تأشيرة بريطانيا العائلية 2025 – 2025

انتقل إلى مكتبة WordPress Plugins واختر تثبيت مكون إضافي جديد، وابحث عن “WPFront Scroll Top”، واختر تثبيت ثم قم بالتنشيط وستفتح لك صفحة بالإعدادات المطلوبة.

يمكنك العودة إليه لاحقًا من القائمة الجانبية، وتحديدًا ضمن قائمة الإعدادات ستجده يسمى “Scroll Top”.

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

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

يمكنك أيضًا التحكم في حركة الزر، أو توجيهه لأعلى أو إلى جزء معين من الصفحة، أو حتى إرساءه للانتقال إلى صفحة جديدة. والشيء الجميل هو أنه يمكن ضبطه ليختفي تلقائيًا بعد فترة زمنية معينة (مثل 4 ثوانٍ أو دقيقة واحدة أو أي وقت آخر من اختيارك). بالإضافة إلى ذلك، هناك العديد من الإعدادات القابلة للتخصيص والتي ستصبح واضحة بمجرد البدء في استخدامها.

إقرأ أيضا:إليك أقوى 7 مواقع تصميم شعارات بالذكاء الاصطناعي (Logo AI) 2025

هناك إضافات أخرى تتيح لك إنشاء نفس الزر بطرق مختلفة، منها:

1. صعودا
2. انتقل إلى أعلى
3. السلس العودة إلى الزر العلوي

3- أضف زر التمرير للخلف إلى الأعلى يدويًا

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

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

صدقني، الأمر سهل للغاية، ولا يتطلب سوى القليل من التركيز، ولا يتطلب الكثير من الخبرة، ويتم تنفيذه في دقائق معدودة فقط. تأكد من قيامك بما يلي أولاً:

1. تأكد من عمل نسخة احتياطية لموقعك.
2. تأكد من الاعتماد على القالب الفرعي في موقعك حتى لا يؤثر على القالب الرئيسي.
3. تأكد من قيامك بنسخ ملفات footer.php وstyle.css إلى القالب الأساسي.

الخطوة الأولىتتفاعل مع دردشة GPT وكأنك تتحدث مع خبير برمجة وتخبره بما تريد برمجته، وكلما كان وصفك أكثر دقة، كلما حصلت على النتائج المرجوة بشكل أكثر دقة. يُعرف هذا بهندسة أوامر ChatGPT.

الخطوة الثانيةانتقل إلى محرر التعليمات البرمجية الخاص بك، ومن قائمة WordPress الجانبية، اختر “المظهر” ثم “تحرير رمز القالب”. سنقوم بتغطية ملف footer.php وstyle.css. إذا لم تتمكن من العثور عليها، فما عليك سوى نسخها اعتمادًا على المكون الإضافي Child Theme. قبل القيام بذلك، تأكد من عمل نسخة احتياطية (من الجيد تطبيق هذه الخطوات على القالب الأساسي).

الصق كود HTML التالي في ملف footer.php. يجب أن يتم ترميزه أعلاه وليس تحت (كما هو موضح في الصورة أدناه).

<a href="#" id="back-to-top" title="Back to top" style="display: none;">&#8679;</a>

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

<script>
    jQuery(document).ready(function($) {
        var btn = $('#back-to-top');

        $(window).scroll(function() {
            if ($(window).scrollTop() > 300) {
                btn.show();
            } else {
                btn.hide();
            }
        });

        btn.on('click', function(e) {
            e.preventDefault();
            $('html, body').animate({scrollTop:0}, '300');
        });
    });
</script>

ثم أضف كود CSS التالي إلى ملف Style.css وسيكون جاهزًا للاستخدام بعد النقر فوق الزر “تحديث الملف”.

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff; /* Blue background */
    color: white; /* White arrow */
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000;
}
#back-to-top:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

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

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

4- استخدام منشئي الصفحات

أحد الجوانب الرائعة في WordPress هو القدرة على إنشاء مواقع ويب احترافية حتى بدون مهارات برمجة واسعة النطاق. يتم ذلك بالطبع بمساعدة ما يسمى بـ Page Builders، حيث نجد كلاً من Elementor وDivi في الأعلى.

هذه الطريقة مناسبة فقط لأولئك الذين يعتمدون على منشئ محتوى لموقعهم. إذا كنت، مثلي، بعيدًا عن منشئي الصفحات هؤلاء نظرًا لتأثيرهم على أوقات تحميل الصفحة، فإن ميزة الزر هذه غير قابلة للتطبيق لأنها تتطلب تثبيت النظام. بالإضافة إلى ذلك، بالنسبة لأولئك الذين يستخدمون هذا النظام على مواقعهم الإلكترونية، سيعمل الزر فقط على الصفحات المصممة بهذا النظام فقط.

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

متى لا ننصح به؟

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

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

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