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

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

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

الخطوات الأولية

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

في هذه المرحلة ، يبدو ملف PHP الرئيسي للمكون الإضافي الخاص بنا كما يلي:

 <?php /* Plugin Name: Menu Item Field Creator Description: My custom plugin to create menu item fields */ class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); } public function menu_item_sub( $item_id, $item ) { $menu_item_sub = get_post_meta( $item_id, '_menu_item_sub', true ); ?> <div> <span class="subtitle"><?php _e( 'Subtitle', 'menu-item-sub' ); ?></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_sub[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item_sub ); ?>" /> </div> </div> <?php } public function save_menu_item_sub( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_sub'][ $menu_item_db_id ] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_sub'][ $menu_item_db_id ] ); update_post_meta( $menu_item_db_id, '_menu_item_sub', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_sub' ); } } public function menu_item_sub_custom_walker( $args ) { if ( class_exists( 'My_Custom_Nav_Walker' ) ) { $args['walker'] = new My_Custom_Nav_Walker(); } else { echo 'DOES NOT EXIST'; } return $args; } } $mycp_menu_item_field_creator = new MyCP_Menu_Item_Field_Creator(); if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } if ( ! empty( $menu_item_sub ) ) { $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>'; } } } }

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

استضافة موقع الويب الخاص بك مع Pressidium

ضمان استرداد الأموال لمدة 60 يومًا

اطلع على خططنا

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

قم بإنشاء عنصر قائمة صفحة الخيارات

لإضافة عنصر القائمة ، سنضيف خطاف admin_menu المقابل داخل طريقة __construct() ضمن الخطافات المضافة حاليًا.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); } . . .

استخدمنا الخطاف admin_menu وحددنا طريقة plugin_settings_menu_page() التي سنشرحها أدناه) لتحديد المعلومات الخاصة بعنصر القائمة وصفحة إعدادات البرنامج المساعد.

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

يجب وضع الطريقة داخل فئة البرنامج المساعد الرئيسي أيضًا. لاحظ أنه داخل طريقة plugin_settings_menu_page() بنا ، استخدمنا وظيفة add_menu_page() التي يوفرها WordPress. تقبل هذه الدالة الوسيطات التالية:

 add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position )

• مطلوب تعريف $page_title وهو في الأساس الجزء الأول من علامات العنوان للصفحة التي تتم إعادة توجيهك إليها عند تحديد عنصر القائمة هذا.
• يُعد $menu_title - مطلوب أيضًا - هو النص الذي سيتم استخدامه في القائمة.
• $capability هي القدرة المطلوبة لعرض هذه القائمة من قبل المستخدم. في حالتنا ، اخترنا إذن manage_options لأنه يُمنح للمستخدمين المتميزين والمسؤولين فقط. إذا كنت ترغب في فهم الدور أو القدرة التي تناسب احتياجاتك ، يمكنك الرجوع إلى الوثائق الرسمية ذات الصلة.
• $menu_slug مطلوبة أيضًا ويجب أن تكون فريدة. إنه اسم slug للإشارة إلى هذه القائمة بواسطة. لا تنس أنه يجب عليك فقط استخدام الأحرف الأبجدية الرقمية الصغيرة والشرطات والشرطات السفلية المتوافقة مع sanitize_key() .
• يعد $icon_url وسيطة اختيارية وهو عنوان URL الذي يربط ملف الرمز الذي سيتم استخدامه لعنصر القائمة.
• الوسيطة $function هي المكان الذي تحدد فيه وظيفة رد الاتصال التي ستنشئ محتوى صفحة الإعدادات. في حالتنا ، فإن plugin_settings_page_content() هو الذي ليس له وظائف حتى الآن. أضفناه إلى الكود الخاص بنا باستخدام طريقة plugin_settings_menu_page() .

 public function plugin_settings_page_content() { $html = "<p>Test content for our custom plugin</p>"; echo $html; }

في هذه المرحلة ، يجب أن تشاهد عنصر القائمة "Menu Item Field Creator" ومحتوى اختبار صفحة المحتوى والتعرف على عنوان URL للقائمة الذي حددته في الوسائط.

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

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

مع هذا:

 public function plugin_settings_menu_page() { add_options_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

سينتج عن ذلك موقع قائمة هنا:

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

أضف وظائف إلى صفحة الإعدادات الخاصة بنا

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

الإخراج

استبدل كود plugin_settings_page_content بهذا:

 public function plugin_settings_page_content() { ?> <form action="options.php" method="post"> <?php do_settings_sections( 'options_page' ); settings_fields( 'option_group' ); submit_button( __( 'Save Subtitle', 'oop-menu-item-sub' ) ); ?> </form> <?php }

في هذه السطور نستخدم do_settings_sections() و settings_fields() . سيقوم do_settings_sections() بطباعة كافة أقسام الإعدادات والحقول المسجلة. Τhe settings_fields() ستخرج حقول الإدخال المخفية option_page و action و option_page لصفحة الإعدادات.

الآن دعنا ننتقل و نسجل إعداداتنا.

سجل الإعدادات الخاصة بك

لتسجيل الحقول المطلوبة ، سنستخدم الخطاف admin_init حيث يتم تنشيطه عند تهيئة شاشة المسؤول.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); add_action( 'admin_init', array( $this, 'plugin_register_settings' ) ); } . . .

سنقوم بإدخال طريقة plugin_register_settings() داخل صنفنا كما يلي:

 public function plugin_register_settings() { register_setting( 'option_group', 'option_name' ); add_settings_section( 'section_id', __( 'Settings Page Title', 'oop-menu-item-sub' ), array( $this, 'render_section' ), 'options_page' ); add_settings_field( 'html_element', __( 'Choose HTML Element:', 'oop-menu-item-sub' ), array( $this, 'render_field' ), 'options_page', 'section_id' ); }

لنعد الآن إلى الوراء ونلقي نظرة مرة أخرى على ما فعلناه حتى الآن.

• لتسجيل إعداد وبياناته ، استخدمنا الوظيفة register_setting () التي تم تنظيمها وفقًا للوثائق على النحو التالي:

 register_setting( $option_group, $option_name, $args )

• يُعد $option_group معلمة مطلوبة ويجب أن تطابق اسم المجموعة المستخدم في settings_fields() .
• مطلوب أيضًا $option_name وهو اسم الخيار المراد تعقيمه وحفظه. إنها القيمة الموجودة أسفل عمود option_name في جدول قاعدة بيانات الخيارات.
• ليست هناك حاجة إلى $args هنا. إنها مصفوفة بيانات اختيارية تصف الإعداد عند التسجيل. ما يمكنك تحديده هنا هو نوعه ، ووصفه ، ووظيفة sanitize_callback() لقيمة الخيار ، وخيار " show_in_rest " الذي يحدد ما إذا كان يجب تضمين البيانات الحالية في واجهة برمجة تطبيقات REST والخيار الافتراضي حيث يمكنك تحديد القيمة الافتراضية عند استدعاء get_option() .
• قدمنا ​​أيضًا add_settings_section() و add_settings_field() التي ستساعدنا في إكمال هذه الخطوة.
• تُستخدم الوظيفة add_settings_section() لتسجيل قسم باسم سبيكة معينة باستخدام WordPress. هنا ، $id هو اسم slug-name لتحديد القسم ويستخدم في سمة "id" للعلامات.

 add_settings_section( $id, $title, $callback, $page )

• $title هو العنوان المنسق للقسم الذي سيظهر كعنوان للقسم ، $callback هي الوظيفة التي ستعيد صدى المحتوى في أعلى القسم و $page هي اسم slug للصفحة التي يجب أن تطابق وسيطة $page لـ do_settings_sections() ، والتي تكون في حالتنا "options_page".

جميع المعلمات المذكورة أعلاه مطلوبة.

• تتيح لك وظيفة add_settings_field () التي يوفرها WordPress إضافة حقل جديد إلى القسم.

 add_settings_field( $id, $title, $callback, $page, $section, $args )

• يتم استخدام $id و $title و $callback و $page كما هو موضح سابقًا. $section هو الاسم التقريبي لقسم صفحة الإعدادات حيث يتم إظهار المربع ويتم استخدام $args عند إخراج الحقل. كلا من $section و $args اختياريان.

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

الآن لدينا طريقتان عامتان يجب تقديمهما ، وهما render_section() و render_field() .

بالنسبة إلى render_section() ، سنخرج عنوانًا فقط لقسمنا:

 public function render_section() { ?> <h2><?php _e( 'Section #1', 'oop-menu-item-sub' ); ?></h2> <?php }

بالنسبة إلى طريقة render_field() ، سنخرج 3 أزرار اختيار مع اختياراتنا لعنصر HTML:

 public function render_field() { $stored_option = get_option( 'option_name' )['html_element']; ?> <input type="radio" name="option_name[html_element]" value="div" <?php checked( $stored_option, 'div' ); ?> /> div <input type="radio" name="option_name[html_element]" value="p" <?php checked( $stored_option, 'p' ); ?> /> p <input type="radio" name="option_name[html_element]" value="span" <?php checked( $stored_option, 'span' ); ?> /> span <?php }

يجب أن تكون هذه هي النتيجة التي تراها الآن:

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

تعكس تغييرات صفحة الخيارات على موقع الويب الخاص بك

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

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

 $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>';

سنحصل أولاً على العنصر مع get_option( 'option_name' )['html_element']; واحتفظ به في المتغير $stored_option ثم قم بتطبيقه على السطر أعلاه. يجب أن تبدو الفئة النهائية كما يلي:

 if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } $stored_option = get_option( 'option_name' )['html_element']; if ( ! empty( $menu_item_sub ) ) { $output .= '<'. $stored_option .' class="menu-item-sub">' . $menu_item_sub . '</'. $stored_option .'>'; } } } }

من المفيد أحيانًا تصور كيفية عمل وظائف WordPress عند إنشاء صفحة إعدادات أثناء النظر في رمز المكون الإضافي الخاص بنا. إليك كيف تبدو في مثالنا:

استنتاج

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

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

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

اقرأ أيضا

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