عند تصميم موقع ووردبريس ، من الضروري التركيز على إنشاء قائمة رئيسية ضخمة ذات مظهر جذاب. هذا الأمر بالغ الأهمية، خاصةً لمواقع التجارة الإلكترونية أو مواقع الشركات الكبيرة التي تهدف إلى عرض مجموعة واسعة من المنتجات أو الفئات على موقعها الإلكتروني.
تساعد قائمة ووردبريس الضخمة في تنظيم هذه الأقسام ليسهل على المستخدمين التنقل بينها. كيف؟ تُعدّ قائمة ووردبريس الضخمة طريقةً رائعةً لتنظيم وعرض كمية كبيرة من المحتوى في قائمة واحدة سهلة التصفح. فهي تتيح لك عرض عناصر القائمة في أعمدة أو صفوف متعددة، مما يمكّن المستخدمين من العثور بسرعة على أقسام موقعك المختلفة دون الحاجة إلى التنقل بين الصفحات بشكل متكرر.
يُمكن لهذا أن يُحدث فرقًا كبيرًا في تجربة زوار موقعك الإلكتروني، إذ يُسهّل عملية التصفح ويجعلها أكثر سهولة في تصميم المواقع. في هذا الدليل، سنُرشدك خلال خطوات بسيطة لإضافة قائمة رئيسية ضخمة إلى موقعك على ووردبريس، مما يُسهّل على الجميع العثور على ما يبحثون عنه.
فهم كيفية استخدام القائمة الضخمة في ووردبريس؟
قد تتساءل الآن: ما هي القائمة الضخمة في ووردبريس، ولماذا أحتاجها فعلاً؟ تتيح القائمة الضخمة في ووردبريس لأصحاب المواقع إضافة أعمدة متنوعة، ومحتوى وسائط متعددة، وخيارات تخصيص لتصميم قائمة موقعهم. في السابق، كانت القوائم الضخمة التقليدية معقدة في التنقل، ولكن مع مرور الوقت، أصبح من الأسهل تنظيم وتصنيف فئات متعددة باستخدام القائمة الضخمة في ووردبريس.
يتضمن ووردبريس عادةً أداة إنشاء سهلة الاستخدام تعتمد على السحب والإفلات، مما يُسهّل إنشاء أنواع مختلفة من القوائم، مثل القوائم المنسدلة وقوائم الترويسة وغيرها. بالإضافة إلى ذلك، توجد إضافات تُمكّنك من تخصيص قوائم التنقل في قوالب ووردبريس.
لكن إذا كان موقعك يحتوي على محتوى غزير، فقد لا تكفي القائمة العادية. في هذه الحالة، تُعدّ القائمة الضخمة خيارًا ممتازًا. فباستخدامها، يمكنك إضافة قوائم منسدلة متعددة الأعمدة إلى قائمة ووردبريس، مما يُساعدك على تنظيم المحتوى تحت عناوين رئيسية وفرعية مختلفة. وبهذه الطريقة، يستطيع الزوار العثور على ما يبحثون عنه بسرعة وسهولة.
موضوع ذو صلة: كيف يمكن حل مشكلة عدم إمكانية إضافة صفحة إلى القائمة في ووردبريس؟
إنشاء قائمة ضخمة في ووردبريس ليس بالضرورة أمرًا معقدًا
تواصل مع مطوري ووردبريس المحترفين لدينا واحصل على أفضل قائمة ضخمة في ووردبريس.
كيفية إنشاء قائمة ميجا جذابة في ووردبريس
الآن، لا يوجد أي تعقيد في إنشاء قائمة ضخمة جذابة في ووردبريس. كل ما تحتاجه هو إضافة Max Mega Menu ، وستكون قائمتك الضخمة جاهزة.
مع ذلك، إذا كنتَ مُلِمًّا بالجوانب التقنية لإنشاء قائمة ضخمة، فيمكنك أيضًا إنشاؤها يدويًا. في هذا القسم، سنشرح كلًا من استخدام الإضافة والطريقة اليدوية للحصول على أفضل النتائج.
فلنبدأ إذن:
كيفية إنشاء قائمة ضخمة جذابة في ووردبريس باستخدام الإضافة
أسهل طريقة لإضافة قائمة ضخمة إلى موقع ووردبريس الخاص بك هي استخدام إضافة Max Mega Menu. تتيح لك هذه الأداة تحسين قوائمك بإضافة محتوى مثل مقاطع الفيديو ومعارض الصور وأشرطة البحث وغيرها.
باستخدام Max Mega Menu، يمكنك إنشاء قوائم منظمة وجذابة بصريًا ومفيدة لزوارك.
الخطوة 1: تثبيت وإعداد إضافة Max Mega Menu
للبدء، سجّل الدخول إلى لوحة تحكم ووردبريس ، ثم انتقل إلى الإضافات ← إضافة جديد . في شريط البحث، اكتب "Max Mega Menu"، ثم انقر على "التثبيت الآن" و "التفعيل" .
نصيحة سريعة : قبل البدء، تأكد من نشر جميع الصفحات الأساسية وإنشاء قائمة تنقل مخصصة بها.
بعد التفعيل، انتقل إلى القائمة الرئيسية في الشريط الجانبي الأيسر للوصول إلى الإعدادات. لتعيين موقع القائمة، اتبع الخطوات التالية:
- انتقل إلى المظهر → القوائم .
- حدد مواقع القوائم وانقر فوق إضافة موقع قائمة آخر .
- اختر المكان الذي تريد أن تظهر فيه قائمتك (على سبيل المثال، رأس الصفحة، تذييل الصفحة، الشريط الجانبي).
- قم بتعيين قائمتك المخصصة، ثم انقر فوق إضافة موقع القائمة .
في الإعدادات العامة ، فعّل القائمة الرئيسية وحدد طريقة فتحها. يمكنك الاختيار بين:
- نية التمرير : يفتح بعد تأخير طفيف، مما يمنع النقرات العرضية.
- التحويم : يفتح فوراً عند التحويم فوقه، مما يخلق تجربة سلسة.
- انقر : يتطلب نقرة أو ضغطة، وهو مثالي للأجهزة ذات الشاشة اللمسية.
إذا اخترت "النقر"، فاستكشف الخيارات الموجودة ضمن Advanced → Click Event Behavior للتحكم في ما يحدث عند النقرات اللاحقة.
يمكنك أيضاً إضافة بعض تأثيرات الحركة من خلال التأثير . تشمل الخيارات التلاشي ، والانزلاق ، والتلاشي التدريجي ، مع إمكانية ضبط السرعة من سريع إلى بطيء.
الخطوة الثانية: تخصيص تصميم القائمة ومظهرها
يأتي برنامج Max Mega Menu مزودًا بنمط افتراضي، ولكن يمكنك أيضًا تصميم نمطك الخاص. لإنشاء مظهر مخصص:
- انتقل إلى "سمات القائمة" في إعدادات قائمة Max Mega Menu.
- انقر على أيقونة النقاط الثلاث لتحديد المظهر واختر إضافة مظهر جديد .
- في الإعدادات العامة ، يمكنك تخصيص أشياء مثل نمط السهم وارتفاع السطر وظل القائمة.
ضمن شريط القوائم ، يمكنك تخصيص مظهر القائمة الرئيسية عن طريق تعديل الارتفاع ولون الخلفية والمسافة الداخلية وإضافة حدود. لكل عنصر من عناصر القائمة، حدد خيارات مثل:
- المحاذاة : ضع العناصر إلى اليسار أو الوسط أو اليمين.
- نمط الخط : قم بمطابقة الطباعة مع تصميم موقعك.
- الخلفية والتباعد : اضبط ألوان الخلفية والهوامش والحشو والحدود للحصول على مظهر أنيق.
الخطوة 3: أضف المحتوى إلى قائمتك
إضافة المحتوى أمرٌ بسيط بفضل واجهة السحب والإفلات في Max Mega Menu. يمكنك إضافة روابط نصية، ومنتجات WooCommerce، وصور، وحتى فلاتر بحث.
- انتقل إلى المظهر → القوائم لإنشاء قائمة أو تعديلها.
- في إعدادات قائمة Max Mega Menu على اليسار، حدد خيار "تمكين" للموقع الذي اخترته.
- أضف الصفحات والمنشورات والفئات والمنتجات إلى هيكل القائمة.
- اسحب العناصر وأفلتها لتنظيمها في مستويات متعددة.
لإنشاء قائمة ضخمة، مرر مؤشر الماوس فوق الصفحة وانقر على " قائمة ضخمة" . اضبط وضع العرض على "تخطيط الشبكة" لتنظيم متعدد الأعمدة، أو "التخطيط القياسي" لقوائم أبسط. ولإضفاء لمسة جمالية، استخدم أدوات مثل شريط البحث، ومعرض الصور، وفلتر المنتجات. يمكنك أيضًا إضافة أيقونات لكل عنصر من خلال تحديدها في "الأيقونات" .
بعد تخصيص كل شيء، انقر فوق "حفظ القائمة" لتفعيل قائمتك الضخمة!
اقرأ: كيفية الانتقال من دروبال إلى ووردبريس: دليل شامل
كيفية إنشاء قائمة ضخمة في ووردبريس يدويًا
في الطريقة الأولى، رأينا كيفية إنشاء قائمة ضخمة في ووردبريس باستخدام إضافة Max Mega Menu. الآن، سنتعرف على كيفية إنشاء قائمة ضخمة جذابة في ووردبريس باستخدام أكواد CSS.
قد تكون هذه الطريقة مفيدة لمن يرغبون بمزيد من المرونة والتحكم في عناصر تصميم قوائمهم. مع ذلك، ستحتاج إلى معرفة جيدة بلغة CSS لتحقيق أفضل النتائج.
الخطوة 1: إعداد بيئة الاختبار الخاصة بك
قبل إجراء أي تغييرات على موقعك، يُفضّل العمل في بيئة تجريبية آمنة تتيح لك التجربة دون التأثير على الموقع الفعلي. يمكنك استخدام أي خدمة استضافة ووردبريس مُدارة توفر أداة تجريبية تُمكّنك من إنشاء نسخة من موقعك لاختبار التغييرات أولاً.
لإنشاء بيئة تجريبية:
- قم بتسجيل الدخول إلى hPanel واختر المواقع الإلكترونية .
- اختر نطاقك وانقر على إدارة .
- انتقل إلى ووردبريس ← مرحلة الاختبار في القائمة الجانبية.
- انقر فوق "إنشاء بيئة تجريبية" ضمن علامة التبويب "بيئة تجريبية" واتبع التعليمات لإعداد نطاق فرعي لبيئة الاختبار الخاصة بك.
تعرّف على: كيفية إزالة أكواد CSS غير المستخدمة في ووردبريس؟
الخطوة الثانية: الوصول إلى ملف أنماط القالب الخاص بك وتعديله
بمجرد تجهيز موقعك التجريبي، يمكنك تعديل ورقة أنماط القالب بأمان لتخصيص قائمتك.
ملاحظة : إذا أمكن، قم بإنشاء قالب فرعي بدلاً من تعديل القالب الرئيسي لمنع فقدان التخصيصات عند تحديث القالب.
للوصول إلى ورقة الأنماط في مدير ملفات الاستضافة الخاص بك:
- انتقل إلى الملفات ← مدير الملفات في hPanel.
- public_html الخاص بنطاقك ، ثم انتقل إلى Staging → wp_content → themes .
- افتح مجلد القالب الخاص بك وانقر نقراً مزدوجاً على ملف style.css لتعديله.
أضف هذا الكود لجعل عناصر القائمة الفرعية مرئية عند تمرير المؤشر فوقها:
| .main-navigation ul: hover li ul,.main-navigation ul: hover li ul li ul {display: inherit;} |
تعرّف على: كيفية نشر موقع تجريبي على الموقع الرئيسي دون الكتابة فوق قاعدة البيانات في ووردبريس
الخطوة 3: تخصيص قائمة ميجا الخاصة بك
والآن، دعونا نُضفي على القائمة الرئيسية طابعًا مميزًا. إليك بعض مقتطفات CSS لمساعدتك على البدء:
أنشئ أعمدة داخل القائمة الضخمة:
| .mega-menu li.mega-menu-column {width: 25%; /* لتصميم من 4 أعمدة */float: left;padding: 10px;} |
قم بتخصيص لون عناصر القائمة، والمسافة بينها، ونمط النص:
| .mega-menu ul.mega-sub-menu li a {color: #555;padding: 8px 15px;display: block;text-decoration: none;} |
تحسين للأجهزة المحمولة:
| @media screen and (max-width: 767px) {.mega-menu li.mega-menu-column {width: 100%;float: none;}} |
تُعدّ هذه المقتطفات نقطة انطلاق ممتازة، ولكن تأكد من اختبارها وتعديلها حسب الحاجة لتتوافق مع تصميم موقعك. بمجرد رضاك عن التعديلات، يمكنك نقلها من الموقع التجريبي إلى موقعك الفعلي.
تعرّف على: كيفية إصلاح مشكلة عدم عمل استعلام الوسائط في ووردبريس؟
أفضل إضافات القوائم الضخمة لإنشاء قائمة ضخمة جذابة في ووردبريس
نراهن أنك الآن تمتلك المعرفة اللازمة لإنشاء قائمة ضخمة في ووردبريس، سواءً باستخدام إضافة أو أكواد CSS. مع ذلك، يُعد استخدام الإضافة بلا منازع أفضل طريقة لإنشاء قائمة ضخمة في ووردبريس. فهي سهلة، وأقل استهلاكًا للوقت، ومثالية للمبتدئين في ووردبريس .
لهذا السبب اخترنا بعضًا من أفضل الإضافات التي يمكنك استخدامها لإنشاء قائمة ضخمة ذات مظهر أفضل لموقعك على ووردبريس بالإضافة إلى إضافة Max Mega Menu.
قائمة أوبر
UberMenu خيارًا مفضلًا لدى مستخدمي ووردبريس لإضافة قوائم ضخمة وقوائم منبثقة مرنة ومتجاوبة. تتيح لك هذه الإضافة المتميزة التحكم الكامل في الانتقالات والخطوط واتجاه القائمة (أفقي أو رأسي) ولون الخلفية. بالإضافة إلى ذلك، تُدار جميع خياراتها القابلة للتخصيص بشكل كبير من لوحة تحكم سهلة الاستخدام.
هنا، يمكنك تحديد عرض الأعمدة، وإضافة الأدوات المصغّرة، والرموز المختصرة، ورموز HTML المخصصة، ومعاينة التغييرات مباشرةً. يُعدّ UberMenu أداةً فعّالةً لكل من يرغب في إنشاء تصميم قائمة جذّاب وديناميكي.
القائمة الرباعية
QuadMenu إضافة مفتوحة المصدر لقوائم ووردبريس الضخمة، غنية بالخيارات والقوالب. مع النسخة المجانية، يمكنك إضافة أداة تنقل، وتحديد نقاط توقف مخصصة لطي القائمة، وإنشاء أنماط قوائم متنوعة مثل القوائم المنفصلة، والثابتة، والأفقية، والرأسية الضخمة. هذه المرونة تُسهّل تصميم تجربة تنقل تتناسب مع تصميم موقعك دون الحاجة إلى شراء أي خيار مدفوع.
GutenKit
GutenKit هو إضافة قوية لـ Gutenberg تُسهّل إنشاء قوائم ضخمة باستخدام الكتل. تأتي الإضافة محمّلة بأنماط وقوالب جاهزة، مما يسمح لك باختيار تصميم وتخصيصه حسب رغبتك.
بفضل التحكم الكامل في المحتوى والأسلوب والتخصيصات المتقدمة، فإن واجهة GutenKit سهلة الاستخدام تجعلها خيارًا رائعًا لأولئك الذين يرغبون في بناء وتحسين المواقع في محرر الكتل.
إلى جانب ميزة القائمة الضخمة، فإنه يوفر أكثر من 60 كتلة وأكثر من 25 وحدة نمطية لإجراء تخصيصات متعددة الاستخدامات داخل Gutenberg - وهو بديل مثالي لـ ElementsKit للمواقع القائمة على الكتل.
جيتمنو
JetMenu إضافة مميزة لإنشاء قوائم ووردبريس تفاعلية ضخمة مع خيارات غنية بالمحتوى مثل الصور والفيديوهات والملفات الصوتية. مقابل 43 دولارًا سنويًا، يمكنك الوصول إلى أداة إنشاء سهلة الاستخدام تعتمد على السحب والإفلات، بالإضافة إلى العديد من تصميمات القوائم، بما في ذلك تصميم الهامبرغر، والتصميم الأفقي، والتصميم الرأسي.
ومن أبرز الميزات مدير الإعدادات المسبقة، الذي يتيح لك حفظ قوالب متعددة لقوائم مختلفة - وهو مثالي للمواقع التي تحتاج إلى خيارات تنقل مرنة وجذابة.
قائمة الأبطال
Hero Menu من Hero Plugins خيارًا متميزًا لإنشاء قوائم ووردبريس مخصصة. يتميز بواجهة سهلة الاستخدام تعتمد على السحب والإفلات، مع ترميز لوني، مما يُسهّل تنظيم عناصر القائمة وتصور تسلسلها الهرمي. إضافة عناصر خاصة مثل الشعار، شريط البحث، أو الأيقونات، لا تتطلب سوى نقرة واحدة.
يأتي قالب Hero Menu مزودًا بأنماط قوائم متعددة و60 تركيبة لونية جاهزة، مما يوفر عليك الوقت في التصميم. تتميز القوائم المصممة باستخدام Hero Menu بتصميم متجاوب بالكامل وتوافقها مع WooCommerce، مما يجعلها خيارًا مثاليًا لمواقع التجارة الإلكترونية.
بالإضافة إلى ذلك، تم اختباره ليعمل بسلاسة مع قوالب ووردبريس الشائعة مثل Divi و Avada، مما يضمن التكامل السلس مع تصميم موقعك.
يختتم
الآن وقد عرفت كيفية إنشاء قائمة ضخمة في ووردبريس - حتى لو لم يكن قالب موقعك مزودًا بها - أصبح بإمكانك تصفح موقعك الغني بالمحتوى بكل سهولة. تُعد القوائم الضخمة مثالية لتنظيم كميات كبيرة من المحتوى، مما يُساعد الزوار على إيجاد ما يبحثون عنه بسهولة أكبر، وبالتالي تحسين تجربة المستخدم بشكل عام.
قبل إطلاق موقعك على ووردبريس، من الضروري التأكد من سهولة وسلاسة التنقل فيه. بالنسبة لمواقع التجارة الإلكترونية أو المواقع ذات الصفحات الكثيرة، تُعدّ القائمة الضخمة (Mega Menu) إضافةً قيّمة. على عكس القوائم التقليدية، تتيح لك القوائم الضخمة تنظيم المعلومات المعقدة بطريقة واضحة وجذابة بصريًا.
