פעם בכמה זמן יוצא לי להגיע אל בלוג חדש ובכל פעם אני מתעצבן על אותה הנקודה בדיוק. בעמוד הראשי מפורסמים הפוסטים האחרונים של הבלוג ובתחתית של כל עמוד שכזה מצוי קישור שמציג את מספר התגובות לפוסט. לחיצה על הלינק מעבירה את הקורא אל תוך עמוד הפוסט ישירות אל אזור התגובות. הבעיה מתחילה, כאשר רוצים לחזור אחורה. פתאום מתברר שבכלל היה מעבר עמוד, ומי זוכר איפה בדיוק היה המיקום בדף הקודם ובכלל, כל השימושיות הזו היא מאוד לא נוחה / נכונה מבחינת ממשק משתמש.
בישראבלוג למשל, בתחתית של כל פוסט יש קישור לתגובות כאשר ניתן להציג אותן בתי דרכים – חלונית פופאפ קופצת או iFrame שנפתח מתחת לפוסט. כך או כך, הגולש נשאר באותו העמוד ולא נשלח לטייל ברחבי הבלוג. חשבתי שאני היחיד שזה מעצבן אותו, אבל לאחרונה גל מור שידרג את הבלוג שלו והעלה את אותה השאלה בדיוק – כיצד מאפשרים לגולש לראות את התגובות כבר בעמוד הראשי.
בשבועיים האחרונים אני מנסה למצוא פיתרון דומה לאותה השאלה, ניסיתי שלל איפמלמנטציות של לייטבוקסים, ג'אווה סקריפטים והתחכמויות ולבסוף מצאתי שתי דרכים שנראו לי אופטימליות. בעודי מנסה לשפר את אחת הדרכים נתקלתי בדרך השלישית שמובילה לדרך הרביעית.
אז איך עושים את זה? התשובה לכך, בצורה מפתיעה למדי, היא – פשוט מבקשים יפה מוורדפרס. מסתבר, שיש בוורדפרס פונקציה מובנית שתפקידה, לטפל בהצגה של תגובות בעזרת פופאפים. מדי פעם, בעודי מציץ בתיקיית הקבצים של ערכת עיצוב זו או אחרת נתקלתי לפעמים בקובץ בשם comments-popup.php שלא הצלחתי להבין כיצד משתמשים בו. מסתבר שהקובץ הזה נועד על מנת להציג את התגובות בחלונית פופאפ.
בצורה מעצבנת למדי, התהליך שמתואר דווקא בפוסט הראשון בסידרה מציגה את הדרך השלישית. דרך שלו הייתי נתקל בה כבר בהתחלה היתה מקצרת מזמן את הדרך לפיתרון.
אז אלו הפוסטים המתוכננים בנושא, אני אהפוך אותם ללינקבילים ברגע שהם יתפרסמו.
1. תגובות בעזרת פופאפ. (הפוסט הנוכחי)
2. תגובות ב Div נסתר בעזרת JavaScrip – קישור
3. תגובות ב lightbox – שידרוג של שלב 2 בעזרת תוסף.
4. Ajax? שילוב של דרגכים 1+3.
אזהרה: השלבים הבאים דורשים התעסקות בקוד של הערכה. לא משהו מסובך יותר מהעתק והדבק אבל גם אלה, כשהם לא נעשים נכון יכולים לגרום לנזק.
הכנת תשתית
למרות שמדובר בפונקציה מובנית, רוב מעצבי הערכות לא מכלילים אותה בערכה שלהם, לחילופין, הם מכניסים אותה לערכה בצורת הערה (מצב כבוי). לצורך הפעלה של הפונקציה יש לערוך את הקובץ header.php ולחפש את הקריאה הבאה:
< ?php wp_head(); ?>
ולהוסיף ישר לפניה את השורה
< ?php comments_popup_script(width,height); ?>
כמובן שחשוב לבדוק שקובץ ההדר אינו מכיל את השורה המדוברת. חוץ מזה, וורדפרס עצמה נוטה להכניס רווחים בתוך הטקסט כדי שזה לא יהפוך ל php תקני. לכן צריך לבדוק שמוחקים אותם (יש רווח בין ה > לסימן שאלה למשל)
הפונקציה הזו, מייצרת למעשה את קוד הג'אווה סקריפט הנדרש להקפצת החלון, אבל בשביל שהיא תעבוד, צריכים לקרוא לה מתוך העמוד.
הקריאה
כל ערכה בנויה בצורה שונה, ולכן קצת קשה לנחש איזה קובץ צריך לערוך, אם כי הכלל הוא יחסית פשוט – אם קיים קובץ home.php אז יש לערוך אותו, אם אין קובץ שכזה, יש לערוך את index.php. בתוך הקובץ יש לחפש את הקריאה לתגובות בצורה הישנה. גם כאן, בכל ערכה זה יראה שונה, אבל המבנה הכללי הוא כזה:
comments_popup_link('zero', 'one', 'more');
ולהחליף אותו ב:
comments_popup_link('zero','one','more','popupcss','none');
יש פה מספר פרמטרים הניתנים להתאמה.
zero, one, more הן הכתוביות שיוצגו עבור אפס תגובות, תגובה אחת או מספר תגובות. ניתן להחליף בכל כיתוב אחר. על מנת להציג את מספר התגובות אפשר להשתמש ב "% תגובות".
popupcss – זהו שם למחלקת ה css שאחראית על עיצוב הפופאפ.
none – טקסט שיוצג כאשר התגובות לפוסט נעולות (לא ניתן להגיב).
שני הפרמטרים האחרונים אינם בגדר חובה וניתן להשמיט אותם.
שני השלבים הללו ביחד מייצרים קישור לתגובות כפופאפ. אם מדלגים על השלב הראשון, הלינקים הללו יעבדו כמו לינקים רגילים לתגובות – כלומר, יעבירו את הגולש אל איזור התגובות של הפוסט הרלוונטי.
הצגה וליטוש
על מנת להציג את הפופאפ, צריכה ערכת העיצוב להכיל קובץ יעודי לחלונית הפופאפ. חלק מערכות העיצוב מגיעות עם הקובץ הנדרש ( coments-popup.php) כשהוא כבר מותאם לעיצוב. בערכות הללו לרוב אין צורך לעשות כלום והפופאפ יעבוד היטב "מהקופסא". בחלק אחר מהערכות קיים הקובץ כתורשה מערכת העיצוב המקורית שממנה נלקחו הקבצים. במקרים שכאלה יופיע הפופאפ ללא עיצוב או עם עיצוב שאינו תואם את הלוק של הבלוג. בערכות שבהן אין קובץ שכזה, המערכת שולפת את הקובץ המצוי בערכת ברירת המחדל (קובריק שבתיקיה default).
אם התיקיה של העיצוב הנוכחי אינה מכילה את הקובץ המדובר, רצוי להעתיקו מתיקיית ברירת המחדל. את הקובץ החדש ניתן לערוך כך שיהיה בנוי בצורה הרצויה מבחינת סידור האובייקטים. לאחר מכן, יש לייצר את העיצוב המתאים בקובץ ה CSS של הערכה.
מעכשיו, כל גולש שינסה להציג את התגובות יקבל אותן בחלון פופאפ מבלי שיאבד את מיקומו בעמוד הנוכחי. החיסרון העיקרי פה מצוי בעובדה שהתוכן מוצג בחלון פופאפ. לא בדקתי מה קורה פה עם חוסמי פופאפים למיניהם, אני מקווה שהם לא יהוו בעיה.
כתיבת תגובה