developer_modeتطوير الويب rss_feedووردبريس

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

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

خطوات مسار التعلم

100 الأساسيات

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

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

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

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

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

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

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

104 لكل واجهة نموذج خاص

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

105 Dynamic Tags

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

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

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

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

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

202 Color Palette

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

203 الأبعاد وعرض المحتوى

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

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

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

205 قسم Styles

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

206 ستايلات المكونات العامة

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

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

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

301 مكون حلقة الاستعلام

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

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

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

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

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

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

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

402 نموذج نتائج البحث

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

501 LWN Photographer – إنشاء القالب

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

502 LWN Photographer – قسم الهيدر

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

503 LWN Photographer – قسم البانر العلوي

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

504 LWN Photographer – قسم حول 1

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

505 LWN Photographer – قسم حول 2

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

506 LWN Photographer – قسم حول 3

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

507 LWN Photographer – قسم Portfolio

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

508 تحسينات بسيطة

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

509 LWN Photographer – قسم جدول الأسعار

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

510 LWN Photographer – قسم التواصل

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

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

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

معلومات المسار

تاريخ الإنشاء:
يونيو 28, 2024
تاريخ التحديث:
يونيو 30, 2024
عدد الخطوات:
37
المستوى:
مبتدىء
تحديثات المسار مستمرة
ملاحظات:
يفترض هذا المسار أن لديك معرفة بسيطة مسبقة حول برمجية ووردبريس.