وظيفة مثل الزر "up" للموقع تجعل مورد الإنترنت أكثر ملاءمة لزواره. يساعدك على الانتقال بسهولة من أي مكان على الصفحة إلى أعلى الصفحة. هذا أمر لا بد منه للمتاجر على الإنترنت والمواقع التي تحتوي على مقالات كبيرة تتطلب التمرير لأسفل لفترة طويلة.
ما هو ل
في الوقت الحالي ، لا تحتوي معظم المواقع على وظيفة مثل الزر "up" ، ولا يوجد شيء حاسم في ذلك. لكن استخدامه يمكن أن يجلب العديد من المزايا لكل من مورد الإنترنت ولزواره.
فائدة للزوار
يحدث هذا غالبًا عندما تكون صفحة مورد الإنترنت محملة بشكل كبير بالمعلومات ، عندما تشغل مقالة إعلامية مساحة كبيرة ويتعين عليك التمرير لأسفل الصفحة باستخدام عجلة الماوس. بالإضافة إلى ذلك ، في نهاية المقال قد يكون هناك العديد من التعليقات عليه.
عندما يقرأ الزائر مقالاً ، لا يوجد شيء ممل في التمرير لأسفل الصفحة ، ولكن عندما ينتهي النص ويتعين عليك التحرك لأعلى ، يبدأ في الشعور بالملل قليلاً. سيكون معظم الأشخاص كسالى للغاية بحيث يتعذر عليهم التمرير لفترة طويلة ، وسوف يقومون ببساطة بإغلاق الموقع ، بدلاً من القيام بجولة أخرى حول مساحاته.
باستخدام الزرللانتقال فورًا إلى الجزء العلوي من الصفحة ، يصبح قضاء الوقت في الموقع أكثر ملاءمة.
فائدة لمورد الإنترنت
تأتي الإيجابيات للمورد نفسه من العوامل السابقة ، حيث يعمل التنقل السهل في الموقع على تحسين العوامل السلوكية حيث سيكون جميع الزوار أكثر نشاطًا في أفعالهم وينتقلون إلى صفحات أخرى.
وبالتالي فإن هذه العوامل السلوكية تؤثر على موقف جميع محركات البحث من الموقع وتؤدي إلى تحسين المركز في نتائج البحث.
كيف تنشئ زر "up" على الموقع بنفسك
المزيد من التعامل. يمكنك دائمًا إنشاء زر تمرير لأعلى لموقع ما على أي نظام إدارة محتوى بنفسك باتباع بضع خطوات بسيطة للغاية:
- إنشاء صورة ؛
- إنشاء نص ؛
- إنشاء نمط زر ؛
- إضافة إلى الموقع.
صورة الزر
لإضافة زر "up" على الموقع ، تحتاج أولاً إلى إنشاء الرمز نفسه ، عند النقر فوقه ، سينتقل المستخدم إلى أعلى الصفحة. للقيام بذلك ، يمكنك استخدام الخيارات الجاهزة ، والتي من بينها يمكنك دائمًا اختيار الخيار الأنسب.
لتحسين مظهر الزر ، نحتاج إلى إجراء بعض التحسينات ، أي لعمل كائن يسمح لنا بدمج صور الخلفية بناءً على CSS ، وبالتالي إنشاء رسم متحرك منها.
للأعمال الرسومية ، يمكنك استخدام أي محرر. لكن الخيار الأكثر ملاءمة سيكون خدمة عبر الإنترنت. PIXLR ، لأنه لا يوجد شيء لتنزيله هنا ويمكنك استخدامه مباشرة في متصفحك.
للبدء ، في نافذة المحرر التي تظهر ، حدد حقل "تحميل صورة من الكمبيوتر". لنأخذ صورة صاروخ كمثال
إذا كانت أبعاد الرمز المحدد كبيرة جدًا ، فستحتاج إلى إجراء تعديل صغير الحجم. للقيام بذلك ، انتقل إلى القائمة العلوية وحدد حقل "تحرير" ، وبعد "تحويل مجاني …"
بعد ذلك ، تظهر علامات خاصة بجانب الصورة تتحرك بحيث يمكنك تغيير حجم الصورة. للحفاظ على التناسب ، يمكنك استخدام مفتاح Shift ، الذي تحتاجه لتحريك العلامات الزرقاء. في نهاية هذه الخطوات يتم الحصول على صورة لصاروخ
الخطوة التالية هي إنشاء نسخة من الطبقة
الآن تحتاج إلى تحريك صورة الصاروخ من الطبقة الجديدة لأعلى قليلاً. للقيام بذلك ، سيكون من الملائم استخدام أداة النقل ، الموجودة في العمود الثاني من القائمة اليسرى ، والسهم لأعلى على لوحة المفاتيح.
الآن نحن بحاجة لجعل الصورة العليا بالأبيض والأسود. يمكن القيام بذلك باستخدام العنصر "تصحيح" - "تدرج اللون / التشبع" في القائمة العلوية. لإلغاء التشبع الكامل ، يجب ضبط منزلق Saturation على -100. سيسمح لك هذا الإجراء بإنشاء تأثير يتحول فيه الزر "لأعلى" من الأسود والأبيض إلى اللون عند التمرير فوقه.
اللمسة الأخيرة هي إزالة المساحة الزائدة حول الصورتين. للقيام بذلك ، حدد عنصر "اقتصاص" من القائمة اليسرى ونختار صاروخين فقط في مستطيل. لإجراء القص ، يتم الضغط على مفتاح Enter.
النتيجة صورة لا توجد فيها مساحة خالية إضافية. ستحتاج إلى تدوين عرض وارتفاع الصورة الناتجة ، حيث ستكون هذه البيانات مفيدة في الخطوة التالية.
للحفظ ، تحتاج إلى النقر فوق "ملف" - "حفظ" ، حيث في الفقرة اليسرى "جهاز الكمبيوتر" نكتب اسم الصورة (التنسيق باللغة الإنجليزية فقط) ، حدد التنسيق (في هذا case، PNG) وانقر على زر "Yes"
ملف بنص الزر "لأعلى"
لست بحاجة إلى كتابة نص في هذه الحالة. سيكون من الممكن استخدام النسخة العامة مع إجراء بعض التعديلات على الكود النهائي
للقيام بذلك ، تحتاج إلى تنزيل أي محرر كود. الخيار الأكثر شيوعًا والمجاني أيضًا هو Notepad ++. بعد تثبيته ، تحتاج إلى نسخ كل هذا الرمز ولصقه فيه:
| $ (مستند). ()؛} else {$ (' scroller'). fadeOut ()؛}})؛ $ (' scroller'). انقر (الوظيفة () {$ ('body، html'). animate ({scrollTop: 0} ، 400) ؛ إرجاع خطأ ؛}) ؛}) ؛ |
بعد ذلك ، انقر في القائمة العلوية "ملف" - "حفظ باسم …" ، وبعد ذلك نقوم بحفظ الكود بتنسيق.js. بعد ذلك ، يمكنك استخدام هذا الرمز على موقعك عن طريق تحميل ملفات البرنامج النصي والصور إليه باستخدام اتصال FTP.
التثبيت في الموقع
لتعيين زر التمرير لأعلى للموقع ، تحتاج إلى وضعهرمز المكان المطلوب. تحتاج إلى إدخاله قبل الوسم.
إنشاء نمط زر باستخدام CSS
في أغلب الأحيان ، يوجد الزر "لأعلى" للموقع في الأسفل ("التذييل").
يجب إضافة الكود التالي إلى ملف style.css الخاص بالموقع:
|
/الزر العلوي/ .scrollTop { background: url ('images / up.png') 0 0 no-تكرار؛ /مسار الصورة الأصلي/ width: 39px؛ /الزر width/ height: 96px ؛ /50٪ ارتفاع الزر/ bottom: 5px ؛ /الحشو السفلي في موضع ثابت/ left: 89٪ ؛ /التحول إلى اليسار/ }.scrollTop: hover {background-position: 0 -108px؛ } /إزاحة الخلفية/" |
في هذه الحالة ، ستكون هناك حاجة إلى بيانات عرض الصورة وارتفاعها. يبقى فقط إدخال البيانات المستلمة في الكود ، وسيكون الزر "up" للموقع جاهزًا! ماذا بعد؟
زر Up لموقع WordPress
بالنسبة إلى نظام إدارة المحتوى هذا ، يمكن إنشاء الزر "أعلى" باستخدام المكونات الإضافية ، وكذلك بشكل مستقل.
طريقة الإضافات هي الطريقة الأكثر ملاءمة وسهولة في التثبيت ، حيث إنها تتطلب منك فقط النقر فوق زر التثبيت وتكوين جميع الوظائف في قائمة البرنامج المساعد.
يجب التعامل مع اختيار الأخير بحذر ، لأنه سيكون من السهل الحصول على فيروس على الموقع. الخيار الأكثر شيوعًا وثبتًا هو مكون إضافي يسمى Scroll Back To Top. يمكنك تنزيله باستخدام البحث القياسي لملحقات Wordpress.
هذا الامتداد لهوظائف متعددة ، وسيكون من السهل جدًا تخصيص الزر "up" لموقع Wordpress. ليس من الضروري تغيير جميع القيم على الإطلاق ، ما عليك سوى تكوين مظهر وموقع الزر على صفحة الموقع.
كما ترى ، يعد إعداد زر التشغيل باستخدام المكونات الإضافية أمرًا سهلاً للغاية. ولكن هناك فارق بسيط مهم ، وهو أن كل مكون إضافي مثبت يقوم بتحميل CMS. قد يؤثر هذا على سرعة مورد الإنترنت. هذا هو السبب في أن معظم مالكي المواقع يحاولون إجراء جميع التغييرات مباشرة في الكود ، وليس بمساعدة ملحقات الطرف الثالث. يمكنك إنشاء زر "up" لموقع HTML ، والذي سيقلل من الموارد المستهلكة.
قبل تغيير جميع ملفات نظام Wordpress ، تحتاج إلى نسخها احتياطيًا. ثم يمكنك اتباع جميع الخطوات لإنشاء الزر الخاص بك ، كما هو موضح أعلاه.
زر "up" لـ Joomla
CMS تدعم Joomla أيضًا تثبيت المكونات الإضافية ، مثل Wordpress. أنجح نسخة من زر "up" لموقع على جملة 3 هو امتداد يسمى Top of the Page.
في نظام إدارة المحتوى هذا ، يمكن تثبيت أي مكون إضافي من خلال "Extension Manager". لهذا تحتاج:
- قم بتنزيل المكون الإضافي من الإنترنت ؛
- انقر فوق الزر "تصفح" في مدير الامتداد ؛
- حدد الأرشيف الذي تم تنزيله ؛
- انقر فوق "تنزيل" وتثبيت.
الآن تحتاج إلى تنشيطه في "مدير البرنامج المساعد". لهذاعليك الذهاب إلى هذا القسم والعثور على البرنامج المساعد وتبديل حالته إلى "ممكّن".
الخطوة التالية هي تكوين جميع معلمات الامتداد باستخدام نفس القسم حيث تحتاج إلى العثور على "المعلمات الأساسية" لهذا المكون الإضافي على الجانب الأيمن.
يحتوي الجزء العلوي من الصفحة على الوظائف التالية:
- تشغيل في / المسؤول - تمكين الخيار ليس فقط على مورد الإنترنت ، ولكن أيضًا في لوحة Joomla CMS نفسها.
- موضع كشف الزر - عدد البكسلات التي يجب على المستخدم إرجاعها حتى يظهر الزر لأعلى.
- حذف نص الزر - وجود نص على الزر.
- دائمًا في المقدمة - سيتم عرض صفحة الموقع دائمًا من أعلى الصفحة. عند استخدام المراسي للتمرير إلى موقع معين على الصفحة ، لا يلزم تمكين هذا الخيار.
- التمرير السلس - يجعل تمرير الصفحة أكثر سلاسة.
- Scroll Duration - الوقت الذي بعده تنتقل الصفحة بالكامل إلى البداية.
- Scroll Transition - يضيف المزيد من التأثيرات المرئية للتمرير.
- سهولة الانتقال - "إضعاف" الحركة إلى أعلى الصفحة.
- موقع الرابط - موقع الرمز. بشكل افتراضي ، يوجد الزر في الزاوية اليمنى السفلى.
- استخدام الأنماط - نمط زر فردي ، والذي يمكن تعيينه في الحقل أدناه. إذا تم التبديل إلى قيمة سالبة ، فسيتم أخذ جميع إعدادات النمط من السمة النشطة للموقع.
- Link Style - حقل لإدخال معلمات نمط الزر.
لتخصيص نمط الزر "up" ، يجب أن يكون لديك حد أدنى على الأقلالمعرفة CCS. خلاف ذلك ، يجب عليك تبديل قيمة المعلمة قبل الأخيرة إلى "لا".
فارق بسيط آخر هو أن النقش المعتاد على الأيقونة يحتوي على النص الإنجليزي: الرجوع إلى الأعلى. لا يمكن أن يكون مثل هذا النص موجودًا على موقع باللغة الروسية ، لذلك يجب عليك ببساطة تعطيله في معلمات المكون الإضافي أو تغييره إلى اللغة الروسية.
لتغيير هذا النقش ، عليك الذهاب إلى خادم الموقع باستخدام FTP أو مدير الملفات المدمج في الاستضافة. بعد ذلك ، في الدليل "/ admin / language / en-GB /" ، تحتاج إلى العثور على ملف يسمى "en-GB.plg_system_topofthepage.ini".
قبل تغيير النص ، يجب تغيير ترميز هذا المستند إلى UTF-8. هذا سيجعل العرض العادي للأحرف الروسية.
بعد ذلك نجد السطر التالي:
| "PLG_SYS_TOPOFTHEPAGE_GOTOTOP=" العودة إلى الأعلى" |
وتغيير العبارة بين علامات الاقتباس إلى الروسية. يمكنك استخدام عبارات مثل "Up!" ، "To the top!" أو "فوق!".
في النهاية ، ستحتاج إلى حفظ الملف المعدل والتحقق من زر "up" للموقع على جملة.
زر Up لـ Ucoz
يجب أن يتم تنفيذ الزر "up" للموقع على Ucoz باستخدام إدخال الشفرة ، لأنه من المستحيل توصيل المكونات الإضافية لنظام CMS هذا. ومع ذلك ، هذا لا يتطلب دراسة مطولة لملفات النظام والبحث عن الأسطر الضرورية ، ما عليك سوى لصق كود صغير في المكان الصحيح.
لتثبيت لنامطلوب:
- انتقل إلى "لوحة التحكم -تصميم > -> إدارة التصميم (قوالب) -> أسفل الموقع ؛
- أدخل البرنامج النصي (يمكن العثور عليه على الموقع الرسمي للمشروع وموارد الطرف الثالث).
الخلاصة
بعد ذلك ، ستظهر أيقونة في الركن الأيمن السفلي ، تنقل المستخدم إلى أعلى الصفحة.
كما ترى ، لم يكن إعداد زر الرجوع لأي من أنظمة إدارة المحتوى صعبًا بشكل خاص. يمكنك استخدام كل من طريقة التثبيت الآلي (المكونات الإضافية) والطريقة اليدوية. ومع ذلك ، يبقى الخيار الأخير هو الأنسب ، لأنه لا يؤثر سلبا على أداء الموقع.
يمكنك استخدام زر "الرجوع إلى الأعلى" لموقع HTML لتقليل استهلاك موارد الموقع ، حيث يمكن أن يكون لعدد كبير من الامتدادات تأثير سلبي على أداء المورد. لن يكون المكون الإضافي لزر "up" قادرًا على التأثير بشكل كبير على وقت تحميل صفحات الموقع ، ولكن في معظم الحالات يكون لدى المستخدم ما لا يقل عن عشرة مكونات إضافية مثبتة على نظام إدارة المحتوى. في هذه الحالة ، يمكن لأي مكون إضافي أن يؤثر سلبًا على أداء صفحات الموقع.
