دورة قوالب ووردبريس[4]: بناء القالب، الجزء الأول

a9laam · #1 02-27-2008, 06:00 PM

بسم الله الرحمن الرحيم والصلاة والسلام على محمد وعلى آله وصحبه أجمعين.

-> الموضوع: دورة قوالب ووردبريس للمبتدئين.

-> الهدف: قيام الأعضاء بعد إتمام الدورة بتصميم قوالب تجمع بين البساطة والروعة (قبل الإنتقال للدورة المتقدمة) وذلك لتحقيق الغرض من القالب.

->الفئة المستهدفة: المبتدئين بالدرجة الاولى.

-> المرحلة: الرابعة.

-> المحاور: بناء القالب، الجزء الاول.

-> فهرس مراحل الدورة: دورة قوالب ووردبريس للمبتدئين.

-> الدرس السابق: بناء صفحة Html، بناء ملف Css

a9laam · #2 02-27-2008, 07:01 PM

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

تكلمنا في المرحلة السابقة عن هيكلة الصفحة و المعايير القياسية للغة HTML، ونحن نريد قالبنا أن يكون موافقا لهذه المعايير، إذن لنقم باعتمادها:

قم بكتابة الآتي في ملف index.php:

[html]
<!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">

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

</head>

<body>

</body>

</html>
[/html]

تكلمنا قليلا أيضا عن العنصر link، وهو من العناصر الخفية، وقلنا أنه يستعمل لإستدعاء ملفات خارجية تستعمل لأغراض التنسيق أو التعريف، ووردبريس يعتمد على هذا العنصر لتعريف بعض أكواده وكيفية عملها، هذا بغض النظر عن استدعاء ملف التنسيق style.css

أمثلة: إن لم تفهم هذه الفقرة فلا تنزعج فإنها لن تعني لك الكثير كمصمم قوالب.
[html]
<link rel="stylesheet" href="whatever.css" type="text/css" media="screen" />
[/html]

هذا السطر لإستدعاء ملف التنسيق، عندما يصادف المتصفح مثلا وسما h2 من الفئة id="post لإنه ينتقل مباشرة للملف style ليستدعي خصائصها المسندة في الملف.

[html]
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="whatever" />
[/html]

وهذا السطر يعطي تعريف النسخة المستخدمة من rss ليسهل قراءتها من المتصفحات، هو في هذه الحالة rss 2.0.

[html]
<link rel="pingback" href="http://site.com/wp/xmlrpc.php" />
[/html]

يقوم بتحديد عنوان pingback الخاص بك، قد تحتاجه للتدوين الخارجي كتدوين الصور من موقع flickr مثلا.

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

بقي أمران يدخلان في نفس السياق هما:

1. العنصر meta: وهو من العناصر الخفية (أنظر فقرة العناصر في المرحلة الثالثة).
يمكن استخدامه لتحديد المؤلف ، تاريخ النشر ، وتاريخ انتهائه ، الصفحه الوصف ، والكلمات الرئيسية وغيرها.
مثال:
[html]
****** http-equiv="Content-Type" content=html نسخة; charset="utf-8" />
[/html]

تنبيه يتم تغيير < meta ب ****** عندما أضيفها في كود HTML.

الآمرة: wp_get_archives

تحدد هذه الآمرة كما يبدو من إسمها كيفية عمل الأرشيف في الموقع ويتم تحديدها كالآتي:

كود PHP:


			
<?php wp_get_archives('type=monthly&format=link'); ?>

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

إذن لنضف إلى ملف هذه العناصر ليصبح كالآتي:

كود PHP:


			
<!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">

 

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

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

 

        <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; <?php } ?> <?php wp_title(); ?></title>

 

        ****** name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

 

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

        <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

        <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

        <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

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

 

 

        <?php wp_get_archives('type=monthly&format=link'); ?>

 

        <?php wp_head(); ?>

 

    </head>

 

    <body>

 

    </body>

</html>

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

أمور غير واضحة:

أظن أن البعض قد يتساءل عن هذه الأكواد المدرجة بين وسمي PHP مثل:

كود PHP:


			
<?php bloginfo('html_type'); ?>

<?php bloginfo('charset'); ?>

<?php bloginfo('name'); ?>

<?php bloginfo('rss2_url'); ?>

<?php wp_get_archives('type=monthly&format=link'); ?>

<?php wp_head(); ?>

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

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

a9laam · #3 02-27-2008, 08:07 PM

صادفنا في رأس الصفحة عدة آمرات، لنتعرف عليها أكثر:

1.

كود PHP:


			
<?php bloginfo(متغير); ?>

أمثلة استخدام هذه الآمرة:

كود PHP:


			
<?php bloginfo('html_type'); ?> نسخة HTML في المدونة.

<?php bloginfo('charset'); ?>   ترميز المدونة -غالبا ما يكون utf-8-

<?php bloginfo('version'); ?> إصدارة الووربدريس المستخدمة

<?php bloginfo('name'); ?>   عنوان الموقع أو المدونة

<?php bloginfo('description'); ?>  وصف المدونة (الافتراضي: فقط مدونة ووربريس أخرى)

<?php bloginfo('url'); ?> رابط  المدونة (eg: www.site.com/wp)

 

            تتشابه في هذا الخيار كثيرا مع آمرة أخرى هي

            <?php echo get_option('home'); ?>/

 

<?php bloginfo('rss2_url'); ?> رابط مختصرات RSS 2.0

<?php bloginfo('comments_rss2_url'); ?> رابط مختصرات التعليقات في RSS 2.0

2.

كود PHP:


			
<?php wp_title(); ?>

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

3.

كود PHP:


			
<?php wp_head(); ?>

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

زلزال · #4 02-27-2008, 08:15 PM

متابع

a9laam · #5 02-27-2008, 08:22 PM

ملف التنسيق style.css ضروري لتنسيق الصفحة باستخدام الوسوم، الفئات والمعرفات.. (راجع المرحلة السابقة)

تذكر عند تصميمك القالب أن تفصل بين المحتوى في HTML و التنسيق في css لكي تغير فقط في الملف style.css في حال أردت التغيير أو التعديل.

لننشئ إذن ملفا جديدا في نوتباد++ ونختار لغة css من قائمة language غير الترميز بنفس الطريقة السابقة مع ملف index.php.

أكتب في الملف ما يلي:

[html]
/*
Theme Name: قالب من صنعي
Theme URI: http://www.site.com
Version: 1.0
Description: أول قالب أصنعه بيدي
Author: أنا طبعا
Author URI: http://www.site.com
*/
[/html]

إحفظ الملف بإسم style.css

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

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

لنحدد خصائص الصفحة في ملف style.css:
أضف ما يلي تحت الوصف:
[html]
/*خصائص الصفحة*/
body {
margin: 0;
padding: 0;
background: #FFFFFF;
/*خصائص افتراضية للنص*/
font-family: tahoma, Arial, Sans-Serif;
font-size: 0,9em ;
color: #808080;
text-align: right;
}
[/html]

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

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

padding: وتعني بعد محتوى العنصر عن جوانبه، داخل العنصر نفسه.

هناك تفرعات للخاصيتين حسب الجوانب الأربعة (أنظر الصورة أسفله)

الخصائص الأخرى هي لتحديد قيم افتراضية للنصوص في الصفحة

font-family: نوع الخط
font-size: حجم الخط حددته هنا بالعنصر em وليس بالبكسل px لأن بعض المتصفحات لا تدعم px في النص، كل em يمثل عشرة بكسلات تقريبا.
color: لون الخط.
text-align: محاذاة النص، تحمل القيم right left center و justify.

لنعد إلى ملف index.php: نريد أن نحدد جسما جامعا لصفحة القالب يكون بعرض 750 بكسل ويتغير طوله وفق المحتويات خلفيته بيضاء وداخل هذا الجسم تكون العناصر الأخرى:

سنستخدم العنصر div الذي ذكرنا أنه من العناصر المتمددة ويصلح لتجميع العناصر الأخرى المتمددة وغيرها.

أكتب إذن كالآتي في ملف index.php بين وسمي body:

كود PHP:


			
    <body>
        <div id="wrapper">
 
        </div>
    </body>

وخصائصه نحددها في ملف style.css:

[html]
/*خصائص هيكل الصفحة*/
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
background: #FFFFFF;
border-right: 1px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
}
[/html]

نريد توسيط الهيكل داخل الصفحة لذلك وضعنا الأمر كما يلي
[html]margin: 0 auto 0 auto;[/html]

كما ذكرنا سابقا يمكن أن نفصل الأمر السابق كما يلي:
[html]
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
[/html]

عند تجميعها تقرأ كما يلي:
[html]margin: top right bottom left;[/html]

نريد أيضا وضع حدود للهيكل من اليمين واليسار، نكتب:
[html]
border-right: 1px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
[/html]

solid تشير إلى خاصية الحدود ويمكن ان تأخذ عدة قيم :

الصورة من موقع html.net

width و height:
عرض الصفحة حددناه بالخاصية width، مماثلتها هي الخاصي height التي تشير إلى الطول.

في الفقرة التالية نقوم بإضافة عناصر أعلى الصفحة البانر وقائمة الصفحات.

في حال وجود تساؤلات في ما سبق لا تتردوا بطرحها.

a9laam · #6 02-28-2008, 12:17 AM

لنعد قبل كل شيء إلى صورة هيكلة الصفحة:

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

من ملف index.php لنحدد أول صندوقا لرأس الصفحة head داخل الهيكل السابق wrapper وندرج داخله صندوقين للجزأين الآخرين banner و navpages.

كود PHP:


			
    <body>
        <div id="wrapper">
            <div id="head">
                <div id="banner"></div>
                <div id="navpages"></div>
            </div>
        </div>
    </body>

لنعد إلى ملف style.css ونحدد خصائص العناصر السابقة:
[html]

/*خصائص رأس الصفحة*/
#head{
width: 750px;
height: 220px;
}

#banner{
width: 500px;
height: 220px;
background: #FFFFFF url(images/header.gif) no-repeat top right;
}

#navpages{
width: 250px;
height: 220px;
background: #FFFFFF url(images/header2.gif) no-repeat top left;
}

[/html]

لنحلل الصفة background أكثر:
في الأصل background صفة لها عدة صفات ثانوية هي

background-color: لون الخلفية. وتأخذ في قيمها أكواد الألوان.
background-image: صورة الخلفية. وتأخذ في قيمها رابط الصورة
Background-repeat: تكرار الخلفية وتأخذ في قيمها:
repeat-x: للتكرار الأفقي
repeat-y: للتكرار العمودي
repeat: للتكرار في الجهتين
no-repeat: عدم تكرار الصورة.
Background-attachment: ثبات أو تحريك الصورة مع أشرطة التمرير وتأخذ القيمتين: scroll أي متحركة و fixed ثابتة.
background-position: موقع الصورة في الخلفية وتأخذ قيما رقمية أو نسبية مئوية أو بتحديد موقعها ب top right left و bottom.

هذه القيم يمكن جمعها بالكامل في صفة background كالآتي:
[html]
background: background-color background-image background-repeat background-attachment background-position ;
[/html]

ما دمنا بدأنا باستخدام الصور، يمكنكم تحميل جميع الصور المستخدمة في القالب، من المرفقات.

الخاصية float:

الخاصية float من أهم خصائص css، في غياب هذه الخاصية حاول أن تطلع على النتيجة ستبدو صفحتك هكذا:

بتطبيق الأمر float في css كالآتي:

[html]
/*خصائص رأس الصفحة*/
#head{
width: 750px;
height: 220px;
}

#banner{
/*بعد إضافة الخاصية*/
float: right;
width: 500px;
height: 220px;
background: #FFFFFF url(images/header.gif) no-repeat top right;
}

#navpages{
/*بعد إضافة الخاصية*/
float: right;
width: 250px;
height: 220px;
background: #FFFFFF url(images/header2.gif) no-repeat top left;
}
[/html]

ستظهر صفحتك هكذا:

في الفقرة المقبلة إن شاء الله نتعرف على القوائم في HTML ونضيف قائمة الصفحات.

زلزال · #7 02-28-2008, 05:07 AM

مازلت متابع لموضوعك ..
الجدير بذكر كنت حاولت تعلم Css واجهة صعوبة في كيفية استخدام الديف وتنسيقه .. يمكن لاني فاهمنها بصوره اخرى .. لكن بفضل الله وبجهودك .. وضحت الصورة اكثر ..
جزاك الله الف خير وحسنه على كل حرف كتبته وكل ثانية قضيتها في اعداد الدرس
بارك الله فيك ...

hishamon · #8 02-28-2008, 07:13 AM

انت روعة
صراحة لو كتبت مليون سطر لن اوفيك حقك

a9laam · #9 02-28-2008, 11:29 PM

أشرت فيما سبق إلى عنصري القائمة ul و ol وحان الوقت لنناقش المزيد حول القوائم في HTML:

العنصر ul: اختصار لمصطلح unordered list
يقوم بإضافة قائمة تكون العناصر المدرجة فيها li عبارة عن رموز نقطية بدون ترتيب رقمي، مثل هذه:

أنا
أنت
هو
هي

ويكون إدراجها في بيئة HTML كما يلي:

[html]
<ul>
<li>أنا</li>
<li>أنت</li>
<li>هو</li>
<li>هي</li>
</ul>
[/html]

العنصر ul: اختصار لمصطلح ordered list
يقوم بإضافة قائمة تكون العناصر المدرجة فيها li عبارة عن رموز رقمية خاضعة لترتيب، مثل هذه:

الأول
الثاني
الثالث

ويكون إدراجها في بيئة HTML كما يلي:

[html]
<ol>
<li>الأول</li>
<li>الثاني</li>
<li>الثالث</li>
</ol>
[/html]

لعلك لاحظت أن كلا القائمتين يتضمنان مجموعة من عناصر li تشكل عناصر المدرجات في القائمة سواء الرقمية أو النقطية.

يمكنك أن تدرج عناصر أخرى داخل القائمة غير العنصر li كالعناوين والفقرات، مثلا:

[html]
<ol>
<h2>عنوان القائمة</h2>
<li>الأول</li>
<li>الثاني</li>
<li>الثالث</li>
</ol>
[/html]

العنصر dl: اختصار لمصطلح definition list
يقوم بإضافة قائمة تعريفات أو تعليقات، تكون المدرجات فيها عبارة عن عنصرين:
----العنصر dt: وهو العنصر المعرف أو إسم المعلق مثلا.
-----العنصر dd: وهو التعريف أو التعليق.

ويمكن إدراجه كالتالي:

[html]
<dl>
<dt>العنصر المعرف، المصطلح، أو صاحب التعليق</dt>
<dd>التعريف، أو التعليق، التعريف، أو التعليق، التعريف، أو التعليق، التعريف، أو التعليق </dd>

<dt>العنصر المعرف، المصطلح، أو صاحب التعليق</dt>
<dd>التعريف، أو التعليق، التعريف، أو التعليق، التعريف، أو التعليق، التعريف، أو التعليق </dd>
</dl>
[/html]

a9laam · #10 02-29-2008, 12:38 AM

لنفتح ملفي index.php و style.css مرة أخرى:

في ملف index.php بين وسمي body لدينا لحد الساعة ما يلي:

كود PHP:


			
    <body>

        <div id="wrapper">

            <div id="head">

                <div id="banner"></div>

                <div id="navpages"></div>

            </div>

        </div>

    </body>

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

الآمرة هي

كود PHP:


			
 wp_list_pages()

هذه الآمرة يمكن تحتوي بين قوسيها على عدة متغيرات:

كود PHP:


			
    'depth'       => 0, 

    'show_date'   => '',

    'date_format' => get_option('date_format'),

    'child_of'    => 0, 

    'exclude'     => '',

    'title_li'    => __('Pages'), 

    'echo'        => 1,

    'authors'     => '',

    'sort_column' => 'menu_order, post_title');

=> : تعني القيمة الإفتراضي للخاصية

لنعط أمثلة على استخدام المتغيرات ليتضح الأمر:

الخاصية الإفتراضية ستدرج لنا قائمة الصفحات مع عنوان لها هو "صفحات"

ويكون كودها في html كالتالي:

كود PHP:


			
    <li>صفحات

        <ul>

            <li><a href=".../?page_id=2" title="سيرة ذاتية">سيرة ذاتية</a></li>

            <li><a href=".../?page_id=6" title="صفحة أخرى">صفحة أخرى</a></li>

        </ul>

    </li>

حذفت بعض الأمور غير المهمة حاليا

لكنني أريد تغيير العنوان الإفتراضي "صفحات" بعنوان آخر.. أنا شخصيا لا يعجبني: ليكن مثلا "روابط هامة"

نكتب إذن الآمرة كما يلي

كود PHP:


			
wp_list_pages('title_li=(روابط هامة)')

ماذا لو أردنا أن نهمل العنوان بالكامل:

كود PHP:


			
wp_list_pages('title_li=')

لكن ينبغي التنبيه إلى بنية html المحصل عليها في المتصفح الآن:

كود PHP:


			
            <li><a href=".../?page_id=2" title="سيرة ذاتية">سيرة ذاتية</a></li>

            <li><a href=".../?page_id=6" title="صفحة أخرى">صفحة أخرى</a></li>

لاحظ تم الإحتفاظ فقط بالعناصر li الداخلية واختفت العناصر الأخرى ul و li.

في القاب الذي نعمل عليه لا أود إذافة أي عنوان لذلك سأستخدم آخر الآمرة بهذا الشكل، لنضفها إلى ملف index.php:

كود PHP:


			
    <body>

        <div id="wrapper">

            <div id="head">

                <div id="banner"></div>

                <div id="navpages">

                    <?php wp_list_pages('title_li='); ?>

                </div>

            </div>

        </div>

    </body>

في هذا الكود خطأ معياري وهو أن عناصر li غير مؤطرة بعنصر ol أو ul.
نريد قائمة نقطية غير مرقمة لنضف إذن وسمي ul:

كود PHP:


			
    <body>

        <div id="wrapper">

            <div id="head">

                <div id="banner"></div>

                <div id="navpages">

                    <ul>

                        <?php wp_list_pages('title_li='); ?>

                    </ul>

                </div>

            </div>

        </div>

    </body>

في الفقرة التالية
سأورد المزيد من الأمثلة حول آمرة wp_list_pages
ستنتعرف على كيفية إضافة رابط للصفحة الرئيسية ضمن قائمة الصفحات
سنتعرف على خصائص الروابط وما يسمى بالمحددات الخفية في css.
سنتعرف على خصائص جديدة في css.

أعتذر عن التوقف الآن، أشعر بقليل من التعب أكمل غدا إن شاء الله

أخي زلزال أخي hishamon عذرا لأني لم أوفكما حقكما، شكرا لمروركما الطيب
************************************************** ****
السلام عليكم ورحمة الله، حسنا لنكمل ما بدأناه:

لعرض صفحات معينة فقط في القائمة نستخدم المتغير include للآمرة wp_list_pages

مثلا لعرض رابط صفحة السيرة الذاتية فقط مع الإحتفاظ بخاصية العنوان فارغة نكتب مايلي:

كود PHP:


			
<?php wp_list_pages('include=2&title_li='); ?>

لعرض الصفحات ذات الرقم: 2 و 5 و9 مثلا نكتب:

كود PHP:


			
<?php wp_list_pages('include=2,5,9&title_li='); ?>

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

لإستثناء رابط الصفحة ذات الرقم 6 نكتب:

كود PHP:


			
<?php wp_list_pages('exclude=6&title_li='); ?>

لإستثناء رابط الصفحات ذات الأرقام 6 و 8 و 23 نكتب:

كود PHP:


			
<?php wp_list_pages('exclude=6,8,23&title_li='); ?>

إشارة: عند استثناء صفحة معينة لا تظهر في القائمة وكذلك صفحاتها الفرعية.

لترتيب الصفحات هناك العديد من الخيارات للمتغير sort_column:

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

كود PHP:


			
<?php wp_list_pages('sort_column=menu_order'); ?>

لترتيب الصفحات حسب تاريخ إنشائها نكتب:

كود PHP:


			
<?php wp_list_pages('sort_column=post_date'); ?>

لإظهار الصفحات الفرعية لصفحة معينة فقط نستخدم المتغير child_of:

لإظهار فقط الصفحات الفرعية للصفحة 7 نكتب:

كود PHP:


			
<?php wp_list_pages('child_of=7&title_li='); ?>

لإظهار الصفحات الفرعية للصفحة المستعرضة حاليا:

كود PHP:


			
<?php wp_list_pages('child_of='.$post->ID.'&title_li='); ?>

إظهار تاريخ إنشاء الصفحات بالمتغير show_date:

عدم إظهار التاريخ -قيمة افتراضية-

كود PHP:


			
<?php wp_list_pages('show_date='); ?>

لإظهار تاريخ الإنشاء:

كود PHP:


			
<?php wp_list_pages('show_date=created'); ?>

لإظهار آخر تاريخ لتعديل الصفحة:

كود PHP:


			
<?php wp_list_pages('show_date=modified'); ?>

هذه أهم المتغيرات لآمرة الصفحات، صلاة الجمعة وبعد الصلاة نكمل إن شاء الله.

a9laam · #11 02-29-2008, 05:07 PM

حسنا لنعد إلى الملفين اليتيمين، index.php و style.css:

مالذي نريده في قائمة الصفحات في قالبنا؟ أريد قائمة الصفحات بدون عنوان تخضع لترتيب محدد في لوحة التحكم.

ستصبح آمرة الصفحات المدرجة سابقا إذن كالتالي:

كود PHP:


			
<?php wp_list_pages('title_li=&sort_column=menu_order'); ?>

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

كود PHP:


			
    <div id="navpages">

    <ul>

        <li><a href="<?php bloginfo('url'); ?>"> الرئيسية </a></li>

        <?php wp_list_pages('title_li=&sort_column=menu_order'); ?>

    </ul>

    </div>

حددنا سابقا خصائص العنصر div ذي المعرف navpages، لنحدد الآن خصائص العنصر ul الذي يشمل الرئيسية وقائمة الصفحات، لنضف إلى ملف style.css:

[HTML]
/*خصائص قائمة الصفحات*/
#navpages ul{
width: 190px;
margin-top: 95px;
margin-right: 60px;
list-style-type: none;
}
[/HTML]

داخل هذا العنصر عناصر li الأول للصفحة الرئيسية ثم يليه عنصر li لكل صفحة، لنحدد خصائص هذه العناصر:

[HTML]
#navpages ul li{
border-bottom: 1px solid #E8E8E8;
background: url(images/list1.gif) no-repeat top right;
line-height:20px;
}
[/HTML]

داخل كل عنصر li هناك رابط أي عنصر a، لنحدد خصائصه:

[HTML]
#navpages ul li a{
display: block;
width: 170px;
padding-right: 20px;
font-size: 1.2em;
text-decoration: none;
}
[/HTML]

نفترض أن هناك صفحات فرعية لصفحة ما، هذه الصفحات الفرعية تدرج بدورها في عنصر ul جديد وعناصرها تدرج في عناصر li داخلية - أنظر الصورة أسفله-

لنحدد خصائص عنصر ul للصفحات الفرعية والعناصر li بداخله:
[HTML]
#navpages ul li ul{
width: 185px;
margin: 0;
padding: 0;
padding-right: 5px;
}

#navpages ul li ul li{
border-bottom: 0;
border-top: 1px solid #E8E8E8;
background: #F5F5F5 url(images/plus.gif) no-repeat right;
line-height:15px;
}
[/HTML]

عندما كتبنا خصائص navpages ul li a# فإن هذه الخصائص ستشمل أي عنصر رابط داخل العنصر li في العنصر ul في المعرف navpages.

أي أنه سيشمل الروابط ذات العمق navpages ul li ul li a#
لكننا نريد تغيير خاصية معينة هي خاصية العرض فقط في هذا العمق والحتفاظ بالخصائص الأخرى:

نضيف إذن:

[HTML]
#navpages ul li ul li a{width: 165px;}
[/HTML]

بقي لدينا سطرين هامين نضيفهما للملف style.css لنشرح ما سبق أولا بأول:

[HTML]
#navpages a:link, #navpages a:visited{ color: #505050;}
#navpages a:hover, #navpages a:active{ color: #C40000;}
[/HTML]

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

لنتعرف على الخصائص السابقة في css:
list-style-type: نوع شكل القائمة هل هو بنقط أ بمربعات أم ......
هذه هي متغيرات هذه الخاصية:

disc: نقطة سوداء للقائمة

circle: نقطة مفرغة، دائرة.

square: مربع أسود

decimal: نقطية صغيرة

lower-roman: حروف رومانية كبيرة

upper-roman: حروف رومانية صغيرة

lower-alpha: حروف لاتينية كبيرة

upper-alpha: حروف لاتينية صغيرة

none: بدون رموز، وهذا هو الذي اعتمدته في الأعلى ليتم إضافة الصورة الجانبية.

يمكن أيضا تحديد صورة ما لتكون رمزا للقائمة بواسطة الخاصية:

[HTML]list-style-image: url(images/yourimage);[/HTML]

line-height: وهو العلو الذي يأخذه كل سطر في القائمة.

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

لذلك أخبرنا المتصفح أن الروابط في هذا القسم "ستظهر display" كعنصر متمدد block.

قيم هذه الخاصية هي:

block: لجعل العنصر متمددا.

inline: لجعل العنصر سطريا.

list-item: لجعل العنص على شكل قائمة.

none: عدم إظهار العنصر وجعله مخفيا.

الفئات الخفية للروابط، pseudo-classes:

لعلك لاحظت في بعض القوالب أن الراب يكون له لون معين وخلفية معينة وربما حجم معين، وعند الإشارة إليه يتغير اللون والخلفية وحجم الخط
نحن أيضا يمكننا ذلك، لكن حتى لا ننسى هناك أيضا أوضاع أخرى للرابط هي عندما يكون سبقت زيارته أو عندما يكون مفعلا
هذه الأوضاع الأربعة تسمى الفئات المزيفة للروابط وهي:
a:link : روابط عادية.
a:visited :روابط سبق زيارتها.
a:hover : روابط عند الإشارة إليها برأس الفأرة.
a:active : روابط مفعلة.

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

أنزلنا العنصر ul بما فيه عن الزخرفة في الأعلى، وأزحناه نحو اليمين أيضا ب 50 بكسل.

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

[IMG]http://www.ar-wp.com/attachment.php?attachmentid=998&stc=1&d=1204301008[/IMG

في الفقرة التالية إن شاء الله، إدراج رابط في منطقة معينة من الشعار، عنوان الموقع، ووصف الموقع.

هل كل شيء مفهوم أنا لا أرى أية أسئلة، استفسارات.. إضافات لماذا؟ يبدو أني شرحي جيد جدا لذلك كل شيء واضح

حم حم..

زلزال · #12 03-01-2008, 06:34 PM

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

تابع .. فنحن معك

a9laam · #13 03-02-2008, 04:44 PM

لنعد إلى ملفي index.php و style.css
في ملف index.php بين وسمي div ذي المعرف banner أضف ما يلي:

كود PHP:


			
<div id="banner">
    <div id="urlogo"><a href="<?php echo get_option('home'); ?>/"></a></div>
    <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <h3><?php bloginfo('description'); ?></h3>
</div>

أدرجنا صندوقا بمعرف urlogo يحتوي على رابط فارغ للصفحة الرئيسية للمدونة.

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

لنحدد خصائص الصندوق ضي المعرف id=urlogo في ملف style.css:

ضع ما يلي في الملف: (حاول أن تضعه بعد خصائص رأس الصفحة وقبل قائمة الصفحات)
[html]
#urlogo {
width: 200px;
height: 125px;
margin-top: 20px;
margin-right: 225px;
}
[/html]

لنضف خصائص الرابط أيضا:

[html]
#urlogo a{display: block; width: 200px; height: 125px; }
[/html]

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

ننتقل إلى العنوان h1 داخل banner أضف ما يلي:
[html]
#banner h1{
font-family: Arial, Sans-Serif;
font-size: 1.6em;
color: #444444;
height: 20px;
margin-right: 210px;
margin-top: 50px;
border-bottom: 1px solid #E8E8E8;
float: right;
}
[/html]

ثم إلى خصائص الرابط a داخل العنوان h1:

[html]
#banner h1 a{
text-decoration: none;
color: #444444;
}
[/html]

ننتقل إلى الوصف h3:

[html]
#banner h3{
font-family: Tahoma, Arial, Sans-Serif;
font-size: 1.2em;
font-weight: normal;
color: #555555;
height: 20px;
padding-right: 5px;
margin-top: 50px;
}
[/html]

************************************************** ***

حسنا لنشرح ما سبق:

؟ لماذا أدرجنا صندوقا ثم رابطا بداخله، ولم ندرج الرابط مباشرة ونحوله إلى صندوق (عنصر متمدد)؟

لو أدرجنا الرابط مباشرة وأردنا أن نسند إليه الخصائص كما يلي:
[html]
#banner a{
خصائص الرابط
}
[/html]

عندها كل رابط داخل الصندوق banner سيصير له نفس هذه الخصائص وسيتمزق الرابط ويتوزع يمنة ويسرة

...

إذن أدرجنا صندوقا لهذا الرابط خصصنا له حجم 200*125 وأبعدناه عن اليمين ب225 ومن الأعلى ب20 بكسل.

جعلنا الرابط عنصرا متمددا بالخاصية display ثم حددنا له نفس حجم الصندوق.

بالنسبة للعنوان h1:
حددنا نوع الخط حجمه ولونه، ثم حددنا عرضا height للعنوان في 20 بكسل.

استخدمنا الخاصية margin لإبعاد العنوان عن حدود هيكل الصفحة wrapper من اليمين وعن الحدود السفلى للصندوق urlogo من الأعلى.

استخدمنا الخاصية float لتعويم العنوان إلى اليمين ليصعد الوصف h3 إلى جانبه.

بالنسبة للوصف h3:
حددنا خصائص الخط أيضا، النوع والحجم واللون، والخاصية الجديدة font-weight.

قيم الخاصية font-weight:
هذه الخاصية تتحكم بسماكة الخط أهم قيمتين فيها هما bold و normal وهناك بعض المتصفحات التي تدعم قيم رقمية من 100 إلى 900.

كذلك حددنا مسافة بين الوصف والعنوان من اليمين وبين الوصف و urlogo من الاعلى.

تنبيه: الخاصية float لعنصر ما تعوم العنصر وتمكن العنصر الذي يليه من احتلال المساحة المتبقية إلى جانبه، لذلك لا حاجة إلى إضافة هذه الخاصية للوصف..

أخيرا إنتهينا من الجزء الأول من القالب "أعلى الصفحة" وتطرقنا خلاله لمجموعة من الخصائص والآمرات، بقي أن أشير إلى الأمور التالية:

أولا: الوحدة em تمثل 100% من الخط القياسي للمتصفحات وهو 16 بكسل، كبير نوعا ما، لذلك في خصائص body في ملف style.css، أضف السطر التالي لجعل الخط القياسي للمتصفح 10 بكسل:

[html]
font-size: 62.5%; /* Resets 1em to 10px */
[/html]

ثانيا: عندما تحدد نوعا معينا من الخطوط داخل قالبك تأكد ان هذا الخط سيتوفر لدى كل المتصفحين، أضف دائما قائمة من الخطوط لكل عنصر لكي ينتقل المتصفح إليها إذا لم يجد الخط الاول فالثاني... ثم أنهها بنوع الخط Serif أو Sans-Serif، إذا كانت أسماء الخطوط تتوفر على مسافات إجعلها بين علامتي تنصيص كهذه: 'Lucida Grande' .

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

رابعا: لتحديد إتجاه القالب من اليمين إلى الشمال يمكن فعل ذلك بطريقتين:
------------ من خلال ملف php بإضافة dir:rtl
------------ من خلال ملف css بإضافة الخاصية direction: rtl في خصائص body.
وأفضل الأولى.

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

أخي زلزال وفقك الله فيما تفعله أيا كان، شكرا على متابعتك.

مصطفى حسان · #14 03-09-2008, 03:38 PM

بصراحة رائع يا أخي
قرأت السلسلة من أولها واستفدت منها جدا مع أني متخصص أيضا في هذا المجال
جزاكم الله كل خير

Ebnalblad · #15 03-09-2008, 04:32 PM

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

اقتباس:

أي أنه سيشمل الروابط ذات العمق navpages ul li ul li a#

ماذا تقصد بالعمق

اقتباس:

list-style-image: url(images/yourimage);

يعتي الصورة تظهر اعلى قائمة الصفحات ؟
عنصرا متمددا block
مازالت هذه النقطة غير واضحة ماذا يعني ممتددا
القروق بين
banner h1
banner h2
مزيد من التوضيح لو سمحت
اعذرني عن كثرت الاسئلة وان كانت تبدو بديهة
ارجو ان يكون الشرح كل كود وشرحه بجانبه حتى الواحد مايقرأ عدة اكواد وارء بعض ثم يقرأ شرحها مجتمعة تصير اصعب المسئلة
تحياتي

a9laam · #16 03-11-2008, 01:32 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة Ebnalblad

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

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

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

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

اقتباس:

المشاركة الأصلية كتبت بواسطة Ebnalblad

لكن اسئلتي حاليا

أي أنه سيشمل الروابط ذات العمق navpages ul li ul li a#

ماذا تقصد بالعمق

في الصندوق على اليسار ذي المعرف navpages يمكن وضع رابط مباشرة هكذا
[html]
<div id="navpages">
<a href="www.website.com"> رابط معين </a>
</div>
[/html]
إذن عمق هذا الرابط هو :

كود:

#navpages a

أو داخل القائمة ul نفسها هكذا
[html]
<div id="navpages">
<ul>
<a href="www.website.com"> رابط معين </a>
</ul>
</div>
[/html]
إذن عمق هذا الرابط هو :

كود:

#navpages ul a

ومثلا الصفحة الرئيسية التي أضفناها عمقها هو:

كود:

#navpages ul li a

إذا كانت هناك صفحات فرعية ستيكون عمق روابطها هو:

كود:

#navpages ul li ul li a

وعندما نريد تخصيص الروابط في الصفحات الفرعية دون التغيير في روابط الصفحات الرئيسية نكتب التالي في ملف css:
[html]
#navpages ul li ul li a {
خصائص الروابط في الصفحات الفرعية
}
[/html]

اقتباس:

كود:

list-style-image: url(images/yourimage);

يعتي الصورة تظهر اعلى قائمة الصفحات ؟

بدل النقط أو الأرقام في القائمة تظهر صور معينة.

اقتباس:

عنصرا متمددا block
مازالت هذه النقطة غير واضحة ماذا يعني ممتددا

ذكرت بتفصيل في مرحلة سابقة عناصر html وأنواعها ومن بينها العناصر الممتدة أو بالإنجليزية block وهي التي تحتل الصفحة على شكل كتلة يمكن تحديد عرضها وطولها وهوامشها وحدودها كالعنصر div مثلا، وتندرج ذمنها العناوين h1 h2 h3 h4، ونقيضتها هي العناصر السطرية in-line وهي التي تدرج في السطر كالروابط مثلا أو النص العريض أو المائل.

اقتباس:

القروق بين
banner h1
banner h2

الأولى لتحديد خصائص العنوان h1 أي عنوان الموقع، والثانية وأعتقد أنها كانت h3، لتحديد خصائص وصف الموقع ويدرج عادة في العنوان من فئة h3.
لو قمت بإدراج عنوان فرعي تحت عنوان الموقع مثلا، في فئة h2 خصائصه في css ستكون كالتالي:

[html]
#banner h2{
خصائص العنوان الفرعي "إتش2" ضمن العنصر "بانر" في أعلى الصفحة
}
[/html]
بينما خصائص وصف الموقع من فئة h3 ستكون كالتالي:
[html]
#banner h2{
خصائص وصف الموقع في "إتش3" في أعلى الصفحة
}
[/html]

اقتباس:

اعذرني عن كثرت الاسئلة وان كانت تبدو بديهة
ارجو ان يكون الشرح كل كود وشرحه بجانبه حتى الواحد مايقرأ عدة اكواد وارء بعض ثم يقرأ شرحها مجتمعة تصير اصعب المسئلة
تحياتي

أخي إبن البلد لن اعذرك، لن أعذرك إذا ترددت في طرح الأسئلة، فهذا المراد من هذه الدورات أن نسأل بعضنا العبض لنتعاون في حل ما استشكل.

شكرا لأسئلتك البناءة وأرجو من الأعضاء أن يحذو حذوك.

Ebnalblad · #17 03-11-2008, 02:47 PM

بالنسبة لعنوان المدونة
حتى بعد اضافة كود اتجاه عنوان الصفحة مازال الى اليسار في IE
اما الامور على فير فوكس جيدة
ربما انا استبقت الامور نتظر بناء القالب مكتملا لنرى النتيجة
بالنسبة لاسئلة الان اصبحت الاجوبة واضحة

اقتباس:

ذكرت بتفصيل في مرحلة سابقة عناصر html وأنواعها ومن بينها العناصر الممتدة أو بالإنجليزية block

قرات الدرس السابق لكن الان من شرحك فهمت النقطة واصبحت واضحة
مشكور
نتظر بقية الدروس

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
دورة قوالب ووردبريس: ماذا تعرف عن html؟	يونس	مقتطفات تدوينية	0	06-14-2009 05:47 PM
₪«{ [دورة ] أحترف التدوين / الجزء الأول ..!	آلفآرس	مقتطفات تدوينية	0	02-02-2009 02:23 AM
دورة قوالب ووردبريس للمبتدئين	a9laam	قوالب ووردبريس - عام	31	07-14-2008 08:52 PM
دورة قوالب ووردبريس[5]: بناء القالب، الجزء الثاني.	a9laam	قوالب ووردبريس - عام	14	06-08-2008 09:17 AM
دورة قوالب ووردبريس[3]: بناء صفحة Html، بناء ملف Css	a9laam	قوالب ووردبريس - عام	13	04-24-2008 10:51 PM

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)