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

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

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

הטמעה
הערה: מי שכבר ניסה להטמיע את הקוד בפוסט הקודם מומלץ שיסיר את הסקריפט הקודם.

ראשית, יש להוריד ולהתקין את התוסף של iBox מכאן
לאחר ההתקנה וההפעלה, ממשיכים פחות או יותר כמו בפוסט הקודם – הטמעה של אובייקט נסתר בעמוד:

וקריאה אליו ע"י יצירת קישור שמפעיל את הלייטבוקס

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

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

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

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

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

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

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

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

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

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

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

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

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

ולסיום

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

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

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

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

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

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

אז איך עושים את זה? התשובה לכך, בצורה מפתיעה למדי, היא – פשוט מבקשים יפה מוורדפרס. מסתבר, שיש בוורדפרס פונקציה מובנית שתפקידה, לטפל בהצגה של תגובות בעזרת פופאפים. מדי פעם, בעודי מציץ בתיקיית הקבצים של ערכת עיצוב זו או אחרת נתקלתי לפעמים בקובץ בשם comments-popup.php שלא הצלחתי להבין כיצד משתמשים בו. מסתבר שהקובץ הזה נועד על מנת להציג את התגובות בחלונית פופאפ.
בצורה מעצבנת למדי, התהליך שמתואר דווקא בפוסט הראשון בסידרה מציגה את הדרך השלישית. דרך שלו הייתי נתקל בה כבר בהתחלה היתה מקצרת מזמן את הדרך לפיתרון.

אז אלו הפוסטים המתוכננים בנושא, אני אהפוך אותם ללינקבילים ברגע שהם יתפרסמו.
1. תגובות בעזרת פופאפ. (הפוסט הנוכחי)
2. תגובות ב Div נסתר בעזרת JavaScrip – קישור
3. תגובות ב lightbox – שידרוג של שלב 2 בעזרת תוסף.
4. Ajax? שילוב של דרגכים 1+3.

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

הכנת תשתית
למרות שמדובר בפונקציה מובנית, רוב מעצבי הערכות לא מכלילים אותה בערכה שלהם, לחילופין, הם מכניסים אותה לערכה בצורת הערה (מצב כבוי). לצורך הפעלה של הפונקציה יש לערוך את הקובץ header.php ולחפש את הקריאה הבאה:

ולהוסיף ישר לפניה את השורה

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

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

הקריאה

כל ערכה בנויה בצורה שונה, ולכן קצת קשה לנחש איזה קובץ צריך לערוך, אם כי הכלל הוא יחסית פשוט – אם קיים קובץ home.php אז יש לערוך אותו, אם אין קובץ שכזה, יש לערוך את index.php. בתוך הקובץ יש לחפש את הקריאה לתגובות בצורה הישנה. גם כאן, בכל ערכה זה יראה שונה, אבל המבנה הכללי הוא כזה:

ולהחליף אותו ב:

יש פה מספר פרמטרים הניתנים להתאמה.
zero, one, more הן הכתוביות שיוצגו עבור אפס תגובות, תגובה אחת או מספר תגובות. ניתן להחליף בכל כיתוב אחר. על מנת להציג את מספר התגובות אפשר להשתמש ב "% תגובות".
popupcss – זהו שם למחלקת ה css שאחראית על עיצוב הפופאפ.
none – טקסט שיוצג כאשר התגובות לפוסט נעולות (לא ניתן להגיב).
שני הפרמטרים האחרונים אינם בגדר חובה וניתן להשמיט אותם.

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

הצגה וליטוש
על מנת להציג את הפופאפ, צריכה ערכת העיצוב להכיל קובץ יעודי לחלונית הפופאפ. חלק מערכות העיצוב מגיעות עם הקובץ הנדרש ( coments-popup.php) כשהוא כבר מותאם לעיצוב. בערכות הללו לרוב אין צורך לעשות כלום והפופאפ יעבוד היטב "מהקופסא". בחלק אחר מהערכות קיים הקובץ כתורשה מערכת העיצוב המקורית שממנה נלקחו הקבצים. במקרים שכאלה יופיע הפופאפ ללא עיצוב או עם עיצוב שאינו תואם את הלוק של הבלוג. בערכות שבהן אין קובץ שכזה, המערכת שולפת את הקובץ המצוי בערכת ברירת המחדל (קובריק שבתיקיה default).
אם התיקיה של העיצוב הנוכחי אינה מכילה את הקובץ המדובר, רצוי להעתיקו מתיקיית ברירת המחדל. את הקובץ החדש ניתן לערוך כך שיהיה בנוי בצורה הרצויה מבחינת סידור האובייקטים. לאחר מכן, יש לייצר את העיצוב המתאים בקובץ ה CSS של הערכה.

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