عند إنشاء متجر WooCommerce احترافي، لا تلبي حقول صفحة المنتج الافتراضية عادةً جميع متطلبات العمل. على سبيل المثال، قد تحتاج إلى إضافة “الطراز” أو “فترة الضمان” للمنتجات الإلكترونية، أو “مكونات النسيج” أو “تعليمات الغسيل” للملابس. في هذه الحالة، يصبح إضافة حقول مخصصة وميتاداتا للمنتجات أمراً بالغ الأهمية. فهذا لا يعمل فقط على إثراء معلومات المنتج وتحسين تجربة المستخدم، بل يوفر أيضاً أساساً للبيانات لعمليات البحث والتصفية والميزات المتقدمة في المستقبل.
ستقدم هذه المقالة شرحًا مفصلاً لعدة طرق أساسية لتنفيذ الحقول المخصصة للمنتجات في WooCommerce، بدءًا من إضافة الشفرة الأساسية إلى استخدام الإضافات المتقدمة، مع تقديم أمثلة شفرة كاملة قابلة للتشغيل.
استخدم خطافات الإجراءات المضمنة في WooCommerce لإضافة حقل.
يوفر WooCommerce مجموعة كبيرة من خطوات العمل (Action Hooks)، مما يسمح للمطورين بإدراج محتوى في مواقع محددة في لوحة بيانات المنتج. هذه هي الطريقة الأكثر مباشرة والأقل تدخلاً في النظام الأصلي.
القراءة الموصى بها تحليل متعمق للحقول المخصصة في WordPress: من الأساسيات إلى ممارسات التطبيقات المتقدمة.。
أكثر الخطافات شيوعًا هي woocommerce_product_options_general_product_dataإنه يُستخدم لإضافة حقول في قسم “بيانات المنتج العادية”.
إضافة حقل إلى لوحة بيانات المنتجات العادية.
يوضح الكود التالي كيفية إضافة مربع إدخال نصي ومربع اختيار منسدل إلى لوحة البيانات العامة لـ “المنتجات البسيطة” و“المنتجات المتغيرة”.
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_general_fields' );
function add_custom_general_fields() {
global $post;
echo '<div class="options_group">'هذا مثال على حقل نصي: نموذج المنتج
woocommerce_wp_text_input(
array(
'id' => '_product_model',
'label' => __( 'نموذج المنتج', 'woocommerce' ),
'placeholder' => 'على سبيل المثال: X-2024Pro',
'desc_tip' => 'true',
'description' => __( 'يرجى إدخال النموذج المحدد لهذا المنتج. ', 'woocommerce' ),
)
);
مثال على مربع الاختيار المنسدل: فترة الضمان
woocommerce_wp_select(
array(
'id' => '_warranty_period',
'label' => __( 'فترة الضمان', 'woocommerce' ),
'options' => array(
'' => __( 'يرجى الاختيار...', 'woocommerce' ),
'1year' => __( 'سنة واحدة', 'woocommerce' ),
'2years' => __( 'سنتان', 'woocommerce' ),
'lifetime' => __( 'ضمان مدى الحياة', 'woocommerce' ),
),
'desc_tip' => 'true',
'description' => __( 'يرجى اختيار مدة الضمان المتوفرة لهذا المنتج. ', 'woocommerce' ),
)
);
echo '</div>';
} حفظ قيم الحقول المخصصة.
لا يكفي عرض الحقول في الخلفية فقط، بل يجب أيضًا حفظ القيم التي يُدخلها المستخدمون في ميتاداتا المنتج. وهذا يتطلب استخدام woocommerce_process_product_meta هذا مُعلّق الحفظ.
add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' );
function save_custom_general_fields( $post_id ) {
// 保存产品型号字段
$product_model = isset( $_POST['_product_model'] ) ? sanitize_text_field( $_POST['_product_model'] ) : '';
update_post_meta( $post_id, '_product_model', $product_model );
// 保存保修期字段
$warranty_period = isset( $_POST['_warranty_period'] ) ? sanitize_text_field( $_POST['_warranty_period'] ) : '';
update_post_meta( $post_id, '_warranty_period', $warranty_period );
} عرض الحقول المخصصة في صفحة المنتجات الأمامية.
الهدف النهائي هو عرض قيم الحقول المحفوظة على صفحة المنتج الأمامية. يمكننا تحقيق ذلك من خلال woocommerce_product_additional_information أو woocommerce_single_product_summary انتظر حتى يتم تنفيذ العملية المطلوبة، ثم قم بإخراج البيانات بعد وصف المنتج أو داخل صفحة العلامات التجارية.
يتم عرضه في علامة التبويب “معلومات إضافية”.
سوف يقوم الكود التالي بإضافة حقل مخصص إلى صفحة “المعلومات الإضافية” الافتراضية في WooCommerce.
القراءة الموصى بها تحليل متعمق لـ WooCommerce: دليل كامل لبناء مواقع التجارة الإلكترونية عالية الأداء.。
add_action( 'woocommerce_product_additional_information', 'display_custom_fields_on_product_page' );
function display_custom_fields_on_product_page() {
global $product;
$product_model = get_post_meta( $product->get_id(), '_product_model', true );
$warranty_period = get_post_meta( $product->get_id(), '_warranty_period', true );
if ( $product_model ) {
echo '<div class="product-model"><strong>'\n' . esc_html__( 'طراز المنتج:', 'woocommerce' ) . '</strong>'`. esc_html($product_model).`'</div>';
}
if ( $warranty_period ) {
// 将存储的值转换为可读的标签
$warranty_options = array(
'1year' => __( '一年', 'woocommerce' ),
'2years' => __( '两年', 'woocommerce' ),
'lifetime' => __( '终身保修', 'woocommerce' ),
);
$warranty_label = isset( $warranty_options[ $warranty_period ] ) ? $warranty_options[ $warranty_period ] : $warranty_period;
echo '<div class="warranty-period"><strong>'\n' . esc_html__( 'فترة الضمان:', 'woocommerce' ) . '</strong>'`. esc_html($warranty_label).`'</div>';
}
} إجراء التكوين المرئي باستخدام إضافة الحقول المخصصة المتقدمة.
بالنسبة للمستخدمين غير المعتادين على الكود أو في الحالات التي تتطلب أنواعًا معقدة من الحقول (مثل الصور، واختيار العلاقات، والمكررات، وما إلى ذلك)، فإن استخدام الإضافات هو الخيار الأكثر فعالية.Advanced Custom Fields إنها المعيار الصناعي في هذا المجال.
إنشاء مجموعة من الحقول وربطها بالمنتجات.
بعد تثبيت وتفعيل إضافة ACF، يمكنك إنشاء مجموعات من الحقول بشكل مرئي في الواجهة الخلفية لـ WordPress. على سبيل المثال، قم بإنشاء مجموعة حقول تسمى “مواصفات المنتج” تحتوي على “الطراز” (حقل نصي) و“فترة الضمان” (حقل اختيار). ثم، في “قواعد الموضع”، اضبطها بحيث تظهر عندما يكون نوع المقالة مساويًا لـ “منتج”.
يقوم ACF تلقائيًا بمعالجة عرض الحقول في الخلفية، وحفظ البيانات، والحصول على القيم في الواجهة الأمامية، دون الحاجة إلى كتابة أي شفرة لواجهة الإدارة.
استدعاء حقول ACF في القالب الأمامي.
عند العرض على الواجهة الأمامية، استخدم ما يقدمه ACF. get_field() استخدم الدالة للاستحصال على القيمة.
add_action( 'woocommerce_single_product_summary', 'display_acf_fields_on_product_page', 25 );
function display_acf_fields_on_product_page() {
$product_model = get_field( 'product_model' );
$warranty_period = get_field( 'warranty_period' );
if ( $product_model ) {
echo '<p class="acf-product-model"><strong>نموذج المنتج:</strong>'`. esc_html($product_model).`'</p>';
}
if ( $warranty_period ) {
echo '<p class="acf-warranty-period"><strong>فترة الضمان:</strong>'`. esc_html($warranty_period).`'</p>';
}
} إضافة حقول مخصصة على مستوى المتغيرات للمنتجات القابلة للتغيير.
بالنسبة للمنتجات القابلة للتخصيص، يلزم أحيانًا إعداد حقول مخصصة منفصلة لكل متغير (مثل الأحجام أو الألوان المختلفة). وهذا يتطلب استخدام الخطافات ذات الصلة بالمتغيرات. woocommerce_product_after_variable_attributes。
إضافة حقل إلى لوحة التنوع.
add_action( 'woocommerce_product_after_variable_attributes', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
// 变体专属字段:例如,每个颜色变体的 Pantone 色号
woocommerce_wp_text_input(
array(
'id' => '_pantone_code[' . $variation->ID . ']',
'label' => __( 'Pantone 色号', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_pantone_code', true ),
'placeholder' => '例如:PMS 185 C',
'wrapper_class' => 'form-row form-row-first',
)
);
} حفظ قيم حقل المتغيرات.
يتطلب حفظ الحقول المتغيرة استخدام خطافات مخصصة. woocommerce_save_product_variation。
القراءة الموصى بها دليل كامل لإنشاء موقع إلكتروني محترف: تطوير موضوع WordPress الخاص بك من الصفر.。
add_action( 'woocommerce_save_product_variation', 'save_custom_variation_field', 10, 2 );
function save_custom_variation_field( $variation_id, $loop ) {
$pantone_code = isset( $_POST['_pantone_code'][ $variation_id ] ) ? sanitize_text_field( $_POST['_pantone_code'][ $variation_id ] ) : '';
update_post_meta( $variation_id, '_pantone_code', $pantone_code );
} الملخصات
يعد إضافة حقول مخصصة إلى منتجات WooCommerce أساسًا للتخصيص العميق لوظائف المتجر. باستخدام خطافات الإجراءات الأصلية، يمكن للمطورين التحكم بدقة في موقع الحقول ونوعها ومنطق معالجة البيانات، مما يحقق تكاملًا خفيف الوزن. أما بالنسبة للمشاريع التي تتطلب نشرًا سريعًا أو تشمل أنواعًا معقدة من الحقول، فيمكن الاستفادة من Advanced Custom Fields يمكن لهذه الإضافات أن تزيد بشكل كبير من كفاءة التطوير. سواء كان منتجًا بسيطًا أو منتجًا متغيرًا، فإن إتقان هذه الطرق سيتيح لك توسيع هيكل بيانات المنتج بمرونة، مما يفي بمتطلبات الأعمال التجارية الإلكترونية المتنوعة ويحسّن من مستوى الاحترافية للموقع وتجربة المستخدم.
الأسئلة الشائعة الأسئلة المتداولة
هل سيتم تصدير/استيراد بيانات الحقول المخصصة مع المنتج؟
نعم، لكن يحتاج الأمر إلى معالجة إضافية. عند استخدام أداة استيراد/تصدير CSV الأصلية في WooCommerce، لا يتم تضمين الحقول المخصصة التي تتم إضافتها عبر الشفرة بشكل افتراضي في أعمدة التصدير. ستحتاج إلى إضافة عناوين الأعمدة المقابلة يدويًا في ملف CSV (مثل <). _product_modelأو استخدم خيار “تصدير جميع البيانات الوصفية” عند التصدير. عادةً ما يقدم مكوّن ACF الإضافي بنفسه أو مكوّنات استيراد وتصدير ذات صلة (مثل WP All Import) دعمًا أفضل لتصدير/استيراد حقول ACF.
هل يمكن إنشاء فلتر منتجات استنادًا إلى حقول مخصصة؟
يمكنك ذلك، لكن هذا يتجاوز نطاق إضافة الحقول ببساطة. ستحتاج إلى فهرسة قيم الحقول المخصصة في تصنيف المنتجات في WooCommerce، أو استخدام إضافات التصفية من جهات خارجية (مثل WooCommerce Product Filters) لتحديد هذه البيانات الوصفيّة المخصصة. والطريقة الأكثر تقدمًا هي كتابة استعلامات مخصصة في pre_get_posts أو woocommerce_product_query يتم تعديل الحلقة الرئيسية في الخطاف لتصفية المنتجات ذات البيانات الوصفية المحددة.
ما الفرق الجوهري بين الحقول التي تتم إضافتها عن طريق الشفرة والحقول التي تتم إضافتها بواسطة مكوّن ACF الإضافي؟
الاختلاف الأساسي يكمن في طريقة إدارة البيانات وتخزينها. عند إضافتها يدويًا عبر الشفرة، فإنك تتحكم مباشرةً في الإخراج HTML للحقول، والتحقق من صحتها، ومنطق الحفظ، مع الاستفادة من ميزات WordPress. update_post_meta و get_post_meta تقوم الدالة بإجراء الوصول إلى البيانات. بينما تقوم إضافة ACF ببناء طبقة إدارية كاملة فوقها، مما يوفر واجهة مستخدم سهلة الاستخدام لتعريف مجموعات الحقول والقواعد، وتخزين البيانات بطريقة أكثر تنظيمًا (ربما في نفس المصفوفة)، من خلال get_field() انتظر أن تُرجع الدالة القيمة المُنسّقة. تبسّط ACF العملية، لكن طريقة التّرميز أخف وزناً وأكثر قابلية للتحكم فيها مباشرةً.
بعد إضافة الحقل، كيف يمكن عرضه في صفحة فهرسة المنتجات (صفحة المتجر)؟
عادةً ما يتطلب عرض الحقول المخصصة في صفحة تسجيل المنتج (مثل صفحة المتجر أو صفحة التصنيفات) تعديل قالب عناصر المنتجات. أكثر الطرق أمانًا هي نسخ ملفات قوالب WooCommerce. templates/content-product.php اذهب إلى المسار المقابل لموضوعك الفرعي وقم باستبداله، ثم استدعه في مكان مناسب (مثلًا بعد السعر). get_post_meta() لإخراج قيم الحقول. يمكنك أيضًا استخدام woocommerce_after_shop_loop_item_title يتم استخدام هذه الخطافات لإدراج المحتوى، لكن يجب مراعاة أن تخطيطه قد يختلف حسب الموضوع.
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- التعمق في استخدام WooCommerce: دليل شامل لحلول التجارة الإلكترونية النهائية، من البناء إلى التحسين
- تحليل شامل لـ WooCommerce: بناء موقع تجاري إلكتروني قوي على WordPress من الصفر
- ١٠ نصائح عملية لزيادة معدلات التحويل في مواقع ووكوميرس (WooCommerce)
- دليل شامل لقوالب صفحات المنتجات المخصصة في WooCommerce
- دليل تحسين مواقع ووكوميرس (WooCommerce) لتكون صديقة لمحركات البحث (SEO): الاستراتيجيات الرئيسية لزيادة معدلات التحويل