تطوير معمارية برمجية مخصصة لمتجر إلكتروني

عنوان المشروع:

​تطوير وتطعييم قالب ووردبريس مخصص بالكامل (Custom Theme Architecture) بدون أدوات بناء - ربط محرك WooCommerce وأكواد JavaScript مخصصة

​نص المشروع والتفاصيل التقنية:

​1. الملخص المعماري (Architectural Overview):

نبحث عن مهندس برمجيات ووردبريس متقدم (Senior Custom WordPress / PHP Developer) لبناء وتطوير قالب مخصص (Bespoke/Custom Theme) لعلامة CGP. المشروع يعتمد بالكامل على نقل وتصميم نظام واجهات برمجية قائمة بالفعل (Custom Vanilla JS / CSS3 / HTML5) وتعميمها على كامل شجرة قوالب الووردبريس (Template Hierarchy)، مع ربط محرك WooCommerce خلف كواليس النظام دون المساس بالهوية البصرية أو الأداء البرمجي.

​2. المحددات الهندسية الصارمة (Strict Constraints):

​Zero-Builder Policy: يُمنع تماماً استخدام أي أداة بناء بصري أو سحب وإفلات مثل (Elementor, Divi, Avada, WPBakery) أو حتى إضافات تحكم الهيدر والفوتر. الشغل مطلوب كود مكتوب صافي داخل بيئة القالب (Custom Theme File Structure).

​DOM & JS Event Preservation: القالب الحالي يحتوي على مصفوفة أحداث جافا سكربت مخصصة (DOM Event Listeners, State Management, Sticky Header Logic). المطلوب هو عدم إعادة كتابة منطق الحركة بـ jQuery قديم، بل دمج الأكواد الحالية وإدارتها عبر wp_enqueue_script مع مراعاة مصفوفة الاعتمادات (Dependency Graph).

​Clean Code Standards: الالتزام الصارم بمعايير تطوير الووردبريس (WordPress Coding Standards - WPCS)، وإغلاق الثغرات عبر Sanitization & Escaping المتقدمة واستخدام wp_nonce لجميع عمليات الـ AJAX.

​3. نطاق العمل والتسليمات البرمجية (Detailed Scope of Work):

​أولاً: بناء هيكلية القالب (Custom Theme Architecture)

​إنشاء شجرة ملفات القالب من الصفر (functions.php, header.php, footer.php, single.php, archive.php, page.php).

​بناء نظام الألوان والحركة بتعميم الـ CSS Variables المصممة مسبقاً، وإعادة هيكلة القوائم السفلية والعلوية عبر register_nav_menus لربطها بـ WordPress Menu API مع الحفاظ على التداخل البصري المخصص (Sub-menus & Drawers).

​تثبيت سلوك الـ Sticky Header على مستوى الـ DOM دون التسبب في مشاكل Re-layout أو Layout Shifts (CLS).

​ثانياً: هدم وإعادة بناء قوالب WooCommerce (WooCommerce Template Overrides)

​تجاوز قوالب WooCommerce الافتراضية عن طريق نسخ وتعديل القوالب داخل مجلد /woocommerce/ الخاص بالقالب المخصص.

​تحويل صفحة المنتج المفرد (single-product.php) لتعكس لغة التصميم الخاصة بـ CGP، وتمرير خيارات المنتجات المتغيرة (Variable Products) عبر مخصصات AJAX متجاوبة بدون إعادة تحميل الصفحة.

​تخصيص شاشة السلة وتأكيد الطلب (cart.php & checkout.php) وربط خطوط إرسال البيانات بـ REST API أو admin-ajax.php مع الحفاظ على الأسلوب البصري لبطاقات المدخلات (Form Controls).

​ثالثاً: تهيئة قاعدة البيانات والأشجار الديناميكية للمدونة (Scalable Architecture for Blog & Specs)

​بناء هيكلية Custom Post Types (CPT) و Custom Taxonomies قابلة للتوسع مستقبلاً لاستيعاب جداول المواصفات التقنية المعقدة.

​تضمين آليات تعامل مع البيانات عبر wp_localize_script لنقل بيانات المكونات والقطع من بيئة PHP Backend إلى بيئة Vanilla JS Frontend بكل سلاسة.

​رابعاً: ربط الخدمة والأمان (Payment, Shipping & Security)

​ربط إضافات بوابات الدفع (مثل Moyasar / Tap) وربط خيارات الشحن، وضمان عملها دون التعارض مع ستايلات الـ CSS المخصصة.

​تحسين مؤشرات الأداء (Core Web Vitals)، وتقليل عدد الاستعلامات (Database Queries)، وتنظيف الـ Head من السكريبتات الزائدة عبر wp_deregister_script.

خامساً: معمارية الأداء وإدارة حالة الجلسات (Caching & State Management)

​Full-Page Cache & Fragment Isolation: إعداد القالب ليعمل بتوافق كامل مع أنظمة التخزين المؤقت المتقدمة (Nginx FastCGI / Redis Object Cache). يُمنع كسر الـ Page Cache لإظهار بيانات السلة أو حالة تسجيل الدخول.

​Asynchronous Cart Hydration: جلب بيانات السلة وحالة المستخدم بطريقة غير متزامنة (Asynchronous Fetch API) بعد تحميل الصفحة المخبأة، مع إلغاء الاعتماد على آلية wc-ajax=get_refreshed_fragments التقليدية لتقليل العبء على السيرفر.

​Custom Event Bus (Vanilla JS): إنشاء ناقل أحداث مخصص بـ JavaScript مجرد لإطلاق واستقبال تغييرات السلة والفلاتر (مثل cgp:cart_updated و cgp:compatibility_checked) للتحكم في واجهة المستخدم دون إعادة تحميل أي جزء من الصفحة.

​سادساً: التوافق مع قواعد البيانات الحديثة واستعلامات المواصفات (HPOS & Database Tuning)

​WooCommerce HPOS Compliance: التزام كامل بنظام التخزين عالي الأداء (High-Performance Order Storage - HPOS)، واستخدام معالجات WooCommerce CRUD الحصرية بدلاً من الاستعلام المباشر بـ get_post_meta.

​ACF & Meta Query Optimization: تحسين استعلامات الحقول المخصصة الخاصة بآلة التوافقية لضمان ألا يتجاوز زمن استجابة السيرفر الأولية (TTFB) 150 مللي ثانية، وتجنب الاستعلامات المتداخلة (Nested Meta Queries) التي تجهد جدول wp_postmeta.

​سابعاً: البيانات المنظمة والأمان المتقدم (Structured Data & API Hardening)

​Dynamic JSON-LD Schema Layer: بناء طبقة بيانات منظمة مخصصة (Schema.org/Product & Offer) تُحقن برمجياً في الـ Header لصفحات المنتجات والتجميعات التقنية لتعزيز الأرشفة والـ SEO الفني دون الحاجة لإضافات خارجية.

​REST API Endpoint Security: تأمين كافة المسارات المخصصة المسجلة عبر register_rest_route باستخدام permission_callback محكم، مع تطبيق Nonce Verification و Rate Limiting لحماية خوارزمية التوافقية من الاستغلال أو السحب الآلي.

​ثامناً: معايير جودة الكود وتسليم المشروع (DevOps & Asset Pipeline)

​Asset Pipeline & Bundling: إدارة ملفات CSS و JS عبر أداة تجميع حديثة (Vite أو Webpack) لتسليم ملفات مصغرة (Minified Bundle)، مع إتاحة سورس كود التطوير المنسق (Unminified Source Code) داخل مجلد القالب.

​Strict Asset Enqueueing: يمنع منعاً باتاً كتابة أي أسلوب تنسيق أو سكريبت داخل ملفات القالب مباشرة (No Inline CSS/JS)؛ يجب أن تمُر جميع الأصول عبر wp_enqueue_script و wp_enqueue_style حصراً مع استغلال ميزات defer و async.

​4. بروتوكول التقديم والفلترة (Verification Protocol):

​لضمان أن المتقدم خبير حقيقي واستبعاد أي عروض آلية أو أشخاص لا يمتلكون الخبرة العميقة المطلوب:

​كلمة التحقق: يرجى كتابة رمز CGP-CODE في بداية العرض تماماً.

​سؤال التصفية التقني: اذكر في عرضك باختصار: كيف ستتعامل مع تمرير بيانات منتجات WooCommerce المتغيرة إلى ملف JS مخصص دون استخدام إضافة جاهزة؟ وما هي الـ Hooks الأساسية التي ستستخدمها لتعديل مخرجات صفحة الـ Checkout؟

​(ملاحظة: أي عرض لا يحتوي على رمز التحقق، أو يعتمد على استخدام أدوات السحب والإفلات مثل Elementor، سيتم رفضه وتجاهله فوراً).