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

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

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

لماذا إضافة قائمة متجاوبة كاملة الشاشة في ووردبريس؟

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

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

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

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

كيفية إضافة قائمة متجاوبة بحجم الشاشة الكاملة في ووردبريس

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

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

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

ابدأ بتحديد مربع الاختيار “Activate Animated Fullscreen Menu” لتمكين القائمة.

من الجيد أيضًا تحديد مربع الاختيار “Show the menu only for Admin users” في البداية. سيتيح لك هذا رؤية التغييرات أثناء تكوين القائمة، ولكن لن يتمكن زوار موقعك من رؤيتها حتى تنتهي.

لا تنسَ العودة وإلغاء تحديد هذا المربع عند الانتهاء.

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

Fullscreen Menu التصميم والمظهر

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

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

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

إعداد اللون الثاني هو لخلفية القائمة.

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

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

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

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

بعد ذلك، انتقل لأسفل إلى قسم “Animation Settings”. هنا، يمكنك ضبط إعدادين رئيسيين.

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

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

محتوى Fullscreen Menu

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

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

إذا كنت ترغب في عرض محتوى إضافي على شاشة القائمة، فيمكنك إضافته في القسم التالي، المسمى “Free HTML / Shortcodes”. ما عليك سوى كتابة المحتوى الخاص بك في مربع المحرر وإضافة أي ملفات وسائط ترغب فيها. سيتم عرض هذا المحتوى أسفل القائمة.

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

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

لإضافتها، ما عليك سوى التمرير لأسفل إلى قسم “Social Icons” وإدخال عنوان للأيقون، مثل “Facebook”. بعد ذلك، اختر الايقونة المناسبة واكتب عنوان URL لصفحتك الاجتماعية.

يمكنك إضافة المزيد من الأيقونات بالنقر فوق الزر “Add Another Icon”.

وأخيرًا، يمكنك إضافة شريط بحث في ووردبريس أصلي إلى أعلى القائمة المستجيبة. ستحتاج إلى التمرير إلى أسفل صفحة “Menu Content” وتحديد المربع “Add Search Bar؟”. وإذا أردت، يمكنك أيضًا كتابة نص مؤقت.

أخيرًا، انقر على زر “حفظ التغييرات” لتخزين إعداداتك.

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

إليك كيف تبدو على موقعنا التجريبي.

بمجرد أن تصبح راضيًا عن القائمة التي تظهر على الشاشة بالكامل، لا تنسَ العودة إلى خيارات Fullscreen Menu وإلغاء تحديد “Show the menu only for Admin users”. بعد النقر فوق الزر “حفظ التغييرات”، سيتمكن زوار موقعك من الوصول إلى القائمة.

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