אדר

ההרצאה שלי בוורדקמפ ישראל – 2013

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

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

זו אני, וזה שם ההרצאה שלי :)
זו אני, וזה שם ההרצאה שלי 🙂
אורט ישראל רשת בתי ספר ומכללות הגדולה בישראל. 205 בתי ספר 20 מכללות יג יד ו-2 מכללות אקדמיות 100 אלף תלמידים 5000 מורים ו-2000 עובדי מנהל. אנחנו פרוסים משלומי חצור הגלילית בצפון ועד ירוחם. אורט ישראל מובילה בתחום החינוך. בית הספר הווירטואלי הוקם ב-1995. זה פרה היסטוריה בעידן האינטרנט. אנו משתמשים בקוד פתוח במערכות ניהול תוכן - וורדפרס ומערכות ניהול למידה על מודל.
אורט ישראל
רשת בתי ספר ומכללות הגדולה בישראל. 205 בתי ספר 20 מכללות יג יד ו-2 מכללות אקדמיות
100 אלף תלמידים 5000 מורים ו-2000 עובדי מנהל. אנחנו פרוסים משלומי חצור הגלילית בצפון ועד ירוחם.
אורט ישראל מובילה בתחום החינוך. בית הספר הווירטואלי הוקם ב-1995. זה פרה היסטוריה בעידן האינטרנט. אנו משתמשים בקוד פתוח במערכות ניהול תוכן – וורדפרס ומערכות ניהול למידה על מודל.
האתגר: הזנת תוכן בלי לפגוע בעיצוב הפתרון: meta boxes מהלך העבודה: בחירת פתרון אתגרים ונקודות לתשומת לב עוד כמה שכלולים פתרונות אפשריים אחרים
תיאור של הנושאים שידוברו בהרצאה
אתר אורט ישראל באנגלית הפנים של אורט בחו"ל. בבר הצדדי יש תוכן שיש להזינו ע"י מזיני התכנים, שאינם אנשי טכנולוגיה. צריך למנוע מצב שבו מזיני התכנים משפיעים על העיצוב, מפני שיש חשיבות קריטית בשמירה על השפה העיצובית של האתר, במיוחד באלמנט המלווה כמעט את כל האתר
אתר אורט ישראל באנגלית הפנים של אורט בחו”ל. בבר הצדדי יש תוכן שיש להזינו ע”י מזיני התכנים, שאינם אנשי טכנולוגיה. צריך למנוע מצב שבו מזיני התכנים משפיעים על העיצוב, מפני שיש חשיבות קריטית בשמירה על השפה העיצובית של האתר, במיוחד באלמנט המלווה כמעט את כל האתר
הפתרון: meta-box. זוהי אסופת שדות המשוייכת לפוסט, בנוסף לשדות הבאים אוטומטית עם וורדפרס (כותרת, תוכן, תגיות, קטגוריות, תמונה ראשית). ניתן להוסיפה בצורה תכנותית
הפתרון: meta-box. זוהי אסופת שדות המשוייכת לפוסט, בנוסף לשדות הבאים אוטומטית עם וורדפרס (כותרת, תוכן, תגיות, קטגוריות, תמונה ראשית). ניתן להוסיפה בצורה תכנותית
מטה בוקס הוא אוסף של שדות מותאמים אישית. את השדות המותאמים אישית על מזין התכנים להזין בעצמו, או לבחור מתוך רשימה של שדות שכבר נוצרו. הערכים של השדות הללו נשמרים בטבלת wp_postmeta שהיא טבלה המגיעה עם כל התקנה של וורדפרס
מטה בוקס הוא אוסף של שדות מותאמים אישית. את השדות המותאמים אישית על מזין התכנים להזין בעצמו, או לבחור מתוך רשימה של שדות שכבר נוצרו. הערכים של השדות הללו נשמרים בטבלת wp_postmeta שהיא טבלה המגיעה עם כל התקנה של וורדפרס
meta box הוא אוסף לוגי ועיצובי של שדות מותאימים אישית. הטיפול בהם בקוד זהה לטיפול בשדות מיוחדים, והם נשמרים באותה טבלה
meta box הוא אוסף לוגי ועיצובי של שדות מותאימים אישית. הטיפול בהם בקוד זהה לטיפול בשדות מיוחדים, והם נשמרים באותה טבלה

"איך

בחרתי להתחיל מהמדריך של smashing magazine, משתי סיבות: הראשונה, שהם השתמשו ב-hook של Load-post
בחרתי להתחיל מהמדריך של smashing magazine, משתי סיבות: הראשונה, שהם השתמשו ב-hook של Load-post
הסיבה השניה היתה שהם השתמשו בפונקציות לוקליזציה
הסיבה השניה היתה שהם השתמשו בפונקציות לוקליזציה
אז איך יוצרים meta box? בשלב הראשון, אחרי שיצרנו את ה-hook, קוראים לפונקציה add_meta_box עם הפרמטרים הבאים: מזהה ייחודי; כותרת ל-meta box כפי שיופיע בניהול; שם הפונקציה שיוצרת את ה-HTML של ה-meta box בניהול; לאיזה סוג תוכן להוסיף את ה-meta box - post, page או cpt; ושני הפרמטרים האחרונים מדברים על מיקום - אמצע או צד, ומיקום יחסית לשדות עריכת פוסט אחרים
אז איך יוצרים meta box? בשלב הראשון, אחרי שיצרנו את ה-hook, קוראים לפונקציה add_meta_box עם הפרמטרים הבאים: מזהה ייחודי; כותרת ל-meta box כפי שיופיע בניהול; שם הפונקציה שיוצרת את ה-HTML של ה-meta box בניהול; לאיזה סוג תוכן להוסיף את ה-meta box – post, page או cpt; ושני הפרמטרים האחרונים מדברים על מיקום – אמצע או צד, ומיקום יחסית לשדות עריכת פוסט אחרים
הפונקציה שיוצרת את ה-meta box בניהול: 1. שימוש ב-nonce לשם אבטחה, 2. כתיבת ה-HTML
הפונקציה שיוצרת את ה-meta box בניהול: 1. שימוש ב-nonce לשם אבטחה, 2. כתיבת ה-HTML
לאחר שיצרנו את ה-meta box, צריך ליצור את פונקציית השמירה של הערכים שיוכנסו בו
לאחר שיצרנו את ה-meta box, צריך ליצור את פונקציית השמירה של הערכים שיוכנסו בו
השמירה נעשית בהתבצע ה-hook של save_post. אנקדוטה: פעם ראיתי שאלה של מישהי: How many times can I call a WP hook? ו-Jan Fabry ענה לה: WordPress hooks work like Hollywood: you dont call them, they call you...
השמירה נעשית בהתבצע ה-hook של save_post. אנקדוטה: פעם ראיתי שאלה של מישהי: How many times can I call a WP hook? ו-Jan Fabry ענה לה: WordPress hooks work like Hollywood: you dont call them, they call you…
פונקציית השמירה: דבר ראשון - בדיקת ה-nonce
פונקציית השמירה: דבר ראשון – בדיקת ה-nonce
דבר שני - לקחת את הערך ולנקות אותו
דבר שני – לקחת את הערך ולנקות אותו
דבר שלישי: שמירה ב-DB באמצעות פונקציות add_post_meta, update_post_meta ו-delete_post_meta
דבר שלישי: שמירה ב-DB באמצעות פונקציות add_post_meta, update_post_meta ו-delete_post_meta
שלב רביעי, אחרי השמירה: שימוש באתר. את כל פונקציות עד עכשיו כתבנו ב-functions.php. את זאת אפשר גם כן לכתוב שם, ולקרוא לה מהיכן שצריך באתר. השליפה מה-DB היא באמצעות get_post_meta
שלב רביעי, אחרי השמירה: שימוש באתר. את כל פונקציות עד עכשיו כתבנו ב-functions.php. את זאת אפשר גם כן לכתוב שם, ולקרוא לה מהיכן שצריך באתר. השליפה מה-DB היא באמצעות get_post_meta
עד עכשיו הדוגמה התאימה לשדה אחד בלבד. מה קורה אם רוצים להוסיף כמה שדות ל-meta box? wptuts מראה איך להשתמש במערך של כל השדות שנצטרך, כאשר כל שדה מקבל מערך - בתוך המערך - של id, כותרת, תיאור, וסוג השדה
עד עכשיו הדוגמה התאימה לשדה אחד בלבד. מה קורה אם רוצים להוסיף כמה שדות ל-meta box? wptuts מראה איך להשתמש במערך של כל השדות שנצטרך, כאשר כל שדה מקבל מערך – בתוך המערך – של id, כותרת, תיאור, וסוג השדה
כעת אפשר בפונקציית הבניה של ה-meta box לעבור על המערך בלולאה, ולעשות switch על סוג השדה, ולכתוב את ה-HTML של כל שדה ב-case המתאים
כעת אפשר בפונקציית הבניה של ה-meta box לעבור על המערך בלולאה, ולעשות switch על סוג השדה, ולכתוב את ה-HTML של כל שדה ב-case המתאים
גם בשמירה אפשר לעבור בלולאה
גם בשמירה אפשר לעבור בלולאה
גם בשליפה אפשר לעבור בלולאה
גם בשליפה אפשר לעבור בלולאה
סיכום ביניים: ארבעת שלבי יצירת ה-meta box והשימוש בו
סיכום ביניים: ארבעת שלבי יצירת ה-meta box והשימוש בו
כעת אספר על כמה דברים מעניינים שנתקלתי בהם במהלך הפיתוח
כעת אספר על כמה דברים מעניינים שנתקלתי בהם במהלך הפיתוח
כפי שראינו בתחילת המצגת, עלנו להעלות תמונה ל-meta box. איך עושים זאת?
כפי שראינו בתחילת המצגת, עלנו להעלות תמונה ל-meta box. איך עושים זאת?

"ב-wp.tuts

מה שנשמר בשדה המיוחד זה ה-id של ה-attachment, ולכן כששולפים אותו צריך להעביר אותו כפרמטר לפונקציה wp_get_attachment_src, ואת הערך המוחזר משם שמים בתגית ה-img
מה שנשמר בשדה המיוחד זה ה-id של ה-attachment, ולכן כששולפים אותו צריך להעביר אותו כפרמטר לפונקציה wp_get_attachment_src, ואת הערך המוחזר משם שמים בתגית ה-img
יום אחד, כשבועיים לאחר ההעלאה לפרודקשן, קיבלתי דיווח על באג
יום אחד, כשבועיים לאחר ההעלאה לפרודקשן, קיבלתי דיווח על באג
מכירים את ששת שלבי ההתמודדות עם באג? זה מסתובב באינטרנט. כמעט כל השלבים קרו אצלי
מכירים את ששת שלבי ההתמודדות עם באג? זה מסתובב באינטרנט. כמעט כל השלבים קרו אצלי
1. זה לא יכול להיות - זה כבר נמצא שבועיים בפרודקשן ועובד יופי. איך זה יכול היה להשתבש? 2. כשניסיתי לשחזר אצלי- זה כן קרה
1. זה לא יכול להיות – זה כבר נמצא שבועיים בפרודקשן ועובד יופי. איך זה יכול היה להשתבש?
2. כשניסיתי לשחזר אצלי- זה כן קרה
זה מה שקרה - מסך לבן אחרי לחיצה על insert into post. זה לא אמור לקרות...
זה מה שקרה – מסך לבן אחרי לחיצה על insert into post. זה לא אמור לקרות…
למה זה קורה? חזרתי למדריך של wp.tuts שמשם לקחתי את הקוד של העלאת התמונה, וחיפשתי בתיגובות. ואכן היו תגובות שדיווחו על תקלה - שגיאת javascript של classes undefined
למה זה קורה? חזרתי למדריך של wp.tuts שמשם לקחתי את הקוד של העלאת התמונה, וחיפשתי בתיגובות. ואכן היו תגובות שדיווחו על תקלה – שגיאת javascript של classes undefined
מתברר שהמשתנה html שהועבר לפונקציה jquery כבר היה תגית ה-img עצמה, ולכן הנסיון לחפש תגית img בתוך זה לא עלה יפה, ולכן המשתנה קיבל ערך undefined. הפתרון הוא להוריד את המחרוזת img מהקריאה לפונקציה. לא ברור איך זה עבד עד עכשיו, אבל ברגע שמצאתי פתרון - הפסקתי לחפש למה.
מתברר שהמשתנה html שהועבר לפונקציה jquery כבר היה תגית ה-img עצמה, ולכן הנסיון לחפש תגית img בתוך זה לא עלה יפה, ולכן המשתנה קיבל ערך undefined. הפתרון הוא להוריד את המחרוזת img מהקריאה לפונקציה. לא ברור איך זה עבד עד עכשיו, אבל ברגע שמצאתי פתרון – הפסקתי לחפש למה.
הקוד להעלאת תמונה שהראינו התאים לגרסה שלפני 3.5. אמנם זה עובד גם בגרסה 3.5 בינתיים, אבל תהיתי אם יש משהו שמשתמש בדרך החדשה שבה WP מבצע העלאת מדיה. מאחר שאנחנו באורט מפתחים הרבה ב-WP, השקענו שתמיכה של אוטומטיק, ולכן שאלתי אותם על מה הם ממליצים
הקוד להעלאת תמונה שהראינו התאים לגרסה שלפני 3.5. אמנם זה עובד גם בגרסה 3.5 בינתיים, אבל תהיתי אם יש משהו שמשתמש בדרך החדשה שבה WP מבצע העלאת מדיה. מאחר שאנחנו באורט מפתחים הרבה ב-WP, השקענו שתמיכה של אוטומטיק, ולכן שאלתי אותם על מה הם ממליצים

"הם

מאחר שראינו כי טוב, החלטנו ליישם meta boxes בעוד חלק של האתר
מאחר שראינו כי טוב, החלטנו ליישם meta boxes בעוד חלק של האתר
בחלק הזה, רצינו שפוסטים בקטגוריית about יקבלו meta box, וגם רצינו שלכל פוסט ניתן יהיה לשכפל מספר meta boxes לפי הצורך
בחלק הזה, רצינו שפוסטים בקטגוריית about יקבלו meta box, וגם רצינו שלכל פוסט ניתן יהיה לשכפל מספר meta boxes לפי הצורך
בפונקציה add_meta_box אפשר להגדיר שהוא יופיע בכל פוסט, אבל אפשר להכניס את הפקודה הזו לתנאי שרק אם נמצאים בקטגוריה מסויימת אז לקרוא ל-add_meta_box
בפונקציה add_meta_box אפשר להגדיר שהוא יופיע בכל פוסט, אבל אפשר להכניס את הפקודה הזו לתנאי שרק אם נמצאים בקטגוריה מסויימת אז לקרוא ל-add_meta_box

"בשלב

"איך

"מישהו

אלה שלושת השכלולים שעליהם דיברנו
אלה שלושת השכלולים שעליהם דיברנו
meta boxes בהחלט התאימו לנו בפרוייקט הזה, אבל הם אינם הפתרון היחיד. נסקור כעת 3 פתרונות אחרים, ומן הסתם ישנם עוד
meta boxes בהחלט התאימו לנו בפרוייקט הזה, אבל הם אינם הפתרון היחיד. נסקור כעת 3 פתרונות אחרים, ומן הסתם ישנם עוד
אתם ודאי מכירים שדות מיוחדים
אתם ודאי מכירים שדות מיוחדים
אם יש לכם רק טקסט, ולא הרבה שדות, אפשר פשוט להשתמש בשדות מיוחדים
אם יש לכם רק טקסט, ולא הרבה שדות, אפשר פשוט להשתמש בשדות מיוחדים
אפשרות נוספת: פלגאין. לנו יצא להתנסות עם more fields, אבל יש עוד. היתרון: לא צריך לכתוב קוד. החסרונות: לפעמים זה over kill כי הפלגאין מציע הרבה יותר ממה שאנחנו צריכים; פלגאין הוא קופסה שחורה, לא ברור מה בדיוק הוא עושה ; לפעמים הוא מביא איתו בעיות פוטנציאליות (ככה זה כשכותבים הרבה קוד, לא בטוח שכולו עובד 100%); תמיד צריך לוודא שהוא מתאים לגרסת WP שאנחנו עובדים איתה
אפשרות נוספת: פלגאין. לנו יצא להתנסות עם more fields, אבל יש עוד. היתרון: לא צריך לכתוב קוד. החסרונות: לפעמים זה over kill כי הפלגאין מציע הרבה יותר ממה שאנחנו צריכים; פלגאין הוא קופסה שחורה, לא ברור מה בדיוק הוא עושה ; לפעמים הוא מביא איתו בעיות פוטנציאליות (ככה זה כשכותבים הרבה קוד, לא בטוח שכולו עובד 100%); תמיד צריך לוודא שהוא מתאים לגרסת WP שאנחנו עובדים איתה
זו דוגמה של הניהול של more fields
זו דוגמה של הניהול של more fields
כשהנתונים שצריך להזין לא קשורים לפוסט ספציפי (למשל פרטי צור קשר, שחייבים להיות זמינים לשינוי של מנהל האתר, ולא להיות תלויים במתכנת)
כשהנתונים שצריך להזין לא קשורים לפוסט ספציפי (למשל פרטי צור קשר, שחייבים להיות זמינים לשינוי של מנהל האתר, ולא להיות תלויים במתכנת)
אפשר להשתמש בפונקציות שפה, ולתת למנהל האתר לתרגם אותם בניהול באמצעות פלגאין codestyle localization. חסרון: מצריך הרשאות מתאימות
אפשר להשתמש בפונקציות שפה, ולתת למנהל האתר לתרגם אותם בניהול באמצעות פלגאין codestyle localization. חסרון: מצריך הרשאות מתאימות
סיכום של כל מה שדיברתי עליו
סיכום של כל מה שדיברתי עליו
וזה הסוף. סוף סוף
וזה הסוף. סוף סוף

תגובה 1 על “ההרצאה שלי בוורדקמפ ישראל – 2013

כתבו תגובה

כתובת הדוא"ל שלכם לא תוצג.