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

مارأيكم بالشرح؟

  • متوسط

    الأصوات: 0 0.0%
  • سيء

    الأصوات: 0 0.0%

  • مجموع المصوتين
    1

hosam.kyali

:: مسؤول :: , :: وملقى دورة احتراف الووردبريس ::
Coder/Designer
24 يناير 2013
33
4
0
41
سوريا - مصر
بداية أخواني قبل أن ندخل في غمار التفاصيل الرجاء أخذ العلم أن هذا الدرس كبير جداً لكن سأحاول قدر الإمكان تبسيطه من خلال تقسيمه لعدة أقسام لكي يكون الشرح وافي بالإضافة لن أدخل في التفاصيل حتى القسم الثاني من الدورة أما حالياً سأشرح ما هو القالب ( الستايل) كيفية العمل معه وما هي المجلدات والملفات المستعملة بشكل عام ( ليس مخصص) وكيفية الاستفادة من كل فرع من هذه الملفات على حدة ووظيفته العامة.

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

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

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

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

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

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

الشكل 1
attachment.php


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

الشكل 2
attachment.php


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

على العموم كيف يقوم 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> مثلاً يمكنكم الرجوع للمرجع الرئيسي لهذه الوسوم من خلال الرابط
www.w3.org
أو
http://www.w3schools.com/html/default.asp

الأساس الثاني:
فهم كيفية توليد ستايل محدد لعنصر ضمن الصفحة مثال ملف 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
    شكل1.png
    4.9 KB · المشاهدات: 674
  • شكل2.png
    شكل2.png
    4.9 KB · المشاهدات: 650
التعديل الأخير:

جوري الورد

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

الف شكر لك اخوي ومتابعه لك ..
 

WebCraker

العبد الفقير إلى الله
طاقم الإدارة
9 مارس 2008
5,645
50
48
Egypt
support-ar.com
بارك الله فيك وزادك علماً ،،

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

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

 

c0der

:: Coder & Designer ::
طاقم الإدارة
Coder/Designer
17 فبراير 2009
68
1
8
جزاك الله كل خير على الدرس الرائع

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

سيتم قرآة كافة تفاصيل المقال قريبا باذن الله
 

7aduta.com

:: صاحب شركة استضافة ::
7 يناير 2013
15
0
0
مشكور اخى الكريم
درس رائع
فى انتظار المزيد من ابداعاتك