המכללה : תגובות בעמוד ראשי, #2

תגובות בעמוד ראשי, #2 10 ביוני 2008

מאת: ~ניצן~

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

הפיתרון השני, הוא להציג את התגובות בתוך העמוד עצמו, זאת אפשר לעשות בעזרת שימוש ב Div נסתר. עבור כל אובייקט ניתן להגדיר את המאפיין העיצובי: Display:none. המאפיין הזה אומר שאין להציג את האובייקט הרלוונטי. בצורה שכזו, ניתן לשלב תוכן בתוך הדף מבלי שהוא יוצג למשתמש (התוכן כן נטען, אבל לא מוצג). על מנת להציג את התוכן, נזדקק לג'אווה סקריפט שמשנה את מאפיין ה Display. וסוג של "מתג" שידליק ויכבה את האובייקט.

הסקריפט
הסקריפט הוא יחסית פשוט – הוא מקבל כפרמטר את שם האובייקט, בודק מה מצב התצוגה שלו ומשנה אותו למצב ההופכי (מגלוי לנסתר ולהפך).

<script language="javascript">
<!–
var displayDiv = 'none';
function showhide(object_id) {
if (displayDiv == 'block') {
displayDiv = 'none';
}
else {
displayDiv = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + object_id + ".style.display = displayDiv");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[object_id].display = displayDiv;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(object_id);
hza.style.display = displayDiv;
}
}
//–>
</script>

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

< ?php $withcomments = true; comments_template();?>

היות ומדובר בעמוד הראשי שבו לא אמורות להופיע תגובות, חובה להגדיר את המשתנה הבוליאני withcomments ומבלעדיו התגובות לא יוצגו בעמוד הראשי.

עטיפה
על מנת להפעיל אובייקט נעטוף אותו בצורה הבאה:

<div id="divName" style="display: none; text-align:right">
< ?php $withcomments = true; comments_template();?>
</div>

והטריגר יוטמע בצורה הבאה:

<a href="#divName" onclick="showhide('divName');">הצג תגובות</a>

השילוב הזה אמור להציג בעמוד כיתוב "הצג תגובות" שבאירוע לחיצה יציג / יסתיר את התגובות.
איך זה עובד?
האירוע onClick אומר לדפדפן מה לעשות באירוע לחיצה. הקריאה href עם שם האובייקט אומרת למעשה לעמוד לקפוץ אל האזור שבו מוצג האובייקט. את האובייקט והטריגר ניתן להעמיד בכל מקום בדף והם יוצגו בהתאם למיקום בו הם הועמדו, הם לא חייבים להיות צמודים.

הפונקציה שאמורה להציג את התגובות משתמשת ב getElementById על מנת לקבל ולקבע את המאפיינים של האובייקט.
עבור כל Div בעמוד ניתן להגדיר מזהה בצורה הבאה:

<div id=”thisId”></div>

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

<div id="comm-<?php the_ID(); ?>" style="display: none; text-align:right">
< ?php $withcomments = true; comments_template();?>
</div>

ועל מנת לשלב בטריגר ובמעטפת:

<a href="#omm-<?php the_ID(); ?>" onclick="showhide('omm-< ?php the_ID(); ?>');">
הצג תגובות
</a>

ההשמה של הפונקציות הזו צריכה כאמור להיות בתוך הלופ של הצגת הפוסטים.

ולסיום

השיטה המתוארת פה מציגה במהירות ובפשטות את התגובות בעמוד הראשי, אין פה אפקטים מיוחדים (שניתן להוסיף בעזרת jQuary או scriptaculos) של גלישה והרחבה ואין פה עיצובים מתוחכמים (שגם ניתן להגדיר בעזרת קובץ ה Css). ברגע שתתבצע לחיצה על הצגת תגובות יוצגו התגובות והפוקוס יועבר אל אזור התגובות.

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

במקרים כאלה, עדיף לעבור לשיטה הרביעית (עדיין לא פורסמה, זה יהפוך ללינקבילי ברגע שכן)

Popularity: 19% [?]

נכתב ע"י ~ניצן~
שלח מייל | כל הפוסטים של ~ניצן~ | קטגוריות: וורדפרס | תגיות: javascript, עיצוב, תגובות, האקים

עידכונים ב RSS

פוסטים קשורים

09.02.08: תמונה לפוסט (1)
07.06.08: תגובות בעמוד ראשי #1 (5)
23.02.08: שידרוג הבלוג 101 (12)
28.08.08: הצגת RSS בוורדפרס (4)
01.04.08: הפתיע קצת ה Live Writer הזה (6)

תגובות

5 תגובות

1 Morphey | 10 ביוני , 2008 | 14:59

לא עדיף לשמור את הקוד ג'אווה בתור קובץ JS ולגשת אליו?

[תגובה]
2 ~ניצן~ | 10 ביוני , 2008 | 15:31

אפילו מומלץ לעשות את זה, אבל היה לי קצת קשה להציג את הסקריפט כאשר הוא תקוע בתוך קובץ.

[תגובה]
4 Morphey | 10 ביוני , 2008 | 15:54

הבנתי.
אז אני שומר בתור קובץ JS, אבל איך ניגש אליו?

הצג תגובות

?

[תגובה]
5 ~ניצן~ | 10 ביוני , 2008 | 16:17

< script src="url/script.js" type="text/javascript">

[תגובה]