Frontend وBackend في ووردبريس مصطلحان يصفان جانبين مختلفين من الموقع: الواجهة الأمامية هي ما يراه الزائر ويتفاعل معه، بينما الواجهة الخلفية تشمل منطق التطبيق والبيانات والعمليات الإدارية التي تجعل الموقع يعمل.
الفرق السريع بين Frontend وBackend
| العنصر | Frontend | Backend |
|---|---|---|
| من يراه؟ | الزائر والمستخدم | الخادم والمدير والمطور |
| أمثلة | الهيدر والقوائم والأزرار وصفحات المنتجات | PHP وقاعدة البيانات وREST API ومعالجة النماذج |
| التقنيات | HTML وCSS وJavaScript | PHP وMySQL/MariaDB وWordPress APIs |
| الهدف | العرض والتفاعل وتجربة المستخدم | البيانات والمنطق والصلاحيات والعمليات |
ما هي الواجهة الأمامية Frontend في ووردبريس؟
الـFrontend هو الجزء الذي يراه الزائر عند فتح الموقع. يشمل صفحات المقالات والمنتجات والتصنيفات والهيدر والفوتر والقوائم والنماذج والعناصر التفاعلية. في ووردبريس يتأثر بالقالب وBlocks وPage Builders والإضافات التي تضيف مكونات مرئية.
التقنيات المستخدمة في Frontend
- HTML: بنية الصفحة والعناصر الدلالية.
- CSS: الألوان والتخطيط والمسافات والتجاوب.
- JavaScript: التفاعل الديناميكي مثل القوائم والفلترة.
للبداية العملية راجع تعلم HTML من الصفر وCSS للمبتدئين.
ما هي الواجهة الخلفية Backend في ووردبريس؟
الـBackend مسؤول عن جلب البيانات وتخزينها، التحقق من الصلاحيات، تنفيذ منطق الإضافات والقوالب، ومعالجة الطلبات قبل إرسال النتيجة إلى المتصفح.
PHP
ووردبريس مبني أساسًا بـPHP. Core والقوالب والإضافات تستخدم PHP لتنفيذ Hooks وQueries والعمليات الإدارية.
قاعدة البيانات
تُخزن المقالات والصفحات والمستخدمون والإعدادات في MySQL أو MariaDB بحسب بيئة الاستضافة. يفضّل استخدام WordPress APIs بدل الاستعلامات المباشرة عندما توفر API مناسبة.
WordPress APIs
تشمل REST API وOptions API وMetadata API وHTTP API وHooks وغيرها.
هل لوحة wp-admin هي Backend؟
لوحة التحكم هي واجهة إدارية للـBackend وليست الـBackend كله. ما يحدث خلفها من صلاحيات واستعلامات وPHP وقاعدة بيانات وAPIs هو الجزء الخلفي الفعلي.
كيف يتواصل Frontend مع Backend؟
عند فتح صفحة، يطلب المتصفح URL من الخادم. ووردبريس يحدد الطلب ويجلب البيانات ويطبق القالب والـHooks ثم يرسل HTML. بعد التحميل قد يرسل JavaScript طلبات REST أو AJAX لتحديث جزء من الصفحة.
مثال WooCommerce
- Frontend: صورة المنتج والسعر وزر Add to Cart وVariation selector.
- Backend: بيانات المنتج والمخزون والسعر وقواعد الضرائب والصلاحيات.
- الاتصال: طلبات السلة والدفع تربط الواجهة بمنطق WooCommerce.
Frontend Developer وBackend Developer
Frontend Developer
يركز على واجهة المستخدم وResponsive Design وAccessibility والأداء في المتصفح وJavaScript وCSS.
Backend Developer
يركز على PHP وقواعد البيانات وAPIs والأمان والصلاحيات والأداء على الخادم.
Full Stack Developer
يعمل على الجانبين بدرجات مختلفة، وقد يبني Theme أو Block في الواجهة وPlugin أو REST integration في الخلفية.
إذا كان هذا هو المسار الذي تريد التوسع فيه، راجع مسار Full Stack Developer في 2026 لفهم HTTP وAPIs وقواعد البيانات وGit والاختبار والنشر كمجموعة مترابطة.
Frontend والأداء
المشكلات الشائعة تشمل JavaScript ثقيلًا وCSS غير مستخدم وصورًا كبيرة وFonts خارجية وLayout Shifts.
Backend والأداء
المشكلات الشائعة تشمل Queries بطيئة وAutoload كبير وCron أو Action Scheduler متراكم واتصالات API بطيئة.
الأمان بين الواجهتين
التحقق الحقيقي من الصلاحيات والبيانات يجب أن يحدث على الخادم. إخفاء زر في JavaScript ليس حماية؛ أي Request حساس يحتاج Authentication وAuthorization وValidation وSanitization وEscaping وفق السياق.
هل Elementor Frontend أم Backend؟
Elementor يجمع الجانبين: واجهة المحرر تعتمد على JavaScript وعناصر مرئية، بينما WordPress وPHP وقاعدة البيانات تحفظ إعدادات الصفحة وتولد المخرجات.
كيف تبدأ التعلم؟
- HTML ثم CSS.
- JavaScript وDOM وHTTP.
- PHP أساسيات.
- WordPress Themes/Blocks.
- Hooks وAPIs وPlugins.
- قواعد البيانات والأمان والأداء.
للمسار الأشمل راجع دليل بدء تطوير الويب.
الخلاصة
الفرق بين Frontend وBackend في ووردبريس أن الأول مسؤول عن ما يراه المستخدم ويتفاعل معه، والثاني مسؤول عن البيانات والمنطق والعمليات التي تجعل الموقع يعمل. فهم العلاقة بينهما يساعدك في تشخيص المشاكل واختيار مسار التعلم وتطوير مواقع أسرع وأكثر قابلية للصيانة.
