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

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

الخطافات المعنية هي wp_nav_menu_item_custom_fields و wp_nav_menu_item_custom_fields_customize_template action hooks. باستخدام هذه يمكنك الآن بسهولة إضافة الحقول المخصصة الخاصة بك إلى عناصر القائمة في كل من صفحة تحرير قائمة المسؤول وفي لوحة خيارات Customizer.

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

هيا بنا نذهب.

ربط الحقل المخصص لقائمة WordPress

ربط wp_nav_menu_item_custom_fields خاص بشاشة القائمة ويتم وصفه على النحو التالي:

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );

• الرقم الصحيح $id هو معرّف عنصر القائمة
• الكائن $menu_item هو كائن بيانات عنصر القائمة
• العدد الصحيح $depth هو عمق عنصر القائمة
• $args هو كائن وسيطات عنصر القائمة

يتم تشغيل الخطاف قبل أزرار النقل لعنصر قائمة التنقل في محرر القائمة ويتم تقديمه في ملف wp-admin/includes/class-walker-nav-menu-edit.php حول السطر 242.

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

 function my_menu_item_field() { echo 'A menu item test field'; } add_action( 'wp_nav_menu_item_custom_fields', 'my_menu_item_field' );

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

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

أضف حقل مخصص لعنصر قائمة WordPress باستخدام الرمز

في هذا المثال ، سنقوم بإنشاء حقل مخصص لقائمة WordPress يسمح لنا بإدراج وصف في أي عنصر قائمة.

الخطوة الأولى: إضافة المخرجات

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

 function menu_item_desc( $item_id, $item ) { $menu_item_desc = get_post_meta( $item_id, '_menu_item_desc', true ); ?> <div> <span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_desc[<?php echo $item_id ;?>]" value="<?php echo esc_attr( $menu_item_desc ); ?>" /> </div> </div> <?php } add_action( 'wp_nav_menu_item_custom_fields', 'menu_item_desc', 10, 2 );

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

الخطوة الثانية: حفظ المدخلات الخاصة بك

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

 function save_menu_item_desc( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_desc'][$menu_item_db_id] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] ); update_post_meta( $menu_item_db_id, '_menu_item_desc', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_desc' ); } } add_action( 'wp_update_nav_menu_item', 'save_menu_item_desc', 10, 2 );

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

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

الخطوة الثالثة: إظهار قيمة حقل القائمة

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

 function show_menu_item_desc( $title, $item ) { if( is_object( $item ) && isset( $item->ID ) ) { $menu_item_desc = get_post_meta( $item->ID, '_menu_item_desc', true ); if ( ! empty( $menu_item_desc ) ) { $title .= '<p class="menu-item-desc">' . $menu_item_desc . '</p>'; } } return $title; } add_filter( 'nav_menu_item_title', 'show_menu_item_desc', 10, 2 );

يقوم الخطاف nav_menu_item_title بتصفية عنوان عنصر قائمة ويمكن العثور عليه داخل ملف wp-includes/class-walker-nav-menu.php حول السطر 225.

يقبل 4 معلمات ، سلسلة عنوان عنصر القائمة ، عنصر القائمة الحالي ، كائن من وسيطات wp_nav_menu () ، وعدد صحيح وهو عمق عنصر القائمة.

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

أضف حقل مخصص لعنصر قائمة WordPress باستخدام البرنامج المساعد

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

الحقول المخصصة المتقدمة

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

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

بمجرد نشر الحقل ، يمكنك التوجه إلى قائمة WordPress الخاصة بك من داخل منطقة المسؤول لرؤية الحقل الجديد الذي قمت بإنشائه. سهل جدا!

الحقول المخصصة لقائمة WP

يعد المكون الإضافي WP Menu Custom Fields مكونًا إضافيًا جديدًا نسبيًا ، كما يوحي الاسم ، سيساعدك على إضافة حقول مخصصة إلى عناصر القائمة الخاصة بك. يمكنك إضافة نص مخصص أو صورة أو رمز قصير أو HTML مخصص.

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

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

استنتاج

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

أنظر أيضا

• إضافة الحقول إلى عناصر قائمة WordPress - البرنامج المساعد المخصص