اجعل التنقل أسهل مع الرجوع إلى الأعلى
المقـدمـة: إنشاء زر الرجوع إلى الأعلى في ووردبريس
عندما نقوم بتثبت بعض قوالب ووردبريس، نتفاجأ بعدم تَـَوَفُّرِها على زر الرّجوع إلى الأعلى⇑. ونظراً لأهمية هذا الزر ، فإنّ جل القوالب الاحترافية لا تخلو منه، لأنه يُسَهِّل على الزائر الرجوع لأعلى الصفحة بسرعة خصوصاً حين تكـول بعض المقالات والصفحات بمدونتك ووردبريس جِد طويلة.
إذا كان فعلاً قالبك لا يتوفر على زر الرجوع إلى الأعلى ، وتتمنى تَـوَاجُدَهُ بموقعك، فلاً تقلق! ولا تُـبالي، لأنه بإمكانك الآن إنشاء رابط الارتساء بسهولة تحت كل مقالة طويلة، سواء كان هذا الرابط، أيقونة، أو صورة أو عبارة مكتوبة ، وبالنَّقر عليه تنتقل إلى الأعلى.
يمكنك إضافة هذا الزر سواء يدوياً بواسطة كود HTML أو بواسطة مكون إضافي لووردبريس .. وكِلا الطريقتين لا تحتاج فيهما لخبرة كبيرة، لأنني بكل بساطة سأوفر لك كود HTML مع الشرح لكيفية إضافته . وكذلك شرح الاضافة بالتفصيل.
زر الرجوع إلى الأعلى
لماذا رابط الرجوع إلى الأعلى؟
عندما يكون المقال ممتع وذو محتوى مفيد ، يواصل الزائر القراءة ، ويتنقل من فقرة لفقرة ويتجه أكثر نحو أسفل الصفحة ، ومهما كان المقال طويلاً فإن القارئ يستمر في القراءة بتمرير الصفحة نحو الاسفل. إذن ماذا لو أراد العودة إلى الأعلى؟ طبعاً سوف يبدأ بتمرير الصفحة نحو الأعلى، وهذا سيأخذ منه وقتاً إضافياً.. لكن لماذا نقوم هذا التمرير البطيئ ونحن لدينا الحل؟
فيما يلي بعض الطرق البسيطة لتجاوز هذا العناء كلما تصفحنا مقالاً طويلاً :
- أضف رابط الارتساء يدوياً في الهيدر « header » …
- تثبيت المكون الاضافي الذي يقوم بالعملية تلقائياً بدلاً عنك!
تحرير بعض الملفات
أولاً، وقبل أن تشرع في هذه العملية، أنصحك بعمل نسخة احتياطية للملفات التي ستقوم بتعديلها. يعني قم بتنزيل ملف Header.php و ملف Footer.php.
هذان الملفان موجودان مع ملفات موقعك على هذا المسار: / wp-content /theme /your-theme .
دعنا نضيف نقطة ارتساء في ملف “header.php” لقالبك النشط:
أسهل طريقة: للتعديل على ملف Header.php ، هي تنزيل هذا الملف عبر البروتوكول FTP إلى جهاز الكمبيوتر ثم التعديل عليه بأحد برامج تحرير النصوص كما يلي:
- إفتح ملف Header.php، ثم ابحث عن علامة الإغلاق </head> ثم علامة <body> ، بعد العثور عليها ، انسخ الكود تحتها مباشرة. وفي بعض الأحيان تجد أن <body> تحتوي على معاملات وأوامر إضافية ، إذا كان هذا هو الحال ، فتأكد من إضافة نقطة الارتساء مباشرة بعد علامة النهاية.
|
1 |
<a name="top"></a> |
والتي يجب أن تكون بهذا الترتيب:
|
1 2 |
</head> <body><a name="top"></a> |
يمكنك الآن حفظ ملف header.php الذي عدلت عليه، ثم قم برفعه ثانية إلى مسار قالب موقعك.
الآن سنقوم بتحديد المكان الذي نريد وضع رابط الرجوع إلى الأعلى فيه. وبما أن الرابط يجب أن يكون في نهاية كل صفحة أو مقالة، فإننا سنحتاج إلى التعديل على ملف footer.php لأنه يمثل الجزء السفلي لكل صفحات الموقع.
∴ يجب لصق الرابط على النحو التالي في الفوتر:
|
1 |
<a href="#top">الرجوع للأعلى</a> |
≡ مهم: ضع هذا الكود 
قبل علامة الاغلاق </body>
لتسهيل الأمر عليك، فقد وفرتُ لك هذه الشفيرة التي تحتوي على صورة السهم لوضعها بدل الكود السابق:
|
1 |
<a href="#top"><img src="https://ps.w.org/simple-scroll-to-top-button/assets/icon-128x128.png?rev=2455035" alt="الرجوع إلى الأعلى" width="40" height="40" /></a> |
لم يبقى لك سوى حفظ الملف ورفعه إلى مكانه كما فعلت في الملف السابق. ثم قم بتحديث صفحة موقعك لترى هذا الرابط: “الرجوع إلى الأعلى” في نهاية جميع صفحاتك.
يمكنك بالطبع تخصيص هذا الرابط باستخدام صورة أو أيقونة. إذا استعملت الكود الأخير ستحصل على رابط الرجوع إلى الأعلى بواسطة صورة كهذه: 
إقرأ أيضاً:
استخدم مكونـاً إضافيـاً .. و اسْتَرِحْ !..
إذا كان لك أي تخوف من التعديل على ملفات القالب، يمكنك استخدام مكون إضافي لووردبريس وهو يقوم بفعل ذلك جيداً بَدلاً عنك.
أقترح عليكم المكون الاضافي الذي جربته شخصياً وهو فعّال، خفيف وجميل ، إنه: « Simple Scroll to Top Button » . سأشرح لكم كيفية إعداده بالصور ليكون متوافقاً مع قالبك. هذه الاضافة تحتوي على لوحة مصممة بشكل مبتكر لتتكيف مع الاحتياجات المحددة لكل موقع.
تثبيت إضافة ووردبريس « Simple Scroll to Top Button »
إنشاء زر الرجوع إلى الأعلى في ووردبريس
♦آخر تحديث : قبل أسبوعين ( من تاريخ كتابة هذه المقالة )
◊ تم اختيارها لنسخة ووردبريس الأخيرة
♦ التنصيبات النشطة: 9000 إلى حدود كتابة هذه المقالة
هو مكون WordPress الإضافي، سهل الاستخدام ، مع واجهة سهلة الاستخدام ، يمنحك القدرة على إضافة زر “Scroll to Top” بسهولة وأمان إلى موقعك WordPress.
بعد تثبيت إضافة « Simple Scroll to Top Button » وتفعيلها، أدخل إلى إعدادات الاضافة واتبع الشرح التالي:
إقرأ أيضاً: تثبيت مكون إضافي بدون أخطاء
شرح إعدادات المكون الاضافي ووردبريس Simple Scroll to Top Button
من الشريط الجانبي للوحة تحكم إدارة موقعك ، مرر الماوس على الإعدادات ستنسدل قائمة، إختر منها “Scroll to Top” وانقر عليه ، ستظهر صفحة الاعدادات بهذا الشكل
إختر رمــز وخلفية زر العودة إلى الأعلى الذي يناسب ذوقك
إختر لـون رمــز وخلفية زر العودة إلى الأعلى الذي يناسب ذوقك
إجعل الزر شفاف أو اتركه كما هو + حدد السرعة التي تناسب تحرك الصفحة نحو الأعلى، يفضل 300
هذه هي النتيجـة
في أمان الله
أرى أن هذه المواضيع قد تهمك:
شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.