أفضل 15 برنامجًا تعليميًا لإتقان قوائم التنقل في ووردبريس

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

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

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

الشروع في استخدام قوائم التنقل في ووردبريس

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

عرض قوائم مختلفة للمستخدمين الذين قاموا بتسجيل الدخول في ووردبريس

أضف منطقًا شرطيًا إلى قوائم التنقل

تصميم قوائم ووردبريس للتنقل

أضف أيقونات الصور مع قوائم التنقل في ووردبريس

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

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

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

أضف قائمة استجابة بملء الشاشة في ووردبريس

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

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

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

أضف قائمة التنقل في ووردبريس في المنشورات والصفحات

أضف روابط NoFollow في قوائم التنقل في ووردبريس

1. الشروع في استخدام قوائم التنقل في ووردبريس

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

قائمة الإبحار

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

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

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

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

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

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

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

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

إضافة قوائم اجتماعية

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

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

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

3. عرض قوائم مختلفة للمستخدمين الذين قاموا بتسجيل الدخول في ووردبريس

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

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

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

<!-- wp:paragraph -->
<p>1</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>2</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>3</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>4</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>5</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>6</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>7</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>8</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>9</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>10</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>function my_wp_nav_menu_args( $args = '' ) {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>if( is_user_logged_in() ) { </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>    $args['menu'] = 'logged-in';</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>} else { </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>    $args['menu'] = 'logged-out';</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>} </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>    return $args;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );</p>
<!-- /wp:paragraph -->

هذا كل شئ. يمكنك الآن اختبار قوائم التنقل الخاصة بك أثناء العمل.

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

4. أضف منطقًا شرطيًا إلى قوائم التنقل

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

تحتاج أولاً إلى تثبيت المكون الإضافي If Menu وتنشيطه .

عند التنشيط ، قم بزيارة Appearabnce » شاشة القوائم وانقر فوق عنصر القائمة الذي تريد تحريره. ستلاحظ خيارًا جديدًا لـ “تمكين المنطق الشرطي”.

خيار المنطق الشرطي لعنصر القائمة

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

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

5. تصميم قوائم التنقل وورد

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

أسهل طريقة للقيام بذلك هي استخدام البرنامج المساعد CSS Hero . إنه مكون إضافي لبرنامج ووردبريس يسمح لك بتخصيص أي سمة ووردبريس دون كتابة سطر واحد من التعليمات البرمجية (لا يلزم وجود HTML أو CSS). راجع مراجعة CSS Hero لمعرفة المزيد.

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

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

رموز الصور في قوائم التنقل

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

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

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

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

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

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

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

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

8. إضافة قائمة لوحة الشرائح في ووردبريس Themes

قائمة تنقل لوحة الشرائح في ووردبريس

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

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

<!-- wp:paragraph -->
<p>1</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>2</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>3</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>4</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>function wpb_custom_new_menu() {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>add_action( 'init', 'wpb_custom_new_menu' );</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>سيقوم هذا الرمز بإنشاء "قائمتي المخصصة" لموضوعك. يمكنك رؤية هذا عن طريق تحرير قائمة في المظهر » صفحة القوائم .</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>موقع موضوع لقائمتك المخصصة</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>لعرض قائمتك المخصصة ، ستحتاج إلى إضافة هذا الرمز إلى المظهر الخاص بك حيث تريد عرض القائمة.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>2</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>3</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>4</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>5</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><?php</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>wp_nav_menu( array( </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>    'theme_location' => 'my-custom-menu', </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>    'container_class' => 'custom-menu-class' ) ); </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>?></p>
<!-- /wp:paragraph -->

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

9. إنشاء قائمة ووردبريس سريعة الاستجابة للجوال

قائمة التنقل المستجيبة للجوال في ووردبريس

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

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

أولاً ، تحتاج إلى تثبيت وتفعيل المكون الإضافي Respive Menu .

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

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

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

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

10. أضف قائمة استجابة بملء الشاشة في ووردبريس

قائمة استجابة بملء الشاشة في ووردبريس

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

أولاً ، تحتاج إلى تثبيت وتنشيط DC – قائمة استجابة ملء الشاشة . عند التنشيط ، تحتاج إلى زيارة Appearance » صفحة قائمة ملء الشاشة DC لتكوين إعدادات البرنامج المساعد.

إعدادات قائمة ملء الشاشة

هنا يمكنك اختيار قائمة ولون الخلفية ولون النص وخط Google لقائمة ملء الشاشة.

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

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

11. إضافة وصف مع قوائم التنقل في ووردبريس

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

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

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

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

تفعيل حقل الوصف لقوائم التنقل في ووردبريس

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

تمت إضافة حقل الوصف إلى عناصر القائمة

أضف وصفك وانقر على زر قائمة الحفظ.

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

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

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

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

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

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

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

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

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

13. كيفية إضافة قوائم التنقل في الشريط الجانبي لـ ووردبريس

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

ما عليك سوى زيارة Appearance »Widgets وإضافة عنصر واجهة المستخدم” Custom Menu “إلى الشريط الجانبي. للحصول على إرشادات مفصلة ، راجع دليلنا حول كيفية إضافة واستخدام الأدوات في ووردبريس .

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

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

14. إضافة قائمة التنقل في ووردبريس في المنشورات والصفحات

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

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

[listmenu menu=”Your Menu Name”]

لا تنس استبدال “Your Menu Name” باسم قائمة التنقل الخاصة بك. احفظ أو انشر منشورك ثم انقر على زر المعاينة.

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

15. أضف روابط NoFollow في قوائم التنقل في ووردبريس

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

يوصي العديد من خبراء تحسين محركات البحث بإضافة سمة rel = ”nofollow” إلى الروابط الخارجية. إليك كيفية إضافة سمة nofollow للروابط في قوائم التنقل في ووردبريس.

أولاً ، تحتاج إلى زيارة Appearance »Menus page ثم النقر فوق زر Screen Options (خيارات الشاشة) في الزاوية اليمنى العليا من الشاشة.

تحقق من الهدف ومربعات الارتباط في خيارات الشاشة

سيؤدي ذلك إلى عرض قائمة حيث تحتاج إلى تحديد المربعات المجاورة لخيارات Link Relationship (XFN) و Link Target.

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

إضافة nofollow إلى عنصر القائمة

تحتاج إلى إدخال nofollowخيار علاقة الارتباط. يمكنك أيضًا التحقق من الرابط المفتوح في خيار نافذة / علامة تبويب جديدة إذا كنت تريد ذلك.

انقر فوق زر قائمة الحفظ لتخزين تغييراتك. الآن هذا الرابط المحدد في قائمة التنقل في ووردبريس ستتم إضافة السمة rel = ”nofollow”.

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

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

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

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