كيفية إضافة قائمة ضخمة إلى WordPress (+5 أفضل المكونات الإضافية)

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

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

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

ما هي القائمة الضخمة في ووردبريس؟

قائمة WordPress الخاصة بك هي الهيكل الذي تستخدمه لتنظيم وعرض صفحات موقع الويب الخاص بك. عادة ما يكون في الجزء العلوي من الموقع - على الرغم من أنه يمكن أن يكون أيضًا على الجانب أو يظهر بطريقة فريدة أخرى.

للوصول إلى نظام القائمة المدمج ، يمكنك البدء بتسجيل الدخول إلى موقع WordPress الخاص بك. ثم ، من لوحة تحكم المسؤول ، انتقل إلى المظهر → القوائم .

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

القائمة الضخمة هي نوع من القائمة المنسدلة تسمح للمستخدمين بالوصول إلى قدر كبير من المحتوى في مكان واحد. غالبًا ما تُستخدم القوائم الضخمة على مواقع التجارة الإلكترونية وأصبحت شائعة بشكل متزايد في الأنواع الأخرى أيضًا. يمكنك مشاهدة مثال على موقع Nalgene يعرض صور المنتج وشرائح التمرير والمحتويات الأخرى بأسلوب أفقي أكثر:

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

لماذا تستخدم قائمة ضخمة في ووردبريس؟

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

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

كيفية إنشاء قائمة ووردبريس الضخمة

هناك طريقتان مختلفتان لإنشاء قائمة ضخمة في WordPress. أحد الخيارات هو القيام بذلك يدويًا ، عن طريق إضافة رمز مخصص. الخيار الآخر (أسرع وأسهل) هو استخدام مكون إضافي. دعنا نلقي نظرة على كيفية إضافة قائمة ضخمة إلى WordPress باستخدام كلتا الطريقتين.

إنشاء قائمة ضخمة يدويًا (بدون مكون إضافي)

إذا كنت مرتاحًا للعمل مع ملفات موقعك ، فقد يكون هذا خيارًا جيدًا لإنشاء شيء فريد للغاية.

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

أولاً ، استعرض للوصول إلى المظهر ← القوائم في لوحة معلومات WordPress الخاصة بك وقم بتسمية قائمتك.

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

عند الانتهاء ، يمكنك تحديد حفظ القائمة .

بعد ذلك ، انتقل إلى مدير ملفات cPanel أو استخدم عميل بروتوكول نقل الملفات (FTP) للاتصال بملفات موقع الويب الخاص بك. ابحث عن ورقة أنماط المظهر الخاص بك بالانتقال إلى / wp-content → / theme → / your-theme-or-child-theme → /style.css . في الجزء السفلي ، أضف السطر التالي من التعليمات البرمجية:

 .main-navigation ul:hover li ul, .main-navigation ul:hover li ul li ul { display: inherit; }

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

 .main-navigation { position: relative; } .main-navigation li { position: static; } .main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; } .main-navigation ul li:hover ul li ul { display: inherit; position: relative; left: 0; } .main-navigation ul li:hover ul li { float: left; position: static; display: block; padding-top: 1em; } .main-navigation ul li:hover ul li ul li { float: none; padding-top: 0; }

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

هل تريد دليلًا أكثر تفصيلاً؟ يقدم Tuts + جولة كاملة.

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

إنشاء قائمة ضخمة باستخدام ملحق WordPress

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

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

ستختلف الميزات والوظائف المحددة للمكوِّن الإضافي بناءً على الأداة التي تقرر استخدامها. لكن بشكل عام ، سيكون المفهوم هو نفسه.

سنستخدم Max Mega Menu كمثال. للبدء ، يمكنك تثبيت وتنشيط المكون الإضافي على موقع WordPress الخاص بك.

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

احفظ تغييراتك عند الانتهاء. لتخصيص مظهر القائمة الضخمة والإعدادات الخاصة بك ، يمكنك الانتقال إلى Mega Menu → Menu Themes .

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

أفضل خمسة إضافات لقائمة ووردبريس الضخمة

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

1. قائمة ماكس ميجا

Max Mega Menu هو مكون إضافي شائع بشكل لا يصدق يتيح لك بسهولة إضافة قوائم عالية الجودة وقابلة للتخصيص إلى موقع WordPress الخاص بك. يتضمن أداة إنشاء بالسحب والإفلات سهلة الاستخدام. كما أنه يدعم قوائم ضخمة متعددة لمواقع مختلفة عبر موقعك.

الملامح الرئيسية لقائمة ماكس ميجا:

• مواقع قائمة متعددة قابلة للتكوين بشكل فردي
• منشئ تخطيط الشبكة
• تحوم القائمة وخيارات الانتقال
• منشئ السحب والإفلات
• الرموز القصيرة
• رموز عناصر القائمة
• مربع البحث
• شعارات القائمة

مميزات قائمة ماكس ميجا:

• هناك خيارات مجانية ومميزة متاحة.
• إنه خفيف الوزن ، مع رمز نظيف.
• يتضمن دعمًا لـ WooCommerce و Easy Digital Downloads.
• يمكنك وضع القوائم الضخمة في مواقع متعددة.
• تتيح لك الأدوات إضافة خرائط ونماذج جهات اتصال والمزيد.
• يمكنك أيضًا إنشاء قوائم ضخمة من البداية أو استخدام قوائمك الحالية.
• يجعل التنقل باستخدام لوحة المفاتيح إمكانية وصول أفضل.

سلبيات قائمة ماكس ميجا:

• لا تتوفر خيارات التخصيص المتقدمة إلا بترخيص احترافي.
• لا توجد نسخة تجريبية مجانية للخطط المميزة.

سهولة الاستخدام :

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

التسعير :

تقدم قائمة Max Mega إصدارًا مجانيًا مع خيارات تخصيص محدودة. تبدأ الخطط الاحترافية ذات الميزات المتقدمة بسعر 29 دولارًا لترخيص موقع واحد. يتضمن هذا أيضًا عامًا من الدعم.

2. QuadMenu

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

الميزات الرئيسية لـ QuadMenu :

• منشئ السحب والإفلات
• مواقع قائمة متعددة
• القوائم غير القماشية واللزجة والعمودية
• خيارات لمحاذاة الروابط
• القوائم المنسدلة العائمة
• أيقونات Font Awesome وخطوط Google
• الرسوم المتحركة المنسدلة
• مجموعة متنوعة من الفلاتر
• الحاجيات العرض

إيجابيات QuadMenu:

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

سلبيات QuadMenu:

• تتطلب خيارات التصميم المتقدمة ترخيصًا محترفًا.
• هناك خيارات محدودة للمعاينة المباشرة.

سهولة الاستخدام :

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

التسعير:

QuadMenu لديه نسخة مجانية. تتوفر تراخيص Pro بدءًا من 30 دولارًا لموقع واحد.

3. UberMenu

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

الميزات الرئيسية لقائمة UberMenu :

• نظام شبكي فريد
• أكثر من 50 إعداد نمط
• توليد عنصر ديناميكي
• القوائم الفرعية على أساس المنشورات ، والفئات ، وأكثر من ذلك
• خيار إضافة علامات تبويب داخل القوائم
• القوائم التي تعمل باللمس
• قائمة منسدلة انتقالات CSS3
• مشغلات قائمة متعددة (التمرير ، والتأرجح ، والنقر)
• مواقع القائمة المختلفة
• تخطيطات مرنة

إيجابيات UberMenu :

• إنه مستخدم على نطاق واسع وحاصل على تصنيف عالي بين مالكي مواقع WordPress.
• هناك خيارات لإضافة HTML مخصص وأكواد قصيرة وعناصر واجهة مستخدم.
• يستخدم واجهة WordPress Customizer الأصلية.
• هناك موضوعات قائمة غير محدودة.

سلبيات UberMenu :

• لا يوجد سوى إصدار متميز متاح.
• اعتمادًا على المظهر الخاص بك ، قد لا يكون الخيار الأفضل إذا لم تكن لديك مهارات برمجة CSS / PHP.

سهولة الاستخدام :

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

التسعير :

يكلف ترخيص UberMenu لموقع واحد 26 دولارًا. يتضمن ذلك ستة أشهر من دعم المطورين.

4. ElementsKit

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

الميزات الرئيسية لـ ElementsKit :

• واجهة محتوى مباشر
• مكتبة وحدة مخصصة
• منشئ رأس وتذييل الصفحة
• التمرير المنظر
• أكثر من 200 قالب صفحة مصممة مسبقًا
• أداة للعد التنازلي
• الرسوم المتحركة المنسدلة
• خارج القوائم القماشية واللزجة والعمودية
• أيقونات Font Awesome
• موضوعات فاتحة ومظلمة
• اثنان من تخطيطات قائمة المحمول
• لغة تنسيق ويب حسب الطلب

إيجابيات ElementsKit :

• يتكامل بشكل كامل مع منشئ الصفحة Elementor.
• يتضمن وظيفة السحب والإفلات.
• إنه مبتدئ وسهل الاستخدام.
• لديها تخصيصات لألوان نص الرمز والشارة.
• يحتوي على ميزات WooCommerce مضمنة.
• يقدم خيارات قائمة ضخمة متقدمة.

سلبيات ElementsKit :

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

سهولة الاستخدام :

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

التسعير :

تقدم ElementsKit نسخة مجانية. تبدأ التراخيص المميزة من 39 دولارًا سنويًا لموقع واحد.

5. قائمة WP ميجا

إذا كنت تبحث عن أداة freemium بسيطة ومباشرة لإنشاء قوائم ضخمة في WordPress ، فإن WP Mega Menu هو خيار قوي آخر. هذا البرنامج المساعد سهل الاستخدام ويوفر جميع الميزات والوظائف الأساسية اللازمة لإنشاء قائمة ضخمة عالية الجودة لمجموعة متنوعة من المواقع. للحصول على أداة مجانية ، فإنه يأتي أيضًا مع مجموعة رائعة من الخيارات للتخصيص والتصميم.

الملامح الرئيسية لقائمة WP Mega :

• التنقل السهل
• واجهة السحب والإفلات
• خيار إنشاء وحفظ سمات القائمة
• الشعار وشريط البحث وصور الخلفية
• خطوط Google ورموز Font Awesome
• الرموز الاجتماعية
• تسمية القائمة

مميزات قائمة WP Mega Menu :

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

سلبيات قائمة WP Mega :

• يفتقر إلى الأدوات المصممة للمطورين مقارنة بخيارات المكونات الإضافية الأخرى.
• لا توجد خيارات لزجة أو خارج القماش مع الإصدار المجاني.

سهولة الاستخدام :

WP Mega Menu هو مكون إضافي سهل الاستخدام مع الكثير من الخيارات. يأتي بواجهة بديهية يسهل فهمها والتنقل فيها.

التسعير :

WP Mega Menu مجاني. لكنه يقدم أيضًا خططًا مميزة تبدأ من 29 دولارًا سنويًا للحصول على ترخيص واحد.

مقارنة بين المكونات الإضافية الضخمة لقائمة WordPress

الأسئلة المتداولة (FAQs) حول القوائم الضخمة

في هذه المرحلة ، نأمل أن يكون لديك فهم قوي لكيفية إنشاء وإضافة قائمة ضخمة في WordPress. ولكن لنأخذ لحظة لنختتم ببعض الأسئلة الشائعة (FAQs).

هل يمكنني إضافة صور وأيقونات إلى قائمة WordPress الضخمة؟

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

هل يمكنني إضافة قائمة ضخمة إلى الشريط الجانبي لـ WordPress الخاص بي؟

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

ابدأ في تخصيص قوائم WordPress الخاصة بك

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

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

هل تريد زيادة تحسين أداء موقع WordPress الخاص بك؟ بالإضافة إلى توفير نسخ احتياطية سهلة وتلقائية وميزات أمان أخرى في WordPress ، يمكن أن يساعد Jetpack في زيادة سرعة موقعك وتجربة المستخدم!