كيفية إضافة قائمة ضخمة (Mega Menus) على موقع WordPress (الدرس الأول)

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

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

في هذه المقالة ، سنوضح لك كيف يمكنك إضافة قائمة ضخمة إلى موقع WordPress الخاص بك ، خطوة بخطوة.

لماذا تضيف قائمة ميجا على موقع WordPress الخاص بك؟

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

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

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

يساعد هذا المتسوقين في العثور على فئة المنتج التي يريدونها بالضبط وإجراء عملية شراء.

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

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

ومع ذلك ، دعنا نرى كيف يمكنك بسهولة إضافة قائمة ضخمة إلى موقع WordPress الخاص بك.

كيفية إنشاء قائمة ميجا لموقع WordPress الخاص بك

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

بهذه الطريقة ، يمكنك إنشاء قوائم أكثر جاذبية ومفيدة.

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

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

تمكين القوائم الضخمة على موقع WordPress الخاص بك

عند التنشيط ، انتقل إلى Mega Menu » مواقع القائمة لرؤية جميع المناطق المختلفة حيث يمكنك إضافة قائمة ضخمة.

قد ترى خيارات مختلفة اعتمادا على قالب WordPress الخاص بك.

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

للقيام بذلك ، ما عليك سوى النقر لتوسيع موقع ثم تحديد مربع “ممكن”.

بعد ذلك، يمكنك تغيير ‘الحدث’ الذي سيفتح القائمة الضخمة.

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

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

وفي الوقت نفسه ، سيفتح “Hover” قائمتك الضخمة بمجرد أن يحرك الزائر الماوس فوقها. يمكن أن يشجع ذلك الزوار على استكشاف مناطق مختلفة من موقعك ، لذلك قد ترغب في استخدام “Hover” على الصفحات المقصودة أو الصفحة الرئيسية لموقعك على الويب.

بعد اتخاذ هذا القرار ، يمكنك تغيير كيفية فتح القائمة باستخدام إعدادات “التأثير”.

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

إذا كنت لا ترغب في استخدام أي رسوم متحركة ، فما عليك سوى فتح القائمة المنسدلة الأولى وتحديد “لا شيء”.

بشكل افتراضي ، لا تستخدم Mega Menu الرسوم المتحركة على الأجهزة المحمولة لمنع مشكلات الأداء. إذا كنت ترغب في إنشاء رسم متحرك فريد لزوار الجوال ، فيمكنك استخدام الإعدادات في منطقة “التأثير (الجوال)”.

أيضا ، إذا قمت بتعيين القائمة المنسدلة “الحدث” على “النقر” ، فتأكد من تحديد علامة التبويب “خيارات متقدمة” بعد ذلك.

هنا ، يمكنك استخدام “سلوك النقر فوق الحدث” لتحديد ما يحدث عندما ينقر الزائر على قائمتك الضخمة. على سبيل المثال، قد تؤدي النقرة الثانية إلى إغلاق القائمة أو فتح رابط جديد.

هناك المزيد من الإعدادات التي يمكنك البحث فيها ، ولكن يجب أن يكون هذا كافيا لمعظم مدونات ومواقع WordPress .

عندما تكون راضيا عن كيفية تكوين الإضافة ، انقر فوق “حفظ التغييرات”.

لتمكين القوائم الضخمة لمزيد من المواقع ، ما عليك سوى اتباع نفس العملية الموضحة أعلاه.

تخصيص شكل القوائم الضخمة على موقع الويب الخاص بك

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

يمكنك القيام بذلك عن طريق تحديد علامة التبويب “قوالب القائمة” على يسار الشاشة.

في هذه الشاشة ، يمكنك تغيير اتجاه أيقونات الأسهم واستخدام ارتفاع خط مختلف وإضافة ظل.

عندما تكون راضيا عن إعداداتك ، لا تنس النقر فوق “حفظ التغييرات”.

إذا كنت ترغب في إزالة هذه التغييرات في أي وقت ، فما عليك سوى تحديد مربع “إعادة تعيين تصميم عنصر واجهة المستخدم” ثم النقر فوق “حفظ التغييرات”.

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

لإجراء هذه التغييرات ، انقر فوق علامة التبويب “شريط القوائم” ثم استخدم الإعدادات لتغيير لون الخلفية والحشو ونصف قطر الحدود والمزيد.

يمكنك حتى إنشاء تدرج لوني عن طريق تحديد لونين مختلفين في قسم “خلفية القائمة”.

إذا قمت بالتمرير لأسفل ، فيمكنك تغيير شكل قائمة المستوى الأعلى.

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

نظرا لأنها مهمة جدا ، فقد ترغب في إبراز عناصر قائمة المستوى الأعلى.

على سبيل المثال، في الصورة التالية، نستخدم لون خلفية مختلفا.

في قسم “حالة التحويم” ، يمكنك تمييز عنصر قائمة المستوى الأعلى المحدد حاليا.

على سبيل المثال ، في الصورة التالية ، نستخدم تأثير التسطير.

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

إذا أضفت حالة تمرير ، فقم بالتمرير إلى أسفل الشاشة وحدد مربع “تمييز العنصر الحالي”.

بعد ذلك ، يمكنك تغيير شكل القائمة الفرعية.

هذه هي القائمة التي تظهر أسفل أحد الوالدين من المستوى الأعلى ، كما ترى في الصورة التالية.

لتخصيص القائمة الفرعية ، انقر فوق علامة التبويب “Mega Menus”.

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

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

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

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

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

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

عندما تكون راضيا عن كيفية إعداد القائمة ، لا تنس النقر فوق “حفظ التغييرات”.

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