هل سبق لك زيارة موقع ويب ووجدت أن قائمة التنقل مرئية دائمًا في الأعلى؟

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

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

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

إذا تم ذلك ، فلنتطرق إلى ما يهمنا اليوم.

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

هذه الطريقة أسهل وسريعة. إذا لم تقم بإعداد قوائم التنقل بعد ، فيمكنك ذلك تعلم كيفية القيام بذلك.

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

بعد التنشيط ، يجب عليك زيارة " الإعدادات »القائمة الملصقة لتكوين إعدادات هذا البرنامج المساعد.

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

سوف تحتاج إلى استخدام أداة "فحص" في متصفحك للعثور على CSS المستخدم.

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

الذهاب أبعد من ذلك من خلال اكتشاف كيفية تخصيص موضوع ورد مع قلم رصاص الأصفر

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

في هذا المثال ، يكون معرّف CSS لقائمة التنقل هو " الإنتقال الموقع ".

انطلق وأدخل معرف CSS للقائمة في إعدادات البرنامج المساعد على النحو التالي "# site-navigation".

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

بعد ذلك تحتاج إلى النقر فوق المربع الموجود بجوار الخيار: "Check Bar Admin". يتيح ذلك للمكون الإضافي إضافة بعض المساحة لشريط أدوات WordPress الذي تمت إضافته للمستخدمين الذين قاموا بتسجيل الدخول.

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

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

اكتشف ايضا كيفية إنشاء قائمة استجابة لورد المحمول

لا تنس النقر فوق " حفظ الإعدادات لحفظ التغييرات الخاصة بك.

يمكنك الآن زيارة موقع الويب الخاص بك لرؤية قائمة التنقل العائمة في العمل.

الطريقة 2: كيفية إضافة قائمة التنقل يدويًا

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

أولا وقبل كل شيء عليك زيارة " المظهر> التخصيص لإطلاق WordPress Customizer.

اضغط على " CSS إضافية في الجزء الأيمن ، ثم أضف رمز CSS هذا.

# site-navigation {background: #fff؛ الطول: 60px. ض مؤشر: 170. الهامش: 0 auto؛ الحدود السفلية: 1px solid #dadada؛ عرض: 100٪، الموقف: ثابت؛ أعلى: 0. اليسار: 0. اليمين: 0. محاذاة النص: المركز ؛ }

استبدال " # الإنتقال الموقع بواسطة معرف قائمة التنقل الخاصة بك وانقر على زر « سجّل ".

يمكنك الآن زيارة موقع الويب الخاص بك لرؤية قائمة التنقل العائمة في العمل.

إذا كانت قائمة التنقل الخاصة بك تظهر بشكل طبيعي بعد رأس موقع الويب ، فقد يتداخل رمز CSS هذا مع عنوان موقع الويب والرأس.

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

.site-branding {margin-top: 60px؛ }

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

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

1. بطل القائمة

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

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

تحميل | عرض | استضافة المواقع

2. قائمة البقعة

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

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

تحميل | عرض | استضافة المواقع

3. 8Degree Fly Menu

8Degree Fly القائمة هي أ وورد البرنامج المساعد Premium الذي يسمح لك بإضافة قائمة قماشية إلى موقع الويب الخاص بك ، من أجل إعطائه مظهرًا يسلط الضوء على معلوماتك بطريقة بسيطة. يستخدم ميزة قائمة WordPress الافتراضية لإنشاء قوائمه.

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

تحميل | عرض | استضافة المواقع

الموارد الأخرى الموصى بها

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

• كيفية إعطاء نمط لقوائم الملاحة الخاصة بك
•  كيفية إضافة السمة اللقب في القوائم وورد
• ملحقات 8 WordPress لإنشاء megamenu على مدونتك

وفي الختام

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

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

...