أنشئ قائمة تنقل مخصصة في WordPress بدون استخدام المكونات الإضافية

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

هيا بنا نذهب!

تسجيل موقع القائمة المخصصة الجديدة الخاصة بك

أول شيء يتعين علينا القيام به هو تسجيل موقع القائمة المخصصة الجديدة الخاصة بك. للقيام بذلك ، افتح ملف jobs.php الخاص بالقالب النشط باستخدام محرر النصوص الذي تختاره (مثل Sublime) وأضف الكود التالي:

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

في هذا الجزء من الكود ، استخدمنا add_action() لإضافة وظيفة رد الاتصال my_custom_menu() . هذا يعني أنه سيتم تنفيذ وظيفة my_custom_menu() جنبًا إلى جنب مع الوظائف الأساسية الافتراضية التي يتم تنفيذها في كل مرة يتم استدعاء الإجراء init . سلسلة "قائمتي المخصصة" هي الإصدار المقروء الذي ستراه في صفحة المسؤول.

داخل الوظيفة ، يتم استخدام الوظيفة الأساسية register_nav_menu من أجل تسجيل موقع قائمة التنقل لموضوعنا. في حالة رغبتك في تسجيل قوائم متعددة ، يمكنك استخدام register_nav_menus() وتحديد مواقع القائمة داخل مصفوفة مثل هذا:

 function my_custom_menu() { register_nav_menus( array( 'my-custom-menu' => _( 'My Custom Menu' ), 'my-custom-menu-2' =>_('My Second Custom Menu') ) ); } add_action( 'init', 'my_custom_menu' );

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

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

كيفية عرض قائمتنا المخصصة

لنفترض أننا نريد استخدام موقع القائمة الجديد لقائمة أفقية ثانوية ستكون موجودة أسفل "قائمة سطح المكتب الأفقية" الموجودة بالفعل في موضوعنا.

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

افتح ملف header.php باستخدام المحرر الخاص بك وابحث عن هذا العنصر في الكود حول السطر 33.

 <header class="header-footer-group" role="banner">

أسفل هذا القسم مباشرةً ، سنضع الكود الخاص بنا لعرض موقع القائمة المخصصة الجديدة لدينا: "my-custom-list".

 <header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) ); ?>

يجب أن تكون قيمة theme_location مطابقة للاسم الذي قدمته لقائمتك في كود function.php الذي قمنا بلصقه من قبل. في حالتنا: "my-custom-menu".

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

أعط القائمة عنوان "قائمة ثانوية" ، حدد "قائمتي المخصصة" لأحد المواقع ، ثم اضغط على زر "إنشاء قائمة".

أخيرًا أضف بعض العناصر إلى القائمة (على سبيل المثال عنصر القائمة 1 ، عنصر القائمة 2 ، عنصر القائمة 3) ثم احفظ القائمة.

دعونا نرى ما لدينا الآن في الواجهة الأمامية.

لقد تمكنا من عرض قائمتنا الجديدة ، لكنها فوضوية تمامًا ، أليس كذلك؟

إذا عرضنا الكود المصدري الخاص بنا ، فسنلاحظ أن وظيفة wp_nav_menu () أنشأت هذا الجزء من كود HTML

 <div class="menu-secondary-menu-container"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li> </ul> </div>

لذلك ، يمكننا استخدام الفئات الموضحة في الكود لتجميل قائمتنا. للقيام بذلك سنستخدم بعض CSS. ابحث عن style.css (يكون هذا عادةً في نفس موقع ملف header.php) ثم افتحه باستخدام محررك لإضافة هذا الرمز:

 ul#menu-secondary-menu { text-align: right; padding: 10px 30px; } ul#menu-secondary-menu li { list-style: none; display: inline-block; padding: 1px; } ul#menu-secondary-menu li:hover { border: 1px solid #c00202; padding: 0; border-radius: 3px; } ul#menu-secondary-menu li a { text-decoration: none; padding: 5px; font-size: 14px; }

ستكون النتيجة أكثر إتقانًا الآن وأكثر تماشيًا مع أسلوب موقع الويب التجريبي الخاص بنا.

تخصيص قائمة إضافية

تأتي الوظيفة wp_nav_menu () التي يوفرها WordPress لعرض القوائم مع مجموعة من الخيارات التي تتيح لك تخصيصها بشكل أكبر.

" موضوع_الموقع "

كما وصفنا أعلاه ، تتوافق هذه المعلمة مع المفاتيح التي تم تمريرها إلى الوظيفة register_nav_menus () في الدوال.

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

"menu_class"

يوجد خيار " menu_class " الذي يسمح لك بتحديد فصلك الخاص في القائمة.

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

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

"menu_id"

على عكس خيار الفئة ، يحل خيار menu_id محل معرف القائمة الحالي. سيكون HTML الذي تم إنشاؤه لعنصر <ul> شيئًا من هذا القبيل.

 <ul class="menu">

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

'وعاء'

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

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container' => 'nav', ) );

سوف تحصل على هذه النتيجة:

"فئة الحاوية"

هذه فئة يتم تطبيقها على عنصر أصل القائمة:

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

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

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<span class="menulink">', 'after' => '</span>', ) );

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

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

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

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<i class="fas fa-caret-right"></i>', ) );

يمكنك العثور على رمز كل رمز في قائمة أيقونات البرنامج المساعد.

معلمة ووكر

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

 wp_nav_menu( array( 'walker' => new Walker_Custom_Menu ) );

لإثبات فئة Walker ، سنضيف "عنصرًا فرعيًا" في قائمتنا.

سنتجاوز فئة Walker الافتراضية التي يوفرها WordPress. يوجد هذا في ملف wp-include / class-walker-nav-menu.php. لتحقيق ذلك ، انتقل إلى ملف function.php وأدخل الكود أدناه:

 if ( !class_exists('My_Nav_Menu_Walker') ) { class My_Nav_Menu_Walker extends Walker { var $tree_type = array( 'post_type', 'taxonomy', 'custom' ); var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent"; $output .= "<i class=\"dropdown icon\"></i>\n"; $output .= "<div class=\"menu\">\n"; } function end_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "$indent</div>\n"; } function start_el(&$output, $item, $depth, $args) { $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array(); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', '', $item, $args ); $id = strlen( $id ) ? '' : ''; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes . $id . $value . $class_names . '>'; $item_output .= '<div class="item">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</div>'; $item_output .= "</a>\n"; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }

الآن في headers.php ، استبدل رمز القائمة بهذا الرمز (سنخرج كلا إصداري القائمة عن قصد لمقارنة النتائج فقط):

 wp_nav_menu(); // Default 'walker' => new Walker_Nav_Menu() wp_nav_menu( array( 'walker' => new My_Nav_Menu_Walker() ) );

بمقارنة هذا الرمز مع فئة Walker_Nav_Menu الأصلية ، ستلاحظ أن $tree_type و $db_fields بقيت كما هي ولكن تم تغيير الباقي. خذ وقتك وقارن بين مخرجات الكود و HTML في هذين الإصدارين من نفس القائمة وحاول تجربة نفسك من خلال اللعب مع My_Nav_Menu_Walker Class.

استنتاج

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