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

היום נלמד כיצד לכתוב תוסף וורדפרס פופאפ נגיש ורספונסיבי שיקפוץ לכל משתמש חדש באתר עם תמונה לחיצה. נישתמש בקוקיס כדי לא להציק ולהקפיץ את הפופאפ בכל כניסה ונלמד להשתמש בCustomizer API על מנת ליצור פאנל ניהול פשוט.

תוסף פופאפ פשוט, מה צריך?

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

יצירת תוסף בוורדפרס

ניכנס לתיקיה \wp-content\plugins וניצור תיקיה חדשה עם שם יחודי שייצג את התוסף. בתוך התיקיה נייצר קובץ php חדש, בשם wp-rtl-popup.php שהוא יהיה הקובץ העיקרי שלנו וכך הוא יראה:

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

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

לא לשכוח להפעיל את התוסף כדי שאפשר יהיה לראות את ההתקדמות בפיתוח.

הוספת עמוד ניהול בCustomizer(התאמה אישית)

נוסיף פונקציה חדשה למחלקה שתרוץ כאשר הפעולה customize_register תרוץ. פעולה זאת נותנת גישה ל$wp_customize שהוא אובייקט WP_Customize_Manager בעל פונקציות להוספת פאנלים, איזורים ושדות לCustomizer.

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

• wp-rtl-popup–checkbox – תיבת סימון האם הפופאפ פעיל או לא.
• wp-rtl-popup–url – לינק אליו יוביל הפופאפ.
• wp-rtl-popup–image – התמונה של הפופאפ. בשביל להטמיע שדה זה יש להעביר לפונקציה add_control אובייקט של המחלקה WP_Customize_Image_Control.

מבנה הHTML

נייצר קובץ חדש בתיקיה של התוסף, ניקרא לו wp-rtl-popup-view.php, קובץ זה יהיה אחראי על התבנית של הפופאפ.

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

אובייקט התמונה חוזר לנו ככתובת לכן על מנת שנוכל למשוך את הALT של התמונה לצורכי נגישות נעביר את הכתובת של התמונה דרך הפונקציה attachment_url_to_postid כדי לקבל את הID של התמונה במדיה ואז בעזרת הID נמשוך את השדה ALT של התמונה.

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

כל טקסט שמודפס בDOM נעביר דרך הפונקציה _e() כדי שיהיה ניתן לתרגם אותו.

כתיבת CSS וJS נגיש

נוסיף קצת CSS. התכונה aria-hidden היא לצורכי נגישות, מיידעת את התוכנה של הקורא מסך שאלמנט מסויים בDOM מוסתר/מוצג. נשתמש בתכונה הזאת כדי לדעת איזה כללים להפעיל על הפופאפ להציג/להסתיר אותו באמצעות opacity וvisibility.

כעת כל מה שנישאר זה להוסיף את הJS. נייצר משתנה (אני קורא לזה מחלקה מזוייפת) בשם wp_rtl_popup שבתוכה כל הפונקציות לניהול הפופאפ.

קצת על הפונקציות:

• openPopup – משנה את התכונה aria-hidden לFALSE ובנוסף מגדירה לכל שאר האלמנטים tabindex=0 כדי שהפוקוס של המתמשים ישר בפופאפ.
• closePopup – אותו הדבר כמו openPopup רק הפוך ???? אה ומוסיפה קוקי שהפופאפ נצפה למשך שנה כדי לא להציק ליוזר ולקפוץ בכל רענון.
• getCookie/setCookie – אלה פונקציות מפורסמות שלקחתי מW3C שהן עושות בידיוק מה שהשם שלהם אומר, מגדירות/מושכות קוקיז.

כעת נחזור לפעולת הבנאי במחלקה שלנו ונטען את הCSS והJS

סיכום

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