كيفية إنشاء مربعات التعريف المخصصة باستخدام CMB2

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

أولاً ، ما هو CMB2؟

حسنًا ، CMB هو اختصار لـ Custom Meta Boxes ووفقًا للوصف الموجود في صفحة البرنامج المساعد ، "CMB2 عبارة عن مربع تعريف وحقول مخصصة ومكتبة نماذج لـ WordPress ستذهلك." تم تطويره بواسطة Justin Sternberg من WebDevStudios وكان موجودًا في مستودع المكونات الإضافية لأكثر من عامين بقليل. ومع ذلك ، في فبراير الماضي ، أدرك الأشخاص الجيدون في مستودع المكونات الإضافية لـ WordPress أنهم أخطأوا ووافقوا على CMB2 كمكوِّن إضافي عندما لا ينبغي عليهم ذلك.

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

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

كيفية إعداد CMB2

من أجل البدء ، ستحتاج إلى العثور على ملف example-functions.php من دليل البرنامج المساعد ونسخه إلى قالبك. يمكن نسخه مباشرة إلى المجلد الجذر للنسق ، ولكن للحفاظ على تنظيم مشروعك بشكل جيد ، أقترح نسخه في مجلد مثل /lib/ أو /includes/ . إذا كنت تعرف بالفعل كيف تريد استخدام CMB2 ، فقد ترغب في المضي قدمًا وإعادة تسمية الملف إلى شيء أكثر ملاءمة. على سبيل المثال ، إذا كنت تريد استخدامه لإنشاء حقول مخصصة لصفحة الشهادات ، فيمكنك تسميتها testimonial-functions.php .

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

require_once( dirname(__FILE__) . '/lib/testimonial-functions.php');

حان الوقت الآن للبحث. افتح ملف testimonial-functions.php (أو أيًا كان ما سميته باسم). ستلاحظ أن Justin لم يقم فقط بإنشاء مثال لكل نوع من الحقول الممكنة ، ولكنه أنشأ أيضًا وظائف لعرض الحقول حسب الصفحة الرئيسية ، والفئة ، ومعرف المنشور ، وما إلى ذلك.

كيفية تحميل JavaScript في WordPress

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

ملاحظة: تهدف هذه المقالة إلى تقديمك إلى CMB2 ؛ لن يكون برنامجًا تعليميًا كاملاً حول كيفية استخدام كل جانب منه ، ولأنه إطار عمل تم تطويره لمساعدة المبرمجين ، يجب أن يكون لديك فهم أساسي لـ PHP والأعمال الداخلية لـ WordPress. إذا كنت تبحث عن المكون الإضافي Custom Meta Box الذي يحتوي على واجهة مستخدم إدارية ، فقد ترغب في التحقق من المكون الإضافي Advanced Custom Fields.

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

عند العمل في ملف testimonial-functions.php ، ستحتاج إلى العثور على قسم التسجيل وإضافة وظيفتك الجديدة. هذا الرمز يبدو مثل هذا.

add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );

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

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

أقترح أيضًا إعادة تسمية البادئة.

// Start with an underscore to hide fields from custom fields list
$prefix = '_yourprefix_'; //note, you can use anything you'd like here, but you need to remember what you use, because you will be using it again later.

هناك العديد من أنواع الحقول المختلفة للاختيار من بينها. سأستخدم:

'type' => 'textarea_small' // for the author field
'type'    => 'wysiwyg' // for the testimonial in case we want to include html
'type' => 'file' // for the image of the project or author

$cmb_demo->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

$cmb_demo->add_field( array(
	'name'    => __( 'Testimonial', 'cmb2' ),
	'desc'    => __( 'add the testimonial here', 'cmb2' ),
	'id'      => $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    => 'wysiwyg',
	'options' => array( 'textarea_rows' => 5, ),
	) );

	$cmb_demo->add_field( array(
	'name' => __( 'Author Image', 'cmb2' ),
	'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   => $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' => 'file',
	) );

يجب إضافة هذه الحقول الثلاثة الجديدة إلى الوظيفة الجديدة ، بحيث يبدو ذلك كما يلي:

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

$cmb_demo->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

$cmb_demo->add_field( array(
	'name'    => __( 'Testimonial', 'cmb2' ),
	'desc'    => __( 'add the testimonial here', 'cmb2' ),
	'id'      => $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    => 'wysiwyg',
	'options' => array( 'textarea_rows' => 5, ),
	) );

	$cmb_demo->add_field( array(
	'name' => __( 'Author Image', 'cmb2' ),
	'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   => $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' => 'file',
	) );
}

وهذا كل شيء! يجب أن يبدو الرمز النهائي الخاص بك كما يلي:

<?php
/**
 * Include and set up custom metaboxes and fields. (Make sure you copy this file outside the CMB2 directory)
 *
 * Be sure to replace all instances of 'yourprefix_' with your project's prefix.
 * http://nacin.com/2010/05/11/in-wordpress-prefix-everything/
 *
 * @category YourThemeOrPlugin
 * @package  Demo_CMB2
 * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link     https://github.com/WebDevStudios/CMB2
 */

/**
 * Get the bootstrap! If using the plugin from wordpress.org, REMOVE THIS!
 */

if ( file_exists( dirname( __FILE__ ) . '/cmb2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/cmb2/init.php';
} elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/CMB2/init.php';
}

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

// This first field group tells WordPress where to put the fields. In the example below, it is set to show up only on Post_ID=10

$cmb_demo = new_cmb2_box( array(
		'id'            => $prefix . 'metabox',
		'title'         => __( 'Homepage Custom Fields', 'cmb2' ),
		'object_types'  => array( 'page', ), // Post type
		'show_on'      => array( 'id' => array( 10, ) ), // Specific post IDs to display this metabox
		) );

$cmb_demo->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

$cmb_demo->add_field( array(
	'name'    => __( 'Testimonial', 'cmb2' ),
	'desc'    => __( 'add the testimonial here', 'cmb2' ),
	'id'      => $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    => 'wysiwyg',
	'options' => array( 'textarea_rows' => 5, ),
	) );

	$cmb_demo->add_field( array(
	'name' => __( 'Author Image', 'cmb2' ),
	'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   => $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' => 'file',
	) );
}

عند الانتهاء ، يجب أن يكون لديك صفحة تشبه ما يلي:

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

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

سمح لي CMB2 بنقل مواقع WordPress الخاصة بي إلى المستوى التالي وآمل أن يفعل نفس الشيء بالنسبة لك.

ماذا بعد: الإضافات!

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

قم بتنزيل هذا الكتاب الإلكتروني للحصول على قائمة المكونات الإضافية الموصى بها للمطورين!