شكل البداية/المتعلقة بالمعرفة/ووردبريس/تفاصيل المحتوى

دليل البدء في تطوير مواقع ووردكامرس (WooCommerce Themes): بناء موقعك التجاري الإلكتروني من الصفر

قراءة 3 دقائق
2026-03-15
2026-06-04
2,622
أنا أحصل على عمولة عند التسوق عبر الروابط أدناه، ولا يُضاف أي تكلفة عليك.

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

لتطوير قالب (theme) لمنصة WooCommerce، يجب أولاً أن يكون لديك قالب أساسي لمنصة WordPress كنقطة انطلاق. يمكن أن يكون هذا القالب قالباً فرعياً (sub-theme) قمت بإنشائه من الصفر، أو يمكنك أن تقوم بتطوير قالب موجود مسبقاً (مثل Underscores أو Storefront) بشكل إضافي. الشيء الأهم هو أن يتم الإعلان صراحةً عن دعم هذا القالب لمنصة WooCommerce، حتى يتمكن الإضافات (plugins) من إدخال ملفات القوالب الخاصة بها ضمن هيكل القالب الخاص بك.

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

القراءة الموصى بها دليل البدء في تطوير مواضيع ووردبريس: بناء موضوعك الأول من الصفر。

إعداد بيئة التطوير وهيكل الموضوع (Theme Structure)

قبل البدء في كتابة أي كود، من الضروري وجود بيئة تطوير محلية موثوقة. يُنصح باستخدام أدوات مثل Local أو XAMPP أو Docker لإنشاء بيئة سريعة تحتوي على PHP وMySQL وApache/Nginx. تأكد من أن إصدار PHP الخاص بك يتوافق مع أحدث متطلبات WooCommerce (عادةً ما يكون PHP 7.4 أو أعلى)، وقم بتثبيت WordPress وإضافات WooCommerce الخاصة به.

خادم ووردبريس من شركة UltaHost
ضمان استرداد المال خلال 30 يومًا، عرض نطاق ترددي وقواعد بيانات غير محدودين، حماية مجانية ضد هجمات DDoS، خصم 50% عند الشراء لمدة 3 سنوات (السعة المتاحة: 501–4 تيرابايت).
شعار شركة UltaHost صفحة الوصول

قم بإنشاء دليل مواضيع جديد، على سبيل المثال: my-woocommerce-themeوضعه هناك. wp-content/themes/ في المجلد، يجب أن يحتوي أي تصميم أساسي يدعم منصة WooCommerce على الأقل على الملفات الأساسية التالية:

  • style.cssقالب الأسلوب الخاص بالموضوع، والذي يجب أن يحتوي على تعليقات رأس الموضوع القياسية الخاصة بووردبريس (WordPress).
  • index.phpملف القالب الرئيسي للموضوع.
  • functions.phpالملف الأساسي المستخدم لإضافة ميزة التصنيفات (المواضيع)، وسكريبتات التسجيل، والأنماط (الأسلوبيات)، بالإضافة إلى إعلان دعم منصة WooCommerce.

أولاً، في… style.css في تعليقات الرأس (header comments)، يجب أن تحدد المعلومات الرئيسية للموضوع بوضوح.

/*
Theme Name: My WooCommerce Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Description: 一个为 WooCommerce 定制的现代电商主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-woocommerce-theme
*/

بعد ذلك، functions.php في الملف، أول شيء وأهم شيء هو الإعلان عن أن موضوعك يدعم منصة WooCommerce. ويتم ذلك عن طريق… add_action الخطافات و… add_theme_support تم تنفيذ الدالة بواسطة… (The function was implemented by…)

<?php
/**
 * 主题功能文件
 */
function my_woocommerce_theme_setup() {
    // 声明主题支持 WooCommerce
    add_theme_support( 'woocommerce' );
    // 可选：支持 WooCommerce 的特定功能，如产品画廊缩放、轮播等
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'my_woocommerce_theme_setup' );

// 注册主题的样式和脚本
function my_woocommerce_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入 WooCommerce 样式
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_style( 'woocommerce-theme', get_template_directory_uri() . '/css/woocommerce.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_woocommerce_theme_scripts' );
?>

فهم واستخدام قوالب WooCommerce.

يستخدم WooCommerce نظام قوالب قابل للتخصيص. تقع جميع ملفات القوالب الافتراضية في دليل الإضافات (plugins directory). templates/ داخل المجلد. من أجل تخصيص هذه القوالب في موضوعك، يجب عليك إنشاء ملف بعنوان… (The file should be named…) داخل دليل الموضوع الخاص بك. woocommerce قم بفتح المجلد المطلوب، ثم قم بنسخ ملفات القوالب المقابلة وتعديلها وفقًا لهيكل المسار نفسه الموجود داخل الإضافة (البرنامج الإضافي).

القراءة الموصى بها دليل نهائي لتطوير مواقع ووردبريس: بناء أول موضوع مخصص الخاص بك من الصفر。

على سبيل المثال، إذا كنت ترغب في تعديل قالب صفحة منتج معينة، فإن المسار الافتراضي في WooCommerce هو… plugins/woocommerce/templates/single-product.phpيجب عليك إنشاء ما يلي في موضوعك:themes/my-woocommerce-theme/woocommerce/single-product.phpعندما يكون هذا الملف موجودًا، سيقوم WooCommerce بتحميل النسخة الموجودة في القالب (theme) بشكل أولوي.

مستويات القوالب (Template Levels) هي مفهوم مهم آخر. لقد قامت منصة WooCommerce بدمج مستويات القوالب القياسية الخاصة بـ WordPress بطريقة ذكية. على سبيل المثال، بالنسبة لصفحة المتجر (Shop Page)، ستقوم منصة WordPress بالبحث عن القوالب وفقًا للترتيب التالي:archive-product.php > archive.php > index.phpلذلك، يتم إنشاء… archive-product.php هذه هي الطريقة الأكثر مباشرة وفعالية لعرض قائمة متاجر التخصيص.

تشمل الملفات القالبية الأساسية التي يُنصح باستبدالها أولاً عند الحاجة ما يلي:
- single-product.phpصفحة تفاصيل المنتج الفردي.
- archive-product.phpصفحة أرشيف المنتجات (الصفحة الرئيسية للمتجر).
- cart/cart.phpصفحة سلة التسوق.
- checkout/form-checkout.phpصفحة الدفع.
- myaccount/my-account.phpصفحة حسابي.

استضافة.كوم استضافة مشتركة
أداء عالٍ مع وحدات المعالجة المركزية AMD EPYC، ووحدات تخزين NVMe SSD وLiteSpeed، ودعم داخلي متخصص على مدار الساعة طوال أيام الأسبوع، وتدابير أمنية متقدمة بما في ذلك SSL، وقوة الغاشمة، والحماية من البرامج الضارة والحماية من DDoS، وتوفير ما يصل إلى 731 تيرابايت 4 تيرابايت
شعار الاستضافة.كوم صفحة الوصول

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

استخدام الخطافات (hooks) لتخصيص الوظائف

بالإضافة إلى تغطية ملفات القوالب، يوفر WooCommerce أيضًا عددًا كبيرًا من الإجراءات (actions)…actionوالمرشحات (filters)filterتتيح لك أداة “الخطافات” (Hooks) إضافة المحتوى أو إزالته أو تعديله دون الحاجة إلى تغيير ملفات القوالب الأساسية. عادةً ما يكون هذا الأسلوب أخف وزنًا وأسهل في الصيانة مقارنة بتعديل القوالب م

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

القراءة الموصى بها إنشاء موقع ويب محترف: دليل شامل لتطوير تصميم خاص بمنصة ووردبريس من الصفر。

الدالة my_custom_product_project_message() {
    صدى'<p class="my-custom-notice">🎉 هذا المنتج يشارك حاليًا في حملة محدودة الوقت!</p>';
}
أضف_إجراءً( 'woocommerce_single_product_summary', 'my_custom_product_message', 20 );

هنا،woocommerce_single_product_summary إنه اسم الخطاف (hook).20 هي أرقام تمثل أولويات التنفيذ (تحدد ترتيب تنفيذ العمليات).

تسمح خيوط الفلاتر (filter hooks) بتعديل البيانات. على سبيل المثال، يمكنك تغيير نص زر “إضافة إلى سلة التسوق”.

الاستضافة المشتركة InterServer
استضافة مشتركة $2.50 دولار أمريكي في الشهر، الشهر الأول $0.1 دولار أمريكي الرمز الترويجي tryinterserver، 461 نص برمجي للتطبيقات السحابية، تثبيت بنقرة واحدة.
انتر سيرفر LOGO صفحة الوصول 
function my_custom_add_to_cart_text( $text ) {
    if ( is_product() ) {
        $text = __( '立即购买', 'my-woocommerce-theme' );
    }
    return $text;
}
add_filter( 'woocommerce_product_single_add_to_cart_text', 'my_custom_add_to_cart_text' );

أداة قوية أخرى هي “مخالب القوالب” (Template Hooks). لقد وضعت منصة WooCommerce العديد من هذه المخالب داخل ملفات القوالب (template files). do_action استخدم هذه الأدوات (الخطافات) للتحكم بدقة في طريقة عرض هيكل الصفحة. يمكنك الاستفادة منها لتحقيق النتائج المرجوة. remove_action لإزالة العناصر غير المرغوبة، أو باستخدام… add_action إن إدراج عناصر جديدة في مواقع محددة أمر أكثر مرونة من تعديل ملفات القوالب مباشرة، خاصة عند تحديث إضافات WooCommerce، حيث يصبح من الأسهل الحفاظ على تعديلاتك دون أن تتم مسحها أو تغييرها بواسطة التحديث

تخصيص الأنماط والتصميم التفاعلي (Responsive Design)

يأتي WooCommerce مع مجموعة من الأنماط الأساسية، ولكن من أجل جعل مظهره يتناسب مع لغة تصميم موقعك، من الضروري إجراء تخصيصات عميقة للأنماط. يُنصح بإنشاء ملف CSS منفصل لهذا الغرض. woocommerce.cssوأيضًا… functions.php يتم تحميل البيانات وفقًا للشروط المحددة، كما هو موضح في المثال السابق.

جوهر تخصيص الأنماط يكمن في فهم هيكل HTML الذي يولده نظام WooCommerce وفئات CSS المستخدمة فيه. استخدام أدوات المطور المتاحة في المتصفح لفحص عناصر مثل قوائم المنتجات وجداول عربات التسوق هو طريقة سريعة للبدء في التعلم. لقد قام نظام WooCommerce بإضافة فئات CSS غنية وذات معنى لمعظم العناصر، مثل… .product、.woocommerce-loop-product__link、.onsale إلخ.

على سبيل المثال، تعديل أسلوب تصميم علامة “السعر المخفض”:

/* 在你的 woocommerce.css 中 */
.onsale {
    background-color: #ff3366;
    color: white;
    border-radius: 0;
    padding: 0.5em 1em;
    font-weight: bold;
    top: 10px;
    right: 10px;
    left: auto; /* 覆盖默认的 left: 0 */
}

التصميم التفاعلي أمر بالغ الأهمية بالنسبة لمواقع التجارة الإلكترونية. يجب أن تتأكد من أن شبكات المنتجات والجداول (مثل سلة التسوق وتفاصيل الطلبات) تظهر بشكل جيد على مختلف أحجام الشاشات. استخدم استعلامات وسائط CSS وتخطيط Flexbox/Grid لإعادة هيكلة طريقة عرض قوائم المنتجات.

@media (max-width: 768px) {
    ul.products li.product {
        width: 48%; /* 在平板设备上每行显示两个产品 */
        margin-right: 4%;
    }
    ul.products li.product:nth-child(2n) {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    ul.products li.product {
        width: 100%; /* 在手机上每行显示一个产品 */
        margin-right: 0;
    }
    /* 调整结账表单的输入框 */
    .woocommerce form .form-row {
        width: 100%;
        float: none;
        margin-right: 0;
    }
}

الملخصات

تطوير مواضيع ووكوميرس (WooCommerce Themes) يعتبر عملية تجمع بين معرفة مواضيع ووردبريس (WordPress Themes) والمتطلبات الخاصة بالتجارة الإلكترونية. المفتاح هو فهم آلية تغطية القوالب (template coverage) في ووكوميرس، بالإضافة إلى استخدام أدوات مثل الأكواد النشطة (actions) وخطافات المرشحات (filter hooks) بمهارة لتحقيق تخصيصات وظيفية مرنة. سواء كان الأمر يتعلق بإنشاء البيئة المناسبة للتطوير، أو تحديد الميزات المدعومة، أو تعديل القوالب الأساسية، أو استخدام الخطافات لإجراء تعديلات دقيقة أو تخصيصات في الأسلوب العرضي، فكل خطوة من هذه الخطوات تمثل حجر الزاوية في بناء متجر إلكتروني محترف وفريد وفعال. تذكر دائمًا أن التطوير يجب أن يتم داخل المواضيع الفرعية (subthemes)، وأن استخدام الخطافات بدلاً من تعديل القوالب الأ

الأسئلة الشائعة الأسئلة المتداولة

كيفية إزالة عناصر صفحة تفاصيل المنتج أو إعادة ترتيبها داخل الموضوع (Theme)؟

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

على سبيل المثال، إذا أردت إزالة عنوان المنتج، يمكنك الرجوع إلى… plugins/woocommerce/templates/single-product/title.phpسوف تكتشف أنه يعمل من خلال استخدام "الخطافات" (hooks). woocommerce_single_product_summary يتم إضافته بأولوية قدرها 5. إذًا، في موضوعك… functions.php يمكنك إزالته ببساطة عن طريق إضافة الكود التالي إلى المكان المناسب:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

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

لماذا اختفت تعديلاتي على تصميم موقعي بعد تحديث نسخة WooCommerce؟

إذا قمت بتعديل مجلد إضافة WooCommerce مباشرةً…wp-content/plugins/woocommerce/إذا تم استخدام ملفات القوالب الموجودة في المسار المذكور أدناه، فإن أي تعديلات يتم إجراؤها ستتم مسحها في كل مرة يتم فيها تحديث الإضافة. هذا أمر غير موصى به على الإطلاق.

الطريقة الصحيحة هي اتباع آلية تغيير القوالب (template overriding) المتاحة في WooCommerce، وذلك عن طريق نسخ ملف القالب الذي تريد تعديله إلى دليل المواضيع (theme directory) الخاص بك. woocommerce/ يمكنك إجراء التعديلات داخل المجلدات الفرعية. بهذه الطريقة، سيقوم WooCommerce بتحميل الإصدار الموجود في موضوعك بشكل أولوي، ولن يؤثر تحديث الإضافات على المحتوى المخصص الخاص بك.

كيفية إنشاء تخطيط مخصص لصفحات متجر WooCommerce؟

الطريقة الأكثر فعالية لإنشاء تخطيط مخصص لصفحة المتجر هي عن طريق تعديل (أو إعادة كتابة) الكود الأساسي المستخدم في تصميم تلك الصفحة. archive-product.php ملف قالب: يمكنك إعادة تصميم هيكل HTML لهذا الملف بالكامل.

طريقة أخرى أكثر تعديدية هي استخدام “الخطافات” (hooks). المحتوى الرئيسي لصفحة المتجر يتم إعداده بشكل أساسي باستخدام هذه الخطافات. woocommerce_before_main_content、woocommerce_archive_description、woocommerce_before_shop_loop、woocommerce_after_shop_loop يمكنك التحكم في ذلك باستخدام "الخطافات" (hooks). يمكنك إزالة الدورة الافتراضية وإدخال استعلاماتك المخصصة وهياكل الدورات الخاصة بين هذه الخطافات، لتحقيق تخطيطات فريدة من نوعها مثل الشبكات (grids)، أو القوائم (lists)، أو تخطي

في الوقت نفسه، من خلال استخدام أداة تخصيص WordPress (Customizer) أو إنشاء صفحة خيارات للتصميم (Theme Options Page)، يمكنك السماح للمستخدمين بتغيير تخطيط الموقع دون الحاجة إلى تعديل الكود.

كيف تقوم بإضافة جافا سكريبت مخصص بشكل صحيح إلى موضوع WooCommerce؟

عند إضافة كود JavaScript مخصص لموضوع WooCommerce، يجب اتباع أفضل ممارسات ترتيب تنفيذ السكريبتات في WordPress. functions.php في الملف، تم استخدام… wp_enqueue_script دالة لتسجيل وتحميل السكريبتات.

تأكد من استخدام… wp_enqueue_script عند الحاجة، يمكن تحديد المكونات المطلوبة (الاعتمادات) من خلال المعلمة الثالثة، مثل الاعتماد على مكتبة jQuery. بالنسبة للسكريبتات الخاصة بـ WooCommerce، قد يكون من الضروري أحيانًا الاعتماد على مكونات إ wc-add-to-cart-variation(يُستخدم للمنتجات المتغيرة) أو wc-checkout(يُستخدم في صفحة الدفع). من خلال wp_localize_script يمكنك بسهولة نقل متغيرات PHP (مثل عناوين URL لطلبات AJAX أو عناوين المواقع وما إلى ذلك) إلى ملف JavaScript الخاص بك بطريقة آمنة.

php
\nالدالة my_theme_wc_scripts() {
wp_enqueue_script(
'my-woocommerce-script',
`get_template_directory_uri()` . 'https://www.likacloud.com/js/my-woocommerce.js',
array( 'jquery', 'wc-add-to-cart-variation' ), // المكونات المعتمدة (الاعتمادات/المكونات الضرورية)
'1.0.0',
true // يتم تحميل المحتوى في القسم السفلي من الصفحة.
);
`wp_localize_script('my-woocommerce-script', 'myWooParams', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
أضف إجراءً ('wp_enqueue_scripts'، 'my_theme_wc_scripts')؛;

ما التالي، ما التالي؟

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

القراءة الموسعة والمعرفة العملية

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

الوسوم