ربما يكون عنوان الموضوع غير واضح،
لكني حاولت تبسيطه بأكبر قدر ممكن

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

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

• عن أحمد (الصفحة الأب)
  • الإهتمامات (صفحة إبن)
  • تصاميمي (صفحة إبن)
  • مواقعي (صفحة إبن)
  • إلخ (صفحة إبن)
• صفحة أب أخرى
  • صفحة إبن للأب الآخر
  • صفحة إبن أخرى للأب الآخر

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

كيف تقوم بإظهارها؟  إتبع الطريقة التالية..

طريقة إظهار الصفحات الفرعية

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

إفتح ملف القالب (page.php)، وإبحث عن (<?php endwhile; endif; ?>):

أسفلها مباشرة، قم بإضافة الشفرة التالية:

<h2>صفحات القسم</h2>
<ol class="childpages">
	<?php
		global $id;
		wp_list_pages("title_li=&child_of=$id&show_date=modified&date_format=$date_format&depth=1");
	?>
</ol>

الآن، لو قمت بزيارة الصفحة الأب (عن أحمد)، ستجد قائمة (الصفحات الأبناء) بعد نهاية نص (الصفحة الأب) مباشرة.
ولتنسيق القائمة، بإمكانك إستخدام الكلاس (childpages) وهو معرّف في قائمة مرقّمة بإستخدام الوسم <ol>.

بإمكانك إستخدام التنسيق التالي والمستخدم في الصورة في بداية الموضوع، لتبني عليه تنسيقك الخاص،

.childpages {
	padding: 10px;
	border: 3px solid #eee;
	-moz-border-radius: 10px;
}
 
.childpages li {
	font-size: 15px;
	padding-top: 5px;
	padding-bottom: 2px;
	border-bottom: 1px solid #f5f5f5;
	margin-right: 20px;
}

أتمنى لك وقت تصميم ممتع!

السبب في ذلك، هو ليس فقط في إختلاف المتصفح، المشكلة تكمن في إختلاف ما يسمى بـ “محرّك المظهر”، وفي الحقيقة المشكلة تكمن تحديداً في المحرّكات التي لا تتبع المعايير القياسية لإظهار العناصر بالشكل المفترض لها.

ماذا يعمل المحرّك؟

المحرّك هو المكوّن الأساسي والأهم في جميع المتصفحات. حيث مسؤوليته تتمركز حول تحويل تنسيقاتك من سطور HTML و CSS و JavaScript إلى مربعات وجداول وخطوط وألوان ورسومات وتحرّكات.. إلخ.

جودة محرّكات المظهر

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

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

وحتى تأتي تلك اللحظة، دعونا نطّلع على نتائج المتصفحات في إختبار Acid3:

• آبل سفاري (يستخدم محرّك webkit): ١٠٠٪
• جوجل كروم (يستخدم محرّك webkit): ١٠٠٪
• أوبرا (يستخدم محرّك Presto): ١٠٠٪
• فايرفوكس (يستخدم محرّك Gecko): ٩٦٪
• إنترنت إكسبلورر ٨ (يستخدم محرّك Trident): ٢٠٪
• إنترنت إكسبلورر ٧ (يستخدم محرّك Trident): ١٤٪
• إنترنت إكسبلورر ٦ (يستخدم محرّك Trident): ١٢٪

ملاحظة: ذكرت عدة الإصدارات من إنترنت إكسبلورر لأن الإصلاحات في التصميم ستكون لكل إصدار منفصل، هاك مختلف.

وحتى تقوم بحل هذه المشكلة، إن كنت ترغب في ذلك

يجب عليك إستخدام ما يسمى بـ “الهاكات” أو “التلفيقات” كما أسميها.

هذه الهاكات، تمكنك من تعديل مظهر الصفحة (تنسيق الصفحة) بإستخدام شفرات محددة من الـ CSS، بحيث يكون أمر الـ CSS موجّه لمتصفح محدد، ولن يؤثر بتاتاً على بقية المتصفحات.

إذا، كيف تصمم موقعك بنفس الشكل في جميع المتصفحات؟

حتى تصل إلى هذه النتيجة، يجب عليك إتباع الخطوتين التاليتين:

1. تصميم الموقع بالشكل المرغوب بإستخدام المتصفح الذي يروق لك.
2. تضمين الهاكات التي تقوم بإصلاح التصميم ليصبح متوافق في جميع المتصفحات.

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

الهاكات:

/* IE 6 and below  */
 
* html {}
 
/* IE 7 and below */
 
*:first-child+html {} * html {}
 
/* IE 7 only */
 
*:first-child+html {}
 
/* IE 7 and modern browsers only */
 
 html>body {}
 
/* Modern browsers only (not IE 7) */
 
 html>/**/body {}
 
/* Recent Opera versions 9 and below */
 
html:first-child {}

الفكرة بسيطة جداً، فقط قم بكتابة أسم الـ Selector (الـ Class أو الـ ID أو حتى الـ Html Tag) قبل الأقواس المنحنية، تماماً كما تستخدم الـ CSS العادي.

مثال:

* html span {color: red}

بإستخدام الطريقة السابقة، سيصبح لون أي نص داخل الوسم span لونه أحمر، فقط في IE6 أو إنترنت إكسبلورر ٦

أتمنى لك ترقيعاً سعيداً