فى الدرس مفصل السابق، تعرفنا على كيفية البدء فى تقسيم الملفات، وتعرفنا على كيفية البدء فى ملف functions.php، وأيضًا ملف index.php، وفى هذا الدرس مفصل بإذن الله سنتعرف على كيفية برمجة الـHeader و الـFooter، وسأحاول بقدر الإمكان تغطية جميع المواضيع التي قد تواجهك فى برمجتهما -بإذن الله-، والآن لنبدأ.
كما قلنا فى الدرس مفصل السابق فإننا سنقوم فى ملف index.php بإضافة دالتين وهما get_header و get_footer، وكما قلنا وظيفتهما إستدعاء الـHeader والـFooter، ولكن كيف سنقوم نحن ببرمجتهما؟
ببساطة سنقوم بإنشاء ملف بجوار ملف الإندكس ونقوم بتسميته header.php، وسيقوم البرنامج بإستدعاء الشيفرات التي بداخل ملف header.php إلى مكان دالة get_header فى ملف index.php.
أى أن كل ما سنقوم بكتابته فى header.php سيمثل الجزء العلوي من القالب template، والآن سنقوم ببعض الخطوات وهي كالتالي:
1- نسخ كود code HTML للهيدر ووضعه فى ملف header.php
2- التعديل على الملف لجعله ديناميكيًا عبر إضافة بعض الدوال له.
فلنشرح طريقة الآن كل خطوة على حدى !
- الخطوة الأولى: ببساطة ستقوم بنسخ ملف html وملفات الـCSS ومجلد الصور الخاص بقالب templateك الذي قمت بتصميمه سابقًا لتحويله إلى قالب template ووردبريس، ثم ستقوم بوضع تلك الملفات بجوار ملف header.php، بشرط أن تكون ملفات CSS للقالب template فى مجلد مستقل يُدعي CSS، والصور أيضًا فى مجلد مستقل يٌدعى images !
ولتبسيط الصورة ستكون لدينا تلك القائمة من الملفات بداخل مجلد قالب template الووردبريس: رمز PHP:
<code style="white-space:nowrap"> <code> index.php
header.php
design.html
style.css
/css
/images
</code> </code>
حيث أن design.html هو الملف الذي يحتوى على أكواد الـHTML الخاص بالقالب template الذي قمت بتصميمه مسبقًا (المُراد تحويله إلى ووردبريس)، ومجلد CSS يحتوى على ملفات الـCSS الخاصة بالقالب template (بملف design.html)، أما مجلد images فهو يحتوى على الصورة الخاصة بالقالب template (بملف design.html).
نلاحظ أننا لدينا ملف يُدعى style.css ليس فيه أى اكواد CSS !، ولذلك سنحتاج إلى إستيراد محتوى ملفات مجلد CSS إلى هذا الملف، ولذلك سنقوم بملف style.css ونقوم بإدارج الملفات الموجودة داخل مجلد CSS؛ لأن تلك هي أولى خطوات التحويل من القالب template العادي إلى قالب template ووردبريس، وهي خطوة إستيراد أكواد السي اس اس.
فمثلاً إن كان عندى فى مجلد CSS ملف يُدعى master.css ، سأقوم بفتح ملف style.css وسأقوم بكتابة الجملة joomla التالية:
رمز PHP:
<code style="white-space:nowrap"> <code> @import url("css/master.css");
</code> </code>
والآن نحن نجحنا فى أولى خطوات التحويل، وهي إستيراد ملفات الـCSS!
ملحوظة: إذا كان يوجد أكثر من ملف بداخل مجلد CSS قم بإستيرادها بنفس الطريقة.
والآن سنقوم بفتح ملف design.html وسنقوم بتحديد كل الأكواد من اول فتح وسم HTML إلى نهاية الهيدر header وهو الجزء العلوي والذي غالبًا سيحتوى على بيانات الميتا وقوائم افقية وعنوان الموقع إلخ إلخ إلخ، المهم أننا سنقوم بنسخ الكود code الخاص بجزء الهيدر header فقط، وسنقوم بوضعه بداخل ملف header.php.
الآن إذا قمت بحفظ الملفات، وقمت بتفعيل قالب templateك من لوحة تحكم الووردبريس ستجد أن ما قمت بوضعه فى ملف header.php قد ظهر فى قالب templateك !
-الخطوة الثانية:
والآن مهمتنا هي إستبدال بعض البيانات الموجودة فى كود code الـHTML الموجود فى ملف header.php ببعض من الدوال الجاهزة فى الووردبريس لجعل الهيدر header يعمل بشكل ديناميكي، فمثلاً بدلاً من ان يعرض اسم مُحدد، سيقوم بعرض اسم المدونة blog، وعندما يقوم المستخدم من لوحة تحكم الووردبريس بتغيير اسم المدونة blog سيتم عرض اسم المدونة blog الجديد !
لا تخف، فإنك لست بحاجة إلى خبرة عميقة فى الـPHP، فكل تلك المهمام ستقوم بها دوال بسيطة جدًا !!!
الآن سأشرح طريقة لك الدوال التى ستحتاجها فى الهيدر header، وما عليك إلا وضعها فى مكانها المناسب فى header.php
- دالة language_attributes() وهي لوضع خواص لغة المدونة blog، ويتم وضعها بداخل وسم html كالمثال التالي:
رمز PHP:
<code style="white-space:nowrap"> <code> <html <?php language_attributes(); ?> > </code> </code>
- دالة bloginfo("charset"وهي لطباعة ترميز المدونة blog، ويتم وضعها كالمثال التالي:
رمز PHP:
<code style="white-space:nowrap"> <code> <meta charset="<?php bloginfo("charset"); ?>" /> </code> </code>
- لعرض العنوان سنحتاج إلى شقين، الشق الأول دالة wp_title وسنقوم عن طريقها بتحديد الفواصل بين العنواين، ثم نقوم بتحديد ما إذا كان سيتم الطباعة فى العنوان أو لا، ثم سيتم تحديد مكان الفواصل على اليمين أو اليسار، ثم سنقوم بطباعة اسم المدونة blog، كما فى المثال التالي:
رمز PHP:
<code style="white-space:nowrap"> <code> <title><?php wp_title('|', true, 'right')?><?php bloginfo('name'); ?></title> </code> </code>
حيث أن | هي الفاصلة ، و true معناها سيتم الطباعة، و right معناها ان الفواصل ستكون على الجهة اليُمنى، ولكن لنفهم عمل كل البارامترات تلك ونتائجها بشكل تفصيلي.
مثلاً إذا كان المستخدم بداخل تدوينة او صفحةً ما بداخل المدونة blog، عن طريق wp_title سيتم عرض عنوان الصفحة او التدوينة؛ سيتم عرضها لأننا قمنا بإختيار True، أما إذا اختارنا False فمعناها اننا لن نقوم بطباعتها، ثم بعد ذلك ستجد علامة | على يمين عنوان الصفحة او التدوينة، وذلك لأننا اخترنا | كفاصلة، ثم اختارنا right ليتم وضع الفاصلة على يمين عنوان الصفحة او التدوينة، ولكن لماذا سيتم وضع تلك الفاصلة؟؟؟
ببساطة لأننا سنقوم بعدها بكتابة اسم المدونة blog، وقم كتبنا بالفعل اسم المدونة blog عبر دالة bloginfo والتي قمنا بكتابة name فى بارامترها، دائمًا ما تستخدم تلك الدالة فى عرض بيانات أساسية فى المدونة blog، ولكن بإختلاف قيمة البارامتر تختلف القيمة التى يتم طباعتها، فمثلاً إذا كانت القيمة name سيتم عرض اسم المدونة blog، اما اذا كانت القيمة charset سيتم عرض ترميز المدونة blog.
ملاحظة: دالة bloginfo مشابهة لدالة تُدعي get_bloginfo، ولكن الفرق أن bloginfo تقوم بطباعة البيانات، اما get_bloginfo تقوم بإسترجاع القيمة فقط دون طباعتها، فمثلاً إذا أردت عرض عنوان المدونة blog عبر get_bloginfo ستكتب التالي:
رمز PHP:
<code style="white-space:nowrap"> <code> <title><?php wp_title('|', true, 'right')?><?php echo get_bloginfo('name'); ?></title> </code> </code>
مع العلم أن دالة get_bloginfo تستخدم نفس بارامترات دالة bloginfo بدون أى تغييرات !
- لعرض وصف المدونة blog سنستخدم بارامتر description فى دالة bloginfo، كما فى المثال التالي:
رمز PHP:
<code style="white-space:nowrap"> <code> <meta name="description" content="<?php bloginfo('description'); ?>" /> </code> </code>
- بالنسبة للربط مع ملفات الـCSS، كما قلنا سابقًا اننا قمنا بإستيراد جميع اكواد الـCSS بداخل ملف style.css الموجود بجوار header.php، والآن فى header.php سنقوم بإدراج ملف style.css والذي بالدور بداخله جميع الأكواد بعد عملية الإستيراد.
رمز PHP:
<code style="white-space:nowrap"> <code> <link rel="stylesheet" href="style.css" />
</code> </code>
ولكن تلافيًا للأخطاء، سنقوم بجعل هذا الربط بشكل ديناميكي وذلك عبر استخدام بارامتر stylesheet_url الموجود فى دالة bloginfo وسيتم عبر الدالة طباعة style.css مباشرةً، كما فى المثال التالي:
رمز PHP:
<code style="white-space:nowrap"> <code> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" /> </code> </code>
- بالنسبة لمسار ملف الصور، بدلاً من كتابتها مباشرةً images/pic.png، يمكنك كتابة الثابت IMAGES الذي قمنا بتعريفه فى ملف functions.php مكان كلمة images فى المسار، كالتالي:
رمز PHP:
<code style="white-space:nowrap"> <code> <link rel="shortcut icon" href="<?php echo IMAGES; ?>/icons/favicon.ico" /> </code> </code>
- قبل نهاية وسم head مباشرةً، يجب أن نضيف دالة wp_head وهي دالة مهمة جدًا، لأن الكثير من إضافات الووردبريس تقوم بإضافة بعض التعريفات فى هذا الجزء، فحتى يكون قالب templateك متوافقًا مع تلك الإضافات يجب عليك إضافة دالة wp_head كالتالي: رمز PHP:
<code style="white-space:nowrap"> <code> <?php wp_head(); ?>
</head> </code> </code>
- بالنسبة لطباعة رابط المدونة blog، تستطيع القيام بذلك عبر طباعة دالة home_url، فمثلاً إذا كان لديك مكانًا فى الهيدر header لوضع اسم المدونة blog، والاسم يكون عبارة عن رابط للصفحة الرئيسية للمدونة blog، يمكنك ببساطة القيام بتلك العلمية عبر التالي: رمز PHP:
<code style="white-space:nowrap"> <code> <a href="<?php echo home_url();?>">
<h1>
<?php bloginfo('name'); ?>
</h1>
</a> </code> </code>
بالنسبة للقوائم الأفقية مثل الصفحات والتصنيفات إلخ، والتي تكون غالبًا فى الهيدر header سنتعرف على كيفية عملها بطريقة رائعة ويجهلها معظم المطوّرين، ولكن فى دروسٍ قادمة.
أما بالنسبة للفوتر، فببساطة سنقوم بعمل ملف جديد يُدعى footer.php، بجوار ملف header.php، لتصبح قائمة ملفاتنا كما بالشكل التالي: رمز PHP:
<code style="white-space:nowrap"> <code> index.php
header.php
footer.php
design.html
style.css
/css
/images
</code> </code>
بعد إنشاء الملف، سنقوم بفتح ملف design.html، وسنقوم بنسخ جميع أكواد HTML الخاصة بالفووتر، ثم سنقوم بوضعها فى ملف footer.php، والآن لنبدأ بجعلها ديناميكية، تمامًا كما فعلنا مع الهيدر header.
أعتقد أنك لن تحتاج فى الفوتر إلا معرفة كيفية طباعة رابط الصفحة الرئيسية للمدونة blog، وطباعة اسم المدونة blog، وهذا ما تعرفنا عليه فى الهيدر header، أما بالنسبة لطباعة السنة الميلادية، فلا داعي إلا كتبابتها مباشرة، فيمكنك كتابة السطر التالي:
رمز PHP:
<code style="white-space:nowrap"> <code> <?php echo date('Y'); ?> </code> </code>
وسيقوم هذا السطر بطباعة السنة الميلادية مباشرةً دون الحاجة إلى تجديدها كل سنة، وفى الأخير عليك بوضع دالة wp_footer قبل نهاية وسم body مباشرةً؛ وذلك لأن أيضًا توجد بعض الإضافات تقوم ببعض التعريفات فى الجزء السٌفلي من المدونة blog، ولذلك يجب كتابة تلك الدالة لكي يكون قالب templateك متوافقًا مع الإضافات، كما فى المثال التالي: رمز PHP:
<code style="white-space:nowrap"> <code> <?php wp_footer(); ?>
</body>
</html> </code> </code>
ملاحظة: إذا كان لديك فى الفووتر بعض القوائم، سنتعرف على كيفية برمجتها فى الدروس القادمة -بإذن الله-.
المصدر: شرح طريقة تصميم قوالب ووردبريس -الجزء الثاني- - مدونة blog المبرمج
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
رد مع اقتباس
