كيفية إضافة زر العودة إلى الأعلى لموقع WordPress الخاص بك

نشرت: 2022-09-14

يمكن أن تكون إضافة زر الرجوع إلى الأعلى إلى موقع الويب الخاص بك على WordPress طريقة رائعة لتحسين تجربة المستخدم على موقعك. يسمح هذا الزر للزائرين بالتمرير بسرعة إلى أعلى الصفحة ، دون الحاجة إلى استخدام شريط التمرير أو زر الرجوع في المتصفح. هناك عدة طرق مختلفة يمكنك من خلالها إضافة زر الرجوع إلى الأعلى إلى موقع WordPress الخاص بك. يمكنك استخدام مكون WordPress الإضافي ، أو يمكنك إضافة الرمز بنفسك. إذا كنت تريد إضافة الزر بنفسك ، فستحتاج إلى إضافة الكود التالي إلى ملف function.php الخاص بموضوع WordPress: function my_back_to_top_button () {echo '↑'؛ } add_action ('wp_footer'، 'my_back_to_top_button') ؛ سيضيف هذا الرمز زر الرجوع إلى الأعلى البسيط إلى موقع WordPress الخاص بك. إذا كنت ترغب في تصميم الزر ، يمكنك إضافة CSS التالي إلى ملف style.css الخاص بك: # back-to-top {position: fixed؛ أسفل: 20 بكسل ؛ اليمين: 20 بكسل ؛ عرض لا شيء؛ زخرفة النص: لا شيء ؛ الخلفية: # 333 ؛ اللون: #fff ؛ الحشو: 10 بكسل ؛ -webkit-border-radius: 3px؛ -موز حدود نصف قطرها: 3 بكسل ؛ نصف قطر الحدود: 3 بكسل ؛ } # back-to-top: التمرير فوق {background: # 222؛ } إذا كنت تستخدم مكونًا إضافيًا في WordPress لإضافة زر الرجوع إلى الأعلى ، فستحتاج إلى اتباع الإرشادات التي قدمها مؤلف المكون الإضافي.

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

العودة إلى الأعلى زر WordPress بدون البرنامج المساعد

الائتمان: themekills.com

هناك عدة طرق لإنشاء زر "الرجوع إلى الأعلى" لموقع WordPress الخاص بك دون استخدام مكون إضافي. تتمثل إحدى الطرق في إنشاء رابط داخل المحتوى الخاص بك يشير إلى أعلى الصفحة. على سبيل المثال ، يمكنك إضافة رابط في نهاية كل منشور يقول "الرجوع إلى الأعلى".
هناك طريقة أخرى لإنشاء زر "الرجوع إلى الأعلى" وهي استخدام القليل من التعليمات البرمجية. يمكنك إضافة الكود التالي إلى ملف jobs.php الخاص بموضوع WordPress:
الوظيفة my_back_to_top_button () {
صدى "العودة إلى الأعلى" ؛
}
add_action ('wp_footer'، 'my_back_to_top_button') ؛
سيضيف هذا الرمز رابطًا إلى تذييل موقعك ، وعند النقر عليه ، سيعيد المستخدم إلى أعلى الصفحة.

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

إذا كنت لا تحب إضافة صورة إلى موقعك وتريد إضافة نص ، يمكنك أيضًا القيام بذلك. يجب عليك تغيير النمط. بعد فتح ورقة أنماط CSS الخاصة بالقالب الخاص بك ، يمكنك إضافة الكود التالي في أي مكان تراه مناسبًا طالما أنه ليس بين العلامات والرمز الموجود. بعد تثبيت مكون إضافي مثل Simple Custom CSS ، يمكنك إضافة الكود مباشرة في المنطقة المتوفرة. يجب إضافة الارتباط إلى الصفحة الخلفية لموقعك مباشرةً إلى الصفحة. يمكنك أيضًا تجنب تعديل ملفات السمة الخاصة بك إذا كنت لا تريد ذلك. عند النقر فوق Scroll Back to Top ، فإنه يضيف زر الرجوع إلى الأعلى إلى موقعك ، مما يلغي الحاجة إلى الترميز. تتيح لك لوحة تحكم المسؤول تغيير الحجم واللون والموقع والخيارات الأخرى للزر.

العودة إلى الأعلى زر WordPress Elementor

الائتمان: يوتيوب

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

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

العودة إلى أعلى زر Codepen

يعد زر "الرجوع إلى أعلى" ميزة شائعة في صفحات الويب الطويلة التي تسمح للمستخدم بالتمرير إلى أعلى الصفحة بنقرة واحدة. تستخدم العديد من مواقع الويب زر "الرجوع إلى الأعلى" الثابت الذي يظهر دائمًا على الشاشة ، بينما يستخدم البعض الآخر زر "الرجوع إلى الأعلى" العائم الذي يظهر فقط عندما يقوم المستخدم بالتمرير لأسفل الصفحة.
هناك العديد من الطرق لترميز زر "الرجوع إلى الأعلى" ، ولكن أحد أبسطها وأكثرها فعالية هو استخدام مكون إضافي "انتقل إلى أعلى". هناك العديد من المكوّنات الإضافية المختلفة المتوفرة ، ولكن أحد أكثرها شيوعًا هو البرنامج الإضافي "Scroll to Top" بواسطة WPBeginner.
بمجرد تثبيت البرنامج المساعد وتنشيطه ، ما عليك سوى الانتقال إلى الإعدادات »قم بالتمرير إلى الصفحة الأولى لتكوين المكون الإضافي. في هذه الصفحة ، يمكنك اختيار موضع الزر وسرعة التمرير ولون الزر. يمكنك أيضًا اختيار عرض الزر على الصفحة الأولى أو كل الصفحات أو صفحات معينة.
بمجرد تكوين المكون الإضافي ، ما عليك سوى النقر فوق الزر "حفظ التغييرات" لحفظ التغييرات. سيظهر زر "الرجوع إلى الأعلى" الآن على موقع الويب الخاص بك وسيعمل بكامل طاقته.

إزالة Scroll To Top Button WordPress

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

كيف يمكنني حذف زر في WordPress؟

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

كيف أعيد التمرير إلى أعلى عنصر الزر؟

يمكنك العودة إلى الأعلى عن طريق فتح صفحة عنصر أو نشر على صفحة عنصر ثم النقر فوق زر التمرير إلى الأعلى. من خلال النقر على رمز الترس أو الإعدادات في الجانب الأيسر من "لوحة العناصر" ، يمكنك الوصول إلى قسم "إعدادات الصفحة". ما عليك سوى التمرير لأسفل للعثور على خيار "EA Scroll To Top" ، ثم قم بتشغيله.

كيف يمكنني منع WordPress من التمرير؟

يمكنك تعطيل Infinite Scroll بتحديد خيار "Infinite Scroll" في My Site> Settings Writing> Scroll. علاوة على ذلك ، إذا قمت بإضافة عنصر واجهة مستخدم في التذييل ، فلن تتمكن من استخدام خيار Infinite Scroll.

كيف أقفز إلى أعلى الصفحة في WordPress؟

عندما يقوم المستخدم بالتمرير لأسفل صفحة على موقع الويب الخاص بك ، يظهر زر "Scroll to Top" في الركن الأيمن السفلي. عندما يقوم الزائر بالتمرير لأسفل الصفحة ، تظهر قائمة. بعبارة أخرى ، إذا نقر زوار موقع الويب الخاص بك على زر النقرة الواحدة ، فسيكون بإمكانهم العودة إلى أعلى الصفحة في غضون ثوانٍ.

وورد زر العودة إلى الصفحة السابقة

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

ليست هناك حاجة لاستخدام زر الرجوع في الصفحة. يمكن للمستخدم تحديد مكان فتح الارتباط ، ولا يتعين عليك إدارته نيابة عنهم. لم أقم بإنشاء صفحة الخريطة ، والشخص الذي قال إنه لم يكن من الممكن تضمين خيار العودة إلى حيث توقفت باستخدام زر المتصفح الخلفي البسيط. عندما تنتقل إلى الخريطة ، يتم إنشاء الصفحة بالكامل داخل WordPress وتكون مرئية فقط عند الانتقال إلى الموقع من خلال WordPress. نتيجة لذلك ، قد يكون فتح الصفحة كنافذة منبثقة بها زر CLOSE أو X فكرة رائعة. نظرًا لأن هذا هو زر WPBakery Page Builder الذي تم إنشاؤه عبر كود Javascript ، فسأدخله في حقل URL.