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

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

قرارات وليس خيارات

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

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

فلسفة WordPress

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

المرشحات كبديل

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

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

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

إعدادات WordPress

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

إعدادات API في WordPress

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

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

إنشاء صفحة إعدادات جديدة

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

 function nelio_add_settings_page() { add_options_page( 'Nelio Plugin Settings', 'Nelio', 'manage_options', 'nelio-example-plugin', 'nelio_render_settings_page' ); } add_action( 'admin_menu', 'nelio_add_settings_page' );

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

 <?php function nelio_render_settings_page() { ?> <h2>Nelio Plugin Settings</h2> <form action="options.php" method="post"> <?php settings_fields( 'nelio_example_plugin_settings' ); do_settings_sections( 'nelio_example_plugin' ); ?> <input type="submit" name="submit" class="button button-primary" value="<?php esc_attr_e( 'Save' ); ?>" /> </form> <?php }

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

الإعدادات الفعلية في صفحة الإعدادات الخاصة بنا

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

 function nelio_register_settings() { register_setting( 'nelio_example_plugin_settings', 'nelio_example_plugin_settings', 'nelio_validate_example_plugin_settings' ); add_settings_section( 'section_one', 'Section One', 'nelio_section_one_text', 'nelio_example_plugin' ); add_settings_field( 'some_text_field', 'Some Text Field', 'nelio_render_some_text_field', 'nelio_example_plugin', 'section_one' ); add_settings_field( 'another_number_field', 'Another Number Field', 'nelio_render_another_number_field', 'nelio_example_plugin', 'section_one' ); } add_action( 'admin_init', 'nelio_register_settings' );

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

 function nelio_validate_example_plugin_settings( $input ) { $output['some_text_field'] = sanitize_text_field( $input['some_text_field'] ); $output['another_number_field'] = absint( $input['another_number_field'] ); // ... return $output; }

حيث نقوم باسترداد كل حقل مقدم من $input ونقوم بتعقيمه إلى $output حتى نعرف على وجه اليقين أنه مهما كان ما ننتهي بحفظه في قاعدة البيانات ، فهو صحيح وصحيح.

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

 function nelio_section_one_text() { echo '<p>This is the first (and only) section in my settings.</p>'; } function nelio_render_some_text_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="text" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[some_text_field]' ), esc_attr( $options['some_text_field'] ) ); } function nelio_render_another_number_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="number" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[another_number_field]' ), esc_attr( $options['another_number_field'] ) ); }

في الأساس ، كل عمليات الاسترجاعات هذه هي استرداد القيمة الحالية للحقل الذي من المفترض أن تعرضه (مع get_option ) وتقديم HTML الذي سيسمح للمستخدم بتعيين قيمة أو أخرى (في هذا المثال ، حقل input لـ اكتب text أو number ).

ما هي النتيجة النهائية ، تسأل؟ هذه:

افكار اخيرة

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

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

• إعدادات WP API
• مولد صفحة WordPressOption

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

صورة مميزة لريما كروسين على Unsplash.