סיכום שיעור

בתחילת השיעור התקנו תוסף yoast SEO

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

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

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

לאחר מכן התקנו את התוסף אלמנטור (הבסיסי החינמי)

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

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

ראינו כי ניתן לשנות את רוחב העמודות ואז לאפס את מבנה העמודות שבאזור (בעריכת אזור)

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

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

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

ראינו כי אנו יכולים לשלוט בהגדרות ברירות המחדל של הפונטים

ראינו כי אנחנו יכולים לקבוע אילו צבעים יופיעו לנו בדוגם צבע (צבעים שנרצה אולי להשתמש בהם הרבה פעמים באתר שאנו בונות)

ראינו כי ניתן למתוח אזור ואת התוכן שבה (או לחילופין למתוח אזור אבל להשאיר את התוכן box כך שהוא לא יתפרש על כל רוחב המסך אלא רק תהיה אשליה של אתר רחב.)

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

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

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

דיברנו על הפתרון הפחות מוצלח של שכפול אזור כך שיהיו 2 ואחד נסתיר בנייד ובטבלט ואת השני נסתיר בדסטופ. ראינו שבמקרה כזה עדייין יש בעמוד 2 אזורים זהים אלא שאחד לא מוצג (display:none) וזה בעייתי עבור קורא מסך (תהיה כפילות)

ראינו כי ניתן לשמור אזור כטמפלט (הקפאה של מצב קיים. הטמפלט לא יתעדכן כתוצאה מעדכון האזור המקורי בעמוד שממנו שמרנו את הטמפלט – לאלמנטור פרו יש פתרון לזה)

ראינו כי ניתן לשמור עמוד שלם כטמפלט (כנ"ל, הקפאה של מצב קיים)

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

ראינו כי המערכת מציעה לנו גם להשתמש במאגר טמפלטים קיים ולשלבם בעמוד (בלוקים ועמודים)

ראינו כי ניתן לייצא טמלט לקובץ ולייבא מקובץ (וכך אולי להעביר עיצובים מאתר לאתר)

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

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

ראינו שניתן לתת לאזורים class או id ואז לקשר אליהם וכך בעצם ליצור עמודי one-page (עמוד שיש בו תפריט שמנווט בין האזורים באותו עמוד) – יש גם ווידגט מסוג עוגן אבל עשינו את זה בלי, פשוט נתנו id לאזור מסויים

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

יצרנו תבנית בת באמצעות תוסף (כן – כמעט לכל דבר יש תוסף…)

דיברנו על האפשרויות שלנו לשילוב קוד CSS שישפיע על התצוגה.

אפשרות א – עיצוב – התאמה אישית – CSS מותאם.

אפשרות ב – עריכת קובץ ה CSS של התבנית ואז כדאי שזו תהיה תבנית בת.

ניתן לערוך את קבצי התבנית תחת עיצוב – ערוך (או בהתחברות לאחסון שלנו, גישה ל cpannel או ב FTP)

בשיעור הבא:

נראה איך ניתן ליצור תבנית בת ללא תוסף

נראה איך עובדים ב FTP

נכיר איזשהי תבנית קצת יותר מגניבה מ 2017, משהו מבית היוצר של פוג'ו

שיעורי בית – 2 משימות

משימה 1

בנו עמוד נחיתה באלמנטור

השתמשו בתבנית עמוד אלמנטור קאנבס

שלבו בראש העמוד קישורים לאזורים השונים של העמוד (התעלמו מהטקסים המופיעים בסקיצה שלי ובמקום זה שימו שם את אזורי העמוד)

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

משימה 2

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

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

שלבו בעמוד שלכן אזור אחד שבדסקטופ תהיה לו תמונת רקע רוחבית (דשא למשל) ובנייד תמונת רקע אנכית (של עץ אולי)

את השינוי בצעו על ידי שילוב CSS שאתן כותבות.

משימה 3

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