دورة قوالب ووردبريس[5]: بناء القالب، الجزء الثاني.

a9laam · #1 03-05-2008, 04:18 PM

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

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

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

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

-> المرحلة: الخامسة.

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

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

-> الدرس السابق: بناء القالب،الجزء الأول

a9laam · #2 03-06-2008, 04:34 PM

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

حسنا لندخل في الموضوع:

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

أضف ما يلي بعد نهاية عنصر رأس الصفحة head:

كود PHP:


			
<div id="wrapper">

  <div id="head">

     أعلى الصفحة

  </div><!-- head -->



  <div id="content">



  </div><!-- content -->



  <div id="sidebar">



  </div><!-- sidebar-->



</div><!-- wrapper -->

يجب أن نحدد بعد الخصائص لهذين العنصرين في ملف style.css:

[HTML]
#content {
width: 550px;
float: right;
}

#sidebar {
width: 200px;
}

[/HTML]

كما يظهر حددنا عرض المحتوى 550 وحددنا الخاصية float لليمين لكي تحتل القائمة الجانبية ذات العرض 200 الفراغ في الجانب الأيسر تلقائيا.

*المحتوى:
المحتوى في برمجية الووردبريس، يمكن أن يحتوي العديد من العناصر:
عنوان الموضوع post title.
محتوى الموضوع post content.
معلومات حول الموضوع post meta data.

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

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

كل هذه العناصر تدرج ضمن ما يسمى حلقة ووردبريس worpress loop:

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

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

تنبيه هناك العديد من آمرات ووردبريس لا تعمل إلا داخل الحلقة.

الحلقة البسيطة، تكتب بهذا الشكل وتعرض المواضيع فقط:

كود PHP:


			
<?php



if (have_posts()) :

   while (have_posts()) :

      the_post();

      the_content();

   endwhile;

endif;

 

?>

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

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

نتعرف في الفقرة الموالية على العناصر التي تدرج ضمن الحلقة.

Ebnalblad · #3 03-09-2008, 04:31 PM

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

أبوجهاد · #4 03-10-2008, 09:50 AM

السلام عليكم
كل التحية لك أخي الكريم
على هذا الجهد الجبار والممتاز
وأتمنى منك الاستمرار على هذا النهج والأسلوب المميز في الشرح

ونحن بالانتظار
واذا كنا لا نكثر الأسئلة ... فلأننا ما زلنا نتعلم منك ... وعن نفسي ما زلت أعيد قراءة كل دروسك كل يوم

بانتظارك أخي الكريم

سلامة · #5 03-10-2008, 04:58 PM

متابع معك للآخر..

جزيت خيرا..

alroames · #6 03-10-2008, 09:11 PM

متابع معك للآخر.. مشكور و ما قصرت

a9laam · #7 03-11-2008, 01:37 PM

أعتذر عن تأخري مرة أخرى لازلت أداوم في العمل إثنا عشرة ساعة يوميا الله يستركم، ولا أدري إلى متى لكنه لن يستمر أكثر من أيام.
جزاكم الله خيرا على متابعتكم

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

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

أخي سلامة، شكرا لك وجزاكم الله ألف خير.

أخي alroames مرحبا بك، والشكر لله عز وجل على منه وعطائه.

************************************************** *****
آمرات الووردبريس المدرجة في المحتوى:

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

حسنا لنبدأ في استعراضها، وإعطاء أمثلة:

1.the_ID الرقم المعرف للتدوينة:

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

مثال: يمكن استخدامها لتعيين معرف id لعنوان الموضوع كما يلي

كود PHP:


			
<h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>

يمكن استخدامها في عنوان الموضوع نفسه كما يلي:

كود PHP:


			
<h2>رقم الموضوع<?php the_ID(); ?>, عنوان الموضوع:<?php the_title(); ?></h2>

2.the_title العنوان:

تعريف: تستعرض الآمرة عنوان الموضوع أو الصفحة ذات الرقم الترتيبي the_ID.

مثال: تم استخدامها في المثال السابق، ويمكن كتابتها بطريقتين،

وسمي عنصر العنوان h2 خارج الآمرة:

كود PHP:


			
<h2><?php the_title(); ?></h2>

وسمي عنصر العنوان h2 داخل الآمرة:

كود PHP:


			
<?php the_title('<h2>', '</h2>'); ?>

3.the_title_attribute العنوان الموسوم:

تعريف: آمرة مشابهة للسابقة، تتميز فقط بتجريد العنوان من أكواد html، تصور معي مثلا أن عنوان موضوع ما هو:

الوسم <h2></h2> وكيفية تطبيقه

طبعا إذا استخدمنا الخاصية السابقة the_title فعندما سيصل المتصفح إلى "<h2></h2>" سيقوم بإدراج عنصر h2 ولن يعرض هذه الكلمة.

الخاصية الثانية تقوم بعرضها كما هي وتتجاهل الوسوم بتحويلها إلى الكود المقابل، فيتم مثلا تحويل "<" إلى <

ملف يحتوي في هوامشه على جميع أكواد الرموز الخاصة مثل > و < و " ...

مثال:

كود PHP:


			
<?php the_title_attribute('before=<h2>&after=</h2>'); ?>

4.single_post_title عنوان التدوينة المفردة:

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

مثال:

كود PHP:


			
<h2><?php single_post_title('أنت تتصفح موضوع: '); ?></h2>

5.the_title_rss عنوان الموضوع في الخلاصات:

تعريف: يستعرض عنوان الموضوع في الخلاصات rss.

6.the_content محتوى الموضوع:

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

إشارة: الخاصية  لا تعمل في ملف المدونات المفردة.

مثال:

كود PHP:


			
<?php the_content('نص ينقلك للموضوع الكامل... إقرأ المزيد مثلا'); ?>

يمكن أيضا أن يظهر رابط إقرأ المزيد كمايلي: "أكمل قراءة عنوان الموضوع".

مثال:

كود PHP:


			
<?php the_content("أكمل قراءة " . the_title('', '', false)); ?>

إشارة: القيمة false في الآمرة the_title هي إحدى قيمتي المتغير display حيث تأخذ افتراضيا القيمة true، قمنا بإسناد القيمة false لأننا نستخدم الآمرة the_title داخل آمرة أخرى في كود php، والقيمة true تسند إليها في حالة عرض العنوان فعليا.

7.the_content_rss خلاصة محتوى المواضيع:

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

مثال: يمكن مثلا عرض خمسين كلمة الاولى من كل موضوع، دون أن يظهر رابط إقرأ المزيد كما يلي،

كود PHP:


			
<?php the_content_rss('', TRUE, '', 50); ?>

لعرض النص بالكامل مع تجاهل المدرجات الأخرى كالصور والفيديو... نستبدل القيمة 50 بالقيمة 0 .

كود PHP:


			
<?php the_content_rss('', TRUE, '', 0); ?>

8.the_excerpt المختصرات:

تعريف: لها نفس عمل الآمرة السابقة، تعرض فقط 55 كلمة وينهيها ب […] ، تستخدم عادة في ملف الأرشيف أو نتائج البحث.

مثال: لإستخدامها في الأرشيف is_archive() نكتب ما يلي:

كود PHP:


			
 <?php if(is_archive()) {
     the_excerpt();
 } else {
     the_content('إقرأ المزيد');
 } ?>

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

9.the_excerpt_rss مختصرات الخلاصات.

تعريف: تستعرض المختصرات في 55 كلمة من الخلاصات.

10.previous_post_link و next_post_link الموضوع السابق والموضوع التالي:

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

مثال: لعرض رابط الموضوع السابق

كود PHP:


			
<?php previous_post_link(); ?>

سيعرض هذا الكود عنوان الموضوع السابق على شكل رابط الموضوع السابق

لعرض رابط الموضوع التالي

كود PHP:


			
<?php next_post_link(); ?>

سيعرض هذا الكود عنوان الموضوع السابق على شكل رابط الموضوع التالي

لعرض رابط للموضوع التالي، مع تغيير في النص الذي سيظهر في الرابط نكتب:

كود PHP:


			
<?php next_post_link('%link', 'الموضوع التالي: %title'); ?>

نريد أن يكون النص "الموضوع التالي خارج الرابط:

كود PHP:


			
<?php next_post_link('الموضوع التالي: %link',  '%title'); ?>

لعرض رابط الموضوع التالي من التصنيف 6 مثلا، بنفس الخصائص السابقة

كود PHP:


			
<?php next_post_link(' %link', 'الموضوع التالي: %title', TRUE, '6'); ?>

بقي الحديث عن آمرات الميتا، التي تعرض معلومات حول الموضوع: تاريخ الإنشاء، تاريخ التحديث،والتصنيفات،عدد التعليقات...

زلزال · #8 03-11-2008, 04:59 PM

اخي اقلام ... اتمنى ان تستمر .. على نهجك السابق .. لاننا نرغب في عمل كتاب ... يصدر بأسمك .. يساعد كل مبتدأ ...
كل حب وتقدير لشخصك الكريم

a9laam · #9 03-13-2008, 02:02 PM

أخي زلزال سأستمر إن شاء الله تعالى وما مانعي إلا العمل لمدة 12 ساعة يوميا هذا الأسبوع، شكرا لك أخي الحبيب.

أبوجهاد · #10 03-21-2008, 08:25 AM

طولت الغيبة يا أخ أقلام
نتمنى أن تنتهي مشاغلك قريبا
لنكمل هذه الدورة الجميلة
تحياتي وبالتوفيق لك في حياتك المهنية

hishamon · #11 03-21-2008, 10:02 AM

يعطيك العافية

بانتظار التتمة

على احر من الجمر

D.G.M · #12 04-09-2008, 02:49 PM

شكرااا كثير اخويي المبدععععع

لو ممكن انو تحط ملف التصميم كامل انو الستايل عجبني

سراااب الدوحه · #13 04-24-2008, 11:14 PM

يعطيك الصحة والعافية

كل الود

احمد22 · #14 04-25-2008, 06:04 PM

اريد سال اخي(صاحب الموضوع) هل يعرف الفرنسية؟

ahegazi75 · #15 06-08-2008, 09:17 AM

الأخ المتمكن ... أقــــــــــــــلام

بارك الله فيك وزادك الله علما

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

هل لى ان اسأل عن عدم تواجد نص الوصف للموقع فى مكانه واختلاف مكان ظهوره فى كل من ((( الاكسبلورر ** فاير فوكس )))

بارك الله فى اقلامك .... وفى شوق لاستكمال الرحلة...

اخوك من مصر :::: عاطف

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
دورة قوالب ووردبريس: ماذا تعرف عن html؟	يونس	مقتطفات تدوينية	0	06-14-2009 05:47 PM
دورة قوالب ووردبريس[2]: التخطيط على الورق، التصميم، التقطيع.	a9laam	قوالب ووردبريس - عام	20	08-19-2008 12:43 PM
دورة قوالب ووردبريس للمبتدئين	a9laam	قوالب ووردبريس - عام	31	07-14-2008 08:52 PM
دورة قوالب ووردبريس[3]: بناء صفحة Html، بناء ملف Css	a9laam	قوالب ووردبريس - عام	13	04-24-2008 10:51 PM
دورة قوالب ووردبريس[4]: بناء القالب، الجزء الأول	a9laam	قوالب ووردبريس - عام	16	03-11-2008 02:47 PM

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