قوائم ووردبريس او القائمة الأفقية للروابط المعروضة أعلى معظم مواقع الويب.
بشكل افتراضي ، تأتي قوالب ووردبريس WordPress مع مواقع وتخطيطات قائمة محددة مسبقًا
ولكن ماذا لو أردت إنشاء قائمة مخصصة في موقع ووردبريس الخاص بك؟
في هذه المقالة ، سنوضح لك كيفية إنشاء قائمة مخصصة وإضافتها بسهولة في ووردبريس WordPress ، بحيث يمكنك عرضها في أي مكان على المظهر الخاص بك.
جدول المحتويات
متى تحتاج إلى هذا البرنامج التعليمي لقائمة التنقل في ووردبريس؟
تأتي معظم قوالب ووردبريس WordPress مع مكان واحد على الأقل حيث يمكنك عرض روابط التنقل الخاصة بموقعك في قائمة.
يمكنك إدارة عناصر القائمة من واجهة سهلة الاستخدام داخل منطقة إدارة ووردبريس WordPress الخاصة بك .
إذا كنت تبحث فقط عن إضافة قوائم التنقل على موقع الويب الخاص بك ، فما عليك سوى اتباع دليل المبتدئين الخاص بنا حول كيفية إضافة قائمة تنقل في ووردبريس WordPress .
الهدف من هذا البرنامج التعليمي هو مساعدة مستخدمي ووردبريس المتوسطين على إنشاء قائمة مخصصة في قوالب ووردبريس WordPress الخاصة بهم.
سنغطي الموضوعات التالية في هذه المقالة:
- إنشاء قائمة مخصصة في قوالب ووردبريس
- عرض قائمة التنقل المخصصة في قالب WordPress
- إضافة قائمة تنقل مخصصة في WordPress باستخدام أداة إنشاء الصفحات
- إنشاء قوائم استجابة متوافقة مع الجوّال في WordPress
- المزيد من الأشياء التي يمكنك القيام بها باستخدام قوائم التنقل في WordPress
دعنا نلقي نظرة على كيفية إضافة قوائم تنقل ووردبريس WordPress مخصصة في قالبك.
إنشاء قائمة مخصصة في قوالب ووردبريس
قوائم التنقل هي إحدى ميزات قوالب ووردبريس WordPress. يمكن لكل سمة تحديد مواقع القائمة الخاصة بها ودعم القائمة.
لإضافة قائمة الملاحة، فإن أول شيء عليك القيام به هو تسجيل القائمة الجديدة عن طريق إضافة هذا الرمز إلى ملف القالب الخاص بك functions.php .
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );يمكنك الآن الانتقال إلى المظهر » قوائم في مسؤول WordPress ومحاولة إنشاء قائمة جديدة أو تحريرها. سترى "قائمتي المخصصة" كخيار موقع الموضوع.
إذا كنت ترغب في إضافة أكثر من موقع واحد لقائمة التنقل الجديدة ، فستحتاج إلى استخدام رمز مثل هذا:
function wpb_custom_new_menu() {
register_nav_menus(
array(
'my-custom-menu' => ( 'My Custom Menu' ), 'extra-menu' => ( 'Extra Menu' )
)
);
}
add_action( 'init', 'wpb_custom_new_menu' );بمجرد إضافة موقع القائمة ، تابع وأضف بعض عناصر القائمة في مسؤول ووردبريس WordPress باتباع البرنامج التعليمي الخاص بنا حول كيفية إضافة قوائم التنقل للمبتدئين .
سيسمح لنا ذلك بالانتقال إلى الخطوة التالية وهي عرض القائمة في المظهر الخاص بك.
عرض قوائم التنقل المخصصة في قوالب ووردبريس
بعد ذلك ، نحتاج إلى عرض قائمة التنقل الجديدة في قالب ووردبريس WordPress الخاص بك.
المكان الأكثر شيوعًا حيث يتم وضع قوائم التنقل عادةً هو قسم رأس الموقع بعد عنوان الموقع أو الشعار مباشرةً.
ومع ذلك ، يمكنك إضافة قائمة التنقل الخاصة بك في أي مكان تريده.
ستحتاج إلى إضافة هذا الرمز في ملف قالب القالب الخاص بك حيث تريد عرض قائمتك.
'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>موقع المظهر هو الاسم الذي اخترناه في الخطوة السابقة.
فئة الحاوية هي فئة CSS التي ستتم إضافتها إلى قائمة التنقل الخاصة بك.
ستظهر قائمتك كقائمة ذات تعداد نقطي عادي على موقع الويب الخاص بك.
يمكنك استخدام فئة CSS لتصميم قوائمك .custom_menu_class . إليك نموذج CSS لمساعدتك على البدء:
div.custom-menu-class ul {
margin:20px 0px 20px 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
text-align:right;
}
div.custom-menu-class li {
padding: 0px 20px 0px 0px;
display: inline;
}
div.custom-menu-class a {
color:#FFFFFF;
}
لمعرفة المزيد حول تصميم قائمة التنقل ، راجع البرنامج التعليمي المفصل الخاص بنا حول كيفية تصميم قوائم التنقل في WordPress
إنشاء قائمة مخصصة في ووردبريس باستخدام مصمم الصفحات
إذا كنت تقوم بإنشاء صفحة مقصودة مخصصة أو تخطيط صفحة رئيسية ، فإن استخدام مكون إضافي منشئ صفحات ووردبريس WordPress سيجعل الأمر برمته أسهل كثيرًا.
تستطيع استخدام Beaver Builder ، وهو منشئ صفحات ووردبريس WordPress بسيط في السوق.
يسمح لك بإنشاء أي نوع من تخطيط الصفحة باستخدام أدوات السحب والإفلات البسيطة (لا يلزم وجود تشفير).
يتضمن هذا أيضًا إضافة قائمة تنقل مخصصة إلى تخطيط صفحتك.
أولاً ، ستحتاج إلى تثبيت وتفعيل المكون الإضافي Beaver Builder .
عند التنشيط ، تحتاج إلى إنشاء صفحة جديدة أو تعديل صفحة موجودة حيث ترغب في إنشاء قائمة مخصصة.
في شاشة محرر النشر ، انقر فوق الزر "Launch Beaver Builder ".
إذا كانت صفحة جديدة ، فيمكنك استخدام أحد القوالب الجاهزة التي تأتي مع Beaver Builder. يمكنك أيضًا تعديل صفحتك الخارجية على الفور.
بعد ذلك ، تحتاج إلى إضافة وحدة القوائم وسحبها وإفلاتها على صفحتك إلى المكان الذي تريد عرض القائمة فيه.
سيؤدي ذلك إلى إظهار إعدادات وحدة القائمة في نافذة منبثقة.
أولاً ، تحتاج إلى تحديد قائمة التنقل التي تريد استخدامها.
يمكنك دائمًا إنشاء قوائم جديدة أو تعديل قائمة موجودة من خلال زيارة المظهر » قوائم في منطقة إدارة ووردبريس WordPress.
يمكنك مراجعة الإعدادات الأخرى أيضًا.
يتيح لك Beaver Builder اختيار ألوان وخلفية وخصائص نمط أخرى مخصصة لقائمتك.
بمجرد الانتهاء ، يمكنك النقر فوق الزر حفظ ومعاينة القائمة الخاصة بك.
إنشاء قوائم مستجيبة متوافقة مع الجوال في ووردبريس
مع زيادة استخدام الأجهزة المحمولة ، قد ترغب في جعل قوائمك متوافقة مع الجوّال عن طريق إضافة أحد التأثيرات الشائعة العديدة.
يمكنك إضافة تأثير الانزلاق (أعلاه) وتأثير القائمة المنسدلة وحتى تأثير التبديل لقوائم الهاتف المحمول.
لدينا دليل مفصل خطوة بخطوة حول كيفية إنشاء قوائم WordPress سريعة الاستجابة للجوال .
أنجز المزيد باستخدام قوائم التنقل في ووردبريس
تعد قوائم التنقل أداة قوية لتصميم الويب. إنها تسمح لك بتوجيه المستخدمين إلى أهم أقسام موقع الويب الخاص بك.
يتيح لك ووردبريس WordPress القيام بأكثر من مجرد عرض الروابط في قائمتك.
جرب هذه البرامج التعليمية المفيدة لتوسيع وظائف قوائم التنقل على موقع ووردبريس WordPress الخاص بك.
- كيفية إضافة أيقونات الصور مع قوائم التنقل في WordPress
- إضافة أوصاف القائمة في قالب WordPress الخاص بك
- طريقة إضافة قائمة استجابة ملء الشاشة في WordPress
- كيفية إضافة قائمة ضخمة إلى موقع WordPress الخاص بك
هذا كل شيء ، نأمل أن يساعدك هذا الدليل النهائي في تعلم كيفية إنشاء قائمة مخصصة في ووردبريس WordPress.
أحدث المقالات