الدرس الخامس - القوالب في Wordpress ومكوناتها القسم الأول

بداية أخواني قبل أن ندخل في غمار التفاصيل الرجاء أخذ العلم أن هذا الدرس كبير جداً لكن سأحاول قدر الإمكان تبسيطه من خلال تقسيمه لعدة أقسام لكي يكون الشرح وافي

مشاهدة نتائج الإستطلاع: مارأيكم بالشرح؟
جيد 1 100.00%
متوسط 0 0%
سيء 0 0%
المصوتون: 1. أنت لم تصوت في هذا الإستطلاع

  #1  
شرح الدرس الخامس - القوالب في Wordpress ومكوناتها القسم الأول


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

الآن ماهو القالب؟
القالب هو عبارة عن ملف مكتوب بشكل عام بلغة PHP يعمل على توليد الصفحات بناء على شكل معين مخزن ضمن الكود البرمجي لديه قابل للتوسع ليشمل إضافات مستقلة خاصة به ( قوائم – عارض اخباري – عارض صور – عارض فيديو ...) أو محدد بعدة ملفات عامة ليولد أقسام الصفحة بشكل معين.

ماهي الأقسام الأساسية في القالب؟
لن أشرح ماهي الصفحة الخاصة بالويب لكن القالب هنا له تقريباً نفس الوظائف العامة أي:
رأس – محتوى الصفحة – ذيل الصفحة – القوائم الجانبية

أولاً: الرأس (Header)
هو القسم الذي يظهر في أعلى الصفحة لدينا على المدونة يمكن أن يحوي عنصرين كحد أدنى وعدة عناصر غير محددة العدد كأمتداد لعمله الفارق الأساسي أنه يتبع لقواعد المبرمج الذي يصمم القالب بنفسه لن ندخل بعد في هذا القسم لكن لنتعرف عليه بشكل عام على قالب المدونة الافتراضي لدينا (هنا تجدر الملاحظة القالب الجديد على الاصدار الجديد ليس كباقي الاصدارات default – classic انما اصبح المطورون يعتمدون twentyten – twentyeleven – twentytwelve)

ثانياً: المحتوى الخاص بالصفحة (content)
هو القسم الذي تظهر فيه التدوينات بشكل عام أو آخر المواضيع المكتوبة التي تكون لب الصفحة بشكل عام وتتغير حسب المطلوب أو الموضوع من قبل مدير المدونة نفسه أو الأعضاء على العموم بشكل عام هذا المحتوى الأكثر مساحة عامة في الموقع لدينا على المدونة

ثالثاً: القوائم الجانبية (side bar)
هو القسم الذي يشغل الحيز الأيمن أو الأيسر من صفحة المدونة لدينا يحوي عادة على قوائم أو إعلانات أو حتى اختصارات للوصول لمواضيع محددة لدينا

رابعاً: ذيل الصفحة (footer)
من الاسم يمكن الاستنتاج معنى المكون الذي هو آخر قسم سفلي من صفحة المدونة لدينا ويحتوي على أقسام محددة عادة للوصول لأعلى روابط موجودة لدينا أو روابط خارجية بشكل عام كما يمكن أن نضمن ضمنها عدة إضافات حسب اختيارنا
على العموم انظروا الشكل الأساسي في الصورة لكي تتوضح لكم صورة عامة عن مكون القالب لدينا:

الشكل 1
الدرس الخامس - القوالب في Wordpress ومكوناتها القسم الأول attachment.php?attachmentid=11953&stc=1&d=1361007353

هو الشكل المعتمد على الصفحات الغير عربية

الشكل 2
الدرس الخامس - القوالب في Wordpress ومكوناتها القسم الأول attachment.php?attachmentid=11954&stc=1&d=1361002645

هو الشكل المعتمد على الصفحات العربية

على العموم كيف يقوم Wordpress بتوليد القالب لدينا؟
الجواب بسيط يقوم بالقراءة من الملفات التالية:
1- الملف الرئيسي index.php
2- الملف الخاص برأس الصفحة header.php
3- الملف الخاص بالقوائم الجانبية sidebar.php
4- الملف الخاص بالإعدادات functions.php
5- الملف الخاص بذيل الصفحة footer.php
6- وأخيراً ملف الستايل style.css

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

على العموم لنعد لكيفية التوليد يقوم Wordpress بقراءة الملفات البرمجية يعمل على تنفيذ الأوامر تباعاً من كل ملف ثم يتابع العمل طبعاً مع الحفاظ على الآلية من الملف الرئيسي للأعدادات functions.php حيث يقوم بالقراءة منها ثم يعتمد المطلوب لأماكن توضع العناصر من كل قسم عن طريق الملف الخاص به مثال:
ليعلم كيف يولد رأس الصفحة يذهب أولاً لملف الإعدادات يشاهد تعليمات قاعدة البيانات المطلوبة ثم يعود وينفذها ضمن الملف الخاص بتوضع رأس الصفحة header.php وبعد ذلك يولد صفحة مصمتة HTML على شاشة المستعرض.

على العموم لنرى الآن ما هو المسار المعتمد لكل القوالب لدينا:
Wp-content/theme/اسم القالب
على العموم لن أغفل القوالب الموسعة بشكل عام لا لكن سوف أذكرها في نهاية الدرس حيث نكون قد فهمنا المبدأ الرئيسي ولن أبدأ بشرحها هنا لكي لا نبتعد عن الهدف الرئيسي لدينا وهو معرفة القالب نفسه.

الآن لندخل في تفاصيل كل ملف على حدة ونفهمها بشكل عام وبعدها بعون الله ننتقل لكيفية عمل قالبنا الخاص البسيط لا المعقد طبعاً. لكن تجدر الملاحظة قبل أن نكمل أن القارئ يجب أن تكون له الأسس التالية لفهم الموضوع دون أن ندخل في جدل أسئلة لا منطقية:

الأساس الأول:

فهم كيفية عمل كود HTML بشكل عام حيث لن أشرح ماهو <div> أو <p> مثلاً يمكنكم الرجوع للمرجع الرئيسي لهذه الوسوم من خلال الرابط
Download32294
أو
Download22835

الأساس الثاني:
فهم كيفية توليد ستايل محدد لعنصر ضمن الصفحة مثال ملف style.css حيث أيضاً لن أشرح الآلية هنا أنما العمل الأساسي وربطه فقط. يمكنكم العثور على مزيد من التفاصيل من الرابطين السابقين أيضاً.

الأساس الثالث:

فكرة عامة عن لغة php حيث أيضاً قد نواجه تعليمات خاصة بها لن أدخل بشرح التعليمة وأنما ماهي الفائدة منها دون ذكر التفاصيل مثال:
كود:
<?php echo ‘’ ;?>
لن أشرح هذا أنما ماهو الموجود بين الأقواس ولماذا السبب انها لغة برمجة PHP ليس المطلوب منكم اعزائي تعلم اللغة وأنما كيفية التعديل والاستفادة من المدونة لديكم وعندما نتكلم عن أي لغة برمجة سواء في هذه الدروس او لاحقاً انصحكم دوماً بعدم التعديل على الكود الا كما هو مشروح بالضبط بسبب هذه المشكلة حيث كلغة برمجة لن أشرح لما لا يعمل الكود لدي أو لماذا PHP لا تفعل الكود التالي أو تدعمه ونخرج نهائياً عن الهدف من الدروس الذي هو الوصول لأعلى مستوى للعمل مع Wordpress دون أن نكون مبرمجين بالاصل.
نعود الآن لدرسنا لنشاهد آلية عمل الملفات العامة بشكل تفصيلي:

الملف الخاص برأس الصفحة header.php

يحوي الملف على الأمور الأساسية التالية:
1- اسم الصفحة التي نشاهدها على المستعرض حيث يقوم Wordpress باسترجاع قيمة الاسم عن طريق wp_title من قاعدة البيانات الموجود لديه ضمن functions.php في الدليل الرئيسي ويترجم هذا المتحول للقيمة المطلوبة لنأخذ مثال بسيط:
نقوم حالياً بمشاهدة موضوع (الموضوع الأول) يقوم الملف header بمشاهدة المتغير wp_title على انه عنوان الموضوع ثم يقوم تلقائياً بتوليد صفحة HTML يوجد بداخلها العنوان نفسه أي (الموضوع الأول) طبعاً لا يكون من الضروري عمل جميع القوالب بهذه الطريقة لكن هذا مثال عن آلية عمل المتغير السابق حيث المتغير الأساسي هو:
كود:
$title .= get_bloginfo( 'name' );
حيث name هو القيمة الموجودة ضمن قاعدة البيانات لدينا.
وليس wp_title إنما يقوم الأجراء باستعادة قيمة المتغير نفسها من ملف functions.php ويترجمها لنص.
2- الترميز المستعمل بالصفحات حيث يخزن هذا الملف ترميز جميع الصفحات الموجودة لدينا وغالباً ما يستعمل utf-8 كترميز افتراضي متوافق مع كل اللغات لكنه يتبع أيضاً للمتغير الموجود ضمن bloginfo
3- عدد العناصر التي ستظهر في الجزء العلوي وتشمل القوائم, اسم الموقع الرئيسي, وصف الموقع, البانر الإعلاني, لوجو الموقع إن وجد.
4- توضع العناصر بالترتيب المناسب حيث يقوم header.php بعمل التوضع بشكله الصحيح ضمن رأس الصفحة وعند الرغبة في أي تعديل في هذا الجزء نعدل عامة العناصر المرتبطة ضمنه لتناسب ترتيبنا الخاص

الملف الخاص بإدراج عناصر الصفحة الكلية من رأس ومحتوى وحتى ذيل الصفحة هو index.php وظيفته:

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

الملف الخاص بالقوائم الجانبية sidebar.php وظيفته:

1- حفظ توضع العناصر ضمن الطرف الأيمن للصفحة أو الطرف الأيسر ويمكن عادة أن يترجم التوضع لكلا الموضوعين معاً
2- يحدد عرض وارتفاع القوائم الجانبية وعناصرها حيث يقوم بوضعها ضمن حاوي أساسي لكي لا تتداخل مع عناصر المحتوى ويساعد على تنظيم شكل القالب الرئيسي.

الملف الخاص بذيل الصفحة footer.php ووظيفته:

1- يقوم بوضع العناصر الخاصة بذيل الصفحة ضمن حاوي أساسي يمنع الاختلاط مع القوائم الجانبية أو محتوى الصفحة.
2- يعمل على وضع الحقوق الخاصة بالموقع كما تعلمنا في درسنا السابق
3- قد يحوي على عدة عناصر تتعلق بشركاء الموقع أو روابط خارجية

الملف الخاص بالستايل العام style.css وظيفته:

1- يعمل على ترجمة توضع العناصر ضمن الصفحة مع حفظ الأبعاد الأساسية أما بالبكسل أو النسبة المئوية حسب المطلوب لكي يتيح تصغير تكبير عنصر أو حتى ازاحته لمكان غير عام كتداخل المحتوى مع الرأس الخاص في الصفحة كإضافة عارض صور يجمع بين العنصرين
2- يقوم بعمل مؤثرات خاصة تتعلق بالصور الخطوط ألوان الخطوط وأشكالها وحتى التأثير في اخفاء عنصر أثناء عبور المؤشر أو تغير لونه على سبيل المثال.

الملف الخاص بالأعدادات لكل عناصر القالب لدينا functions.php ووظيفته:

1- يخاطب جميع الملفات السابقة ويعطيها القواعد الرئيسية لكيفية تنسيق العمل فيما بينا عن طريق تعليمات برمجية php تضمن سلامة الشكل العام للقالب وعدم تأثير العناصر على بعضها البعض من حيث الوظيفة
2- يحوي على تعليمات برمجية مخصصة لقولبة الحاويات الخاصة في كل ملف وتعديل المتغيرات الرئيسية ضمنها كما في مثال الرأس الخاص بالصفحة سابقاً.
3- يحوي على الإدراجات الخاصة بالتخاطب مع ملفات خارجية مثل jquery.js ومكاتب المؤثرات الخاصة التي تكون عادة بجافا سكربت حيث يترجمها ويرسل بعدها النتيجة المطلوبة لكل ملف بحسب متطلباته دون الحاجة لأدراج هذه الإدراجات العديد من المرات ضمن كل ملف على حدة.
4- يعمل على اختصار التوليد الخاص بالقالب حيث يختصر الذاكرة ومساحة المعالجة الخاصة بالمدونة لدينا على الاستضافة لأنه لا يكرر نفس المرحلة العديد من المرات كما لو أردنا عملها بشكل متكرر ضمن كل ملف على حدة أي الوظيفة الرئيسية له التنظيم واختصار الموارد.
5- يعمل على تخصيص لوحة التحكم الخاصة بالمدير حيث يمكن إدراج عناصر جديدة للإدارة لنفس القالب ضمن هذه اللوحة وعادة ما يقوم هذا الملف بهذه الوظيفة للتخاطب مع Wordpress عن كيفية عمل هذه الوظائف ضمن لوحة تحكم الإدارة الخاصة بالقالب أو الإضافات الفرعية للقالب.
6- يحوي على طريقة عمل التخزين المؤقت (cach) مبسط خاص بالقالب نفسه حيث لا يفرض على الزائر المشاهد لصفحة القالب بإعادة تحميل هذا العنصر إنما يقوم بمخاطبة المستعرض ليخزن بيانات يتم استعادتها عن التعديل فقط على العنصر ولا يتم تحميلها فوراً كل مرة يقوم الزائر بزيارة الموقع مما يزيد سرعة تحميل المدونة لدينا ضمن هذا القالب.

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

الاســـم:	شكل1.png‏
المشاهدات:	469
الحجـــم:	4.9 كيلوبايت
الرقم:	11953   اضغط على الصورة لعرض أكبر

الاســـم:	شكل2.png‏
المشاهدات:	473
الحجـــم:	4.9 كيلوبايت
الرقم:	11954  

التعديل الأخير تم بواسطة hosam.kyali ; 2013-02-16 الساعة 12:49 PM
اقتباس
  #2  
افتراضي رد: الدرس الخامس - القوالب في Wordpress ومكوناتها القسم الأول

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

الف شكر لك اخوي ومتابعه لك ..
اقتباس
  #3  
افتراضي رد: الدرس الخامس - القوالب في Wordpress ومكوناتها القسم الأول

بارك الله فيك وزادك علماً ،،

متابع معكم للنهاية ياغالى

واتمنى الاخوان يستفيدون من تواجدك بطرح أى استفسارات مباشرة بعد الدروس

اقتباس
  #4  
افتراضي رد: الدرس الخامس - القوالب في Wordpress ومكوناتها القسم الأول

جزاك الله كل خير على الدرس الرائع

كنت اتمنى درس مبسط اسهل من ذلك ولكن الموضوع كبير وعايزله قعدة :d

سيتم قرآة كافة تفاصيل المقال قريبا باذن الله
اقتباس
  #5  
افتراضي رد: الدرس الخامس - القوالب في Wordpress ومكوناتها القسم الأول

مشكور اخى الكريم
درس رائع
فى انتظار المزيد من ابداعاتك
اقتباس
  #6  
افتراضي رد: الدرس الخامس - القوالب في Wordpress ومكوناتها القسم الأول

جميل جدا.. بارك الله فيك
اقتباس
  #7  
افتراضي رد: الدرس الخامس - القوالب في Wordpress ومكوناتها القسم الأول

السلام عليكم

يعطك العافية استاذ حسام


على الابداع المتواصل


وشرح جميل جدا ,, وحلو كتييييير


وننتظر الدرس القادم بعون الله


للأمام


محمد swaedpal
اقتباس

الكلمات الدلالية (Tags)
الأول, الخامس, الدرس, القسم, القوالب, wordpress, ومكوناتها


أدوات الموضوع إبحث في الموضوع
إبحث في الموضوع:

البحث المتقدم
انواع عرض الموضوع تقييم هذا الموضوع
تقييم هذا الموضوع:

الانتقال السريع

مواضيع ذات صلة
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
الدرس الأول - طريقة تحميل وتنصيب Wordpress مع الميزات hosam.kyali دورة ووردبريس WordPress 12 2013-12-27 11:03 PM
الدرس الخامس - القوالب في Wordpress ومكوناتها القسم الثاني hosam.kyali دورة ووردبريس WordPress 3 2013-03-09 01:56 AM
الدرس الرابع - نزع الحقوق من Wordpress ومن جميع القوالب hosam.kyali دورة ووردبريس WordPress 12 2013-02-21 01:03 AM
[درس] الدرس الأول من الدورة vb الدرس في تنصيب النسخة vb LION HAERT تطوير منتديات vBulletin 3 0 2013-02-02 03:37 PM
هاك حركه حلوه للصندوق الماسي الخامس بالرد السريع بدون تعديل القوالب قلب الايمان تطوير منتديات vBulletin 3.7 وما قبل 10 2009-03-07 12:48 AM


الساعة المعتمدة بتوقيت جرينتش +3 . الساعة الآن 05:50 AM.

جميع الحقوق محفوظة لـ الدعم العربي التطويري | مدعوم بواسطة فبلتن ®

Your Avatar

تسجيل الخروج غير مسجل

هل أنت متأكد برغبتك في الخروج من المنتدى؟ تسجيل الخروج