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

نشرت: 2022-03-10
ملخص سريع ↬ يتفهم أي شخص قام بإنشاء مكون إضافي لبرنامج WordPress الحاجة إلى إنشاء حقول قابلة للتكوين لتعديل كيفية عمل المكون الإضافي. هناك استخدامات لا حصر لها للخيارات القابلة للتكوين في المكون الإضافي ، وتقريبًا العديد من الطرق لتنفيذ الخيارات المذكورة. كما ترى ، يسمح WordPress لمؤلفي الإضافات بإنشاء ترميز خاص بهم داخل صفحات الإعدادات الخاصة بهم. كأثر جانبي ، يمكن أن تختلف صفحات الإعدادات اختلافًا كبيرًا بين المكونات الإضافية. في هذه المقالة سوف نتطرق إلى ثلاث طرق شائعة يمكنك من خلالها جعل المكون الإضافي الخاص بك قابلاً للتكوين. سنبدأ بإنشاء صفحة إعدادات وإنشاء حقولنا باستخدام واجهة برمجة تطبيقات إعدادات WordPress الافتراضية. سوف أطلعك بعد ذلك على كيفية إعداد الحقول الخاصة بك باستخدام معالج مخصص. أخيرًا ، سأوضح لك كيفية دمج مكون إضافي رائع للحقول القابلة للتكوين الحقول المخصصة المتقدمة (ACF) في المكون الإضافي الخاص بك.

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

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

مزيد من القراءة على SmashingMag:

  • تمديد ووردبريس مع الحقول المخصصة
  • مآجر الحقول المخصصة لـ WordPress
  • توسيع الحقول المخصصة المتقدمة باستخدام عناصر التحكم الخاصة بك
  • الدليل الكامل لأنواع المنشورات المخصصة

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

المزيد بعد القفز! أكمل القراءة أدناه ↓

نظرًا لأن هذا منشور طويل ، فإليك جدول محتويات به روابط لكل قسم من الأقسام الرئيسية:

  • إنشاء البرنامج المساعد لدينا وصفحة الإعدادات
  • المقاربة 1: استخدام وظيفة WordPress المضمنة
  • الأسلوب 2: إعداد نموذج مخصص ومعالج
  • الطريقة 3: دمج ACF (الحقول المخصصة المتقدمة) في البرنامج المساعد الخاص بك

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

إنشاء البرنامج المساعد لدينا وصفحة الإعدادات

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

 /* Plugin Name: Smashing Fields Plugin description: >- Setting up configurable fields for our plugin. Author: Matthew Ray Version: 1.0.0 */ class Smashing_Fields_Plugin { // Our code will go here } new Smashing_Fields_Plugin();

داخل الفصل ، سنضيف خطاف إجراء لإضافة صفحة الإعدادات:

 public function __construct() { // Hook into the admin menu add_action( 'admin_menu', array( $this, 'create_plugin_settings_page' ) ); }

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

 public function create_plugin_settings_page() { // Add the menu item and page $page_title = 'My Awesome Settings Page'; $menu_title = 'Awesome Plugin'; $capability = 'manage_options'; $slug = 'smashing_fields'; $callback = array( $this, 'plugin_settings_page_content' ); $icon = 'dashicons-admin-plugins'; $position = 100; add_menu_page( $page_title, $menu_title, $capability, $slug, $callback, $icon, $position ); }

قم بإلقاء نظرة على WP codex للحصول على add_menu_page لمزيد من المعلومات.

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

خطوتنا التالية هي إنشاء plugin_settings_page_content لطريقة رد الاتصال لصفحة الإعدادات الخاصة بنا.

 public function plugin_settings_page_content() { echo 'Hello World!'; }

إذا قمت بحفظ المكون الإضافي الخاص بك وقمت بتحديث لوحة إدارة WordPress ، فسترى ما يلي:

بدء التخطيط لصفحة الإعدادات
حالة البداية لصفحة الإعدادات. (عرض النسخة الكبيرة)

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

 add_submenu_page( 'options-general.php', $page_title, $menu_title, $capability, $slug, $callback );

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

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

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

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

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

المقاربة 1: استخدام وظيفة WordPress المضمنة

قبل أن نتعمق في الكود ، دعنا نتناول بعض إيجابيات وسلبيات استخدام هذا الأسلوب.

الايجابيات

  • من السهل دمجها في صفحات الإعدادات الموجودة
  • يتم التعقيم من أجلك
  • من غير المحتمل أن ينكسر لأن الكود يديره WordPress
  • يمكن استخدامها لكل من السمات والإضافات
  • مرنة وآمنة وقابلة للتوسيع

سلبيات

  • التحقق من صحة البيانات المخصصة يدوي
  • أنواع الحقول المتقدمة (المكررات ، الخرائط ، التحميلات ، إلخ) أكثر صعوبة في التنفيذ

متى يجب استخدام هذا النهج؟

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

ابدء

باستخدام هذا الأسلوب ، سنحتاج إلى اتباع نفس الترميز الذي تستخدمه صفحات الخيارات الخاصة بـ WordPress. يجب علينا تعديل طريقة plugin_settings_page_content بنا إلى ما يلي:

 public function plugin_settings_page_content() { ?> <div class="wrap"> <h2>My Awesome Settings Page</h2> <form method="post" action="options.php"> <?php settings_fields( 'smashing_fields' ); do_settings_sections( 'smashing_fields' ); submit_button(); ?> </form> </div> <?php }

الترميز أعلاه مباشرة من كودكس WordPress عند إنشاء صفحات الخيارات. يجب أن يتطابق اسم الطريقة مع اسم رد الاتصال الذي وضعناه في وظيفة add_menu_page أعلاه. الغلاف div هو في الواقع نفس نموذج WordPress الافتراضي وسيسحب الأنماط من تلك الأقسام. تشير علامة form إلى معالج نموذج الخيارات الافتراضية لـ WordPress.

تقوم الأسطر الثلاثة في PHP بعدة أشياء:

  • تعد وظيفة settings_fields أساسًا مرجعًا لبقية حقولنا. يجب أن يتطابق متغير السلسلة الذي أدخلته في هذه الوظيفة مع المتغير $slug الذي أعددناه سابقًا - سيكون في جميع الحقول التي نسجلها لاحقًا في الملحق. تقوم هذه الوظيفة أيضًا بإخراج بعض المدخلات المخفية لـ nonce ، وعمل النموذج وعدد قليل من الحقول الأخرى لصفحة الخيارات.
  • الوظيفة التالية ، do_settings_sections ، هي عنصر نائب للأقسام والحقول التي سنقوم بتسجيلها في مكان آخر في المكون الإضافي الخاص بنا.
  • الوظيفة الأخيرة ، زر الإرسال ، submit_button ، لكنها ستضيف أيضًا بعض الفئات بناءً على حالة الصفحة. قد تكون هناك وسيطات أخرى تريد تمريرها إلى وظيفة submit_button ؛ تم توضيحها في المخطوطة.

إذا قمنا بتحديث صفحة الإعدادات الخاصة بنا ، فسنحصل على شيء يشبه هذا:

صفحة إعدادات WordPress فارغة
صفحة الإعدادات الخاصة بنا قبل تسجيل الأقسام والحقول.

يبدو متناثر قليلا! لنبدأ في إعداد الحقول الآن.

الأقسام والحقول

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

 add_action( 'admin_init', array( $this, 'setup_sections' ) );

سيؤدي هذا الخطاف إلى إنشاء أقسام لصفحتنا. هذا هو رمز رد الاتصال:

 public function setup_sections() { add_settings_section( 'our_first_section', 'My First Section Title', false, 'smashing_fields' ); }

الوسيطة الأولى هي معرّف فريد للقسم وسنستخدمه للحقول التي نرغب في تخصيصها للقسم. يجب أن تكون هذه المعرفات فريدة لجميع الأقسام الجديدة في هذه الصفحة. الوسيطة التالية هي العنوان الذي تم إنشاؤه فوق القسم - يمكنك جعله أي شيء تريده. الوسيطة الثالثة هي رد الاتصال. في الوقت الحالي ، تم تعيينه على " false " ، لكننا سنعيد النظر فيه قريبًا. الوسيطة الرابعة هي صفحة الخيارات التي ستُضاف إليها الخيارات (المتغير $slug من سابقًا).

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

 public function setup_sections() { add_settings_section( 'our_first_section', 'My First Section Title', array( $this, 'section_callback' ), 'smashing_fields' ); add_settings_section( 'our_second_section', 'My Second Section Title', array( $this, 'section_callback' ), 'smashing_fields' ); add_settings_section( 'our_third_section', 'My Third Section Title', array( $this, 'section_callback' ), 'smashing_fields' ); }

تحتوي جميع الأقسام الثلاثة على قسم الاستدعاء section_callback في فتحة الوسيطة الثالثة تلك. إذا أنشأنا بعد ذلك طريقة تطابق رد الاتصال هذا وقمنا بإسقاط كلمة "Hello World" هناك:

 public function section_callback( $arguments ) { echo '

مرحبا بالعالم

"؛ }

نحصل على شيء يشبه هذا:

ثلاثة أقسام تشترك في نفس وظيفة رد الاتصال
ثلاثة أقسام تشترك في نفس رد الاتصال.

أنا أعرف ما تفكر فيه ، "لماذا أريد أن أحصل على نفس النص ضمن جميع الأقسام الخاصة بي؟" الجواب هو أنك ربما لن تفعل ذلك. هذا هو المكان الذي يمكننا أن نحصل فيه على بعض الصعوبة باستخدام وظيفة add_settings_section . إذا نظرت إلى الوثائق الخاصة بهذه الوظيفة ، فسترى أنه في جزء الملاحظات من الصفحة ، سيتم تعيين مجموعة من الوسيطات لوظيفة رد الاتصال التي ترتبط مباشرة بالوسيطات الموجودة في الخطاف الخاص بنا. إذا دخلت و var_dump( $arguments ) فسترى أن جميع المتغيرات يتم تمريرها إلى وظيفتنا.

يمكننا بعد ذلك كتابة مفتاح بسيط في رد الاتصال الخاص بنا لتغيير النص بناءً على المعرف الذي يتم تمريره إليه:

 public function section_callback( $arguments ) { switch( $arguments['id'] ){ case 'our_first_section': echo 'This is the first description here!'; break; case 'our_second_section': echo 'This one is number two'; break; case 'our_third_section': echo 'Third time is the charm!'; break; } }

الآن لدينا نص مخصص لكل قسم يمكننا تغييره في وظيفة واحدة!

نص مخصص تحت كل قسم
نص مخصص تحت كل قسم.

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

 add_action( 'admin_init', array( $this, 'setup_fields' ) );

نظرًا لأنك تعرف التدريبات بالفعل ، فسأعطيك فقط رد الاتصال لإجراءنا:

 public function setup_fields() { add_settings_field( 'our_first_field', 'Field Name', array( $this, 'field_callback' ), 'smashing_fields', 'our_first_section' ); }

تتشابه الوسائط في هذه الوظيفة مع تلك الموجودة في وظيفة الأقسام. الوسيطة الأولى هي المعرف الفريد للحقل. الثاني هو التسمية التي تظهر بجانب الحقل. في الوسيطة الثالثة يمكنك أن ترى أنني أستدعى الأسلوب field_callback ؛ سننشئ رد الاتصال هذا في ثانية واحدة. الرابعة هي صفحة الخيارات التي نريد استخدامها (لدينا $slug من سابقًا). الوسيطة الخامسة هي المعرف الفريد للقسم الذي نريد تخصيص هذا الحقل له.

هذا هو رمز رد الاتصال في الوسيطة الثالثة لدينا:

 public function field_callback( $arguments ) { echo '<input name="our_first_field" type="text" value="' . get_option( 'our_first_field' ) . '" />'; }

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

صفحة الإعدادات لدينا مع حقلنا الأول.
تم إرفاق صفحة الإعداد مع الحقل الأول لدينا.

رائع ، لدينا مجالنا على الصفحة! حاول إضافة بعض المحتوى إليه واضغط على حفظ التغييرات ، سأنتظر هنا ...

هل فعلتها؟ إذا كنت قد فعلت كل شيء حتى هذه النقطة ، فمن المفترض أن تكون قد تلقيت خطأ يقول شيئًا مثل ERROR: options page not found ، أو ما شابه ذلك. سبب حدوث ذلك هو في الواقع ميزة أمان في WordPress.

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

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

 public function field_callback( $arguments ) { echo '<input name="our_first_field" type="text" value="' . get_option( 'our_first_field' ) . '" />'; register_setting( 'smashing_fields', 'our_first_field' ); }

الوسيطة الأولى في الوظيفة الجديدة هي صفحة الخيارات التي نريد حفظ الحقل عليها ( $slug من سابقًا) والوسيطة الثانية هي الحقل الذي نريد حفظه. حاول الآن وقم بتحديث المجال - لقد نجح!

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

الحجج الميدانية

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

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

حقل المنطقة الزمنية في WordPress
حقل المنطقة الزمنية في WordPress. (عرض النسخة الكبيرة)

باستخدام هذا الحقل كنقطة بداية ، دعنا ننتقل إلى البيانات التي نريد تمريرها إلى رد الاتصال الميداني.

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

من هذه القائمة ، يمكننا إعداد مجموعة ترابطية من الحقول والقيم التي يمكننا تمريرها إلى رد الاتصال الخاص بنا:

 public function setup_fields() { $fields = array( array( 'uid' => 'our_first_field', 'label' => 'Awesome Date', 'section' => 'our_first_section', 'type' => 'text', 'options' => false, 'placeholder' => 'DD/MM/YYYY', 'helper' => 'Does this help?', 'supplemental' => 'I am underneath!', 'default' => '01/01/2015' ) ); foreach( $fields as $field ){ add_settings_field( $field['uid'], $field['label'], array( $this, 'field_callback' ), 'smashing_fields', $field['section'], $field ); register_setting( 'smashing_fields', $field['uid'] ); } }

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

 public function field_callback( $arguments ) { $value = get_option( $arguments['uid'] ); // Get the current value, if there is one if( ! $value ) { // If no value exists $value = $arguments['default']; // Set to our default } // Check which type of field we want switch( $arguments['type'] ){ case 'text': // If it is a text field printf( '<input name="%1$s" type="%2$s" placeholder="%3$s" value="%4$s" />', $arguments['uid'], $arguments['type'], $arguments['placeholder'], $value ); break; } // If there is help text if( $helper = $arguments['helper'] ){ printf( '<span class="helper"> %s</span>', $helper ); // Show it } // If there is supplemental text if( $supplimental = $arguments['supplemental'] ){ printf( '<p class="description">%s</p>', $supplimental ); // Show it } }

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

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

تم ملء حقلنا بما في ذلك العنصر النائب
تم ملء حقلنا بما في ذلك نص العنصر النائب. (عرض النسخة الكبيرة)

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

حسنًا ، لدينا حقول نصية ؛ ماذا عن بعض أنواع الحقول الأكثر تعقيدًا؟ دعنا نلقي نظرة أخرى على بيان التبديل الخاص بنا ونضيف خيار مناطق النص والاختيارات الفردية:

 switch( $arguments['type'] ){ case 'text': // If it is a text field printf( '<input name="%1$s" type="%2$s" placeholder="%3$s" value="%4$s" />', $arguments['uid'], $arguments['type'], $arguments['placeholder'], $value ); break; case 'textarea': // If it is a textarea printf( '<textarea name="%1$s" placeholder="%2$s" rows="5" cols="50">%3$s</textarea>', $arguments['uid'], $arguments['placeholder'], $value ); break; case 'select': // If it is a select dropdown if( ! empty ( $arguments['options'] ) && is_array( $arguments['options'] ) ){ $options_markup = '; foreach( $arguments['options'] as $key => $label ){ $options_markup .= sprintf( '<option value="%s" %s>%s</option>', $key, selected( $value, $key, false ), $label ); } printf( '<select name="%1$s">%2$s</select>', $arguments['uid'], $options_markup ); } break; }

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

الآن بعد أن قمنا بتحديث وظيفة رد الاتصال الخاصة بنا ، دعنا نرى كيف تغيرت بيانات الحقل:

 $fields = array( array( 'uid' => 'our_first_field', 'label' => 'Awesome Date', 'section' => 'our_first_section', 'type' => 'text', 'options' => false, 'placeholder' => 'DD/MM/YYYY', 'helper' => 'Does this help?', 'supplemental' => 'I am underneath!', 'default' => '01/01/2015' ), array( 'uid' => 'our_second_field', 'label' => 'Awesome Date', 'section' => 'our_first_section', 'type' => 'textarea', 'options' => false, 'placeholder' => 'DD/MM/YYYY', 'helper' => 'Does this help?', 'supplemental' => 'I am underneath!', 'default' => '01/01/2015' ), array( 'uid' => 'our_third_field', 'label' => 'Awesome Select', 'section' => 'our_first_section', 'type' => 'select', 'options' => array( 'yes' => 'Yeppers', 'no' => 'No way dude!', 'maybe' => 'Meh, whatever.' ), 'placeholder' => 'Text goes here', 'helper' => 'Does this help?', 'supplemental' => 'I am underneath!', 'default' => 'maybe' ) );

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

صفحة الإعدادات الخاصة بنا بعد ملء الحقول
صفحة الإعدادات لدينا مع الحقول. (عرض النسخة الكبيرة)

يكاد ينتهي!

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

 $value = get_option( $arguments['uid'] );

يمكننا استخدام نفس الكود في الإضافة (أو السمة) الخاصة بنا ، وببساطة نقوم بتمرير uid إلى الوظيفة. لذا ، إذا أردت الحصول على قيمة our_first_field الأول ، فسأكتب ببساطة:

 get_option('our_first_field')

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

المقاربة 2: إعداد نموذج ومعالج مخصصين

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

الايجابيات

  • يمكنك إرسال النموذج إلى معالجات مخصصة وبعيدة
  • يمكنك تجاوز بعض قيود واجهة برمجة تطبيقات الإعدادات المضمنة

سلبيات

  • يجب الحفاظ على التوافق من قبل المطور
  • يجب التعقيم والتحقق يدويًا

متى يجب استخدام هذا النهج؟

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

ابدء

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

إنشاء النموذج

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

 public function plugin_settings_page_content() { ?> <div class="wrap"> <h2>My Awesome Settings Page</h2> <form method="POST"> <table class="form-table"> <tbody> <tr> <th><label for="username">Username</label></th> <td><input name="username" type="text" value="" class="regular-text" /></td> </tr> <tr> <th><label for="email">Email Address</label></th> <td><input name="email" type="text" value="" class="regular-text" /></td> </tr> </tbody> </table> <p class="submit"> <input type="submit" name="submit" class="button button-primary" value="Check My Info!"> </p> </form> </div> <?php }

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

قبل أن نكتب معالجنا المخصص ، دعنا نضع بعض ميزات الأمان السريعة. أول شيء يجب أن نفعله هو وضع nonce في صورتنا. ستحمي Nonces من محاولات التزوير عبر المواقع ، والتي تشبه هجمات انتحال المستخدم أو إعادة التشغيل. دعنا نضع nonce في HTML الخاص بنا:

 <form method="POST"> <?php wp_nonce_field( 'awesome_update', 'awesome_form' ); ?> <table class="form-table">

wp_nonce_field بضع حقول مخفية إلى نموذجنا ؛ nonce والمحيل. سنعود إلى nonce عندما ننتقل إلى رمز المعالج.

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

 <form method="POST"> <input type="hidden" name="updated" value="true" /> <?php wp_nonce_field( 'awesome_update', 'awesome_form' ); ?> <table class="form-table">

يمكننا الآن وضع مقتطف من الشفرة أعلى صفحتنا لاكتشاف وقت إرسال النموذج وإرسالنا إلى معالجنا المخصص:

 public function plugin_settings_page_content() { if( $_POST['updated'] === 'true' ){ $this->handle_form(); } ?> <div class="wrap"> <h2>My Awesome Settings Page</h2>

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

إنشاء المعالج

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

 public function handle_form() { if( ! isset( $_POST['awesome_form'] ) || ! wp_verify_nonce( $_POST['awesome_form'], 'awesome_update' ) ){ ?> <div class="error"> <p>Sorry, your nonce was not correct. Please try again.</p> </div> <?php exit; } else { // Handle our form data } }

يتحقق الكود أعلاه من صحة قيمة nonce. إذا كان غير صالح ، فإننا نعطي المستخدم رسالة حول سبب عدم تحديث النموذج. إذا كان الرقم غير موجود وكان صحيحًا ، فيمكننا التعامل مع النموذج الخاص بنا. دعنا نكتب رمز معالج النموذج الخاص بنا الآن (سيحل هذا الرمز محل التعليق الموجود في المقتطف أعلاه):

 $valid_usernames = array( 'admin', 'matthew' ); $valid_emails = array( '[email protected]', '[email protected]' ); $username = sanitize_text_field( $_POST['username'] ); $email = sanitize_email( $_POST['email'] ); if( in_array( $username, $valid_usernames ) && in_array( $email, $valid_emails ) ){ update_option( 'awesome_username', $username ); update_option( 'awesome_email', $email );?> <div class="updated"> <p>Your fields were saved!</p> </div> <?php } else { ?> <div class="error"> <p>Your username or email were invalid.</p> </div> <?php }

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

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

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

 <tr> <th><label for="username">Username</label></th> <td><input name="username" type="text" value="<?php echo get_option('awesome_username'); ?>" class="regular-text" /></td> </tr> <tr> <th><label for="email">Email Address</label></th> <td><input name="email" type="text" value="<?php echo get_option('awesome_email'); ?>" class="regular-text" /></td> </tr>

الآن نحن جاهزون لاختبار شكلنا. حاول إدخال اسم المستخدم admin وعنوان البريد الإلكتروني [email protected] . يجب أن تحصل على ما يلي في النموذج الخاص بك:

الحقول المحفوظة بعد إدخال القيم الصحيحة
الحقول المحفوظة بعد إدخال القيم الصحيحة. (عرض النسخة الكبيرة)

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

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

الطريقة 3: دمج ACF (الحقول المخصصة المتقدمة) في البرنامج المساعد الخاص بك

إذا لم تكن قد استخدمت بعد ACF من قبل إليوت كوندون ، اسمحوا لي أن أقدم لكم. ACF هو مدير ميداني رائع لـ WordPress. واحدة من أفضل الأشياء المتعلقة بها هي واجهة تكوين المجال. إنه يجعل من السهل جدًا تدوير الحقول لعدد من الصفحات المختلفة داخل WordPress (مثل المنشورات والصفحات والمستخدمين والتصنيفات وحتى صفحات الخيارات المدمجة الخاصة بهم). قد تعتقد "لا يمكنني دمج المكون الإضافي الخاص بشخص آخر في مكوّن الإضافي الخاص بي - هذا مظلل!" لكن السيد كوندون يتفهم محنة زملائه المطورين وقد خطط لذلك في المكون الإضافي الخاص به. يمكنك الاطلاع على وثائقه حول هذا الموضوع ، لكنني سأعيد ذكر بعضها هنا. دعنا ننتقل إلى القواعد.

  1. أولاً ، إذا كنت تقوم بتوزيع مكون إضافي مجاني ، فيجب عليك استخدام الإصدار المجاني من ACF. هذا حتى لا يتمكن الأشخاص من الحصول على إصدار PRO من المكون الإضافي المجاني - لن يكون ذلك رائعًا. يمكنك استخدام الإصدار الاحترافي في المكونات الإضافية والسمات المميزة دون أي مشكلة ، فقط تأكد من شراء ترخيص المطور.
  2. ثانيًا ، لا تقم بتعديل معلومات حقوق النشر الخاصة بـ ACF. امنح الرجل بعض الفضل!
  3. أخيرًا ، لا توزع مفتاح الترخيص مع المكون الإضافي الخاص بك.

الآن ، إيجابيات وسلبيات هذا النهج:

الايجابيات

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

سلبيات

  • وصول محدود إلى الترميز
  • ينشئ تبعية للمكوِّن الإضافي أو السمة الخاصة بك
  • للحفاظ على ACF محدثًا ، يجب عليك تحديثه في ملفات المكون الإضافي / السمات (مزيد من المعلومات أدناه)

متى يجب استخدام هذا النهج؟

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

ابدء

For this approach I will show you how to set up the options page for the free version of ACF. To view a guide on setting up the PRO version check out the ACF documentation. To get started we will be adding ACF to our plugin directory. First, download the latest version of ACF and unzip its contents. In your plugin directory create a (عرض النسخة الكبيرة)

Again, we will follow the steps we did in “Creating Our Plugin And Settings Page”. Before we get into that, though, we should include ACF in our plugin.

Include ACF In Your Plugin

It's actually pretty easy to include ACF in your plugin – there are only three steps. First we have to include the main ACF file with PHP. Add the following code to the bottom of our constructor function:

 include_once( plugin_dir_path( __FILE__ ) . 'vendor/advanced-custom-fields/acf.php' );

If you refresh the admin you should see a new menu item titled Custom Fields . Before we go into that page and start setting up our fields we need to update a couple of paths in ACF. We need to tell ACF to look for its front-end assets and file includes in our plugin directory instead of its normal place. Add these two hooks to your constructor:

 add_filter( 'acf/settings/path', array( $this, 'update_acf_settings_path' ) ); add_filter( 'acf/settings/dir', array( $this, 'update_acf_settings_dir' ) );

And the callbacks for those hooks:

 public function update_acf_settings_path( $path ) { $path = plugin_dir_path( __FILE__ ) . 'vendor/advanced-custom-fields/'; return $path; } public function update_acf_settings_dir( $dir ) { $dir = plugin_dir_url( __FILE__ ) . 'vendor/advanced-custom-fields/'; return $dir; }

The first callback updates the include paths for the PHP files within the ACF plugin. The second updates the URIs for the ACF assets. Now we can set up our fields.

Configuring Your Fields

Now comes the fun part: the ACF field configuration UI. Add a title and any fields you'd like in your form. There is a great walkthrough of what everything on this page does in the ACF documentation. Here's how I have set up mine:

ACF fields configured
My ACF fields in the configuration UI. (عرض النسخة الكبيرة)

Once you are ready hit the Publish button on the right and your fields will be saved. Now we have to get the fields we set up into our plugin. Right now they only exist in the database. On the left-hand navigation, click the Tools item. On the new page, select the field group we just created and hit Generate Export Code . This will create a chunk of PHP code that we can now include in our plugin.

To add the options, we need to add a method call to our constructor. Add this line to the end of your constructor after our ACF include:

 $this->setup_options();

Then we can create the method that will wrap our options:

 public function setup_options() { if( function_exists( 'register_field_group' ) ) { register_field_group(array ( 'id' => 'acf_awesome-options', 'title' => 'Awesome Options', 'fields' => array ( array ( 'key' => 'field_562dc35316a0f', 'label' => 'Awesome Name', 'name' => 'awesome_name', 'type' => 'text', 'default_value' => ', 'placeholder' => ', 'prepend' => ', 'append' => ', 'formatting' => 'html', 'maxlength' => ', ), array ( 'key' => 'field_562dc9affedd6', 'label' => 'Awesome Date', 'name' => 'awesome_date', 'type' => 'date_picker', 'date_format' => 'yymmdd', 'display_format' => 'dd/mm/yy', 'first_day' => 1, ), array ( 'key' => 'field_562dc9bffedd7', 'label' => 'Awesome WYSIWYG', 'name' => 'awesome_wysiwyg', 'type' => 'wysiwyg', 'default_value' => ', 'toolbar' => 'full', 'media_upload' => 'yes', ), ), 'location' => array ( array ( array ( 'param' => 'options_page', 'operator' => '==', 'value' => 'smashing_fields', ), ), ), 'menu_order' => 0, 'position' => 'normal', 'style' => 'default', 'label_placement' => 'top', 'instruction_placement' => 'label', 'hide_on_screen' => ', 'active' => 1, 'description' => ', )); } }

Now that we have our fields ready to go, we can add them to the settings page.

Modifying The Settings Page Code

To add the fields we just created to the page we will need to update our plugin_settings_page_content method.

Previously, we set up the form tag for our page. In this case we will let ACF do that part for us. Here is what our updated function should look like:

public function plugin_settings_page_content() { do_action('acf/input/admin_head'); // Add ACF admin head hooks do_action('acf/input/admin_enqueue_scripts'); // Add ACF scripts $options = array( 'id' => 'acf-form', 'post_id' => 'options', 'new_post' => false, 'field_groups' => array( 'acf_awesome-options' ), 'return' => admin_url('admin.php?page=smashing_fields'), 'submit_value' => 'Update', ); acf_form( $options ); }

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

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

 add_action( 'admin_init', array( $this, 'add_acf_variables' ) );

الآن نحن بحاجة إلى إعداد رد الاتصال:

 public function add_acf_variables() { acf_form_head(); }

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

نموذج ACF منتهي
نموذج ACF المكتمل. (عرض النسخة الكبيرة)

هناك نوعان من عناصر التنظيف نحتاج إلى العنوان:

  • قد ترغب في إخفاء حقيقة أنك تستخدم ACF للمكوِّن الإضافي الخاص بك. إذا كانت هذه هي الحالة ، فأنت بحاجة إلى إخفاء عنصر قائمة الحقول المخصصة . يمكنك القيام بذلك عن طريق إضافة هذا المقتطف إلى دالة المُنشئ الخاصة بك:

     add_filter( 'acf/settings/show_admin', '__return_false' );
  • يجب أن نزيل نسخة قاعدة البيانات الخاصة بمجموعتنا الميدانية. اذهب إلى قسم الحقول المخصصة واضغط على زر سلة المهملات. هذه الخطوة اختيارية لأنها ستؤثر فقط على البيئة التي أنشأت فيها المكون الإضافي ، ولكنها قد تؤدي إلى حدوث مشكلات إذا كنت تختبر المكون الإضافي الخاص بك في نفس البيئة.

استخدام حقول ACF داخل البرنامج المساعد الخاص بك

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

 get_field( 'awesome_date', 'option' )

وهذا كل شيء. لقد قمت الآن بإعداد مكون إضافي مع إعدادات ACF! يمكنك عرض الكود الخاص بهذا الأسلوب في المستودع.

خاتمة

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

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

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

بدائل ACF

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

  • CMB2 بواسطة WebDevStudios
  • صندوق ميتا بقلم تران نغوك توان آنه (ريلويس)