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

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

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

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

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

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

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

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

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

تظهر الصورة التالية المواقع التي يدعمها قالب استرا ووردبريس.

في بعض الأحيان، قد ترغب في عرض قائمة في منطقة غير مدرجة ضمن “موقع العرض” في قالبك.

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

الطريقة 1: استخدام محرر الموقع الكامل (قوالب القائمة على الكتل فقط)

إذا كنت تستخدم قالب كتل مثل Inspiro Blocks Pro، فيمكنك إضافة قائمة تنقل مخصصة باستخدام تحرير الموقع بالكامل (FSE) ومحرر الكتل.

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

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

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

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

لرؤية جميع الخيارات المتاحة، ما عليك سوى تحديد “التمبلتات” أو “الأنماط” أو “الصفحات”.

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

سيعرض ووردبريس الآن معاينة للتصميم. لتحرير هذا القالب، انقر على أيقونة النقاط الصغيرة.

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

في الزاوية العلوية اليسرى، انقر فوق الزر الأزرق “+”.

الآن، اكتب “التنقل” في شريط البحث.

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

بعد ذلك، انقر لتحديد كتلة التنقل.

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

يمكنك بعد ذلك اختيار قائمة من القائمة المنسدلة.

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

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

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

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

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

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

الطريقة 2: استخدام اضافة لإنشاء الصفحات (يعمل مع جميع القوالب)

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

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

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

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

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

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

بعد تفعيل الاضافة، سيطلب SeedProd مفتاح الترخيص الخاص بك.

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

بمجرد القيام بذلك، انتقل إلى SeedProd » Landing Pages وانقر فوق الزر “Add New Landing Page”.

يمكنك الآن اختيار تمبلت لصفحتك المخصصة.

وللمساعدة في العثور على التصميم المناسب، يتم تنظيم جميع تمبلتات SeedProd في أنواع مختلفة من الحملات، مثل حملات “قريبًا” وحملات “الضغط على العملاء المحتملين”. ويمكنك حتى استخدام تمبلتات SeedProd لتحسين صفحة 404 الخاصة بك.

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

عندما تجد تصميمًا تريد استخدامه، انقر على “Choose This Template”.

نحن نستخدم تمبلت “صفحة مبيعات الجمعة البيضاء” في جميع صورنا، ولكن يمكنك استخدام أي تمبلت تريده.

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

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

بعد إدخال هذه المعلومات، انقر فوق الزر “Save and Start Editing the Page”.

تحتوي معظم التمبلتات بالفعل على بعض الكتل، والتي تعد المكونات الأساسية لجميع تخطيطات صفحات SeedProd.

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

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

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

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

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

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

سيؤدي هذا إلى إنشاء قائمة تنقل تحتوي على عنصر افتراضي واحد “About”.

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

لإظهار قائمة قمت بإنشائها مسبقًا، انقر فوق الزر “قائمة ووردبريس”. يمكنك الآن فتح القائمة المنسدلة “القوائم” واختيار أي خيار من القائمة.

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

إذا كنت تريد إنشاء قائمة جديدة داخل SeedProd بدلاً من ذلك، فحدد الزر “Simple”.

بعد ذلك، انقر لتوسيع عنصر “About” الذي ينشئه SeedProd افتراضيًا.

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

افتراضيًا، سيكون الرابط “dofollow” ويفتح في نفس نافذة المتصفح. يمكنك تغيير هذه الإعدادات باستخدام مربعات الاختيار في قسم “رابط URL”.

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

لإضافة المزيد من العناصر إلى القائمة، ما عليك سوى النقر على زر “Add New Item”.

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

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

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

بعد ذلك، انتقل إلى علامة التبويب “Advanced”. هنا، يمكنك تغيير ألوان القائمة والتباعد والطباعة وخيارات متقدمة أخرى.

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

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

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

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

يمكنك الأن تشغيل شريط التمرير “Hide on Desktop”.

الآن، سيعرض SeedProd هذه القائمة لمستخدمي الأجهزة المحمولة فقط.

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

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

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

الطريقة 3: إنشاء قائمة تنقل مخصصة في ووردبريس باستخدام الكود (متقدم)

إذا كنت لا تريد إعداد اضافة لبناء الصفحة، فيمكنك إضافة قائمة تنقل مخصصة باستخدام التعليمات البرمجية (الكود). ستجد غالبًا أدلة تحتوي على تعليمات حول كيفية إضافة مقتطفات تعليمات برمجية مخصصة إلى ملف functions.php الخاص بقالبك.

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

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

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

بعد التفعيل، انتقل إلى Code Snippets » Add Snippet في لوحة التحكم ووردبريس الخاصة بك.

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

لإنشاء مقتطف خاص بك، حرك الماوس فوق “Add Your Custom Code”، ثم انقر فوق “Use snippet”.

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

بعد ذلك، افتح القائمة المنسدلة “Code Type” وحدد “PHP Snippet”.

بمجرد الانتهاء من ذلك، قم ببساطة بلصق المقتطف التالي في محرر الكود:

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

سيؤدي هذا إلى إضافة موقع قائمة جديد إلى قالبك يسمى “My Custom Menu”. لاستخدام اسم مختلف، ما عليك سوى تعديل مقتطف الكود.

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

على سبيل المثال، نضيف هنا موقعين جديدين للقائمة إلى قالبنا، يسمى “My Custom Menu” و”Extra Menu”:

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

بعد ذلك، انتقل إلى خيارات “Insertion”. إذا لم تكن محددة بالفعل، فاختر طريقة “Auto Insert” حتى يضيف WPCode المقتطف على موقعك بالكامل.

بعد ذلك، افتح القائمة المنسدلة “Location” وانقر على “Run Everywhere”.

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

وأخيرًا، انقر على “Save” لجعل هذه المقتطف نشطة.

بعد ذلك، انتقل إلى المظهر » القوائم وانظر إلى منطقة “Display location”.

يجب أن ترى الآن خيار جديد “My Custom Menu”.

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

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

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

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

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

في لوحة تحكم ووردبريس، انتقل إلى المظهر » محرر ملف القالب.

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

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

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

على سبيل المثال، في مقتطف الكود التالي، نضيف “My Custom Menu” إلى هيدر القالب:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

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

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

بشكل افتراضي، ستظهر القائمة الخاصة بك كقائمة نقطية عادية.

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

للقيام بذلك، انتقل إلى المظهر » تخصيص.

في مخصص قالب ووردبريس، انقر فوق “CSS إضافي”.

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

يمكنك الآن تصميم القائمة باستخدام فئة CSS التي أضفتها إلى تمبلت القالب. في مثالنا، هذه هي .custom_menu_class.

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

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
    display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 
 
div.custom-menu-class a {
    color:#000;
}

سيتم تحديث مُخصِّص ووردبريس تلقائيًا.

سيظهِر الآن كيف ستبدو القائمة بالنمط الجديد.

إذا كنت راضيًا عن شكل القائمة، فانقر فوق “نشر” لنشر التغييرات.

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

أدلة الخبراء: افعل المزيد باستخدام قوائم التنقل في ووردبريس

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

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

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