الاثنين، 2 سبتمبر 2013
11:19 ص

شرح تصميم قوالب ووردبريس -الجزء الرابع-


شرح تصميم قوالب ووردبريس -الجزء الرابع-
فى الدرس السابق، أنهينا كل ما يخص الهيدر والفوتر، وأنهينا كل ما يخص القوائم وتسجيلها فى ووردبريس، والآن إنتهينا من ملفيّ header.php، و footer.php نهائيًا، الآن سنبدأ فى العمل على المحتوى الذي فى المنتصف، أى الجزء الذي يحتوى على على عناوين التدوينات وجزء من بداية كل تدوينة، ثم رابط مشاهدة كامل التدوينة، ثم روابط التدوينات السابقة، والتدوينات الحديثة، هذا ما تجده فى رئيسية أى قالب ووردبريس، وهذا ما سنقوم به فى هذا الدرس -بإذن الله-.
- برمجة نظام الصفحات.
المقصود ببرمجة نظام الصفحات هو مثل ما بالصورة:

قبل البدء فى برمجة المحتوى سنقوم ببرمجة نظام الصفحات لأنه أسهل ما في الدرس، أولاً سنقوم بفتح ملف التصميم design.html والذي هو من المفترض أن يحتوى على التصميم كاملاً بلغة HTML، ثم بعد ذلك سنبتعد عن الجزء الذي قمنا بنسخه فى ملف header.php، وسنبتعد أيضًا عن الجزء الذي قمنا بنسخه فى ملف footer.php، وسيتبقى لنا فى الأخير الجزء الذي يحتوى على التدوينات وأسفلهم رابطين للتدوينات الأقدم ، والتدوينات الأحدث.
سنقوم بنسخ كود HTML لهذا الجزء، ثم نقوم بفتح ملف index.php، ثم نقوم بلصق الكود فى هذا الملف ولكن أين سيتم نسخه بالتحديد؟
سيتم نسخه بعد دالة get_header مباشرةً !
من المفترض أنه فى أسفل هذا المحتوى رابطين للتدوينات الأقدم، والتدوينات الأحدث كتلك الروابط:
<p class="floatleft">
<a href="#">Older Posts</a>
</p>
<p class="floatleft">
<a href="#">Newer Posts</a>
</p>
ببساطة الآن سنقوم بإستبدال رابط Older Posts أىّ التدوينات الأقدم بدالة next_posts_link، وهي دالة تأخذ بارامتر واحد وهو النص الذي سيُعرض، وفى حالتنا تلك هي كلمة Older Posts، وسيصبح الكود كالتالي:
<p class="floatleft">
<?php next_posts_link("Older Posts"); ?>
</p>
<p class="floatleft">
<a href="#">Newer Posts</a>
</p>
أما بالنسبة لـNewer Posts سيتم إستبداله بدالة previous_posts_link ، وهي دالة تستخدم بارامتر واحد وهو أيضًا النص الذي سيتم عرضه، فيصبح لدينا
<p class="floatleft">
<?php next_posts_link("Older Posts"); ?>
</p>
<p class="floatleft">
<?php previous_posts_link("Newer Posts"); ?>
</p>
- برمجة المحتوى.
المقصود ببرمجة المحتوى هو برمجة عرض التدوينات فى الرئيسية كما بالصورة التالية:

من هنا يبدأ الجزء الصعب، خصوصًا على غير مبرمجيّ PHP، أو المبتدأين بها، لكنني سأحاول تبسيط الموضوع، أولاً نحن لن نعرض التدوينات إلا إذا كان يوجد تدوينات أصلاً، أليس كذلك؟!
لذلك سنقوم بعمل جملة شرطية للتحقق من إذا كان يوجد تدوينات أو لا، وسنستخدم فى الجملة الشرطية دالة have_posts، وهي دالة ترجع قيمة True إذا كان يوجد تدوينات فى المدونة، وإن لم يكن هناك تدوينات ترجع القيمة False، لذلك سيكون الكود كالتالي:
<?php
if(have_posts()){
//سيتم تنفيذ هذا الكود إن كان يوجد تدوينات
}else{
//سيتم تنفيذ هذا الكود إن لم يكن هناك تدوينات
}
?>
والآن سنقوم بوضع رسالة إن لم يكن هناك تدوينات، فيصبح الكود كالتالي:
<?php
if(have_posts()){
//سيتم تنفيذ هذا الكود إن كان يوجد تدوينات
}else{
?>
<div class="block-post"><p>There is no Posts !</p></div>
<?php
}
?>
لاحظ أنني قمت بإغلاق وسم الـPHP، ثم وضعت كود HTML إعتيادي، ثم قمت بفتح الـPHP مرة أخرى دون مشاكل !
الآن فى الجزء الخاص بوجود تدوينات، نريد أن نقوم بعمل لووب Loop لكي يتم عرض جميع التدوينات فى الصفحة، لذلك سنقوم بعمل While Loop لدالة have_posts، ثم بداخل جسم اللوب سنقوم بكتابة دالة the_post وهي دالة لإعداد وضع التدوينات، لذلك سيصبح الكود كالتالي:
<?php
if(have_posts()){
while(have_posts()){
the_post();

}
}else{
?>
<div class="block-post"><p>There is no Posts !</p></div>
<?php
}
?>
الآن نحن لدينا بالطبع كود يتكرر لعرض التدوينات، سنقوم بحذف جميع الأكواد ويتبقى لدينا كود HTML واحد لعرض تدوينة واحدة فى الرئيسية، الآن سنقوم بأخذ كود HTML الذي يعرض مختصر تدوينة واحدة فى الرئيسية، ونضعها بعد دالة the_post، كالتالي:
<?php
if(have_posts()){
while(have_posts()){
the_post();
?>
<div class="block-post">
<h2><a href="#">Blog Title</a></h2>
<p>1/2/1997 By <strong>Ahmed</strong></p>
<div id="comment">1</div>
<p>
<div class="thum">
<a href="#"><img src="#" /></a>
</div>
This is a short content from this blog
</p>

<p class="cat">uncategoried</p>
<p class="con"><a href="#">Read More</a></p>
<div class="clear"></div>

</div>
<?php
}
}else{
?>
<div class="block-post"><p>There is no Posts !</p></div>
<?php
}
?>
الآن إذا توجهت لرئيسية المدونة، ستجد أن هذا الكود تكرر 11 مرة (وهو عدد التدوينات التى تعرض فى الرئيسية فى ووردبريس)، أو ستجده عددًا آخر إذا كنت قد غيرت من داخل لوحة تحكم الووردبريس هذا الرقم، الآن ما علينا هو تحويل هذا الكود إلى كود ديناميكي عبر بعض الدوال التي سأقوم بشرحها لك، وانت ستقوم بوضعها فى مكانها المناسب فى الكود.
1- دالة the_permalink، وهي لطباعة رابط التدوينة.
2- دالة the_title، وهي لطباعة عنوان التدوينة.
3- دالة the_time، وهي لطباعة تاريخ نشر التدوينة.
4- دالة get_option، وهي لأخذ قيمة أيّ من خيارات الووردبريس، فمثلاً إذا قمت بإدخال بارامتر بها date_format فسوف يرجع قيمة صيغة التاريخ المُحددة فى لوحة تحكم الووردبريس، يمكنك مشاهدة المزيد من البارامترات وما يرجعه كل بارامتر من هنا.
5- دالة the_author_posts_link، وهي لطباعة اسم كاتب التدوينة على شكل رابط.
6- دالة the_category، وهي لطباعة تصنيفات كل تدوينة، وهي تأخذ بارامتر واحد وهو الفواصل بين كل تصنيف فى حال كانت التدوينة مُدرجة فى أكثر من تصنيف.
ينقصنا الآن ثلاثة أشياء، وهم كالتالي:
1- عرض جزء من التدوينة.
لعرض جزء من التدوينة سنحتاج إلى دالة the_content_rss ، وسنستخدمها بالصيغة التالية:
the_content_rss('', TRUE, '', 50);
مع إستبدال رقم 50 لعدد الحروف التي تريد عرضها من كل تدوينة.
2- عرض عدد التعليقات.
لعرض عدد التعليقات سنحتاج إلى التححق من إن كانت كانت التعليقات مفتوحة عبر دالة comments_open وأيضًا إن كانت التدوينة غير محمية بباسوورد، وهذا يتم عبر دالة post_password_required، فى حال تحقق comments_open وعدم تحقق post_password_required سيتم عرض عدد التعليقات عبر comments_popup_link، ليصبح الكود بالشكل التالي:
<?php
if(comments_open() && !post_password_required()){
comments_popup_link('0','1','%','comments');
}
?>
حيث أن 0 هو الرقم الظاهر فى حال عدم وجود اى تعليق، و 1 هو الرقم الظاهر فى حالة وجود تعليق واحد فقط، أما العلامة المئوية هي لعرض عدد التعليقات على شكل أرقام فقط، اما بالنسبة لكلمة comments فهو الكلاس المستخدم فى عرض عدد التعليقات.
3- عرض Thumbnail للتدوينة.
لعرض صورة Thumbnail للتدوينة نحتاج إلى وضع تحقق لنعرف ما إذا كانت التدوينة تحتوى على صورة Thumbnail أو لا، ويتم هذا التحقق عبر دالة has_post_thumbnail، ثم بعد ذلك يتم عرض الصورة بإستخدام دالة the_post_thumbnail، ليصبح الكود كالتالي:
<?php if(has_post_thumbnail) ?>
<div class="thum">
<a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail(); ?></a>
</div>
وبالأخير يجب أن نقوم بشيء إضافي، لن يؤثر معنا كثيرًا، لكنه من الأشياء الأساسية، وهي أنك يجب أن تضيف ID فى الـDiv الذي يتم عرض التدوينة فيه، واسم هذا الـID سينقسم جزئين الجزء الأول وهو كلمة post ثم شرطة - ثم طباعة دالة the_ID، كالتالي:
<div class="block-post" id="post-<?php the_ID(); ?>">
والآن عند تطبيق جميع ما سبق سينتج هذا الكود التالي:
<div id="main">
<?php if(have_posts()){
while(have_posts()){
the_post();
?>
<div class="block-post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink(); ?>"><?php
the_title(); ?></a></h2> <p><?php echo the_time(get_option(date_format)); ?
><strong>&nbsp;By&nbsp;<?php the_author_posts_link(); ?></strong> </p>
<?php
if(comments_open() && !post_password_required()){
comments_popup_link('0','1','%','comments');
}
?>
<p>
<?php if(has_post_thumbnail) ?>
<div class="thum">
<a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail(); ?></a>
</div>
<?php
the_content_rss('', TRUE, '', 50);
?>

</p>
<p class="cat"><?php
the_category("&nbsp;|&nbsp;"); ?></p> <p class="con"><a href="<?php the_permalink(); ?
>">Read More</a></p>
<div class="clear"></div>
</div>

<?php
}
}else{
?>
<div class="block-post">
There is no posts !
</div>
<?php
} ?>
<div class="block-post">
<div class="paggingup">
<p class="floatleft"><?php next_posts_link(" Older Posts"); ?> </p>
<p class="floatright"><?php previous_posts_link("Newer Posts "); ?></p>
</div>
</div>
</div>
أتمني أن تكون فكرة الدرس قد وضحت للجميع :)
المزيد من المواضيع:

0 التعليقات:

إرسال تعليق