هل تريد إخفاء قائمة الجوال في ووردبريس؟
تأتي معظم سمات ووردبريس مع أنماط مدمجة تعمل تلقائيًا على تحويل قوائم التنقل الخاصة بك إلى قائمة متنقلة. ومع ذلك ، قد لا ترغب في استخدام نفس القائمة على الهاتف المحمول أو قد ترغب في استخدام نمط قائمة مختلف.
في هذه المقالة ، سنوضح لك كيفية إخفاء قائمة الهاتف المحمول بسهولة في ووردبريس باستخدام مكون إضافي أو طريقة التعليمات البرمجية.
إخفاء قائمة ووردبريس على الهاتف المحمول
هذه الطريقة أسهل ويوصى بها للمبتدئين. سنستخدم مكونًا إضافيًا لإخفاء قائمة هاتفك المحمول الحالية المقدمة من خلال سمة ووردبريس الخاصة بك ثم استخدام قائمة مختلفة أو عدم استخدام قائمة على الإطلاق على الأجهزة المحمولة.
أولاً ، عليك زيارة صفحة المظهر »القوائم وإنشاء قائمة تنقل جديدة ترغب في عرضها على الأجهزة المحمولة.
قم بإنشاء قائمة جديدة لاستخدامها على الأجهزة المحمولة
في الشاشة التالية ، تحتاج إلى توفير اسم لقائمتك الجديدة يساعدك في التعرف عليها لاحقًا. سنسميها “قائمة الجوال”. بعد ذلك ، يمكنك تحديد العناصر التي تريد إضافتها إلى قائمتك من العمود الأيسر.
إضافة عناصر القائمة
بمجرد الانتهاء من إضافة العناصر إلى قائمتك ، لا تنس النقر فوق الزر “حفظ القائمة” لحفظ القائمة الخاصة بك.
إذا كنت بحاجة إلى مساعدة في إنشاء قائمة تنقل جديدة ، فاتبع دليل المبتدئين لإنشاء قائمة تنقل في ووردبريس .
بعد ذلك ، تحتاج إلى تثبيت وتفعيل المكون الإضافي WP Mobile Menu . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
عند التنشيط ، تحتاج إلى زيارة صفحة خيارات قائمة الجوال لتكوين إعدادات البرنامج المساعد. من هنا ، تحتاج إلى تحديد ما إذا كنت تريد عرض قائمة هاتفك المحمول على اليمين أو اليسار عن طريق تشغيل زر التبديل.
اختر قائمة الجوال واتجاهها
من القائمة المنسدلة ، حدد قائمة الجوال التي أنشأتها مسبقًا.
بعد ذلك ، تحتاج إلى التمرير لأسفل إلى قسم “إخفاء قائمة السمة الأصلية”. هذا هو المكان الذي يمكنك فيه إخبار المكون الإضافي بإخفاء قائمة الجوال التي تم إنشاؤها بواسطة سمة ووردبريس الخاصة بك.
إخفاء قائمة موضوع الجوال في ووردبريس
بشكل افتراضي ، سيستخدم المكون الإضافي معرّفات العناصر شائعة الاستخدام التي تستخدمها معظم سمات ووردبريس الشائعة . لن يحتاج معظم المستخدمين إلى فعل أي شيء هنا.
ومع ذلك ، إذا فشل المكون الإضافي في إخفاء قائمة السمات الخاصة بك ، فيمكنك العودة إلى هنا والنقر فوق الزر “Find Element” للإشارة ببساطة إلى قائمة التنقل الخاصة بالسمة الخاصة بك.
لا تنس النقر فوق الزر “حفظ التغييرات” لتخزين إعداداتك.
الآن بعد أن قمنا بإعداد المكون الإضافي ، نحتاج إلى إخبار موقع ووردبريس بعرض قائمة الهاتف المحمول الخاصة بنا إلى موقع القائمة الجديد الذي تمت إضافته بواسطة المكون الإضافي.
ببساطة ، انتقل إلى المظهر » صفحة القوائم . تأكد من تحديد قائمة الهاتف المحمول التي قمت بإنشائها مسبقًا في القائمة المنسدلة. أسفل عنصر القائمة ، اختر الموقع الذي حددته في إعدادات البرنامج المساعد (على سبيل المثال ، قائمة Left Mobile Menu أو Right Mobile Menu).
موقع القائمة
يمكنك الآن زيارة موقع الويب الخاص بك لمشاهدة القائمة الجديدة الخاصة بك قيد التنفيذ. سيخفي المكون الإضافي الآن قائمة الجوال الخاصة بموضوعك ويعرض قائمة مخصصة بدلاً من ذلك.
استبدال قائمة المحمول
يسمح لك المكون الإضافي WP Mobile Menu بتغيير لون شريط القائمة وتغيير العتامة وإضافة الرموز والمزيد في الإعدادات. لا تتردد في اللعب بهذه الإعدادات.
هذه الطريقة متقدمة قليلاً وتتطلب استخدام بعض CSS المخصصة.
لهذه الطريقة ، يمكنك اختيار استخدام طريقتين مختلفتين. يمكنك فقط إخفاء قائمة كاملة للجوال باستخدام CSS ، أو يمكنك إخفاء عناصر القائمة الفردية على الأجهزة المحمولة.
أولاً ، تحتاج إلى معرفة العنصر الذي تحتاج إلى تعديله باستخدام CSS المخصص . للقيام بذلك ، ما عليك سوى الانتقال إلى موقع الويب الخاص بك والتمرير بالماوس إلى قائمة التنقل الخاصة بك. بعد ذلك ، انقر بزر الماوس الأيمن وحدد أداة الفحص .
أداة الفحص
سيتم تقسيم شاشة المتصفح إلى قسمين ، وسترى شفرة المصدر لصفحة الويب الخاصة بك. الآن قائمة التنقل هذه ليست القائمة التي تحتاج إلى استهدافها لأنها مرئية على شاشة سطح المكتب.
كود المصدر أثناء عرض قائمة سطح المكتب
تحتاج إلى إعادة ترتيب شاشة المتصفح عن طريق سحبها من الزاوية إلى حجم أصغر حتى يتم استبدال قائمة التنقل على سطح المكتب بقائمة الجوال.
معرف قائمة الجوال
تحتاج إلى معرفة المعرف وفئة CSS المستخدمة في قائمة التنقل في ووردبريس. يمكنك القيام بذلك عن طريق تحريك الماوس على شفرة المصدر حتى يتم تمييز منطقة القائمة.
كما ترى في لقطة الشاشة أعلاه ، فإن موضوع الاختبار الخاص بنا يستخدم navbar-toggle-wrapperالفصل.
بعد ذلك ، تحتاج إلى الانتقال إلى المظهر »تخصيص الصفحة في منطقة إدارة ووردبريس لتشغيل أداة تخصيص السمات. هنا ، تحتاج إلى التبديل إلى علامة التبويب “CSS إضافية” والنقر فوق رمز الهاتف المحمول في الركن الأيمن السفلي من اللوحة اليسرى.
إضافة CSS مخصص لإخفاء القائمة الكاملة
سيعرض أداة التخصيص الآن معاينة لكيفية ظهور موقعك على الأجهزة المحمولة. يمكنك الآن إدخال رمز CSS التالي ورؤية قائمة هاتفك تختفي في لوحة المعاينة.
.navbar-toggle-wrapper {
display:none;
} لا تنسَ استبدال .navbar-toggle-wrapper بالمعرف المستخدم بواسطة سمة ووردبريس الخاصة بك.
بعد ذلك ، انقر فوق الزر “نشر” في الجزء العلوي لحفظ التغييرات.
تتيح لك هذه الطريقة إنشاء قائمة تنقل ثم إظهار العناصر التي لا تريد عرضها على أجهزة الجوال أو أجهزة سطح المكتب أو إخفائها بشكل انتقائي.
تتمثل ميزة هذه الطريقة في أنه يمكنك استخدام قائمة التنقل نفسها للجوال وسطح المكتب وإخفاء العناصر التي لا تريد رؤيتها.
أولاً ، عليك الذهاب إلى المظهر » صفحة القوائم والنقر على زر خيارات الشاشة في الزاوية اليمنى العليا من الشاشة. من هنا ، تحتاج إلى تحديد المربع بجوار خيار “فئات CSS”.
خيارات الشاشة
بعد ذلك. تحتاج إلى التمرير لأسفل إلى عنصر القائمة الذي تريد إخفاءه على الأجهزة المحمولة والنقر فوقه لتوسيعه. في إعدادات عنصر القائمة ، سترى الآن خيار إضافة فئة CSS. انطلق وأضف .hide-mobileفئة CSS هناك.
أضف فئة CSS
كرر العملية لجميع عناصر القائمة التي لا تريد عرضها على الهاتف المحمول.
وبالمثل ، يمكنك أيضًا النقر فوق عناصر القائمة التي تريد إخفاءها على أجهزة كمبيوتر سطح المكتب. هذه المرة ، أضف .hide-desktopفئة CSS بدلاً من ذلك.
بمجرد الانتهاء ، لا تنس النقر فوق الزر “حفظ القائمة” لتخزين تغييراتك.
سنقوم الآن بإضافة CSS مخصص لإخفاء عناصر القائمة هذه. ما عليك سوى الانتقال إلى صفحة Appearance »Customize لبدء تشغيل Theme Customizer والنقر فوق علامة التبويب CSS الإضافية.
تحتاج إلى إضافة كود CSS التالي في مربع CSS.
@media (min-width: 980px){
.hide-desktop{
display: none !important;
}
}
@media (max-width: 980px){
.hide-mobile{
display: none !important;
}
}أضف CSS المخصص الخاص بك
لا تنس النقر فوق الزر “نشر” لحفظ التغييرات.
يمكنك الآن زيارة موقع الويب الخاص بك وستلاحظ أن العناصر التي تريد إخفاءها على سطح المكتب لم تعد مرئية في القائمة. اضبط شاشة المتصفح على حجم أصغر وستلاحظ نفس الشيء بالنسبة لقائمة الهاتف المحمول أيضًا.
قوائم مختلفة على شاشات سطح المكتب والجوال
نأمل أن تساعدك هذه المقالة في تعلم كيفية إخفاء قائمة الأجهزة المحمولة بسهولة في ووردبريس. قد ترغب أيضًا في الاطلاع على مقالتنا حول كيفية إنشاء صفحات مخصصة في ووردبريس أو كيفية إنشاء سمة مخصصة من البداية دون كتابة تعليمات برمجية.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
