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

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

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

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

ما هي قائمة التنقل؟

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

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

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

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

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

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

جرب أماكن عرض مختلفة للقائمة

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

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

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

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

على سبيل المثال، لا يوفر قالب Twenty Twenty-One أي مواقع عمودية، بينما يوفر قالب Twenty Twenty موقع عمودي يسمى “قائمة سطح المكتب الموسعة”.

يمكنك ببساطة تحديد القائمة التي ترغب في عرضها عموديًا ثم تحديد مربع “القائمة الموسعة لسطح المكتب” أسفل الشاشة.

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

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

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

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

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

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

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

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

إنشاء قائمة تنقل عمودية على منشور أو صفحة

يمكنك إضافة قائمة تنقل رأسية إلى المنشورات والصفحات بطريقة مماثلة.

أولاً، عليك إنشاء منشور جديد أو تعديل منشور موجود.

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

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

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

ستجد هناك زرين لتوجيه القائمة. ستحتاج إلى النقر فوق زر السهم لأسفل لتوجيه القائمة رأسيًا (عموديا).

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

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

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

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

بعد ذلك، انقر فوق الزر “تحديد التنقل” على شريط الأدوات.

الآن، سترى خيارات مختلفة لتخصيص قائمة التنقل على اللوحة الموجودة على اليسار.

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

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

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

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

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

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

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

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

بعد ذلك، يمكنك استخدام SeedProd لإنشاء قالب ووردبريس مخصص.

إنشاء قالب ووردبريس مخصص

ستجد منشئ القالب الخاص بـ SeedProd بالانتقال إلى صفحة SeedProd » Theme Builder. هنا، ستستخدم أحد القوالب الجاهزة من SeedProd كنقطة بداية. سيؤدي هذا إلى استبدال قالب ووردبريس الحالي لديك بتصميم مخصص جديد.

يمكنك القيام بذلك بالنقر فوق الزر “Themes”.

ستظهر لك بعد ذلك قائمة بالقوالب المصممة بشكل احترافي لأنواع مختلفة من مواقع الويب. على سبيل المثال، هناك تمبلتات تسمى “Modern Business”، و”Marketing Agency”، و”Mortgage Broker Theme”.

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

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

إضافة قائمة تنقل عمودية إلى قوالب موقعك

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

تحتاج إلى تحريك الماوس فوق هذا التمبلت ثم النقر فوق رابط “Edit Design”.

سيؤدي هذا إلى فتح منشئ الصفحة بالسحب والإفلات في SeedProd، حيث سترى معاينة لموقعك على اليسار ولوحة كتل على اليمين.

من هنا، قم بالتمرير لأسفل الكتل حتى تصل إلى قسم Advanced.

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

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

حاليًا، تم تحديد نوع القائمة “Simple”. يتيح لك هذا إنشاء قائمة التنقل الخاصة بك في SeedProd.

ومع ذلك، في هذا البرنامج التعليمي، سننقر فوق نوع “WordPress Menu” لاستخدام قائمة التنقل الخاصة بـ ووردبريس بدلاً من ذلك.

أخيرًا، عليك النقر فوق علامة التبويب “Advanced”. ستجد هنا خيارًا لتوجيه تخطيط القائمة رأسيًا أو أفقيًا.

عند النقر فوق الزر “Vertical”، ستلاحظ أن المعاينة تتغير على الفور إلى قائمة تنقل رأسية.

لا تنس النقر على زر “Save” الموجود أعلى الشاشة لتخزين القائمة الرأسية الخاصة بك.

إنشاء قائمة تنقل عمودية متجاوبة للأجهزة المحمولة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

عند التنشيط، توجه إلى صفحة الإعدادات » Sticky Menu واكتب #main-navigation بجوار خيار “Sticky Element (required)”. بهذه الطريقة، يمكنك حتى جعل قائمة التنقل الرأسية الخاصة بك لاصقة.

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

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