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

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

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

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

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

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

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

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

الطريقة 1: إضافة قائمة لاصقة باستخدام إعدادات القالب الخاص بك (سهلة)

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

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

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

الطريقة 2: أضف قائمة التنقل الثابتة باستخدام الاضافة (موصى به)

الطريقة الأسهل لإضافة قائمة تنقل لاصقة في ووردبريس هي استخدام اضافة Sticky Menu & Sticky Header. فهو يسمح لك بإنشاء أي شيء لاصق، بما في ذلك القوائم.

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

بعد التنشيط، انتقل إلى الإعدادات » Sticky Menu (or Anything!).

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

ما عليك سوى زيارة الموقع الكتروني الخاص بك وتحريك الماوس فوق قائمة التنقل. ثم انقر بزر الماوس الأيمن وحدد “Inspect” من قائمة المتصفح.

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

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

<header id="masthead" class="main-header header_layout_2 sticky-header sticky-always">

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

في هذه الحالة، يكون ID CSS لقائمة التنقل هو masthead.

بمجرد حصولك على هذه التحكم، عد إلى لوحة تحكم ووردبريس وأضفها إلى حقل “Sticky Element (Required)”.

ستحتاج أيضًا إلى إضافة حرف هاش (#) في البداية، حتى يصبح masthead هو #masthead.

بعد ذلك، انقر على زر “حفظ التغييرات” في أسفل الصفحة لتخزين التغييرات.

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

في بعض الأحيان، قد تتداخل القائمة الثابتة مع بعض المحتوى الذي لا تريد إخفاؤه.

إذا حدث هذا، فستحتاج إلى تحديد مسافة بين الجزء العلوي من الشاشة وقائمة التنقل الثابتة عن طريق كتابة رقم في حقل “Space between the top of the page and sticky element”.

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

إذا لم تكن راضي عن شكل القائمة، فيمكنك “إلغاء تثبيتها” لمستخدمي الأجهزة المحمولة من خلال العثور على الحقل التالي: “Do not stick element when screen is smaller than”.

هنا، اكتب “780” بكسل.

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

عندما تكون راضي عن كيفية إعداد قائمة التنقل، انقر فوق “حفظ التغييرات” لتخزين إعداداتك.

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

يمكنك أيضًا إنشاء قائمة تنقل لاصقة باستخدام CSS.

أفضل طريقة لإضافة كود مخصص إلى ووردبريس هي استخدام WPCode. إنه أفضل اضافة لمقتطف الكود الذي يسمح لك بإضافة CSS وPHP وHTML والمزيد.

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

يمكنك أيضًا تشغيل القائمة اللاصقة وإيقاف تشغيلها بنقرة واحدة.

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

بمجرد تنشيط الاضافة، انتقل إلى صفحة Code Snippets » + Add Snippet، حيث سترى جميع مقتطفات WPCode الجاهزة التي يمكنك إضافتها إلى موقعك.

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

هنا، قم بتمرير الماوس فوق “Add Your Custom Code (New Snippet)” وانقر فوق الزر “Use snippet” عندما يظهر.

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

ثم افتح القائمة المنسدلة “Code Type” واختر “CSS Snippet”.

بعد الانتهاء من ذلك، أضف المقطع التالي إلى محرر كود WPCode:

#masthead {
    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;
}

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

على سبيل المثال، باستخدام الخلفية: #ffffff سيمنحك خلفية بيضاء للقائمة. إذا لم تكن متأكدًا من كود السداسي عشر الذي يجب استخدامه، فيمكنك إلقاء نظرة على مورد مثل HTML color code.

ستحتاج أيضًا إلى استبدال #masthead بـ ID CSS لقائمة التنقل الخاصة بك. للعثور على هذا الكود، ما عليك سوى اتباع نفس العملية الموضحة أعلاه.

عندما تكون راضي عن الكود، انقر فوق تبديل “Inactive” حتى يتغير إلى “Active”، ثم انقر فوق الزر “Save Snippet”.

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

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

إذا حدث هذا، فيمكنك إضافة ما يلي إلى مقتطف CSS المخصص الخاص بك:

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

ما عليك سوى استبدال علامة الموقع بـ كلاس CSS لمنطقة الهيدر. للحصول على هذه المعلومات، ما عليك سوى استخدام أداة “Inspect” في متصفحك ثم اتباع نفس العملية الموضحة في الطريقة 2.

مكافأة: اجعل منشورات ووردبريس الخاصة بك جذابة

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

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

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

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

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

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