شبكة تعلم مع ناو

خطوة بخطوة نحو الهدف

تيليجرام

مسار تعلم · تطوير الويب

قالب مكونات ووردبريس للمبتدئين

تعلم كيفية تطوير قوالب مكونات ووردبريس الجديدة بالخطوات مع توضيح كل جزئية جديدة بتطوير هذا النوع من القوالب.

  • 34 خطوة
  • 32 فيديو
  • المستوى: مبتدئ
  • يُحدَّث باستمرار
  • آخر تحديث: فبراير 2025
ابدأ المسار ←

خريطة المسار

  1. الأساسيات5 خطوات
  2. أساسيات ملف Theme.json6 خطوات
  3. حلقة الاستعلامخطوتان
  4. نماذج الواجهات المختلفة8 خطوات
  5. مشروع تطوير قالب مكونات ووردبريس من قالب HTML12 خطوة
  6. تطبيق تنسيقات مخصصةخطوة واحدة
  7. أنهيت المسارأحسنت، وصلت إلى النهاية

قبل أن تبدأ

يفترض هذا المسار أن لديك معرفة بسيطة مسبقة حول برمجية ووردبريس.

مصادر المسار

خطوات المسار

تقدمك في المسار

0 من 34 خطوة

0%

ابدأ المسار ←

علّم كل خطوة تنهيها، بأي ترتيب. يُحفظ تقدمك في هذا المتصفح.

100 الأساسيات

5 خطوات

البدء بمعرفة ما هو قالب مكونات ووردبرس وكيفية إنشاء نماذج جديدة واضافة محتوى ديناميكي

  1. 101 ما هو قالب مكونات ووردبريس؟ فيديو

    ما هو قالب مكونات ووردبريس؟ ما هي المكونات؟ كيفية تحرير قالب مكونات؟ كيفية تحرير المكون وخصائصه؟

  2. 102 نماذج ووردبريس Templates فيديو

    سنقوم بتصفح النماذج Templates المتاحة لنا في ووردبريس.

  3. 103 إنشاء أول قالب مكونات ووردبريس كود

    سنقوم بإنشاء أول قالب ووردبريس مكونات بملفاته الأساسية كملف index.html وملف style.css.

  4. 104 لكل واجهة نموذج خاص فيديو

    الحديث حول تراتبية نماذج الصفحات في ووردبريس وكيفية إنشاء نموذج archive ونموذج page.

  5. 105 Dynamic Tags فيديو

    اضافة المحتوى الديناميكي لنماذج واجهات ووردبريس.

200 أساسيات ملف Theme.json

6 خطوات

كل الأساسيات التي تحتاج أن تعرفها حول ملف Theme.json في قالب مكونات ووردبريس الجديد.

  1. 201 أساسيات ملف theme.json فيديو

    سنبدأ بإنشاء ملف theme.json وإضافة معلومات أجزاء القوالب له. سنبدأ بشرح ملفات JSON وفوائد ملف theme.json، بالإضافة إلى إصداره ومحتواه المتعلق بأجزاء القوالب. سنتناول كيفية إضافة جزء قالب جديد وتحديد الفوتر.

  2. 202 Color Palette فيديو

    نتناول إضافة الألوان في theme.json، بالإضافة إلى استخدام التدرجات اللونية. سنتطرق أيضًا إلى الخصائص المختلفة للألوان وكيفية تعديلها لتناسب احتياجات القالب.

  3. 203 الأبعاد وعرض المحتوى فيديو

    سنتعلم كيفية إضافة عرض ثابت لمحتوى الموقع باستخدام ملف theme.json. سنناقش كيفية تفعيل خاصية الأبعاد في المحرر، مثل الهوامش الداخلية والخارجية، وتباعد المكونات.

  4. 204 الخطوط في Theme.json فيديو

    سنبدأ بأساسيات تطوير قالب المكونات للمبتدئين، مع التركيز على إدارة الخطوط وخصائصها في ملف theme.json. سنشرح كيفية تعديل الخطوط باستخدام Typography في theme.json، وكيفية التحكم في الخطوط داخل المحرر. كما سنتطرق إلى تخصيص أحجام الخطوط، التسطير، التباعد بين الأحرف، وغيرها من الخصائص المهمة لتخصيص النصوص في القالب.

  5. 205 قسم Styles فيديو

    كيفية تغيير ستايل العناصر الأساسية في الموقع من خلال قسم Styles في Theme.json. أيضاً كيفية تغيير خصائص اللون والإطار في قسم Styles.

  6. 206 ستايلات المكونات العامة فيديو

    خاصية appearanceTools في theme.json تسمح بإضافة أدوات لتخصيص مظهر مكونات ووردبريس الافتراضية. يمكنك تعيين الإطار، ألوان الروابط، الأبعاد، و غيرها باستخدام إعدادات settings المتاحة. سنناقش كيفية تطبيق الستايلات العامة على المكونات (blocks) مثل pullquote، مع فكرة تخصيص ستايلات المكونات لتحسين المظهر العام.

300 حلقة الاستعلام

خطوتان

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

  1. 301 مكون حلقة الاستعلام فيديو

    سنتعلم كيفية إضافة حلقة الاستعلام لقالب index وتضمين الاستعلام من القالب. سنبدأ بنموذج index.html، ثم نتعرف على مكون حلقة الاستعلام (Query Loop). سنناقش كيفية تحديد عدد المقالات المعروضة وكيفية توليد مقالات عشوائية. في النهاية، سنتعلم كيفية تضمين الاستعلام في القالب بشكل صحيح.

  2. 302 المزيد حول حلقة الاستعلام فيديو

    سنتعلم كيفية إنشاء قالب للتدوينات (Post Template) وإضافة مكون لعرض المقالات (Post Block). سنناقش كيفية عرض المقالات كشبكة وعرض تصنيفات المقالة، بالإضافة إلى عرض رسالة لعدم وجود نتائج وتطبيق ميزة تعدد الصفحات. سنضيف أيضًا وسوم المقالة ونضمن نقل جميع التغييرات إلى ملف index لجعل القالب جاهزًا للاستخدام.

400 نماذج الواجهات المختلفة

8 خطوات

سنقوم باضافة نماذج الصفحات المختلفة لقالب ووردبريس.

  1. 401 نموذج الأرشيفات فيديو

    سنتعلم كيفية إضافة نماذج الأرشيفات للقالب وإضافة عنوان للأرشيف. سنبدأ بشرح نموذج الأرشيفات (archive.html) وكيفية تخصيصه. سنضيف عنوانًا للأرشيف ونشرح كيفية عرض أرشيفات الوسم والتصنيف بشكل منظم. في النهاية، سنتأكد من إتمام التعديلات لضمان جاهزية القالب للاستخدام.

  2. 402 نموذج نتائج البحث فيديو

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

  3. 403 نموذج الصفحة الأمامية ونموذج المقالات فيديو

    سنقوم بإضافة نماذج الصفحة الرئيسية والمقالات للقالب ونوضح الفرق بينهما. سنبدأ بتعيين الصفحة الرئيسية وإنشاء نموذج front-page.html لعرض محتوى الصفحة الرئيسية بشكل مخصص. ثم سننشئ نموذج home.html لعرض مقالات المدونة بشكل متكامل. في النهاية، سنضمن جاهزية القالب للاستخدام بشكل فعال

  4. 404 نموذج الصفحة الأحادية فيديو

    سنقوم بعرض سريع لنموذج الصفحة الأحادية مثل صفحة المنشور وصفحة الصفحة. سنشرح مفهوم الصفحة الأحادية واستخدامها لعرض محتوى فردي مثل المقالات والصفحات. سنناقش كيفية تخصيص نماذج الصفحة الأحادية.

  5. 405 إعادة تشكيل جزئية الهيدر فيديو

    سنقوم بإعادة تصميم شكل الهيدر وترتيب بعض الستايلات على الصفحة. سنبدأ بتحرير وتغيير شكل الهيدر، واستخدام أداة "Generate Palette" لإضافة مجموعة ألوان مخصصة في theme.json. سنقوم بتعديل الستايلات في theme.json، وتنظيم مكونات الصفحة مثل البحث وعرض المحتوى. سننقل التغييرات إلى الملف لضمان التنسيق الدائم.

  6. 406 قسم الفوتر واعادة ترتيب النموذج الأحادي فيديو

    سنقوم بتعديل شكل الفوتر وتخطيط المحتوى لصفحات النماذج الأحادية مثل صفحات single و page. سنبدأ بتعديل شكل الفوتر وإضافة مكون وسائل التواصل الاجتماعي. سننقل محتوى الفوتر إلى الملف بشكل منظم ونقوم بتغيير ستايل المحتوى على الصفحات. سنقوم أيضًا بتعديل ستايل ملف page لتحسين تجربة المستخدم العامة.

  7. 407 إعادة ترتيب الصفحة الرئيسية والمدونة فيديو

    سنقوم بإعادة تغيير شكل الصفحة الرئيسية والمدونة. سنبدأ بتعديل نموذج الصفحة الرئيسية، مع إضافة قسم للخدمات وعرض أحدث المقالات. سنقوم أيضًا بإضافة مكون للفاصل بين الأقسام، وسنعدل نموذج front-page ونموذج home لضمان تحقيق التصميم المطلوب وتحسين تجربة المستخدم.

  8. 408 بعض التعديلات والملخص فيديو

    سنقوم ببعض التعديلات ونلخص ما وصلنا إليه من معلومات لهذه اللحظة

500 مشروع تطوير قالب مكونات ووردبريس من قالب HTML

12 خطوة

  1. 500 نظرة عامة على القسم رابط · كود

    سنبدأ مشروع جديد بتحويل قالب HTML لقالب مكونات ووردبريس بشكل سهل وبالخطوات

  2. 501 LWN Photographer – إنشاء القالب فيديو

    سنقوم بالبدء بمشروع تحويل صفحة HTML إلى قالب ووردبريس. سنغطي إنشاء القالب، الهيدر، عرض المحتوى، وإعدادات theme.json بالتفصيل

  3. 502 LWN Photographer – قسم الهيدر فيديو

    سنقوم بترتيب مكونات الهيدر العامة، بدءًا من اسم الموقع وصولاً إلى تعديل شكل مكونات القائمة والأيقونات. سنقوم أيضًا بإضافة هامش داخلي للهيدر وتعديل شكل مكونات site-title و social و navigation-link، بالإضافة إلى تغيير شكل navigation-link current. وفي النهاية، سنقوم بنقل محتويات الهيدر إلى الملف

  4. 503 LWN Photographer – قسم البانر العلوي فيديو

    تعلّم كيفية استخدام مكون الغلاف (Cover) وإنشاء نمط (Pattern) مخصص، وإضافة الأنماط في functions.php في تطوير قوالب ووردبريس.

  5. 504 LWN Photographer – قسم حول 1 فيديو

    تعلم كيفية تعديل مكون الغلاف، وإنشاء قسم "About Us" بتنسيق أعمدة، وإضافة محتويات مخصصة، مع الكود المتاح على GitHub.

  6. 505 LWN Photographer – قسم حول 2 فيديو

    تم تعديل مكون الغلاف، مع محاذاة أعمدة محتوى قسم "About Us" لليمين وترتيب المحتوى بشكل أفضل.

  7. 506 LWN Photographer – قسم حول 3 فيديو

    تم إضافة نمط لقسم "About Us" وتطبيق ستايل مخصص على العنوان.

  8. 507 LWN Photographer – قسم Portfolio فيديو

    تعلّم كيفية إنشاء قسم الصور مع إضافة زر، وتباعد، وتأثير hover، وتحسين الاستجابة، ثم حفظ القسم كنمط في ملف مخصص.

  9. 508 تحسينات بسيطة فيديو

    شمل تحسين تباعد المكونات في التنقل، وتعديل قسم "About Us"، وعرض القسم النهائي بعد التعديلات.

  10. 509 LWN Photographer – قسم جدول الأسعار فيديو

    إنشاء قسم جدول الأسعار، إضافة محتويات الأعمدة، تعديل شكل القائمة، وإكمال أعمدة الجداول، مع حفظ القسم كنمط.

  11. 510 LWN Photographer – قسم التواصل فيديو

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

  12. 511 LWN Photographer – قسم الفوتر ونهاية المشروع فيديو

    إنشاء قسم الفوتر بإضافة المحتوى والروابط، ومناقشة الختام واستنتاجات التطوير، وتوجيهات للتحسينات المستقبلية في تطوير القالب.

600 تطبيق تنسيقات مخصصة

خطوة واحدة

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

  1. 601 استعراض وإنشاء تنسيقات إضافية فيديو

    نقوم بإضافة تنسيقات إضافية للموقع ككل من خلال مجلد styles وخاصية تنسيقات المحرر.