19 أكتوبر، 2021

كيفية إنشاء قائمة تنقل عائمة مثبتة في ووردبريس

سجل إعجابك

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN

في الآونة الأخيرة ، سألنا أحد مستخدمينا عن كيفية إنشاء قائمة تنقل ثابتة لموقعهم؟

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

في هذه المقالة ، سنوضح لك كيفية إنشاء قائمة تنقل عائمة مثبتة بسهولة في ووردبريس.

إنشاء قائمة تنقل عائمة مثبتة في ووردبريس

ما هي قائمة التنقل الثابتة العائمة؟

قائمة التنقل الثابتة أو العائمة هي تلك التي “تعلق” بأعلى الشاشة بينما يقوم المستخدم بالتمرير لأسفل. هذا يجعل قائمتك مرئية للمستخدمين في جميع الأوقات.

هذه قائمة ثابتة أثناء العمل. سنوضح لك كيفية إنشاء قائمة مثل هذه تمامًا لموقعك الخاص:

قائمة تنقل ثابتة في العمل على موقعنا التجريبي

لماذا ومتى يمكن أن تكون القوائم اللزجة مفيدة؟

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

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

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

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

الطريقة الأولى: إضافة قائمة التنقل الثابتة العائمة باستخدام البرنامج المساعد

هذه هي الطريقة الأسهل. نوصي به لجميع مستخدمي ووردبريس ، خاصة للمبتدئين.

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

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

عند التنشيط ، تحتاج إلى زيارة صفحة الإعدادات »القائمة الثابتة (أو أي شيء!) لتكوين إعدادات المكون الإضافي.

صفحة إعدادات المكون الإضافي Sticky Menu

تحتاج أولاً إلى إدخال معرف CSS لقائمة التنقل التي تريد جعلها مثبتة.

ستحتاج إلى استخدام أداة فحص المستعرض الخاص بك للعثور على معرف CSS المستخدم بواسطة قائمة التنقل الخاصة بك.

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

فحص عنصر قائمة التنقل على موقع الويب الخاص بك

سيؤدي هذا إلى تقسيم شاشة المتصفح ، وستتمكن من رؤية شفرة المصدر لقائمة التنقل الخاصة بك.

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

<nav id="site-navigation" class="main-navigation" role="navigation">

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

البحث عن معرف قائمة التنقل باستخدام أداة الفحص

في هذه الحالة ، يكون معرف CSS لقائمة التنقل الخاصة بنا هو site-navigation.

كل ما عليك فعله هو إدخال معرف CSS لقائمتك في إعدادات المكون الإضافي مع تجزئة في البداية. في هذه الحالة ، هذا #site-navigation.

إدخال معرف العنصر الذي تريد جعله لزجًا (في هذه الحالة ، قائمة التنقل)

لا تنس النقر فوق الزر “حفظ التغييرات” أسفل الصفحة.

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

عرض القائمة اللاصقة على موقع الويب الخاص بك

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

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

هنا ، يمكنك أن ترى أن شريط المسؤول على موقع الاختبار الخاص بنا يظهر بشكل صحيح أعلى القائمة اللاصقة:

يظهر شريط إدارة ووردبريس أعلى القائمة اللاصقة

يسمح لك الخيار التالي بإلغاء تحديد قائمة التنقل إذا كان المستخدم يزور موقع الويب الخاص بك باستخدام شاشة أصغر مثل جهاز محمول:

يوفر المكون الإضافي للقائمة اللاصقة مزيدًا من الخيارات أيضًا

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

لا تنس النقر فوق الزر حفظ التغييرات بعد إجراء أي تغييرات على خياراتك.

الطريقة الثانية: إضافة قائمة تنقل عائمة مثبتة يدويًا

تتطلب منك هذه الطريقة إضافة كود CSS مخصص إلى قالبك. لا نوصي به للمبتدئين.

نوصي أيضًا بإلقاء نظرة على دليلنا حول كيفية إضافة CSS مخصص بسهولة إلى موقع ووردبريس الخاص بك قبل أن تبدأ.

أولاً ، تحتاج إلى زيارة Appearance »تخصيص لبدء تشغيل مُخصص سمة ووردبريس.

إضافة CSS مخصص في قالب ووردبريس

بعد ذلك ، انقر فوق ‘إضافي CSS’ في الجزء الأيمن ثم أضف رمز CSS هذا.

#site-navigation {
    background:#00000;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

ملاحظة: سينتج عن ذلك قائمة تنقل بخلفية سوداء. إذا كنت تريد لونًا مختلفًا ، فقم بتغيير الرقم المجاور لـ background. على سبيل المثال ، background: #ffffffسيعطيك استخدام خلفية قائمة بيضاء.

ما عليك سوى استبدال #site-navigationمعرف CSS لقائمة التنقل الخاصة بك ، ثم النقر فوق الزر “نشر” في الجزء العلوي من الشاشة.

انطلق وقم بزيارة موقع الويب الخاص بك لرؤية قائمة التنقل العائمة اللاصقة قيد التنفيذ:

قائمة تنقل ثابتة / عائمة تم إنشاؤها باستخدام CSS

ماذا لو كانت قائمة التنقل الخاصة بك تظهر عادةً أسفل رأس الموقع بدلاً من الظهور فوقه؟ إذا كان الأمر كذلك ، فقد يتداخل رمز CSS هذا مع عنوان الموقع ورأسه أو يظهر قريبًا جدًا منه قبل أن يقوم المستخدم بالتمرير:

تتداخل قائمة التنقل الثابتة قليلاً مع عنوان الموقع

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

.site-branding {
margin-top:60px !important;
}

استبدلها site-brandingبفئة CSS الخاصة بمنطقة الرأس. الآن ، لن تتداخل قائمة التنقل الثابتة مع رأسك قبل أن يقوم المستخدم بالتمرير لأسفل:

يوجد الآن مساحة للعنوان أسفل قائمة التنقل الثابتة

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

خدمات مميزة لآجلك

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

اشترك معنا لمزيد من المعرفة

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