كيفية إنشاء مربع تعريف WordPress مخصص

ما هو مربع التعريف المخصص لـ WordPress؟

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

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

كيفية إنشاء مربع تعريف WordPress مخصص

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

استخدم CSS Sprites لجعل شعارك مستجيبًا

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

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

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

تطوير مربع التعريف المخصص

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

الدستور الغذائي هو دليلك

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

اختبار محليًا أولاً

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

الخطوة الأولى: إنشاء ووضع العنوان في البرنامج المساعد

قد يبدو إنشاء مكون إضافي معقدًا ، ولكن لا يجب أن تتكون كل المكونات الإضافية من مئات الأسطر. يمكن أن تكون المكونات الإضافية بسيطة للغاية ، وهذا مثال رائع على ذلك. إذا انتقلت إلى مجلد wp-content ، فسترى مجلد الإضافات . قم بإنشاء مجلد جديد يسمى custom-post-meta-box مع ملف custom-post-meta-box.php فيه. هذا هو الملف الذي ستعمل منه.

عند إنشاء مكون إضافي ، تأكد من ظهور هذه المعلومات قبل أي من التعليمات البرمجية المخصصة الخاصة بك:

<?php

/*

Plugin Name: Custom Meta Box

Plugin URI:  www.yourwebsite.com

Description: Creates a meta box in WordPress

Version:     1.0.0

Author:      Your Name

Author URI:  www.yourwebsite.com

License: GPL2

*/

تنشيط البرنامج المساعد

على الرغم من أننا لم نضع أي رمز هناك حتى الآن ، يمكننا تنشيط المكون الإضافي بالذهاب إلى المكونات الإضافية والبحث عن Custom Meta Box واختيار Activate. من فضلك ضع في اعتبارك أنه لن يتغير شيء بعد.

اختياري CSS

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

function cmb_add_admin_styles() {

wp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box/css/admin.css' ) );

}

add_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );

الخطوة الثانية: إضافة مربع التعريف

تُستخدم وظيفة add_meta_box لإنشاء مربعات تعريف مخصصة. هذه الوظيفة مسؤولة فقط عن تسجيل وعرض مربعات التعريف المخصصة.

function cmb_add_meta_box() {

add_meta_box(

'custom_post_metabox',

'Our Products',

'cmb_display_meta_box',

'post',

'normal',

'high'

);

}

add_action( 'add_meta_boxes', 'cmb_add_meta_box' );

ألق نظرة على لوحة القيادة ، يظهر عنوان "منتجاتنا" ، ولكن لا يوجد حقل نصي لإدخال النص الخاص بنا.

الخطوة الثالثة: إضافة حقل meta box في admin

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

function cmb_display_meta_box( $post ) {

wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );

$html = '<label id=&quot;product-title&quot; for=&quot;product-title&quot;>';

$html .= 'Product Title';

$html .= '</label>';

$html .= '<input type=&quot;text&quot; id=&quot;product-title&quot; name=&quot;product-title&quot; value=&quot;' . get_post_meta( $post->ID, 'product-title', true ) . '&quot; placeholder=&quot;What is the Product Title?&quot; />';

echo $html;

}

// this echoes a single stream of html

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

قد لا تكون مدخلاتك بهذا الاتساع. تم إجراء بعض ملفات css المخصصة بحيث يمكن عرض كل نص العنصر النائب ؛ يبلغ عرض الملصق 100٪.

الخطوة الرابعة: حفظ البيانات وأهمية استخدام nonce

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

function cmb_save_meta_box_data( $post_id ) {

if ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {

if ( isset( $_POST['product-title'] ) && 0 < count( strlen( trim( $_POST['product-title'] ) ) ) ) {

$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );

update_post_meta( $post_id, 'product-title', $product_title );

}

}

}

add_action( 'save_post', 'cmb_save_meta_box_data' );

function cmb_display_product( $content ) {

if ( is_single () ){

$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );

$content .= $html;

}

return $content;

}

add_action('the_content', 'cmb_display_product');

function cmb_user_can_save( $post_id, $nonce ) {

$is_autosave = wp_is_post_autosave( $post_id );

$is_revision = wp_is_post_revision( $post_id );

$is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );

return ! ( $is_autosave || $is_revision ) && $is_valid_nonce;

}

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

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

مزيد من القراءة والواجب المنزلي

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

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

• مزيد من المعلومات حول nonces
• البرنامج المساعد Meta Box
• خيارات الوظيفة add_meta_box