خدمة WordPress · إنشاء وتصميم
برمجة قالب ووردبريس مخصص من التصميم إلى محرر المحتوى
لديك تصميم في Figma أو هوية لا يستوعبها قالب جاهز؟ أحوّله إلى ثيم ووردبريس نظيف وقابل للصيانة، بقرار معماري صريح بين Classic وBlock قبل كتابة أول سطر، ومكونات يستطيع فريقك استخدامها من المحرر دون كسر التصميم.
متى تحتاج ثيمًا مخصصًا
أربع علامات تقول إن القالب الجاهز سيكلفك أكثر
القالب الجاهز خيار صحيح لكثير من المواقع. المشكلة تبدأ حين تُثنى الهوية لتناسب القالب بدل العكس، أو حين تتراكم الإضافات لتعويض ما لا يفعله.
الثيم المخصص لا يعني «أجمل»، بل يعني أن كل قالب صفحة وكل مكون كُتب لتصميمك أنت ولمحتواك أنت. النتيجة ملفات أقل، حمل أخف، وقرارات واضحة عمّا يمكن للفريق تعديله وما لا يمكن.
إن كانت مشكلتك في الوظائف لا في الشكل، فالأقرب الوظائف المخصصة. وإن كان الموقع جديدًا ولا تملك تصميمًا بعد، فابدأ من إنشاء الموقع حيث أرشح لك ثيمًا خفيفًا أو تصميمًا مخصصًا حسب الحاجة.
- تصميم معتمد في Figma أو XD
لديك ملف تصميم كامل بألوان وخطوط ومسافات محددة، وأي قالب جاهز سيقرّبه فقط ويترك فروقًا يراها عميلك.
- إضافات متراكمة لتعويض القالب
بانٍ صفحات وإضافة أقسام وإضافة أيقونات وإضافة جداول، لأن القالب لا يفعل ما تحتاج. الثيم المخصص يحل ذلك في ملفاته.
- أداء يتأثر بما لا تستخدمه
القوالب متعددة الأغراض تحمّل CSS وJS لمزايا لن تُستخدم. التحميل المشروط للأصول في الثيم المخصص يحمّل ما تحتاجه الصفحة فقط.
- فريق تحرير يحتاج حدودًا
تريد أن يكتب المحرر محتوى ويختار من أنماط جاهزة، لا أن يغير الألوان والمسافات في كل صفحة ويكسر الهوية.
مواقع ووردبريس بهويات بصرية مختلفة
شركات عقارية وتقنية ومحاماة وتوظيف؛ واجهات تختلف في الهوية وطريقة عرض المحتوى، كما ظهرت في معرض أعمالي. لا أدعي أن كلًا منها ثيم مخصص.
-
سينس للتطوير العقاري
سينس للتطوير العقاري، موقع ووردبريس في مجال التطوير العقاري؛ صور المشروع، هوية المطور، نبذة الشركة.
-
The Saudi Export Development
The Saudi Export Development، موقع ووردبريس في مجال تنمية الصادرات؛ صور التجارة، تعريف الجهة، شرح النشاط.
-
Portal Talents
Portal Talents، موقع ووردبريس في مجال التوظيف عن بعد؛ اختيار المسار، الجهات الداعمة، شرح الخدمة.
-
Rassen
Rassen، موقع ووردبريس في مجال المحاماة؛ هوية المكتب، تعريف الشركة، الفريق.
-
أركان البيت
أركان البيت، موقع ووردبريس في مجال الإنشاءات والتصميم الداخلي؛ صور المساحات، المشروعات، تعريف الشركة.
-
لانا AI
لانا AI، موقع ووردبريس في مجال منصات تجربة الموظفين؛ عرض المنصة، المزايا، التواصل.
-
Vivaluxre
Vivaluxre، موقع ووردبريس في مجال الوساطة العقارية؛ البحث، بطاقات العقارات، تعريف الشركة.
دليل القرار
Classic أم Block أم Hybrid: قرار يُتخذ قبل أول ملف
ووردبريس يدعم الثلاثة وفق Theme Handbook الرسمي. الاختيار يعتمد على من سيحرر الموقع وكيف، لا على ما هو أحدث. أرشح واحدًا بعد معرفة فريقك ومحتواك.
| المعيار | Classic Theme | Block Theme | Hybrid |
|---|---|---|---|
| بنية القوالب | ملفات PHP وفق Template Hierarchy (single.php، archive.php) | قوالب HTML في templates/ وأجزاء في parts/ تُحرر من Site Editor | قوالب PHP مع دعم محرر البلوكات وملف theme.json |
| من يغير تخطيط الصفحة | المطور فقط | المحرر من Site Editor ضمن حدود theme.json | المطور للهيكل، المحرر لمحتوى الصفحة |
| الألوان والخطوط والمسافات | في CSS الثيم | في theme.json وتظهر في المحرر تلقائيًا | في theme.json مع CSS للمكونات المعقدة |
| يناسب | مواقع بصفحات ثابتة البنية (خدمات، أطباء، مشاريع) بحقول مخصصة | فرق نشر محتوى كثيرة التعديل تريد حرية ترتيب الأقسام | أغلب مواقع الشركات: ثبات القوالب مع حرية المحتوى |
| حقول مخصصة (ACF أو ما يعادلها) | طبيعي | ممكن عبر بلوكات مخصصة أو Block Bindings | طبيعي |
| بانٍ بصري (Elementor) | ممكن لكنه يضيف طبقة أصول | غير مناسب مع Site Editor | ممكن لصفحات محددة |
| ما أرشحه عادة | عند وجود أنواع محتوى كثيرة بحقول | عند فريق تحرير نشط ومحتوى تحريري | الخيار الأكثر شيوعًا في مشاريعي |
الهيكل والمكونات
ثيم مرتب يفصل الشكل عن الوظيفة ويحمّل ما يلزم فقط
أبدأ من ملف التصميم: أستخرج نظام الألوان والخطوط والمسافات إلى theme.json فيظهر في المحرر كما في الواجهة، ثم أحدد المكونات المتكررة (بطاقة، بطل، أسئلة، فريق) وأبنيها مرة واحدة كأنماط أو أجزاء قالب تُستخدم في كل الصفحات.
القاعدة التي لا أخالفها: الوظائف لا تُكتب في الثيم. أنواع المحتوى والحقول والتكاملات تعيش في إضافة مستقلة حتى لو غيرت الثيم يومًا، بقي محتواك ووظائفك. تفاصيل ذلك في تطوير الإضافات.
- تحميل مشروط: CSS وJS كل مكون يُحمّلان فقط في الصفحات التي تستخدمه
- خصائص CSS منطقية (inline-start/end) فيعمل التصميم بالعربية والإنجليزية من الملف نفسه
- نصوص الثيم قابلة للترجمة بدوال i18n ولا نصوص ثابتة في القوالب
- لا تعديل في ملفات قالب أب أو في نواة ووردبريس
تجربة تحرير المحتوى
المكوّن نفسه في ثلاث شاشات: التصميم، الكود، والمحرر
ما يراه المصمم في Figma يصبح مكونًا مبرمجًا، ثم يظهر للمحرر كنمط جاهز يملأ حقوله. بدّل بين الشاشات الثلاث لترى ما يتغير وما يثبت. الشاشات توضيحية وليست من مشروع بعينه.
ما أستخرجه من ملف التصميم
- التوكنات: ألوان، خطوط، مقاسات، مسافات، أنصاف أقطار الزوايا
- المكونات المتكررة وحالاتها (عادي، تمرير، تركيز، فارغ)
- نقاط التحول بين الموبايل والحاسوب، وسلوك RTL
- ما لم يُصمم بعد: صفحة 404، نتائج البحث، حالة «لا نتائج»
ما يحدث في الكود
- مكوّن واحد لبطاقة الخدمة يُستدعى من الأرشيف والرئيسية، فأي تعديل يظهر في المكانين
- كل مخرج يُهرَّب (escaping) وكل حقل يُقرأ من مصدر واحد
- الأصول تُسجَّل برقم إصدار وتُحمَّل شرطيًا
- الأسماء والبنية وفق WordPress Coding Standards حتى يستطيع مطور آخر متابعتها
ما يراه فريق التحرير
- أنماط جاهزة باسم مفهوم (بطل، خدمات، فريق) يدرجها بنقرة
- حقول محددة لكل نمط؛ لا تغيير للألوان أو المسافات من الصفحة
- المعاينة تطابق الواجهة لأن theme.json واحد للطرفين
- جلسة تدريب مسجلة على موقعه هو، وتوثيق لكل نمط وحقوله
معايير جودة الكود
ما أتحقق منه قبل أن أسمي الثيم جاهزًا
ليست قائمة تسويقية؛ هي بنود الفحص الفعلية قبل التسليم، وتُسلَّم نتائجها معك.
- Template Hierarchy مُحترمة: لا منطق شرطي ضخم في index.php بدل قوالب مخصصة
- كل مخرج مُهرَّب (esc_html, esc_attr, esc_url, wp_kses) وكل إدخال مُنقّى
- theme.json مصدر وحيد للتوكنات، وCSS المكونات لا يكرر قيمه
- لا تعديل في نواة ووردبريس ولا في قالب أب خارجي
- الأصول مسجلة بإصدار وتحميل مشروط، ولا مكتبات غير مستخدمة
- النصوص قابلة للترجمة بـ text domain واحد، والاتجاه RTL بخصائص منطقية
- وصولية أساسية: ترتيب عناوين صحيح، تركيز لوحة مفاتيح مرئي، تباين كافٍ، نصوص بديلة من الحقول
- الصور بأحجام مسجلة مناسبة وتحميل كسول أسفل الطية، والصورة الرئيسية بأولوية عالية
- اختبار المحرر: إدراج كل نمط، ملء كل حقل، حفظ، معاينة، نشر
- اختبار على PHP وووردبريس الإصدارين المستخدمين لديك مع تفعيل WP_DEBUG على التجريبي فقط
- لا أخطاء في سجل PHP ولا تحذيرات في وحدة تحكم المتصفح على القوالب الرئيسية
- ملف README داخل الثيم: البنية، الأنماط، الحقول، وكيفية إضافة مكون جديد
حالات استخدام
ثلاث حالات يتكرر فيها طلب الثيم المخصص
توصيف لأنواع الطلبات التي تصلني، لا لمشاريع بعينها.
- وكالة تصميم تسلّم Figma
الوكالة تصمم والعميل يريد تنفيذًا مطابقًا على ووردبريس. أعمل من ملف الوكالة مباشرة، وأعيد إليها ملاحظات على الحالات غير المصممة قبل البناء.
- شركة تنتقل من قالب متعدد الأغراض
الموقع يعمل لكنه ثقيل ومعقد التحرير. أبني ثيمًا على الهوية الحالية مع الحفاظ على المحتوى والروابط، بالتنسيق مع إعادة التصميم إن تغيرت البنية.
- منتج رقمي بهوية صارمة
فريق تسويق ينشر صفحات كثيرة ويريد أنماطًا محكومة. ثيم Hybrid أو Block مع theme.json وأنماط مغلقة على التوكنات.
التنفيذ والتسليم
من مراجعة ملف التصميم إلى حزمة ثيم موثقة
المدة تعتمد على عدد القوالب والمكونات واكتمال التصميم؛ تُذكر في النطاق المكتوب لمشروعك.
- مراجعة التصميم والنطاق
أفحص ملف التصميم وأحصي القوالب والمكونات والحالات الناقصة، وأحدد مع فريقك مسار التحرير. ينتهي بنطاق مكتوب وعرض سعر.
المخرج: قائمة قوالب ومكونات معتمدة وقرار Classic/Block/Hybrid - نظام التوكنات والمكونات
theme.json والمكونات الأساسية أولًا على نسخة تجريبية، تراجعها على الموبايل والحاسوب قبل بناء القوالب.
المخرج: مكتبة مكونات حية تراجعها بنفسك - قوالب الصفحات والأرشيف والمفرد
بناء القوالب وفق Template Hierarchy، وربط الحقول وأنماط المحرر، وتغطية الحالات الفارغة و404 والبحث.
المخرج: ثيم كامل على التجريبي بمحتوى حقيقي أو مؤقت واضح - اختبار الجودة والمحرر
قائمة الفحص أعلاه كاملة، واختبار إدراج الأنماط وملء الحقول من حساب محرر لا مدير.
المخرج: تقرير فحص موقّع - التسليم والتوثيق
حزمة الثيم مع README، جلسة تدريب مسجلة، وتفعيل على الموقع الحي مع نسخة احتياطية قبل التبديل.
المخرج: ثيم مفعّل وموثق ونسخة احتياطية
أسئلة شائعة
أسئلة قبل برمجة القالب
هل الثيم متوافق مع Gutenberg؟
هل يمكن استخدام Elementor مع الثيم؟
ما الفرق بين Child Theme والثيم المخصص؟
هل سيتأثر الموقع بتحديثات ووردبريس؟
هل يدعم الثيم تعدد اللغات؟
هل أستلم الكود وأملكه؟
أرسل ملف التصميم أو رابط موقعك الحالي وسأرد بقائمة القوالب والمكونات ونطاق
إن لم يكتمل التصميم بعد، أخبرني بما لديك؛ أراجعه وأقترح ما ينقص قبل أن يبدأ أي تنفيذ.