דף הבית » סקירת תבניות

תבנית ברירת המחדל של שנת 2013 היא Twenty Thirteen

16 במרץ 2013 | מאת רמי | 11 תגובות | תגיות: , ,

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

תמונת כותרת של Twenty Thirteen

תמונת כותרת של Twenty Thirteen

קצת רקע

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

בשנת 2010 הייתה זו Twenty Ten ששינתה סדרי עולם עם שימוש תקני בוידג'טים, תפריטים, רקעים ותמונה בכותרת העליונה.

בשנת 2011 נחשפנו Twenty Eleven בה הוצג מסך "הגדרות תבנית" המאפשר לשנות לחלוטין את מבנה התבנית מתוך לוח הבקרה. שינויים כמו שינוי בפריסת התוכן (תוכן מימין, תוכן משמאל או לכל רוחב המסך), שינוי סכימת צבעים (בהיר או כהה) ועוד.

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

בשנת 2013 פותחה Twenty Thirteen בה ניתן דגש לסוגי התוכן שאנו מפרסמים והשימוש במנגנון הפורמטים. שינוי פורץ דרך נוסף שיכנס כנראה ל-Main Stream בשנים הקרובות הוא השימוש בפונטים לצורך הצגת אייקונים. במקום להשתמש בהרבה תמונות קטנות או CSS Sprites ניתן להשתמש בפונט שמציג אייקונים (במקום אותיות).

מאפיינים חדשים

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

תבנית ברירת המחדל Twenty Thirteen

תבנית ברירת המחדל Twenty Thirteen

תבנית Twenty Thirteen בצבע כחול

תבנית Twenty Thirteen בצבע כחול

Twenty Thirteen היא תבנית רספונסיבית לחלוטין המותאמת לכל מכשירי הקצה ולכל רזולוציית מסך. זה מוביל אותי לנושא השני:

תבנית זו עושה שימוש באייקונים מבוססי פונטים של פרוייקט Genericons. אני אהבתי לראות את מפתחי הליבה של וורדפרס מקדמים שימוש בטכניקות פורצות דרך. השימוש באייקונים מבוססי פונטים נמצא בתחילת דרכו, רוב מעצבי ה-FrontEnd עדיין משתמשים בתמונות וב-CSS Sprites. זו הפרקטיקה המקובלת היום והיא עושה את העבודה. אבל באייקונים מבוססי פונטים יש מספר יתרונות מובנים על פני CSS Sprites. קודם כל ניתן לבחור צבע שונה לפונט בעזרת CSS ולהציג את אותו האייקון בעשרות צבעים. דבר שני, לפונט ניתן להגדיר גודל שונה ב-CSS בהתאם לרוחב המסך, וכיוון שמדובר ב- Vector Font Icons אין פיקסליזציה כמו שיש בחלק מהתמונות. כלומר פונטים ניתנים לשינוי בעזרת CSS ואילו תמונות הן סטטיות.

אייקונים מבוססים פונטים של Genericons

אייקונים מבוססים פונטים של Genericons

ניתן לראות אתר דוגמא שעושה שימוש בתבנית החדשה בכתבות – http://twentythirteendemo.wordpress.com/

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

מאת רמי

אחראי על אתר וורדפרס בעברית ועל תרגום ושחרור גרסאות וורדפרס בעברית. מפתח ליבה, בכל גרסה החל מגרסה 2.8, מפתח מוביל בגרסה 4.4 ובגרסה 4.6. מספק שירותי פיתוח אתרים, פיתוח תוספי וורדפרס לסטרטאפים ופיתוח כלים למפתחי וורדפרס - GenerateWP.com.

11 תגובות »

  • יואב כותב :

    תודה על הקרדיט, אבל לא הייתי שותף לפיתוח (בינתיים) 🙂

  • מאור כותב :

    תבנית מצויינת לדעתי, שמח שאנחנו "חוזרים" למראה הבלוגי.

    ותודה על האזכור (:

  • ראובן קרסיק כותב :

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

  • ראובן קרסיק כותב :

    ועוד משהו: 🙂
    Wordpress עושה שימוש בGenericons, וGenericons עושה שימוש בוורדפרס. נסגר המעגל 😉

  • דידי כותב :

    תבנית בהחלט שונה מקודמותיה אולי טיפה צבעונית מידי כפי שכתבת. יש משהו שמזכיר את הקו העיצובי של win 8 – משטחי צבע מרווחים, מינימום אלמנטים ושימוש באייקונים.

  • רמי כותב :

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

  • תומר כהן כותב :

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

  • רמי כותב :

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

  • תומר כהן כותב :

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

    דוגמה לשימוש שגוי בגופני סמלים ניתן למצוא אצל מיקרוסופט – במשך שנים הם השתמשו בגופן Windings לשילוב של סמלים בטקסט, כאשר אם הגופן לא נטען אצל המשתמש יתקבלו סימנים מוזרים (למשל "J" במקום "☺"), והבעיה הפכה לגדולה יותר כאשר שירותי דואר אלקטרוני התחילו לסנן תוכן מהודעות HTML וגרמו לכך שגם הגדרת השימוש בגופן הנ"ל לפעמים תאבד בדרך. מרבית הסמלים בהם הם השתמשו בגופן Windings הם כיום חלק מהתקן, ולכן זה מגוחך שהם טרם הרגו את הגופן הזה לטובת פתרון גנרי יותר שלא מחייב שימוש בגופן.

  • עידן כותב :

    איך אני מעיף את הווידג'ט של הכתיבת תגובה שתקוע לי בכל עמוד כמו אני לא יודע מה?

    אני לא מעוניין שיופיע לי בכל עמוד אפשרות להשאיר תגובה.
    למישהו יש פתרון?

  • עידן כותב :

    מיותר לציין שיש לי וורדפרס בעברית

הוסף תגובה !

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

תגיות HTML מורשות לשימוש:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>