أطلق عبدالملك الثاري اليوم موقع لمتابعة التحديثات الجديدة من المصادر العربية التي تتكلم عن ووردبريس ويقول عبدالملك بحسب ما كتب في موقع عالم التقنية :

“في ضل تطور نظام ووردبريس عالمياً وعملياً ووجود “جهود رائعة” لابد أن تتابع عربياً من منتديات ومدونات وغيرها وذالك لأهم ما طرح فيها من تحديثات جديدة مع تجدد في طرحها وتوسع مصادرها فإنه لابد أن يكون هناك مصدراً واحداً لمتابعة هذه التحديثات الجديدة الخاصة بنظام المدونات وإدارة المحتوى ووردبريس, وهنا أنطلق “تحديثات ووردبريس العربية” وذالك بأبسط ما يمكن أن يكون متاحاً للجميع فرصة التجديد وتوفير الوقت والجهد حيث يمكنك متابعة “المميز” في أخبار وتحديثات ووردبريس وذالك من خلال الموقع مباشرة, أو من خلال أحد خدمات المتابعة سواء كان تويتر أو فيس بوك أو من خلال الخلاصات RSS.”

يمكنك المشاركة في تحديثات الروابط من خلال إرسال رسالة إلى البريد arabwp@gmail.com لإضافتك كعضو مشارك لتتمكن من إضافة الروابط مباشرة دون اي صعوبه او حتى تأكيد أعتماد للروابط.

أهم التغييرات التي حصلت في الإصدار الجديد :

• A fix for the Trackback Denial-of-Service attack that is currently being seen.
• Removal of areas within the code where php code in variables was evaluated.
• Switched the file upload functionality to be whitelisted for all users including Admins.
• Retiring of the two importers of Tag data from old plugins.

يستحسن الترقية لهذا الإصدار للحصول على أفضل حماية ..

وإذا كنت تعتقد بأن مدونتك تعرضت لإستغلال أحد الثغرات السابقة .. وتريد التأكد من أمان المدونة بعد الترقية … يمكنك تركيب إضافة ” ماسح ثغرات ووردبريس ” .
الإضافة السابقة تقوم بمسح وفحص للمدونة والتأكد من خلوها من الثغرات ..

يمكن تحميل الإصدار 2.8.5 المعرّب من منتدى ووردبريس العرب على الرابط التالي :
http://www.ar-wp.com/t15743.html

المصدر

لكن في الإصدار 2.9 ستكون هذه الميزة رسمية وشيء أساسي في الووردبريس ويمكن استدعائها داخل التصميم بالدالة the_post_image() وفيما يلي صور للميزة في صفحة إضافة تدوينة

ويمكن إستدعاء الدالة على الطريقة التالية :

<div class="entry">
    <?php the_post_image(); ?>
    <?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

كما أنه يمكن اضافة بارمتر للدالة للتحكم في الصورة التي تظهر من حيث دقتها على سبيل المثال:

the_post_image(); // الإفتراضي - سيظهر الصورة المصغرة
the_post_image('thumbnail'); // صورة مصغرة
the_post_image('medium'); // دقة متوسطة

بعد ذلك يمكن التحكم في مكان الصورة من خلال HTML في قالب عرض التدوينة
وستظهر الصورة في قالب ووردبريس الإفتراضي كم يلي:

المصدر

ما هذا الجنون؟!

ما أعرفه هو أنه عند طلب استرجاع كلمة المرور، يقوم وردبريس أولا بإرسال رسالة بها رابط لتأكيد الطلب، قبل أن يتم تغيير كلمة المرور. تأكدت من هذا فوجدت الأمر صحيحا. فكيف حدث أن وصلتني رسالة بكلمة مرور جديدة دون طلب؟ افترضت أنها حالة جنون مؤقتة وتجاهلت الأمر.

لكن هذا الصباح صدر تحديث جديد لوردبريس (2.8.4)، لسد ثغرة أمنية تسمح للمخترقين بإعادة تعيين كلمات المرور لحسابات الأدمن في وردبريس. المشكلة ليست خطيرة إذ لا تسمح بالاختراق، لكنها مزعجة إذا كنت هدفا لهجمة وعليك تغيير كلمة المرور بعد كل فترة.

المزعج أيضا إجبارية تحديث وردبريس بعد كل فترة قصيرة.. لكن لا مفر.

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

بكل بساطة لكى تقوم بإعداد هذا الأرشيف نتبع الخطوات التالية: نقوم بإنشاء صفحة جديدة من لوحة التحكم، ثم نكتب الاختصار (Shortcode) التالى [archives].

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

تستطيع إضافة الكود السابق فى تدوينة عادية Post أو فى أحد مربعات القائمة الجانبية Widgets من النوع “نص Arbitrary أو HTML”. كما تسطيع إضافة أى نص قبل الكود السابق أو بعده كتقديم لصفحة الأرشيف وخاتمه لها.

يشتمل الكود السابق على العديد من العناصر التى تساعد على تغيير أسلوب عرض الأرشيف هذه العناصر كالتالى:

• Type: وظيفة هذا العنصر التحكم فى طريقة عرض قائمة الأرشيف (سنويًا، شهريًا، أسبوعيًا، يوميًا أو تدوينة بتدوينة) وفى حالة ترك هذا العنصر دون تحديد فإن الوضع الإفتراضى هو تدوينة بتدوينة. مثلا لعرض الأرشيف على شكل قائمة بالأشهر، نستخدم التالي: [archives type=monthly]
• Format: هذا العنصر يتحكم فى عرض الأرشيف كقائمة منسدلة أو قائمة عادية HTML أو الوضع الخاص والذى يستلزم عنصر After أو عنصر Before والوضع الإفتراضى هو قائمة غير مسلسلة. لعرض قائمة منسدلة نستخدم الصيغة التالي: [archives format=option]
• Limit: هذا العنصر يتحكم فى عدد عناصر القائمة التى ستظهر فى الأرشيف بمعنى أننا إذا أردنا أن نظهر فقط أخر 25 موضوعا، نستخدم عنصر Limit بالقيمة 25؛ وفى حالة إهمال هذا العنصر تظهر القائمة كاملة. يكتب الكود كالتالى: [archives limit=25]
• Show Count: هذا العنصر مسئول عن إظهار عدد الوحدات الفرعية ضمن العنصر الرئيسى؛ بمعنى أننا إذا وضعنا إسلوب العرض شهرى Monthly فإنه بجانب كل شهر سيظهر عدد التدوينات فى هذا الشهر؛ فى حالة إهمال هذا العنصر لن يظهر عدد التدوينات. مثال: [archives showcount=true]
• Before وafter: هذه العناصر نستخدمها فى حالة إذا ما أردنا كتابة نص قبل وحدات القائمة أو بعدها، ومتاح لنا كذلك أن نستخدم أكواد HTML المسموح بها فى Wordpress.com. يكتب الكود كالتالى:
  [archives before='TEXT or HTML' after='TEXT or HTML']

لمزيد من التفاصيل، يمكن مراجعة صفحة المساعدة: Archives Shortcode

الرابط القديم سيتوقف عن العمل تماما بعد أيام قليلة.

أيضًا تم التعديل في خيارات التلقيمات. الآن يظهر النص الكامل للتدوينة وليس كما كان قبلا، الملخص فقط.

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

طريقة استخدام الاختصارات بسيطة، فقط يجب استخدام المحرر العادي (HTML) أثناء تحرير التدوينات وليس المحرر المتطور. ثم تكتب اسم الاختصار الذي تريد بين علامتي [ و ].

إنشاء اختصار جديد

الاختصارات هي دوال برمجية مكتوب بـ PHP. يمكن كتابتها مباشرة إلى الملف functions.php الموجود في مجلد القالب. أو يمكن كتابتها على شكل إضافة Plugin.

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

افتح ملف functions.php، وأضف التالي:

function arabisk_logo() {  
	return '<p><a href="http://arabisk-award.com"><img src="http://arabisk-award.com/banners/arabisk-250x200.gif" alt="مسابقة أرابيسك لأفضل المدونات العربية" /></a></p>';  
}
add_shortcode('arabisk', 'arabisk_logo');

قمنا بإنشاء دالة باسم arabisk_logo. دالة بسيطة لا تقوم بشيء سوى طباعة سطر برمجي مكتوب بـ HTML لعرض صورة ورابط.

أما الأهم، فهو السطر الموالي، حيث استخدمنا دالة خاصة بوردبريس add_shortcode لتحويل دالتنا السابقة إلى اختصار يمكن استخدامه في وردبريس.

مررنا قيمتين إلى الدالة add_shortcode، القيمة الأولى هي اسم الاختصار، والقيمة الثانية هي اسم الدالة.

الآن، جرب أن تكتب الاختصار [arabisk] في أي تدوينة، ولاحظ النتيجة.

الاختصارات في وردبريس.كوم

نظرًا لطبيعتها المغلقة، فإن النسخة المستضافة من وردبريس توفر عددا من الاختصارات الجاهزة للمدونين. تجدها في صفحة قائمة الاختصارات، مع شرح مفصل لكيفية استخدام كل منها.

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

• عرض أرشيف للمدونة باستخدام الاختصارات

يسعدني إخباركم بإنتقال ملكية هذه المدونة إليّ، من الصديق عمران عماري، الذي أنشأ هذه المدونة ومنحها الكثير من وقته وجهده.

أعتقد لا داعي لكتابة تعريف مطول عني. أنا محمد الساحلي، (أو كما يعرفني أغلبكم باسم محمد سعيد احجيوج).

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

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

المدونة ستبقى مفتوحة لمشاركة أي مدون آخر يرغب بالكتابة حول وردبريس.

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

• عرض أرشيف للمدونة باستخدام الاختصارات

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 وأكتب فيه معلومات قالبك.

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 الجزء الثاني
• دورة قوالب ووردبريس: ماذا تعرف عن html؟
• دورة قوالب ووردبريس: css و xhtml الجزء الأول

كيف نربط ملف css خارجي مع ملف html؟

يفضل بعض المطورين أن يعمل بطريقة embedded css في بداية تصميم الصفحة لكي لا يضطر للتنقل بين ملفين عند التعديل، وبعد انتهائه من العمل، يقوم بنقل css إلى ملف خارجي (style.css مثلا)، ولربط ملف css بملف html يمكن استعمال عدة طرق ولكل منها مميزاتها:

1. استيراد ملف css باستخدام import

في الملف السابق قمنا بإدراج خصائص بين وسمي style في بداية الملف، يمكن الآن أن نقوم بنقل جميع الخصائص بين الوسمين إلى ملف خارجي (style.css) ثم نستخدم دالة import لإستيراده بالشكل التالي:

<style type="text/css">
	@import url(external.css);
</style>

من مميزات هذه الطريقة أن المتصفحات القديمة لا تدعم دالة Import وبذلك يمكننا استعمالها لإستيراد ملفات خاصة بتنسيقات المتصفحات المتطورة، وإخفائها عن المتصفحات الأثرية.

2. استيردا ملف css باستخدام الوسم Link

يمكن أن نستغني عن وسمي style ونقوم باستيراد الملف بواسطة وسم link بين وسمي head أيضا، بالشكل التالي:

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

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

<link rel="stylesheet" media="screen" type="text/css" href="pc_and_phones_style.css" />
<link rel="stylesheet" media="print" type="text/css" href="printer_style.css" />
<link rel="stylesheet" media="Braille" type="text/css" href="braille_devices.css" />
<link rel="stylesheet" media="projection" type="text/css" href="projection_devices_style.css" />
<link rel="stylesheet" media="tv" type="text/css" href="television_type_devices.css" />

من الأشياء الممتعة في هذه الطريقة، إمكانية تحديد أكثر من مظهر لصفحة واحدة، باستخدام الخاصية title  داخل الوسم link ثم بعد ذلك يمكن اختيار المظهر من القائمة view للمتصفح، ثم قائمة page style: بالشكل التالي:

<link rel="stylesheet" type="text/css" href="style1.css" media="screen" title="Default">
<link rel="alternate stylesheet" type="text/css"
href="style2.css" media="screen" title="Style 2">

يمكنك الإطلاع على مثال لإستخدام هذه الطريقة في موقع meyerweb.com

حيل للتحكم الأمثل في خصائص css

1. مقدمة لبعض خصائص css

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

تجميع الخصائص
بعض الخصائص في Css  التي يكون لها نفس الدور يمكن جمعها في خاصية واحدة ونأخذ كمثال الخصائص التالية:
خاصية margin هي في الاصل تجميع لخصائص margin-top,margin-right, margin-bottom, margin-left، مثلا قيم التالية لها نفس المعنى:

/*block 1*/
p{
margin-top: 5px;
margin-bottom: 10px;
margin-right: 20px;
margin-left: 7px;
}
 
/*block 2*/
p{
margin: 5px 20px 10px 7px;
}
}

قمنا بجمع الخصائص الأربعة في خاصية margin، لكن مع احترام الترتيب، أحيانا يكون margin-top و margin-bottom لهما نفس القيمة، وكذلك margin-right  مع margin-left حينها يمكن بدل أربع قيم أن نكتب قيمتين فقط، الأولى للأعلى والأسفل، والثانية لليمين واليسار

/*block 1*/
p{
margin-top: 5px;
margin-bottom: 5px;
margin-right: 10px;
margin-left: 10px;
}
 
/*block 2*/
p{
margin: 5px 10px;
}

هناك طريقة أخرى للإختصار، بوضع ثلاث قيم فقط، القيمة الأولى تعبر عن margin-top  والثانية عن margin-left و margin-right معا، ثم القيمة الثالثة عن margin-bottom

/*block 1*/
p{
margin-top: 5px;
margin-bottom:10px;
margin-right: 7px;
margin-left: 7px;
}
 
/*block 2*/
p{
margin: 5px 7px 10px;
}

ناخذ خاصية أخرى مختلفة بعض الشيء، font هي نتيجة جمع قيم
font-style:  وهي نسق الخط إما مائل italic و oblique أو عادي normal
font-variant: خاص بالحروف اللاتينية الصغيرة، ليتم عرضها على شكل حروف كبيرة لكن بحجم أصغر.
font-weight: بروز الخط، يقبل القيم الرقمية، لكن يفضل إما Normal عادي أو blod بارز.
font-size: حجم الخط، بوحدة معينة (px,em,pt والنسب المئوية)، كذلك يقبل بعض المصطلحات المعرفة مثل small,smaller,large,larger,x-small
line-height: ارتفاع الخط، إما رقم دون وحدة (سيكون ارتفاع الخط مضاعفا للقيمة الإفتراضية) أو بوحدة معينة (px,em أو النسبة المئوية)
font-family: وهي نوع الخط، وفي هذه الخاصية يمكن إسناد مجموعة قيم عبارة عن أسماء خطوط tahoma arial، أو نوع الخط مثل serif, sans-serif

لنأخذ مثالا للقيم منفردة، ثم نقوم بتجميعها معا:

/*block 1*/
p{
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 17px;
font-family: Tahoma, "Times New Roman", sans-serif;
}
 
/*block 2*/
p{
font: italic small-caps bold 12px 17px Tahoma, "Times New Roman", sans-serif;
}

ليس ضروريا أن نكتب جميع الخصائص الفرعية، يمكن مثلا أن أحدد فقط حجم الخط ونوعه في خاصية font لكن يبقى الترتيب ضروريا.

p{
font: bold 12px Tahoma, "Times New Roman", sans-serif;
}

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

/*block 1*/
p{font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 12px;  line-height: 17px; font-family: Tahoma, "Times New Roman", sans-serif;}

تجميع الخصائص طريقة نافعة جدا لإختصار الوقت، وتقليل حجم الملفات معا، يمكن استعمالها مثلا في تخصيص عرض معين للحدود السفلى border-bottom-width، مع اشتراكها في القيم الأخرى،  بالشكل التالي:

.post{
boder: 1px solid blue;
boder-bottom-width: 3px;
}

لعلك لاحظت أن هناك مستويين من التجميع في هذه الخاصية، الأول بتجميع خصائص border-left, border-top, border-right, border-bottom في الخاصية border والمستوى الثاني، بتجميع خصائص border-top-width و border-top-color و border-top-style في border-top  وكذلك الأمر بالنسبة للجهات الثلاث الأخرى.

2. التعميم والتخصيص والنسخ

هذه المصطلحات مجرد تسمية شخصية لثلاثة من المبادئ التي يستخدمها مطورو css، ولا تهمنا التسميات على أية حال، بل ماذا تعني هذه المصطلحات:

في الصفحة عادة تكون هناك خصائص مشتركة بين عدة عناصر، فنوع الخط الذي أفضل للنصوص في كل قوالبي هو tahoma ثم أستثني العناوين وأغيرها للخط Arial أو Times New Roman، وكل الروابط تكون بلون واحد، ثم أستثني القائمة الجانبية مثلا، كذلك لون الخط في الصفحة ككل هو رمادي داكن، ثم أستثني منه ذيل الصفحة إذا كانت الخلفية داكنة، أجعل لون الخط أبيض، الفقرات في الصفحة، عليها أن تتباعد بعشرة بكسلات لكن في القائمة الجانبية 5 بكسلات فقط، حسنا لا داعي للإسترسال، أظن الأمر واضح، هناك خصائص عامة في الصفحة ككل ثم نستثني هنا أو هناك باستخدام الفئات أو المعرفات، وليتضح الأمر، لنأخذ المثال التالي:

a{
color: green;
}
h1 a{
color: red;
}

في المثال السابق قمت “بتعميم” لون أخضر للروابط، ثم قمت “بنسخ”  (إلغاء) هذا اللون واستبداله باللون الأزرق بالنسبة للروابط داخل العناوين h2، و باللون الأحمر بالنسبة للعنوان h1، لأن خصائص css خاضعة للترتيب، وكل سطر قد ينسخ السطر الذي قبل، ولنأخذ مثالا على ذلك:

a{color: green;}
a{color: red;}

لون الروابط في الصفحة سيصير بالأحمر ككل، لأن قيم السطر الثاني ألغت قيم السطر الأول.

لننتقل إلى التخصيص، لدينا عناوين h2 في المواضيع، وأخرى في القائمة الجانبية، العناوين h2 جميعها تشترك في كونها من نوع Arial لكن أريد أن تكون التي في المواضيع بحجم خط 26px بينما في القائمة الجانبية بحجم خط 22px فقط، لدي صندوق div يجمع المواضيع وله معرف content وصندوق آخر يجمع عناصر القائمة الجانبية وله المعرف sidebar، سيكون كود css إذن كالتالي:

h2{
font-family: Arial;
}
#content h2{
font-size: 26px;
}
#sidebar h2{
font-size: 22px;
}

هذه المبادئ الثلاثة يا سادة، لها مجموعة من القواعد وأحيانا يكون تجاوزها سببا لبضع مشاكل، لنفرض مثلا أن لدينا فقرات داخل كل موضوع (حددنا له الفئة post)، ونريد الهامش لجميع الفقرات أن يكون 5px ، وفي نهاية الموضوع سنعرض التصنيفات داخل الوسم P أيضا وحددنا لها الفئة cats. نريد الهامش أن يكون 2px فقط، مبدئيا سنقوم بذلك كما يلي:

.post p{
padding: 5px;
}
.cats{
padding: 2px;
}

لكن عند معاينة الصفحة سنجد أن الهامش في جميع الفقرات يبقى 5px والسبب في ذلك أن الأفضلية في إسناد الخصائص تسبق الترتيب، حيث في العنصر الأول حددنا الفئة المتضمنة للفقرة، ثم بعد ذلك الفقرة (بما في ذلك فقرة التصنيفات cats)

.post p{ }

بينما في العنصر الثاني حددنا فقط فئة الفقرة cats، ولكي يكون لهما نفس الأفضلية علينا أن نكتب خصائص العنصر الثاني هكذا:

.post p{ 
padding: 5px;
}
.post .cats{
padding: 2px;
}

كذلك إذا كنا قد حددنا من قبل خصائص عنصر ما داخل ملف html نفسه (inline style) تكون له الأفضلية على الخصائص بين وسمي style وهما معا لهما الأفضلية، على خصائص الملف الخارجي، مثلا إذا كتبنا في ملف html ما يلي:

<p class="cats" style="background-color: black;">ثم كتبنا الفقرة هنا</p>

ثم حددنا خصائص أخرى كما يلي في ملف خارجي:

p.cats{
background-color: red;
}

فالخلفية ستبقى بالأسود، ولن تتأثر بالخصائص الخارجية.

كيف يتم تحديد الأفضلية في css؟

يتم تحديد الأفضلية بين العناصر في css وفق نظام التنقيط حسب أربع مستويات، a,b,c وd عند إسنادنا للخصائص:

• إذا كانت الخصائص في بداية وسم العنصر(inline style) المستوى a يأخذ القيمة 1، ويبقى 0 في الحالات الاخرى.
• المستوى b هو عدد المعرفات id
• المستوى c هو عدد الفئات class  (بما في ذلك pseudo-class مثل Hover, active..)
• المستوى d هو عدد وسوم html

بعد ذلك تقارن النتيجة بين وحدات الخصائص بنظام الألف حيث يمثل a الآلاف وb المئات..
ولكي يتضح الأمر أكثر، هذه بعض الأمثة:

في المثال السابق إذن قيمة العنصر الأول:

• المستوى a : صفر
• المستوى b: عدد المعرفات صفر
• المستوى c: عدد الفئات 1
• المستوى d: عدد الوسوم 1

إذن قيمة الأفضلية هي 11

بينما العنصر الثاني المستويات a,b,d صفر و 1 للمستوى c أي أن قيمة الأفضلية لهذا العنصر هي 10 أي أن الأول أسبق.

3.كيفية توسيط الصفحة؟

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

التوسيط باستخدام margin
يتم تجميع عناصر الصفحة في صندوق div ونحدد له معرفا معينا مثلا (wrap) ثم نحدد خصائصه في ملف تنسيق Css كما يلي:

#wrap {
width: 900px;
margin: 0 auto;
}

بعض المتصفحات القيدمة لا تدعم القيمة auto في margin لكن لحسن الحظ هناك خاصية text-align نقوم بإعطائها القيمة center بالنسبة للوسم body ثم نعيدها إلى القيمة right في الصندوق wrap

body {
text-align: center;
}
 
#wrap {
width: 900px;
margin: 0 auto;
text-align: right;
}

التوسيط باستخدام position وقيمة سالبة للخاصية margin

بنفس الطريقة السابقة، نقوم بتجميع العناصر داخل صندوق div ونحدد له المعرف wrap مثلا، ثم نقوم بإسناد القيمة relative إلى الخاصية position لهذا الصندوق، لكي نتمكن من تحديد قيمة 50 في المئة للخاصية right ثم نقوم بتحديد القيم الأخرى كما يلي:

#wrap {
width: 900px;
position: relative;
right: 50%;
}

ثم نقوم بإسناد قيمة سلبية  للخاصية margin-right (نصف العرض الذي حددناه للصندوق) كما يلي:

#wrap {
width: 900px;
position: relative;
right: 50%;
margin-right: -450px;
}

وتبقى الطريقة الأولى أفضل بالنسبة لي.

لا زال هناك بعض الأمور الأخرى، فهل ترون أن أخصص لها الموضوع القادم، أم أتركها وأتطرق لها أثناء بناء القالب؟

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

• دورة قوالب ووردبريس: css و xhtml الجزء الأول
• دورة قوالب ووردبريس: ماذا تعرف عن html؟
• دورة قوالب ووردبريس: رأس الصفحة