السلام عليكم

سنتعلم في هذا الدرس كيفية عمل صندوق عن المدون الذي يظهر

تحت كل تدوينة كما في الصورة التالية:

ان طريقة

عمل مثل هذا الصندوق بسيطة جدا وذلك باستخدام html و css
بسيطة وسنتعلم اضافة وسوم وردبريس عن المدون وكيفية جعله ديناميكي وكيفية وضع صورة للمدون.

كود html للصندوق:

يجب اضافة الكود داخل loop الورد بريس , ان الكود سيبدو هكذا

</span>

<pre><div id="article-author"><!--بداية صندوق عن المدون-->
<h3>عن الكاتب: احمد الطائي</h3>
<div id="author-image"><!--صورة الكاتب-->
<img src="http://www.almobdaa.com/2009/09/photo.jpg" alt="About The Author" />
</div><!--نهاية صورة الكاتب-->
<div id="author-text"><!--بداية كتابة الكاتب-->
<p>مرحبا انا احمد الطائي مصمم ويب حر املك مدونة المبدع.</p>
<p>&nbsp;</p>
احمد الطائي كتب 5 تدوينات.
</div><!--نهاية كتابة الكاتب-->
</div><!--نهاية عن الكاتب-->

<span style="font-family: Tahoma, Monaco, 'Courier New', Courier, monospace; line-height: 18px; font-size: 12px; color: #ff0000; white-space: pre;">

بدأنا بسطر “article-author” وداخل ذلك السطر اضفنا هيدر محوي داخل وسم h3 قد يكون الهيدر خاصتك مختلف اعتمادا على تصميم مدونتك.

ومازلنا داخل “article-author” حيث هناك ايضا “author-image” وهي تحتوي على صورة الكاتب ذات القياس 80px X 80px و “author-text” التي تحتوي كتابة الكاتب.

ستايل css للصندوق:

#article-author {
float: right;
width: 598px;
margin-top: 30px;
border: 1px solid #2b3646;
background-color: #142538;
padding: 10px;
clear: both;
}
#article-author a {
color: #56b0d8;
}
#article-author a:hover {
color: #000;
}
#author-image {
float: right;
height: 80px;
width: 80px;
border: 1px solid #d9d9d9;
}
#author-text {
float: right;
width: 486px;
margin-left: 10px;
margin-top: 8px;
}
#author-text p {
font-size: 12px;
line-height: 18px;
}
h3 {
color: #000000;
text-transform: capitalize;
font-weight: normal;
font-size: 18px;
letter-spacing: -1px;
margin-bottom: 10px;
}

وضع اول وسم وردبريس للصندوق:

لوضع الوسوم نحتاج ان نبدل بضع كلمات في كود html الى وسوم وردبريس

,اول وسم سنضعه هو “the_author_link();” وهذا الوسم يظهر موقع كاتب المدونة وهذا اللنك موجود بقسم عن العضو(لوحة التحكم>الاعضاء>حسابك).

الان الكود يجب ان يبدو

هكذا

<div id="article-author"><!--بداية صندوق عن المدون-->
<h3>عن الكاتب:<?php the_author_link(); ?></h3>
<div id="author-image"><!--صورة الكاتب-->
<img src="http://www.almobdaa.com/2009/09/photo.jpg" alt="About The Author" />
</div><!--نهاية صورة الكاتب-->
<div id="author-text"><!--بداية كتابة الكاتب-->
<p>مرحبا انا احمد الطائي مصمم ويب حر املك مدونة المبدع.</p>
<p>&nbsp;</p>
<?php the_author_link(); ?> كتب 5 تدوينات
.</div><!--نهاية كتابة الكاتب--> </div><!--نهاية عن الكاتب—>

صورة الكاتب:

اذا كنت مستخدما واحدا للمدونة فيمكنك اضافة صورتك بالطريقة الاعتيادية عن طريق تحميل الصورة الى ملفات مدونتك ولكن اذا كان اكثر من كاتب يستخدم المدونة يمكنك استخدام هذا الوسم “author-id” لاظهار صورة المدون. كل كاتب في مدونتك عندما يسجل فان الوردبريس تعطيه id محدد وفريد لا يتكرر ويمكنك معرفة id احد المدونين عن طريق جعل الماوس فوق اسمه في تدويناته كما في الصورة التالية:

ما ان عرفت

id خاصتك حتى يمكنك تسمية صورتك برقم الid مثلا انا رقم واحد فاسمي صورتي 1.jpg او 1.gif ضع الصورة في احدى ملفات سيرفرك واضف وسم “author-id” في مكان اسم الصورة , اذا ستكون شكل كود html هكذا:

<div id="author-image"><!--بداية صورة الكاتب-->
<img src="http://www.almobdaa.com/2009/09/&lt;?php the_author_ID();?>.gif" alt="About The Author" />
</div><!--نهاية صورة الكاتب—>

وصف الكاتب:

داخل author-text DIV نحتاج ان نحذف ما كتبناه واضافة وسم “author-description” وبعد ذلك يجب ان تملا قسم نبذة عن نفسك في حسابات وردبريس.

ان شكل

الكود سيبدو هكذا :

<div id="author-text"><!--كتابة الكاتب تبدا-->
<?php the_author_description();?>
<p>&nbsp;</p>
<?php the_author_link(); ?> has written 254 posts.
</div><!--نهاية كتابة الكاتب—>

وسوم اضافية:

يمكنك ايضا اضافة وسم اخر مكان (كتب 5 تدوينات) وذلك باستخدام هذا الوسم “author-posts” الذي يجدد عدد التدوينات كلما اضفت تدوينة جديدة ولكن المسودات والتدوينات الخاصة لا يظهرها.

اذا اخيرا هذا هو الكود النهائي

<div id="article-author"><!--بداية عن الكاتب-->
<h3>عن الكاتب:<?php the_author_link(); ?></h3>
<div id="author-image"><!--صورة الكاتب-->
<img src="http://www.almobdaa.com/2009/09/&lt;?php the_author_ID();?>.gif"
alt="About The Author" />
</div><!--نهاية صورة الكاتب-->
<div id="author-text"><!--بداية وصف الكاتب-->
<?php the_author_description();?>
<p>&nbsp;</p>
<?php the_author_link(); ?> كتب <?php the_author_posts(); ?> تدوينة.</div><!--AUTHOR TEXT ENDS-->
</div><!--نهاية عن الكاتب—>

ونضيف كود html في ملف signal.php في نهاية سطر <div\>  نهاية محتوى التدوينة اذا اردتها في الاسفل واذا اردتها في الاعلى ضعه في بداية الملف قبل بداية محتوى التدوينة.

انتهى الدرس اي سؤال او استفسار اترك تعليق.