איך ליצור תגובות עם צבע רקע משתנה

ממשק התגובות בוורדפרס הוא שמעניק למנהל האתר דרך ישירה לדבר עם הקוראים באתר / בלוג שלו ובכל זאת ממשק התגובות של וורדפרס כלומר זה שמגיע כברירת מחדל או אולי העיצוב של התגובות בתבנית שלכם אחיד ולא מציג תגובות כפי שהייתם רוצים?

במדריך (קצרצר) זה נלמד איך אפשר לעשות תגובות עם צבע רקע משתנה (או תמונה משתנה ברקע.. תלוי בCSS שלכם). נעשה זאת על ידי הוספת קלאס (Class) שונה אשר חוזר על עצמו פעם כן ופעם לא וכך נקבל את האפשרות להחיל על התגובות שלנו הגדרות CSS שונות לפי רצוננו.

מה צריך כדי שזה יעבוד?

ראשית אנו זקוקים לקובץ אשר מציג את התגובות שלנו כחלק מהתבנית בה בחרנו… לא לכל התבניות יש קובץ כזה ואינני יודע איך יקראו לו בתבנית שלכם אך בתבנית שלנו קוראים לקובץ זה Comments.php… קובץ זה מחזיק למעשה את הקוד אשר מציג את התגובות שלנו וגם את הטופס בו מבקרים באתר שלכם משאירים תגובות אם כתבתם משהוא ממש מעניין… (פרגנו בתגובה מה יש?). אתר עם מספר תגובות גדול מצביע על עניין מצד הגולש ולכן נהנה לתנועה רבה יותר (תיאוריה של מקדם אתרים? אולי.. אבל זה עובד ככה לדעתי)

פותחים את Comment.php וניגשים לקוד!

קוד לפני שינוי

<div>
	<ul>
		<?php foreach($comments as $comment) : ?>
		<li id="comment-<?php comment_ID(); ?>">
		<php endforeach; ?>
	</ul>
</div>

 

קוד אחרי שינוי

<div>
	<ul>
		<?php foreach($comments as $comment) : ?>
		<?php $i++; ?>
		<li id="comment-<?php comment_ID(); ?>" <?php if($i&1) { echo 'class="whiteComment"';} else {echo 'class="greyComment"';} ?>>
		<php endforeach; ?>
	</ul>
</div>

 

כפי שניתן לראות כל פריט ברשימה יקבל מעתה אחד משני Class'ים בהתאם לסדר שלו. פריט עם Class אי זוגי יקבל את הקלאס Class="whiteComment" ופריט עם קלאס זוגי יקבל את הקלאס Class="greyComment".

זה מאפשר לנו לשלוט על המראה של כל פריט ברשימה כלומר המראה של כל תגובה. בדוגמה זאת שינינו רק את הרקע אך מכיוון שיש קלאס עליון שעווף את הפריט / תגובה המסוימת נוכל לעשות שינויים נוספים בצורה קלה ומהירה בעזרת CSS.

הCSS כדי ליצור את ההבדלים בין התגובות

כעת שיש לנו קלאסים שונים נצטרך ליצור הגדרות CSS לקלאסים אלו כדי שיהיו הבדלים בין התגובות. הנה הCSS שאני יצרתי אך אתם יכולים כמובן לעשות שינויים שמתאימים לכם ולהוסיף הגדרות שיתאימו לעיצוב שלכם.

.whiteComment {
background: #ffffff;
}
.greyComment {
background: #F3F3F3;
}

והתוצאה: תגובות עם צבע רקע משתנה

מוסיפים סטייל לאתר וורדפרס שלכם!

תם לו עוד מדריך מבית שגיב SEO. אם אתם מנהלים או בונים אתרי וורדפרס שווה להרשם לרשימת התפוצה שלנו כדי להשאר מעודכנים בכל הסקריפטים, הטריקים והשטיקים שתוכלו לעשות בוורדפרס! המון בהצלחה, שגיב SEO.