ستساعدك المقالة التالية: سكوت روبنسون إعداد قائمة التنقل العائمة اللاصقة في WordPress قراءة المقال
تظل قائمة التنقل العائمة الثابتة أعلى الشاشة بينما يقوم المستخدم بالتمرير لأسفل الصفحة. تحتوي بعض سمات WordPress على هذه الميزة مضمنة ، كخيار في إعداداتها.
ولكن إذا كان المظهر الخاص بك يحتوي على هذه الميزة الرائعة ، فلا تقلق ، فهناك حل بديل.
لديك خيار إدخال القليل من الترميز في موقعك الذي سيبقي القائمة متمركزة في الجزء العلوي من النافذة ، ليتمكن المستخدمون من الوصول إليها في جميع الأوقات.
لماذا ومتى تكون قائمة التنقل العائمة اللزجة في متناول يدي
عادةً ما توجد قائمة التنقل الأساسية في الجزء العلوي من الموقع وتحتوي على ارتباطات إلى الصفحات الأساسية – إن لم يكن جميعها – لموقعك. تتيح قائمة التنقل العائمة الثابتة إمكانية الوصول إلى هذه الروابط في جميع الأوقات ، مما يوفر على الأشخاص الاضطرار إلى التمرير طوال الطريق إلى الأعلى للوصول إلى قسم آخر من الموقع.
ثبت أن وجود قائمة ثابتة يؤدي إلى زيادة التحويلات. جعلها تمطر كما كانت.
إذا كان لديك متجر عبر الإنترنت ، فستحتوي قائمة التنقل العلوية على روابط لفئات المنتج ، وسلة التسوق ، وميزة البحث عن المنتج. إذا كنت تستخدم قائمة ثابتة ، فسيساعدك ذلك على تقليل التخلي عن سلة التسوق ويمكن أن يحسن مبيعاتك بشكل عملي! (مرة أخرى ، جعلها تمطر.)
تحتوي بعض سمات WordPress المدفوعة على ترميز مدمج لقائمة تنقل عائمة ثابتة. للتحقق مما إذا كان الموضوع الخاص بك يحتوي على هذا الخيار ، انتقل إلى ثيمات > يعدل أو يكيف لتمكينها. إذا لم يكن موضوعك يحتوي على قوائم لزجة مضمنة ، فستحتاج إلى أن تشمر عن سواعدك وتقوم ببعض الترميز.
لا تقلق ، فليس من الصعب جدًا التعامل معها.
ترميز قائمة التنقل العائمة اللاصقة
قبل القيام بأي ترميز ثابت لموقعك الثمين ، تأكد من ذلك دائماً قم أولاً بإنشاء نسخة احتياطية من الموقع و دائماً كود على الخاص بك موضوع الطفلوليس لك موضوع الوالدين.
الآن ، من أجل إضافة الكود اللازم لتمكين القائمة اللاصقة الرائعة الخاصة بك ، يمكنك الانتقال إلى مظهر > يعدل أو يكيف لتشغيل أداة تخصيص سمة WordPress. انقر الآن على CSS إضافية من القائمة اليسرى وأضف كود CSS هذا:
# التنقل في الموقع {background: # 000000؛ الارتفاع: 60 بكسل ؛ مؤشر z: 170 ؛ الهامش: 0 تلقائي ؛ الحد السفلي: 1px صلب #ffffff ؛ العرض: 100٪؛ الموقف: ثابت ؛ أعلى: 0؛ اليسار: 0؛ اليمين: 0؛ محاذاة النص: مركز ؛ }
سيؤدي ذلك إلى إنشاء قائمة تنقل بخلفية سوداء. إذا كنت بحاجة إلى لون مميز ، فقم بتغيير الرقم بجوار الخلفية ، مثل #fefefe، على سبيل المثال. أيضًا ، تأكد من استبدال ملف # التنقل في الموقع باستخدام معرف CSS لقائمة التنقل الحالية وحدد ملف ينشر زر في الشاشة.
Note: يمكنك العثور على معرف CSS عن طريق فتح نافذة المفتش في متصفحك المفضل. قم بتحديث موقعك وشاهد ما هو البرودة التي قمت بإنشائها. هذا الترميز ما هو إلا مثال واحد. هناك كل أنواع التخصيصات التي يمكنك التوصل إليها. صمم لمحتوى قلبك.
“هذا جيد ورائع ، ولكن يتم عرض القائمة الخاصة بي عادةً أسفل رأس الموقع بدلاً من عرضها فوقها.”
إذا كانت هذه هي الحالة ، فقد يتداخل رمز CSS الجديد هذا مع عنوان الموقع ورأسه أو يظهر قريبًا جدًا منه قبل أن يقوم المستخدم بالتمرير. إصلاح بسيط! عليك ببساطة إضافة هامش إلى منطقة الرأس الخاصة بك باستخدام بعض أكواد CSS الإضافية:
.site-brand {margin-top: 60px! important؛ }
يستبدل موقع العلامة التجارية مع فئة CSS الخاصة بمنطقة الرأس. الآن ، لن تتداخل قائمة التنقل الثابتة مع رأسك قبل أن يقوم المستخدم بالتمرير لأسفل.
خواطر ختامية
يمكن أن يكون الترميز ممتعًا ، ولكن تذكر دائمًا تعديل المظهر الفرعي الخاص بك ، وليس الموضوع الرئيسي. (كما ذكر أعلاه.) وقم بعمل نسخة احتياطية من موقعك! خلاف ذلك ، إذا كسرت كل الأشياء ، فقد تكون محظوظًا ، وعندما يحصل موضوعك على تحديث ، يمكن غسل كل ترميزك بعيدًا مثل رمال الزمن.
