هل تريد تصميم قوائم التنقل في ووردبريس لتغيير ألوانها أو مظهرها؟ بينما يتعامل موضوع ووردبريس الخاص بك مع مظهر قوائم التنقل الخاصة بك ، يمكنك بسهولة تخصيصه باستخدام CSS لتلبية متطلباتك. في هذه المقالة ، سنوضح لك كيفية تصميم قوائم التنقل في ووردبريس على موقعك.
تصميم قوائم التنقل في ووردبريس
سنعرض طريقتين مختلفتين. الطريقة الأولى للمبتدئين لأنها تستخدم مكونًا إضافيًا ولا تتطلب أي معرفة بالكود. الطريقة الثانية هي لمستخدمي DIY المتوسطين الذين يفضلون استخدام كود CSS بدلاً من البرنامج المساعد.
يستخدم موضوع وورد الخاص بك CSS لأسلوب القوائم الملاحة . لا يشعر العديد من المبتدئين بالراحة عند تحرير ملفات السمات أو كتابة كود CSS بأنفسهم.
هذا عندما يكون ملحق تصميم ووردبريس مفيدًا. يحميك من تحرير ملفات السمات أو كتابة أي رمز.
أول ما عليك القيام به هو تثبيت وتفعيل المكون الإضافي CSS Hero . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
CSS Hero هو مكون إضافي لبرنامج ووردبريس يسمح لك بتصميم قالب ووردبريس الخاص بك دون كتابة سطر واحد من التعليمات البرمجية (لا يلزم وجود HTML أو CSS). راجع مراجعة CSS Hero لمعرفة المزيد.
يمكن لمستخدمي WPBeginner استخدام قسيمة CSS Hero هذه للحصول على خصم 34٪ على شرائهم.
عند التنشيط ، ستتم إعادة توجيهك للحصول على مفتاح ترخيص CSS Hero الخاص بك. ما عليك سوى اتباع التعليمات التي تظهر على الشاشة ، وستتم إعادة توجيهك مرة أخرى إلى موقعك ببضع نقرات.
بعد ذلك ، تحتاج إلى النقر فوق الزر CSS Hero في شريط أدوات مسؤول ووردبريس.
قم بتشغيل CSS Hero
يقدم CSS Hero محرر WYSIWYG (ما تراه هو ما تحصل عليه). سيؤدي النقر فوق الزر إلى نقلك إلى موقع الويب الخاص بك مع شريط أدوات CSS Hero عائم مرئي على الشاشة.
شريط أدوات CSS Hero
تحتاج إلى النقر فوق الرمز الأزرق في الأعلى لبدء التحرير.
بعد النقر فوق الرمز الأزرق ، اصطحب الماوس إلى قائمة التنقل الخاصة بك ، وسيقوم CSS Hero بتمييزه من خلال إظهار الحدود حوله. عند النقر فوق قائمة التنقل المميزة ، ستظهر لك العناصر التي يمكنك تعديلها.
أشر وانقر لتخصيص القائمة
في لقطة الشاشة أعلاه ، تظهر لنا أعلى حاوية قائمة التنقل. لنفترض أننا نريد تغيير لون خلفية قائمة التنقل الخاصة بنا. في هذه الحالة ، سنختار التنقل العلوي الذي يؤثر على القائمة بأكملها.
سيعرض لك CSS Hero الآن خصائص مختلفة يمكنك تعديلها مثل النص والخلفية والحدود والهوامش والحشو وما إلى ذلك.
خصائص CSS
يمكنك النقر فوق أي خاصية تريد تغييرها. سيُظهر لك CSS Hero واجهة بسيطة حيث يمكنك إجراء تغييراتك.
تغيير مظهر عنصر
في لقطة الشاشة أعلاه ، اخترنا الخلفية ، وأظهرت لنا واجهة رائعة لتحديد لون الخلفية والتدرج والصورة والمزيد.
أثناء إجراء التغييرات ، ستتمكن من رؤيتها مباشرة في معاينة القالب.
المعاينة المباشرة لتغييرات CSS الخاصة بك
بمجرد أن تكون راضيًا عن التغييرات ، انقر فوق الزر حفظ في شريط أدوات CSS Hero لحفظ التغييرات.
أفضل شيء في استخدام هذه الطريقة هو أنه يمكنك بسهولة التراجع عن أي تغييرات تجريها. يحتفظ CSS Hero بسجل كامل لجميع تغييراتك ، ويمكنك الانتقال ذهابًا وإيابًا بين هذه التغييرات.
تتطلب هذه الطريقة إضافة CSS مخصصة يدويًا وهي مخصصة للمستخدمين المتوسطين.
يتم عرض قوائم التنقل في ووردبريس في قائمة غير مرتبة (قائمة نقطية).
عادةً إذا كنت تستخدم علامة قائمة ووردبريس الافتراضية ، فستعرض قائمة بدون فئات CSS مرتبطة بها.
<?php wp_nav_menu(); ?>ستحتوي قائمتك غير المرتبة على اسم الفئة “قائمة” مع كل عنصر قائمة به فئة CSS خاصة به.
قد يعمل هذا إذا كان لديك موقع قائمة واحد فقط. ومع ذلك ، فإن معظم السمات لها مواقع متعددة حيث يمكنك عرض قوائم التنقل.
قد يؤدي استخدام فئة CSS الافتراضية فقط إلى حدوث تعارض مع القوائم الموجودة في المواقع الأخرى.
هذا هو السبب في أنك تحتاج إلى تحديد فئة CSS وموقع القائمة أيضًا. من المحتمل أن يكون موضوع ووردبريس الخاص بك يقوم بذلك بالفعل عن طريق إضافة قوائم التنقل باستخدام رمز مثل هذا:
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>يخبر هذا الرمز ووردبريس أن هذا هو المكان الذي يعرض فيه السمة القائمة الأساسية. كما أنه يضيف قائمة أولية لفئة CSS إلى قائمة التنقل.
يمكنك الآن تصميم قائمة التنقل الخاصة بك باستخدام بنية CSS هذه.
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
// each navigation item
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {} ستحتاج إلى استبدال #header بفئة حاوية CSS التي تستخدمها قائمة التنقل.
سيساعدك هذا الهيكل على تغيير مظهر قائمة التنقل بالكامل.
ومع ذلك ، هناك فئات CSS أخرى تم إنشاؤها في ووردبريس تتم إضافتها تلقائيًا إلى كل قائمة وعنصر قائمة. تتيح لك هذه الفئات تخصيص قائمة التنقل بشكل أكبر.
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
// Class for a Category
.menu-item-type-taxonomy{}
// Class for Post types
.menu-item-type-post_type{}
// Class for any custom links
.menu-item-type-custom{}
// Class for the home Link
.menu-item-home{} يتيح لك ووردبريس أيضًا إضافة فئات CSS المخصصة إلى عناصر القائمة الفردية.
يمكنك استخدام هذه الميزة لتصميم عناصر القائمة ، مثل إضافة رموز الصور مع القوائم الخاصة بك أو بمجرد تغيير الألوان لإبراز عنصر القائمة.
توجه إلى المظهر » صفحة القوائم في مسؤول ووردبريس الخاص بك وانقر على زر خيارات الشاشة .
تمكين خيار فئات CSS لعناصر القائمة الفردية
بمجرد تحديد هذا المربع ، سترى أنه تمت إضافة حقل إضافي عندما تذهب لتحرير كل عنصر قائمة فردي.
إضافة فئة CSS مخصصة إلى عنصر قائمة في ووردبريس
يمكنك الآن استخدام فئة CSS هذه في ورقة الأنماط الخاصة بك لإضافة CSS المخصص. سيؤثر فقط على عنصر القائمة مع فئة CSS التي أضفتها.
قد تستخدم سمات ووردبريس المختلفة خيارات تصميم مختلفة وفئات CSS وحتى JavaScript لإنشاء قوائم التنقل. يمنحك هذا الكثير من الخيارات لتغيير تلك الأنماط وتخصيص قوائم التنقل الخاصة بك لتلبية متطلباتك الخاصة.
ستكون أداة الفحص في متصفح الويب الخاص بك أفضل صديق لك عندما يتعلق الأمر باكتشاف فئات CSS التي تريد تغييرها. إذا لم تكن قد استخدمتها من قبل ، فقم بإلقاء نظرة على دليلنا حول كيفية استخدام أداة الفحص لتخصيص سمات ووردبريس .
في الأساس ، تحتاج فقط إلى توجيه المؤشر إلى العنصر الذي تريد تعديله ، والنقر بزر الماوس الأيمن ثم تحديد أداة الفحص من قائمة المتصفح.
استخدام أداة الفحص للبحث عن فئات CSS لتعديلها
ومع ذلك ، دعنا نلقي نظرة على بعض الأمثلة الواقعية لتصميم قوائم التنقل في ووردبريس.
إليك نموذج CSS المخصص الذي يمكنك إضافته إلى المظهر الخاص بك لتغيير لون خط قوائم التنقل.
#top-menu li.menu-item a {
color:#ff0000;
} في هذا المثال ، # top-menu هو المعرف المعين للقائمة غير المرتبة التي تعرض قائمة التنقل الخاصة بنا. ستحتاج إلى استخدام أداة الفحص لمعرفة المعرّف المستخدم في قالبك.
تغيير لون خط قوائم التنقل في ووردبريس
ستحتاج أولاً إلى معرفة معرف CSS أو الفئة المستخدمة بواسطة قالبك لقائمة التنقل المحيطة بالحاوية.
البحث عن فئة CSS لحاوية قائمة التنقل
بعد ذلك يمكنك استخدام CSS المخصص التالي لتغيير لون خلفية شريط قائمة التنقل.
.navigation-top {
background-color:#000;
}هنا كيف بدت على موقعنا التجريبي.
تغيير لون خلفية شريط قائمة التنقل
ربما لاحظت أن العديد من مواقع الويب تستخدم لون خلفية مختلفًا للروابط الأكثر أهمية في قائمة التنقل الخاصة بها. يمكن أن يكون هذا الرابط تسجيل دخول أو تسجيل أو جهة اتصال أو زر شراء. من خلال إعطائه لونًا مختلفًا ، فإنه يجعل الارتباط أكثر وضوحًا.
لتحقيق ذلك ، سنضيف فئة CSS مخصصة إلى عنصر القائمة الذي نريد تمييزه بلون خلفية مختلف.
توجه إلى المظهر »القوائم وانقر على زر خيارات الشاشة في الزاوية اليمنى العليا من الشاشة. سيؤدي هذا إلى إظهار قائمة منسدلة حيث تحتاج إلى تحديد المربع بجوار خيار “فئات CSS”.
تمكين خيار فئات CSS لعناصر القائمة الفردية
بعد ذلك ، تحتاج إلى التمرير لأسفل إلى عنصر القائمة الذي تريد تعديله والنقر فوقه لتوسيعه. ستلاحظ خيارًا جديدًا لإضافة فئة CSS المخصصة الخاصة بك.
إضافة فئة css مخصصة إلى عنصر قائمة
يمكنك الآن استخدام فئة CSS هذه لتصميم عنصر القائمة المعين هذا بشكل مختلف.
.contact-us {
background-color: #ff0099;
border-radius:5px;
}إليك كيف بدت على موقع الاختبار الخاص بنا.
تغيير لون الخلفية لعنصر قائمة واحد في قوائم التنقل في ووردبريس
هل تريد تغيير ألوان عناصر القائمة عند تمرير الماوس فوقها؟ هذه خدعة CSS الخاصة تجعل قوائم التنقل الخاصة بك تبدو أكثر تفاعلية.
ما عليك سوى إضافة CSS المخصص التالي إلى قالبك.
#top-menu li.menu-item a:hover {
background-color:#fff;
color:#666;
border-radius:5px;
} في هذا المثال ، # top-menu هو معرف CSS المستخدم بواسطة السمة الخاصة بك لقائمة قائمة التنقل غير المرتبة.
إليك كيف بدا هذا على موقع الاختبار الخاص بنا.
تأثير تمرير الماوس في قوائم التنقل في ووردبريس
تظهر قوائم التنقل عادةً في الأعلى وتختفي عندما يقوم المستخدم بالتمرير لأسفل. تظل قوائم التنقل العائمة اللاصقة في المقدمة بينما يقوم المستخدم بالتمرير لأسفل.
يمكنك إضافة كود CSS التالي إلى المظهر الخاص بك لجعل قوائم التنقل الخاصة بك ثابتة.
#top-menu {
background:#2194af;
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: right;
padding-right:30px
}ما عليك سوى استبدال # top-menu بمعرف CSS لقائمة التنقل الخاصة بك.
إليك كيف بدا الأمر في العرض التوضيحي الخاص بنا:
قائمة التنقل الثابتة
للحصول على إرشادات أكثر تفصيلاً وطريقة بديلة ، راجع دليلنا حول كيفية إنشاء قائمة تنقل عائمة ثابتة في ووردبريس .
تستخدم العديد من مواقع الويب صور خلفية كبيرة أو ملء الشاشة مع أزرار الحث على اتخاذ إجراء. يؤدي استخدام القوائم الشفافة إلى دمج التنقل مع الصورة. يؤدي هذا إلى زيادة احتمالية تركيز المستخدمين على عبارة الحث على اتخاذ إجراء.
ما عليك سوى إضافة نموذج CSS التالي إلى المظهر الخاص بك لجعل قوائم التنقل الخاصة بك شفافة.
#site-navigation {
background-color:transparent;
}هذه هي الطريقة التي بدت بها على موقعنا التجريبي.
قوائم التنقل الشفافة في ووردبريس
اعتمادًا على المظهر الخاص بك ، قد تحتاج إلى ضبط موضع صورة الرأس بحيث تغطي المنطقة الواقعة خلف قوائمك الشفافة.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تصميم قوائم التنقل في ووردبريس. قد ترغب أيضًا في الاطلاع على دليلنا حول كيفية إضافة قائمة ووردبريس سريعة الاستجابة للجوال .
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
