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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قد ترى خيارات مختلفة وفقًا لقالب ووردبريس الخاص بك.

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

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

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

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

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

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

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

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

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

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

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

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

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

هناك المزيد من الإعدادات التي يمكنك الاطلاع عليها، ولكن هذا يجب أن يكون كافيًا لمعظم مدونات ومواقع ووردبريس.

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

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

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

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

يمكنك القيام بذلك من خلال تحديد علامة التبويب “Menu Themes” على يمين الشاشة.

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

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

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

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

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

يمكنك أيضًا إنشاء تدرج لوني من خلال تحديد لونين مختلفين في قسم “Menu Background”.

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

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

نظرًا لأهميتها البالغة، فقد ترغب في تسليط الضوء على عناصر القائمة ذات المستوى الأعلى.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

كيفية إضافة قائمة ضخمة إلى موقع ووردبريس الخاص بك

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

ما عليك سوى التوجه إلى صفحة المظهر » القوائم من الشريط الجانبي للمسؤول.

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

إذا كنت تريد البدء من الصفر، فانقر فوق “إنشاء قائمة جديدة” ثم اكتب عنوان لقائمتك الضخمة الجديدة.

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

إضافة محتوى إلى قائمة ووردبريس الخاصة بك

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

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

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

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

تمكين ميزة القائمة الضخمة

عند الانتهاء، انقر لتوسيع “Max Mega Menu Settings” وحدد المربع بجوار “Enable”.

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

بعد ذلك، انقر فوق “حفظ”.

إنشاء تخطيط القائمة الضخمة

الآن، حرك الماوس فوق العنصر الأول في المستوى الأعلى وسترى زر “Mega Menu” الجديد. انقر عليه.

ستشاهد الأن جميع الإعدادات لهذا العنصر ذي المستوى الأعلى.

افتراضيًا، ستستخدم Max Mega Menu نمط القائمة المنبثقة، حيث تظهر القوائم الفرعية من الجانب. لإنشاء قائمة ضخمة بدلاً من ذلك، افتح القائمة المنسدلة “Sub menu display mode” واختر “Standard Layout” أو “Grid Layout”.

يعرض Standard layout جميع القوائم الفرعية في أعمدة.

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

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

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

الآن، يمكنك المضي قدمًا وتغيير كيفية ترتيب هذه العناصر في القائمة الرئيسية.

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

إذا كنت تستخدم تخطيط الشبكة، فيمكنك إضافة أعمدة وصفوف باستخدام الزرين “+Column” و”+Row”.

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

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

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

لتغيير حجم العنصر، ما عليك سوى النقر فوق أزرار الأسهم الخاصة به لتكبير الكسر أو تصغيره.

إنشاء قائمة ضخمة متوافقة مع الأجهزة المحمولة (تخطيط الشبكة فقط)

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

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

يمكنك إخفاء أعمدة أو صفوف كاملة باستخدام أيقونة “Hidden on mobile”، والتي تبدو وكأنها هاتف محمول صغير.

يمكنك ببساطة تبديل الايقون بين التشغيل والإيقاف لإخفاء وإظهار محتوى مختلف على سطح المكتب والجوال.

أضف محتوى غني باستخدام ويدجات القائمة الضخمة

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

على سبيل المثال، يمكنك استخدام الصور للترويج لبيع على متجرك عبر الإنترنت أو تسليط الضوء على أحدث منتجاتك.

لإضافة ويدجت، ما عليك سوى النقر لفتح القائمة المنسدلة “…Select a widget”.

يمكنك الأن اختيار ويدجت من القائمة.

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

لتهيئة الويدجت، انقر على أيقونة المفتاح الصغير الخاصة بها.

يؤدي هذا إلى فتح نافذة منبثقة حيث يمكنك إضافة محتوى إلى الويدجت وتغيير إعداداتها.

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

تحتوي جميع الويدجات على حقل “عنوان” حيث يمكنك إضافة نص سيظهر أعلى الأداة.

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

مراجعة إعدادات القائمة الرئيسية الافتراضية

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

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

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

إذا أجريت أي تغييرات على الإعدادات الافتراضية، فلا تنس النقر فوق “حفظ التغييرات”.

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

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

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

لـ إضافة أيقونات الصور إلى قائمة التنقل، انقر فوق علامة التبويب “Icon”.

يمكنك الأن اختيار أي أيقونة من المكتبة المضمنة أو استخدام صورتك الخاصة. إذا قمت بالترقية إلى Max Mega Menu Pro، فستتمكن أيضًا من الوصول إلى خطوط الأيقونات الأخرى وGenericons وFontAwesome.

الانتهاء من تكوين القائمة الضخمة على موقع ووردبريس الخاص بك

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

يمكنك الأن تكرار هذه العملية لكل عنصر رئيسي على مستوى أعلى.

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

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

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