ברוכים הבאים לפרק השני במדור "פונקציונליות למתקדמים" במדריך בונים ביחד תבנית וורדפרס. היום שיעור קצר ומהיר בו ניצור ביחד תמונת תבנית ראשית (screenshot) לתבנית וורדפרס שלנו כך שיהיה לנו קל לבחור ולזהות אותה מבין התבניות שמותקנות אצלנו בממשק הניהול.
ניווט מהיר בין הפרקים:
מה זה תמונת תבנית ראשית?
כאשר אנו באים להפעיל תבנית בוורדפרס אנו רואים המון מידע אשר מוצמד לאותה התבנית. את מרבית המידע כבר הכנו בפרק בונים את הלוגו, התפריט העליון והשוליים והוא מידע אשר קיים בקובץ style.css.אם עקבתם אחר השלבים במדריך "בונים ביחד תבנית וורדפרס" תוכלו לפתוח את הקובץ style.css ולמצוא בשורות הראשונות את המידע אשר מופיע לצד התבנית שלנו בממשק הניהול.
כל שנותר לנו לעשות הוא להגדיר תמונת תבנית.
אם נכנס לממשק הניהול של האתר שלנו (בבנייה) ונבחר בתפריט הצדדי בלשונית: עיצוב >> ערכות עיצוב תוכלו לראות תמונה דומה לתמונה הבאה:
כפי שניתן לראות
- לשאר התבניות יש תמונת פוסט מייצגת
- לתבנית שלנו אין תמונת מייצגת!
- תמונה ראשית היא מוצר נדרש
איך מגדירים תמונת תבנית ראשית?
בכדי להגדיר תמונת פוסט ראשית אנו צריכים 2 דברים… הראשון – עורך תמונות כלשהו כגון Photoshop או Fireworks. והשני ידע להשתמש בהם (בצורה בסיסית זה מספיק). באופן אישי אני מכור לFireworks ולכן אדגים בעזרתו כיצד ניצור תמונת תבנית ראשית.
ניצור צילום מסך של דף הבית שלנו
- נלך לדף הבית של האתר בו אנו בונים את התבנית
- נלחץ על המקש F11 כדי לעבור למסך מלא.
- נלחץ על המקש PrtScn כדי ליצור צילום מסך בקליפבורד
נגזור ונתאים את צילום המסך שלנו
- נפתח את עורך הגרפיקה שלנו (אני עובד עם Fireworks)
- ניצור תמונה חדשה ונדביק את צילום המסך שלנו
- נגזור ונתאים את התמונה לגודל הרצוי (640-גובה על 450-רוחב)
נשמור ונטמיע!
- נשמור את התמונה החדשה שלנו בשם screenshot.png
- נעביר את התמונה screenshot.png לתיקיית התבנית שלנו
- נרענן וסיימנו! תתחדשו – יש לכם תמונת תבנית.
הסתבכתם? הנה סרטון הדגמה של הפעולות
זכרו לבחור באיכות HD כדי לקרוא בקלות את ההערות.
סיימנו! מה בפרק הבא?
רעיונות עולים כל הזמן לגבי התוכן לפרק הבא ואתם מוזמנים להשאיר תגובה עם הנושא שמעניין אתכם ואם רלוונטי נכין פרק מתאים.
נודה לכם על כל פרגון בין אם כתגובה ובין אם LIKE מפרגן, +1 נדיב או טוויט משתף… כרגיל טופס התגובות כאן לרשותכם.
בברכה, שגיב SEO
אייל 14 בינואר 2014
פשוט..
ממש מגניב, תודה
מחכה לפרק הבא..
שגיב SEO 14 בינואר 2014
תודה אייל, מעתה אוסיף רק פרקים אם מישהו
ישאל שאלה רלוונטית למדריך הנוכחי.
לעת עתה סיימתי 😉
בהצלחה, מחכה לראות עבודות שפיתחת.
רון 5 בפברואר 2014
אין שגיב, המדריך פשוט הכי טוב שראיתי ברשת הישראלית והאנגלית. אין מילים לתאר את התודה שאני חייב לך. תודה רבה, שמרתי לי אותך במועדפים של המועדפים.
שגיב SEO 6 בפברואר 2014
תודה רבה רון 😉
יגל 22 באוגוסט 2017
שגיב, מדריך מעולה! יישר כח!
למדתי מהמדריך המון, אני מניח שהוא עדיין רלוונטי למרות תקופת הזמן שעברה ואיתה העדכונים למניהם.
אני חושב שאפשר היום בבניית תבנית עם bootstrap לוותר על הקובץ reset.css, אני צודק?
ובהנחה באמת משתמשים בbootstrap, איך אתה קובע בתבנית שהיא תייבא את הקובץ bootstrap-rtl.css בזמן שימוש בעברית/ערבית?
שגיב SEO 15 בינואר 2018
לדעתי הוא קצת מיושן.. הייתי רוצה לכתוב / ליצור מדריך חדש אבל לא מוצא את הזמן.
אם אתה משתמש בBOOTSTRAP זה מעולה ובהחלט אפשר להפטר מהRESET.
לגבי BOOTSTRAP RTL – אני תמיד מנסה לצמצם את כמות הקבצים (קבצי CSS וJS) שאני
טוען לכל אתר / תבנית ולכן ומכיוון שמדובר על כמה תיקונים קטנים שאפשר לעשות ידנית
לא הייתי טורח לטעון את גרסת הRTL (אבל כל פרויקט ומה שמתאים לו כמובן).