בונים ביחד תבנית וורדפרס – פרק 12

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

ניווט מהיר בין הפרקים:

נתחיל עם התפריט הצדדי

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

תפריט צד – סדר הפעולות:

  1. נגדיר תפריטי צד עבור האתר כולו בfunctions.php
  2. נגרור מספר וידגטים לתפריט הצדדי למטרות נסיון
  3. נטמיע את התפריט הצדדי של דף הבית במיקום המתאים
  4. נגדיר את העיצוב לוידג'טים השונים בעזרת CSS

תפריט פוטר – סדר הפעולות:

  1. נעצב את הפוטר בצורה זריזה ומהירה!
  2. נגדיר את המיקומים עבור הוידג'טים של הפוטר
  3. נגרור מספר וידג'טים לפוטר למטרות נסיון
  4. נעצב את הוידג'טים בפוטר בעזרת CSS

תוספים מומלצים – אופציונלי:

  1. תוספי אבטחה
  2. תוספים מומלצים

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

נגדיר תפריטי צד עבור האתר כולו בfunctions.php +

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

  • נפתח את הקובץ functions.php
  • ניצור הערה בקוד עבור רישום התפריטים
  • ניצור את הקוד עבור התפריטים השונים באתר

[php] /************************************ ** REGISTER SIDEBARS ************************************/ register_sidebar(array( 'name' => __('Home Sidebar', 'sagive'), 'id' => 'home-sidebar', 'description' => __('Main Home Sidebar', 'sagive'), 'before_title' => '<h3>', 'after_title' => '</h3>' ));

register_sidebar(array( 'name' => __('Page Sidebar', 'sagive'), 'id' => 'page-sidebar', 'description' => __('Page Sidebar', 'sagive'), 'before_title' => '<h3>', 'after_title' => '</h3>' ));

register_sidebar(array( 'name' => __('Category Sidebar', 'sagive'), 'id' => 'category-sidebar', 'description' => __('Category Sidebar', 'sagive'), 'before_title' => '<h3>', 'after_title' => '</h3>' ));

register_sidebar(array( 'name' => __('Footer Sidebar', 'sagive'), 'id' => 'footer-sidebar', 'description' => __('Footer Sidebar', 'sagive'), 'before_title' => '<h3>', 'after_title' => '</h3>' )); [/php]

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

 

לאחר שהוספתם את הקוד ושמרתם את functions.php

לאחר ההוספה של קוד זה לקובץ functions.php, גשו לממשק הניהול של האתר ורעננו… כעת אם תעברו עם העכבר מעל התפריט עיצוב תגלו כי נוסף תת פריט בשם וידג'טים. לחצו עליו ותעברו לחלון ניהול וידגטים של האתר שלכם. אם הכל עובד כשורה תראו מצד שמאל מיכלים עבור תפריטי הצד שיצרנו (תמונה להדגמה). כעת נגרור אל ה"מיכל" של תפריט הדף בית שלנו… נתחיל עם מספר וידג'טים לנסיון לצרכי עיצוב (סרטון הדגמה קצר – שנו את האיכות לHD כדי לראות פרטים בקלות.)

נטמיע את התפריט הצדדי של דף הבית במיקום המתאים +

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

נגדיר לוורדפרס היכן להציג את התפריט Home Sidebar

  • נפתח את הקובץ index.php
  • נמצא את הDIV שהכנו קודם לכן עבור הSidebar
  • נגדיר בתוכו את הקריאה לתפריט צד הרצוי

מצאו את הDIV הבא [html] <div class="sidebar">

</div> [/html]

בתוכו נוסיף קריאה לSidebar הרצוי [php] <div class="sidebar"> <?php if ( is_active_sidebar( 'home-sidebar' )) { echo '<ul id="home-sidebar" class="home-sidebar">'; dynamic_sidebar( 'home-sidebar' ); echo '</ul>'; } else { _e('Drag widgets to home sidebar to display data here.', 'sagive'); } ?> </div> [/php]

 

מה הקוד אומר?

התניה: התנייה אשר בודקת אם יש וידג'טים בSidebar לו קבענו את הID בשם home-sidebar [php] if ( is_active_sidebar( 'home-sidebar' )) { [/php]

 

אם כן: אם ההתניה מחזירה true (אמת / כן) קרא לsidebar זה במיקום הזה. [php] echo '<ul id="home-sidebar" class="home-sidebar">'; dynamic_sidebar( 'home-sidebar' ); echo '</ul>'; [/php]

 

אחרת: אם התשובה המתקבלת היא false כלומר אין וידג'טים הודע למנהל האתר שהוא צריך לגרור וידג'טים בממשק הניהול כדי להציג בחלק זה מידע. אל דאגה, בהמשך נתרגם מחרוזות טקסט אלו. [php] } else { _e('Drag widgets to home sidebar to display data here.', 'sagive'); } [/php]

 

מידע נוסף:

נגדיר את העיצוב לוידג'טים השונים בעזרת CSS +

כעת ולאחר שהגדרנו את תפריטי הצד בקובץ functions.php וגם קראנו לתפריט home-sidebar במיקום הרצוי בדף הבית שלנו (בקובץ index.php) נרענן את דף הבית של התבנית שלנו. אם הכל עובד כשורה אתם אמורים לראות משהוא בדומה לזה – תמונה להדגמה

מתחילים לעצב

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

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

  • פתחו את קובץ style.css
  • מצאו את שורה 104 בה ההגדרה הבאה

[css] .contentBox .sidebar { overflow: hidden; width: 28%; } [/css]

שנו אותה להגדרה הבאה [css] .contentBox .sidebar { overflow: hidden; width: 28%; float: right; } [/css]

שמרו ורעננו: לאחר השינוי דף הבית אמור להראות ← כך.

צעד שני: ניצור הערת קוד לCSS נוסף

  • פתחו את קובץ style.css
  • מתחת לכל ההגדרות נוסיף הערת קוד
  • נוסיף הגדרות עיצוביות נוספות

[css] /************************************ ** HOME SIDEBAR ************************************/ .home-sidebar {list-style: none; margin-top: 40px;} .home-sidebar h3 {font-size: 18px; color: #191919; margin-bottom: 10px; text-shadow: 1px 1px 1px #ccc; filter: dropshadow(color=#ccc, offx=1, offy=1);} .home-sidebar img {max-width: 100%;} .home-sidebar > li {margin-bottom: 30px; font-size: 14px;} .home-sidebar ul {padding: 0;} .home-sidebar ul > li {border-bottom: 1px solid #D2D1CE; line-height: 28px; list-style: none outside none; padding: 6px 0;} .home-sidebar ul > li > a {color: #C6700A; text-decoration: none;} [/css]

שמרו ורעננו: לאחר השינוי דף הבית אמור להראות ← כך.

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

נעצב את הפוטר בצורה זריזה ומהירה! +

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

 

צעד ראשון: תיקון המיקום של הDIV של ההFooter

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

  • פתחו את קובץ index.php
  • עקבו אחר הפעולות בסרטון המצורף

שנו את האיכות לHD כדי לראות פרטים

צעד שני: נרווח ונמקם את הFooter

  • פתחו את קובץ footer.php

החליפו את הקוד הנוכחי [html] <div class="footer"> <div class="footerOne"></div> <div class="footerTwo"></div> <div class="footerThree"></div> </div> [/html]

בקוד הבא [html] <div class="footer"> <div class="bodySpacer">&nbsp;</div> <div class="bodyCenter">

</div> <div class="bodySpacer">&nbsp;</div> </div> [/html]

הסבר קצר: אנו משתמשים בDiv'ים להם כבר יצרנו הגדרות כדי לרווח ולמרכז את הFooter.

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

  • נתחיל להטמיע את הקוד במיכל (div) המרכזי

נוסיף לקוד שיצרנו הגדרה שתחזיר את התפריט הרצוי [html] <div class="footer"> <div class="bodySpacer">&nbsp;</div> <div class="bodyCenter"> <?php if ( is_active_sidebar( 'footer-sidebar' )) { echo '<ul id="footer-sidebar" class="footer-sidebar">'; dynamic_sidebar( 'footer-sidebar' ); echo '</ul>'; } else { _e('Drag widgets to footer sidebar to display data here.', 'sagive'); } ?> </div> <div class="bodySpacer">&nbsp;</div>

</div> [/html]

צעד שלישי: ניצור את הרקע המתאים לFooter

  • פתחו את קובץ style.css
  • מתחת לכל ההגדרות נוסיף הערת קוד
  • נוסיף הגדרות עיצוביות נוספות

[css] /************************************ ** FOOTER ************************************/ .footer { background: url("images/top-grey-bar.jpg") repeat scroll left top transparent; min-height: 100px; } [/css]

 

שמרו ורעננו: לאחר השינוי דף הבית אמור להראות ← כך.

נגרור מספר וידג'טים לפוטר למטרות נסיון +

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

שנו את האיכות לHD כדי לראות פרטים

נעצב את הוידג'טים בפוטר בעזרת CSS +

  • פתחו את קובץ style.css
  • מצאו את הקוד שהכנו לפני רגע ונראה כך

[css] /************************************ ** FOOTER ************************************/ .footer { background: url("images/top-grey-bar.jpg") repeat scroll left top transparent; min-height: 100px; } [/css]

 

החליפו אותו בקוד הבא [css] /************************************ ** FOOTER ************************************/ .footer {background: url("images/top-grey-bar.jpg") repeat scroll left top transparent; padding: 20px 0 50px;} .footer .footer-sidebar {list-style: none outside none; padding: 0 1%;} .footer .footer-sidebar h3 {color: #fff;} .footer .footer-sidebar > li {color: #F3F1ED; float: left; font-size: 14px; margin-right: 8%; width: 28%;} .footer .footer-sidebar > li + li + li {margin-right: 0;} .footer .footer-sidebar > li a {color: #C6700A; text-decoration: none;} .footer .footer-sidebar > li > ul {list-style: none outside none; padding: 0;} .footer .footer-sidebar > li > ul > li {line-height: 22px;} [/css]

שמרו ורעננו: לאחר השינוי דף הבית אמור להראות ← כך.

תוספי אבטחה +

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

תוספים מומלצים +

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

  • Contact Form 7 תקציר: תוסף חכם וגמיש שמאפשר ליצור ולהטמיע טפסי צור קשר בקלות וללא הגבלה.
  • Google XML Sitemaps תקציר: תוסף מעולה שמאפשר ישירה אוטומטית של מפת אתר במבנה XML עבור מנועי חיפוש.
  • Google XML Sitemaps תקציר: תוסף מעולה שמאפשר ישירה אוטומטית של מפת אתר במבנה XML עבור מנועי חיפוש.
  • Smart YouTube PRO תקציר: תוסף שהופך את ההטמעה של סרטונים מיו-טיוב לתהליך קל ומהיר במיוחד.

מה בפרק הבא?

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

אם נתקלתם בבעיה או יש לכם שאלה אתם מוזמנים לפרסם אותה כתגובה. אם אהבתם נודה לכם אם תפרגנו לנו עם +1.

בברכה, שגיב SEO