فى الدرس السابق، تعرفنا على كيفية البدء فى تقسيم الملفات، وتعرفنا على كيفية البدء فى ملف functions.php، وأيضًا ملف index.php، وفى هذا الدرس بإذن الله سنتعرف على كيفية برمجة الـHeader و الـFooter، وسأحاول بقدر الإمكان تغطية جميع المواضيع التي قد تواجهك فى برمجتهما -بإذن الله-، والآن لنبدأ.
كما قلنا فى الدرس السابق فإننا سنقوم فى ملف index.php بإضافة دالتين وهما get_header و get_footer، وكما قلنا وظيفتهما إستدعاء الـHeader والـFooter، ولكن كيف سنقوم نحن ببرمجتهما؟
ببساطة سنقوم بإنشاء ملف بجوار ملف الإندكس ونقوم بتسميته header.php، وسيقوم البرنامج بإستدعاء الشيفرات التي بداخل ملف header.php إلى مكان دالة get_header فى ملف index.php.
أى أن كل ما سنقوم بكتابته فى header.php سيمثل الجزء العلوي من القالب، والآن سنقوم ببعض الخطوات وهي كالتالي:
1- نسخ كود HTML للهيدر ووضعه فى ملف header.php
2- التعديل على الملف لجعله ديناميكيًا عبر إضافة بعض الدوال له.
فلنشرح الآن كل خطوة على حدى !
- الخطوة الأولى: ببساطة ستقوم بنسخ ملف html وملفات الـCSS ومجلد الصور الخاص بقالبك الذي قمت بتصميمه سابقًا لتحويله إلى قالب ووردبريس، ثم ستقوم بوضع تلك الملفات بجوار ملف header.php، بشرط أن تكون ملفات CSS للقالب فى مجلد مستقل يُدعي CSS، والصور أيضًا فى مجلد مستقل يٌدعى images !
ولتبسيط الصورة ستكون لدينا تلك القائمة من الملفات بداخل مجلد قالب الووردبريس:
index.php
header.php
design.html
style.css
/css
/images
حيث أن design.html هو الملف الذي يحتوى على أكواد الـHTML الخاص بالقالب الذي قمت بتصميمه مسبقًا (المُراد تحويله إلى ووردبريس)، ومجلد CSS يحتوى على ملفات الـCSS الخاصة بالقالب (بملف design.html)، أما مجلد images فهو يحتوى على الصورة الخاصة بالقالب (بملف design.html).header.php
design.html
style.css
/css
/images
نلاحظ أننا لدينا ملف يُدعى style.css ليس فيه أى اكواد CSS !، ولذلك سنحتاج إلى إستيراد محتوى ملفات مجلد CSS إلى هذا الملف، ولذلك سنقوم بملف style.css ونقوم بإدارج الملفات الموجودة داخل مجلد CSS؛ لأن تلك هي أولى خطوات التحويل من القالب العادي إلى قالب ووردبريس، وهي خطوة إستيراد أكواد السي اس اس.
فمثلاً إن كان عندى فى مجلد CSS ملف يُدعى master.css ، سأقوم بفتح ملف style.css وسأقوم بكتابة الجملة التالية:
@import url("css/master.css");
والآن نحن نجحنا فى أولى خطوات التحويل، وهي إستيراد ملفات الـCSS!ملحوظة: إذا كان يوجد أكثر من ملف بداخل مجلد CSS قم بإستيرادها بنفس الطريقة.
والآن سنقوم بفتح ملف design.html وسنقوم بتحديد كل الأكواد من اول فتح وسم HTML إلى نهاية الهيدر وهو الجزء العلوي والذي غالبًا سيحتوى على بيانات الميتا وقوائم افقية وعنوان الموقع إلخ إلخ إلخ، المهم أننا سنقوم بنسخ الكود الخاص بجزء الهيدر فقط، وسنقوم بوضعه بداخل ملف header.php.
الآن إذا قمت بحفظ الملفات، وقمت بتفعيل قالبك من لوحة تحكم الووردبريس ستجد أن ما قمت بوضعه فى ملف header.php قد ظهر فى قالبك !
-الخطوة الثانية:
والآن مهمتنا هي إستبدال بعض البيانات الموجودة فى كود الـHTML الموجود فى ملف header.php ببعض من الدوال الجاهزة فى الووردبريس لجعل الهيدر يعمل بشكل ديناميكي، فمثلاً بدلاً من ان يعرض اسم مُحدد، سيقوم بعرض اسم المدونة، وعندما يقوم المستخدم من لوحة تحكم الووردبريس بتغيير اسم المدونة سيتم عرض اسم المدونة الجديد !
لا تخف، فإنك لست بحاجة إلى خبرة عميقة فى الـPHP، فكل تلك المهمام ستقوم بها دوال بسيطة جدًا !!!
الآن سأشرح لك الدوال التى ستحتاجها فى الهيدر، وما عليك إلا وضعها فى مكانها المناسب فى header.php
- دالة language_attributes() وهي لوضع خواص لغة المدونة، ويتم وضعها بداخل وسم html كالمثال التالي:
>
- دالة bloginfo("charset") وهي لطباعة ترميز المدونة، ويتم وضعها كالمثال التالي:" />
- لعرض العنوان سنحتاج إلى شقين، الشق الأول دالة wp_title وسنقوم عن طريقها بتحديد الفواصل بين العنواين، ثم نقوم بتحديد ما إذا كان سيتم الطباعة فى العنوان أو لا، ثم سيتم تحديد مكان الفواصل على اليمين أو اليسار، ثم سنقوم بطباعة اسم المدونة، كما فى المثال التالي:مثلاً إذا كان المستخدم بداخل تدوينة او صفحةً ما بداخل المدونة، عن طريق wp_title سيتم عرض عنوان الصفحة او التدوينة؛ سيتم عرضها لأننا قمنا بإختيار True، أما إذا اختارنا False فمعناها اننا لن نقوم بطباعتها، ثم بعد ذلك ستجد علامة | على يمين عنوان الصفحة او التدوينة، وذلك لأننا اخترنا | كفاصلة، ثم اختارنا right ليتم وضع الفاصلة على يمين عنوان الصفحة او التدوينة، ولكن لماذا سيتم وضع تلك الفاصلة؟؟؟
ببساطة لأننا سنقوم بعدها بكتابة اسم المدونة، وقم كتبنا بالفعل اسم المدونة عبر دالة bloginfo والتي قمنا بكتابة name فى بارامترها، دائمًا ما تستخدم تلك الدالة فى عرض بيانات أساسية فى المدونة، ولكن بإختلاف قيمة البارامتر تختلف القيمة التى يتم طباعتها، فمثلاً إذا كانت القيمة name سيتم عرض اسم المدونة، اما اذا كانت القيمة charset سيتم عرض ترميز المدونة.
ملاحظة: دالة bloginfo مشابهة لدالة تُدعي get_bloginfo، ولكن الفرق أن bloginfo تقوم بطباعة البيانات، اما get_bloginfo تقوم بإسترجاع القيمة فقط دون طباعتها، فمثلاً إذا أردت عرض عنوان المدونة عبر get_bloginfo ستكتب التالي:
- لعرض وصف المدونة سنستخدم بارامتر description فى دالة bloginfo، كما فى المثال التالي:
بالنسبة للقوائم الأفقية مثل الصفحات والتصنيفات إلخ، والتي تكون غالبًا فى الهيدر سنتعرف على كيفية عملها بطريقة رائعة ويجهلها معظم المطوّرين، ولكن فى دروسٍ قادمة.
أما بالنسبة للفوتر، فببساطة سنقوم بعمل ملف جديد يُدعى footer.php، بجوار ملف header.php، لتصبح قائمة ملفاتنا كما بالشكل التالي:
index.php
header.php
footer.php
design.html
style.css
/css
/images
بعد إنشاء الملف، سنقوم بفتح ملف design.html، وسنقوم بنسخ جميع أكواد HTML الخاصة بالفووتر، ثم سنقوم بوضعها فى ملف footer.php، والآن لنبدأ بجعلها ديناميكية، تمامًا كما فعلنا مع الهيدر.header.php
footer.php
design.html
style.css
/css
/images
أعتقد أنك لن تحتاج فى الفوتر إلا معرفة كيفية طباعة رابط الصفحة الرئيسية للمدونة، وطباعة اسم المدونة، وهذا ما تعرفنا عليه فى الهيدر، أما بالنسبة لطباعة السنة الميلادية، فلا داعي إلا كتبابتها مباشرة، فيمكنك كتابة السطر التالي: