كما قلنا فى الدرس السابق فإننا سنقوم فى ملف 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 كالمثال التالي:
<html <?php language_attributes(); ?> >
- دالة bloginfo("charset") وهي لطباعة ترميز المدونة، ويتم وضعها كالمثال التالي:
<meta charset="<?php bloginfo("charset"); ?>" />
- لعرض العنوان سنحتاج إلى شقين، الشق الأول دالة wp_title وسنقوم عن طريقها بتحديد الفواصل بين العنواين، ثم نقوم بتحديد ما إذا كان سيتم الطباعة فى العنوان أو لا، ثم سيتم تحديد مكان الفواصل على اليمين أو اليسار، ثم سنقوم بطباعة اسم المدونة، كما فى المثال التالي:
<title><?php wp_title('|', true, 'right')?><?php bloginfo('name'); ?></title>
حيث أن | هي الفاصلة ، و true معناها سيتم الطباعة، و right معناها ان الفواصل ستكون على الجهة اليُمنى، ولكن لنفهم عمل كل البارامترات تلك ونتائجها بشكل تفصيلي.مثلاً إذا كان المستخدم بداخل تدوينة او صفحةً ما بداخل المدونة، عن طريق wp_title سيتم عرض عنوان الصفحة او التدوينة؛ سيتم عرضها لأننا قمنا بإختيار True، أما إذا اختارنا False فمعناها اننا لن نقوم بطباعتها، ثم بعد ذلك ستجد علامة | على يمين عنوان الصفحة او التدوينة، وذلك لأننا اخترنا | كفاصلة، ثم اختارنا right ليتم وضع الفاصلة على يمين عنوان الصفحة او التدوينة، ولكن لماذا سيتم وضع تلك الفاصلة؟؟؟
ببساطة لأننا سنقوم بعدها بكتابة اسم المدونة، وقم كتبنا بالفعل اسم المدونة عبر دالة bloginfo والتي قمنا بكتابة name فى بارامترها، دائمًا ما تستخدم تلك الدالة فى عرض بيانات أساسية فى المدونة، ولكن بإختلاف قيمة البارامتر تختلف القيمة التى يتم طباعتها، فمثلاً إذا كانت القيمة name سيتم عرض اسم المدونة، اما اذا كانت القيمة charset سيتم عرض ترميز المدونة.
ملاحظة: دالة bloginfo مشابهة لدالة تُدعي get_bloginfo، ولكن الفرق أن bloginfo تقوم بطباعة البيانات، اما get_bloginfo تقوم بإسترجاع القيمة فقط دون طباعتها، فمثلاً إذا أردت عرض عنوان المدونة عبر get_bloginfo ستكتب التالي:
<title><?php wp_title('|', true, 'right')?><?php echo get_bloginfo('name'); ?></title>
مع العلم أن دالة get_bloginfo تستخدم نفس بارامترات دالة bloginfo بدون أى تغييرات !- لعرض وصف المدونة سنستخدم بارامتر description فى دالة bloginfo، كما فى المثال التالي:
<meta name="description" content="<?php bloginfo('description'); ?>" />
- بالنسبة للربط مع ملفات الـCSS، كما قلنا سابقًا اننا قمنا بإستيراد جميع اكواد الـCSS بداخل ملف style.css الموجود بجوار header.php، والآن فى header.php سنقوم بإدراج ملف style.css والذي بالدور بداخله جميع الأكواد بعد عملية الإستيراد.
<link rel="stylesheet" href="style.css" />
ولكن تلافيًا للأخطاء، سنقوم بجعل هذا الربط بشكل ديناميكي وذلك عبر استخدام بارامتر stylesheet_url الموجود فى دالة bloginfo وسيتم عبر الدالة طباعة style.css مباشرةً، كما فى المثال التالي:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
- بالنسبة لمسار ملف الصور، بدلاً من كتابتها مباشرةً images/pic.png، يمكنك كتابة الثابت IMAGES الذي قمنا بتعريفه فى ملف functions.php مكان كلمة images فى المسار، كالتالي:
<link rel="shortcut icon" href="<?php echo IMAGES; ?>/icons/favicon.ico" />
- قبل نهاية وسم head مباشرةً، يجب أن نضيف دالة wp_head وهي دالة مهمة جدًا، لأن الكثير من إضافات الووردبريس تقوم بإضافة بعض التعريفات فى هذا الجزء، فحتى يكون قالبك متوافقًا مع تلك الإضافات يجب عليك إضافة دالة wp_head كالتالي:
<?php wp_head(); ?>
</head>
- بالنسبة لطباعة رابط المدونة، تستطيع القيام بذلك عبر طباعة دالة home_url، فمثلاً إذا كان لديك مكانًا فى الهيدر لوضع اسم المدونة، والاسم يكون عبارة عن رابط للصفحة الرئيسية للمدونة، يمكنك ببساطة القيام بتلك العلمية عبر التالي:</head>
<a href="<?php echo home_url();?>">
<h1>
<?php bloginfo('name'); ?>
</h1>
</a>
بالنسبة للقوائم الأفقية مثل الصفحات والتصنيفات إلخ، والتي تكون غالبًا فى الهيدر سنتعرف على كيفية عملها بطريقة رائعة ويجهلها معظم المطوّرين، ولكن فى دروسٍ قادمة.<h1>
<?php bloginfo('name'); ?>
</h1>
</a>
أما بالنسبة للفوتر، فببساطة سنقوم بعمل ملف جديد يُدعى 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
أعتقد أنك لن تحتاج فى الفوتر إلا معرفة كيفية طباعة رابط الصفحة الرئيسية للمدونة، وطباعة اسم المدونة، وهذا ما تعرفنا عليه فى الهيدر، أما بالنسبة لطباعة السنة الميلادية، فلا داعي إلا كتبابتها مباشرة، فيمكنك كتابة السطر التالي:
<?php echo date('Y'); ?>
وسيقوم هذا السطر بطباعة السنة الميلادية مباشرةً دون الحاجة إلى تجديدها كل سنة، وفى الأخير عليك بوضع دالة wp_footer قبل نهاية وسم body مباشرةً؛ وذلك لأن أيضًا توجد بعض الإضافات تقوم ببعض التعريفات فى الجزء السٌفلي من المدونة، ولذلك يجب كتابة تلك الدالة لكي يكون قالبك متوافقًا مع الإضافات، كما فى المثال التالي:
<?php wp_footer(); ?>
</body>
</html>
ملاحظة: إذا كان لديك فى الفووتر بعض القوائم، سنتعرف على كيفية برمجتها فى الدروس القادمة -بإذن الله-.</body>
</html>
الله ينور عليك فى انتظار الدرس القادم :)
ردحذف