رأس الصفحة في قوالب ووردبريس

دورة قوالب ووردبريس: رأس الصفحة

30 يونيو 2009

رأس الصفحة في قوالب ووردبريس السلام عليكم ورحمة الله تعالى وبركاته، آخر موضوع في الدورة كان قبل أسبوع تقريبا، وسبب تأخري في طرح هذا الموضوع وعكة صحية ألمت بي فطال أمدها، فالحمد لله على نعمائه.
نستمر اليوم في موضوع نستهل به الشق الثاني لدورة تصميم قوالب ووردبريس، وبه نبدأ تكويد القالب بآمرات ووردبريس، وننطلق من رأس الصفحة، وما سبق أن تعرفنا عليه في موضوع “ماذا تعرف عن html؟”، سنبدأ الآن في التعامل مع بعض الأكواد بلغة البرمجة php، وأنصح بشدة بمتابعة دورة php في موقع عالم التقنية، لأنها ستسهل لك الطريق في عالم تطوير القوالب إذا لم تكن لديك خلفية في هذه اللغة.

1. آلية عمل قوالب ووردبريس

أعود للتذكير بما ذكرناه في موضوع “نظرة شاملة على بنية قوالب ووردبريس“، حيث ذكرنا أن كل قالب يمكن ان يتكون فقط من ملفي index.php و style.css وهذا ما سنعمل علي بداية قبل أن نقوم بتقسيم الملف:

2. ملف style.css

ملف style.css بالإضافة إلى أنه يحتوي خصائص القالب من حيث الشكل والألوان وغيرها، تستخدمه ووردبريس ليتضمن معلومات تعريفية عن القالب، عنوانه ومؤلفه ورابط لموقعه إن وجد… هذه المعلومات يتم تضمينها بين علامتي الملاحظات في css في أول الملف، وهذا نموذج من القالب الإفتراضي:

/*
Theme Name: WordPress Default
Theme URI: http://wordpress.org/
Description: The default WordPress theme based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
Version: 1.6
Author: Michael Heilemann
Author URI: http://binarybonsai.com/
Tags: blue, custom header, fixed width, two columns, widgets
 
	Kubrick v1.5
	 http://binarybonsai.com/kubrick/
 
	This theme was designed and built by Michael Heilemann,
	whose blog you will find at http://binarybonsai.com/
 
	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
 
*/

هذه المعلومات هي التي تظهر أسفل القالب، في لوحة التحكم

ظهور معلومات القالب في لوحة التحكم من خلال ملف style.css

سنعود للملف فيما بعد لتحديد خصائص الصفحة، وإلى ذلك الحين قم بإنشاء مجلد جديد في مجلد القوالب في خادمك المحلي وأنشئ في ملف style.css وأكتب فيه معلومات قالبك.

3. ملف index.php

ذكرنا في السابق أن كل صفحة Html يجب أن تتوفر على الوسوم الأساسية html, head, body وهي التي تحدد هيكلة الصفحة، ثم نحدد في هذه الأوسمة ترميز الصفحة واتجاهها وعنوانها ونقوم بربطها بملف التنسيق، وهذا ما سنقوم به في هذا الموضوع، لكن بطريقة ووردبريس.

1. سطر نوع الوثيقة DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ذكرنا أهمية هذا السطر في موضوع سابق، ولا يوجد أي تغيير في قوالب ووردبريس، أنشئ ملف index.php في مجلد القالب الذي أنشأته قبل قليل، ثم غير ترميزه إلى utf-8 بدون توقيع Bom وأدرج فيه سطر نوع الوثيقة.

2. تحديد اتجاه الصفحة ولغتها في وسم html

في ملف html العادي قمنا بتعريف اللغة العربية واتجاه من اليمين إلى اليسار بالسطر التالي:

<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="ar">

سيختلف الأمر قليلا في ووردبريس، حيث سيقوم بتحديد اللغة والإتجاه تلقائيا حسب نسخة ووردبريس، وليتم ذلك نستخدم آمرة من آمرات ووردبريس:

<?php language_attributes(); ?>

ستكون بداية وسم html إذن بالشكل التالي:

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?> >

هذه الآمرة سيكون نتاجها بالنسبة للووردبريس العربي في المتصفح كما يلي:

<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="ar">

وللوردبريس الإنجليزي كما يلي:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">

نلاحظ إذن أن آمرات ووردبريس، هي دوال php تعيد إنتاج أكواد html وتقوم بإظهارها على المتصفح، بعض آمرات الووردبريس يمكن تخصيصها بوضع خيارات، أي أن آمرة واحدة يمكنها إنتاج أكواد html مختلفة حسب الخيارات المسندة إليها، وسنرى أمثلة على ذلك لاحقا.

3. تعريف صداقة الروابط في وسم head:

في عالم التدوين انتشر بكثرة التشبيك والربط بين المواقع والمدونات، وارتبط مع هذا الإنتشار ظهور معيار جديد يسمى معيار صداقة الروابط، أغلب قوالب ووردبريس ترتبط بهذا المعيار لتحديد قيمة الروابط التي تضعها داخل موضوع معين، هل هي لمدونات صديقة مثلا أم لموقع آخر لنفس المدون وهكذا، يتم الربط مع هذا المعيار في وسم head بالشكل التالي:

<head profile="http://gmpg.org/xfn/11">

4. تحديد ترميز الصفحة باستخدام الوسم meta:

ذكرنا أيضا أن ترميز الصفحة يتم تحديده داخل وسم head باستخدام الوسم meta بالشكل التالي:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

هنا أيضا نستخدم آمرات ووردبريس لتحديد content و charset بشكل تلقائي، نكتب السطر التالي مباشرة بعد بداية وسم Head

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

آمرة bloginfo هي إحدى آمرات ووردبريس التي يمكن تخصيص عملها بتغيير خيارها، في السطر السابق نلاحظ أنه تم استخدامها مرتين بشكل مختلف، في المرة الأولى لتحديد قيمة content باستخدام الخيار ‘html_type’ ثم لتحديد قيمة الترميز charset باستخدام الخيار ‘charset’.

5. تحديد عنوان الصفحة باستخدام الوسم title

في صفحات html العادية نقوم بتحديد عنوان الصفحة، بين وسمي Title بشكل عادي، مثلا:

<title>دورة قوالب ووردبريس | مدونة ووردبريس عربية أخرى</title>

بالنسبة للمواقيع الديناميكية، أي التي يتم تغير محتواه، كالتي تستخدم ووردبريس، يكون العنوان أيضا متغيرا حسب موقع الزائر في الموقع، في التصنيفات أو في الرئيسية أو في صفحة المواضيع، وذلك أيضا لتحسين ظهور الموقع في محركات البحث، ويتخدم ووردبريس لهذا الغرض ما يسمى الآمرات الشرطية conditional tags، نكتب وسم title كما يلي

	<title><?php
        if ( is_single() ) { single_post_title(); }       
        elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); }
        elseif ( is_page() ) { single_post_title(''); }
        elseif ( is_search() ) { bloginfo('name'); print ' | نتائج البحث عن ' . wp_specialchars($s);}
        elseif ( is_404() ) { bloginfo('name'); print ' | غير موجود'; }
        else { bloginfo('name'); wp_title('|');}
	?></title>

يمكنك مراجعة عمل if في لغة php من الموقع الرسمي وبخصوص الآمرات الشرطية سيكون لها شرح كامل في موضوع لاحق إن شاء الله.

إذن في حالة كنا في موضوع منفرد سنظهر عنواه، باستخدام الآمرة single_post_title:

if ( is_single() ) { single_post_title(); }

في حالة كانت الصفحة الرئيسية، نظهر عنوان الموقع، ووصفه باستخدام الآمرة bloginfo مع خياري name و description

elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); }

في حالة الصفحة نستخدم نفس آمرة الموضوع ونظهر عنوان الصفحة:

elseif ( is_page() ) { single_post_title(''); }

في حالة صفحة نتائج البحث نظهر عنوان الموقع، ثم المصطلح أو الكلمات التي يبحث عنها الزائر باستخدام الدالة wp_specialchars مع إعطائها متغير البحث s كخيار:

elseif ( is_search() ) { bloginfo('name'); print ' | نتائج البحث عن ' . wp_specialchars($s);}

في حالة صفحة الخطأ، نظهر رسالة الخطأ كعنوان

elseif ( is_404() ) { bloginfo('name'); print ' | غير موجود'; }

ثم نحدد ظهور عنوان الموقع مع استخدام الآمرة wp_title التي ترجع عنوانا مخصصا، حسب موقع الزائر، ترجع تاريخا في صفحة الأرشيف، وعنوان الموضوع في المواضيع المنفردة.

else { bloginfo('name'); wp_title('|');}

نلاحظ أن آمرات ووردبريس دائما تكون داخل php.

6. ربط الصفحة بملف التنسيق باستخدام الوسم Link

كما ذكرنا في الجزء الثاني من الموضوع السابق، لربط صفحة html بملف تنسيق css خارجي نستعم الوسم link كما يلي:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

في قالب ووردبريس نستخدم الآمرة السابقة bloginfo مع خيار stylesheet_url لتحديد مسار ملف التنسيق، سيصبح سطر الإستيراد كما يلي:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

7. ربط القالب مع الخلاصات والتعقيبات

ليتم ربط القالب مع الخلاصات في الموقع نستخدم سطرين ودائما مع الآمرة bloginfo مع خياري rss2_url و atom_url كما يلي:

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> خلاصات RSS" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> خلاصات Atom" href="<?php bloginfo('atom_url'); ?>" />

ثم نهيئ القالب للتعقيبات باستخدام الخيار pingback_url مع الآمرة bloginfo:

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

8. الدالة wp_head

قبل أن نغلق وسم head بقي شيء واحد لإضافته، وهو ضروري جدا لإدراج بعض الأوامر والملفات الضرورية لعمل بعض الإضافات، إنها الدالة wp_head ونقوم بإضافتها ثم نغلق وسم head:

	<?php wp_head(); ?>
</head>

تكون حصيلتنا النهائية لرأس الصفحة كما يلي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); /*will show: lang="ar" xmlns="http://www.w3.org/1999/xhtml" dir="rtl"*/?>>
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 
	<title><?php
        if ( is_single() ) { single_post_title(); }       
        elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); }
        elseif ( is_page() ) { single_post_title(''); }
        elseif ( is_search() ) { bloginfo('name'); print ' | نتائج البحث عن ' . wp_specialchars($s);}
        elseif ( is_404() ) { bloginfo('name'); print ' | غير موجود'; }
        else { bloginfo('name'); wp_title('|');}
	?></title>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
 
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> خلاصات RSS" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> خلاصات Atom" href="<?php bloginfo('atom_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 
	<?php wp_head(); ?>
</head>

إنتهينا من رأس الأمر وبقي سنامه، وإلى الموضوع القادم بإذن الله تعالى، أتمنى الإطلاع على ملف header.php في القالب النموذجي، ومقارنته بدرسنا لليوم.

مواضيع مشابهة:

الاوسمة: css, xhtml, دورة قوالب ووردبريس, قوالب ووردبريس, ووردبريس

23 تعليق على “دورة قوالب ووردبريس: رأس الصفحة”
الحمد لله على سلامتك

بواسطة الأباتشي في يونيو 30, 2009
السلام عليكم ورحمة الله تعالى وبركاته..
عودة موفقة أخي عمران، وأبعد الله عنك كل مكروه.. مأجور إن شاء الله..
درس قيم منك أخي، ونحن في انتظار القادم إن شاء الله..
مني لك أرق تحية..

بواسطة عبد الهادي في يونيو 30, 2009
و عليكم السلام و رحمة الله و بركاته ،
الحمد لله على السلامة أستاذ عمران، اشتقنا لحظورك ..
جاري متابعة الدرس ، تسلم يديك !!

سلامي ،،

بواسطة زكريـا ، في يونيو 30, 2009
جزاك الله خيرا اخي الحبيب و اهلا بعودتك
و االحمد لله على سلامتك

بواسطة eng mk في يوليو 1, 2009
جزاك الله خيراً.

بواسطة المعتصم بالله في يوليو 1, 2009
الحمد لله على سلامتك اخي

درس جميل وسهل

الله يجزاك الجنة

بواسطة انس في يوليو 1, 2009
الحمد لله على سلامتك اخي عمران
اشكرك من كل قلبي على كل هذا العطاء
درس مفصل ومبسط رائع قد وفقت في في طرحك له
أعانك الله على التتمة

بواسطة صلاح الدين في يوليو 1, 2009
ما شاء الله ,,
درس قيم بحق !!
جزاك الله خيراً وأطعمك طيراً

بواسطة Mazen في يوليو 1, 2009
جزاك الله خير .. لن أجد أبلغ من هذه الكلمات

بواسطة احمد في يوليو 2, 2009
ألف ألف ألف ألف حمدا لله على سلامتك يا معلمنا الغالى

بواسطة علاء في يوليو 2, 2009
درس رائع بكل المقاييس !! …

حزاك الله كل خير على عملك هذا

بواسطة Hussein في يوليو 2, 2009
سلامات

درس بسيط ومفيد

بواسطة ميّـاسي في يوليو 3, 2009
تم التطبيق

في ميزان حسناتك بإذن الله

بواسطة sunlight في يوليو 3, 2009
لي عودة للتعليق على الدرس
لكن من جد أقلقتنا عليك أخي عمران ، الحمدلله على سلامتك .. وإن شاء الله طهور .

بواسطة مدونة الصقر في يوليو 4, 2009
ممتاز جدا

بواسطة Saheem Adullah في يوليو 6, 2009
السلام عليكم
شكرا على الدوره الاكثر من رائعه
لكن اريد الاستفسار عن جملة تحديد اللغه
<html xmlns=”http://www.w3.org/1999/xhtml” >
هل هذي الجملة تنفع للملف ذات الامتداد .php
والسؤال الثاني
انك قلت اثناء الدوره انها تحدد الغه العربية اذا كان الوردبريس عربي
كيف يكون الورد بريس عربي
وشكرا

بواسطة التفاؤل في يوليو 7, 2009
مشكور أخي الكريم
وأسأل الله أن يرزقك الصحة والعافية والبركة في العلم والجسم

عزيزي
طلب بسيط ..
جيد لو تكرمنا وتضع هذا الدرس وبقية الدروس في التصنيف هذا
http://wpaon.com/?tag=wp-theme-design-serie

وأسأل الله أن يفتح لك أبواب رحمته

بواسطة الايجابي في يوليو 8, 2009
شكرا جزيلا شرح موفق إن شاء الله

بواسطة aboaljod في يوليو 8, 2009
الحمدلله على سلامتك اخوي عمران..

وجزاك الله خير على هالشرح الواضح..

موفق بإذن الله..

بواسطة M!sS roo7 alm!sk في يوليو 9, 2009
شكرا على الشرح الوافي

يعطيك الف عافيه يارب

ننتظر الدروس القادة بأذن الله

تحياتي

بواسطة مدونة قنديل في يوليو 10, 2009
الحمدلله اللذي شفاك.
ننتضر الدرس الثادم بإذن الله أكمل بارك الله فيك.

بواسطة سعدالدين في يوليو 21, 2009
أحم أحم
وين الغيبه
تعبنا من هالراس
مافي يد والصدر
أي والله
عسى المانع خير
يارب أنك ما عرست
قودباااي

بواسطة Sarah Rose في يوليو 30, 2009
ننتظر الدروس القادمة
^_^

بواسطة alnassre في سبتمبر 20, 2009

ووردبريس باون

دورة قوالب ووردبريس: رأس الصفحة

1. آلية عمل قوالب ووردبريس

2. ملف style.css

3. ملف index.php

1. سطر نوع الوثيقة DOCTYPE

2. تحديد اتجاه الصفحة ولغتها في وسم html

3. تعريف صداقة الروابط في وسم head:

4. تحديد ترميز الصفحة باستخدام الوسم meta:

5. تحديد عنوان الصفحة باستخدام الوسم title

6. ربط الصفحة بملف التنسيق باستخدام الوسم Link

7. ربط القالب مع الخلاصات والتعقيبات

8. الدالة wp_head

23 تعليق على “دورة قوالب ووردبريس: رأس الصفحة”

ارسال تعليق

أقسام الموقع

أرشيف شهري

سحابة الأوسمة

أحدث التعليقات

أحدث المواضيع

صفحات اخرى

تدوينات عشوائية