ארכיון תגיות: Twenty Twelve

תבנית וורדפרס Twenty Twelve

בגרסה הבאה של WordPress תוכנס לשימוש תבנית ברירת מחדל חדשה בשם Twenty Twelve ‏(2012), כחלק ממסורת בה מוחלף עיצוב ברירת המחדל של התוכנה פעם בשנה. עיצוב זה יוכנס לשימוש בגרסה הבאה של וורדפרס (3.5), אבל זמין כבר עתה להורדה מאתר התבניות של וורדפרס.

הייחוד הגדול בתבנית זו לדעתי הוא היותה תבנית מגיבה (רספונסיבית). משמעות הדבר שהתבנית משתמשת ביכולות Media Queries של CSS3 כדי להתאים את מראה האתר לגדלי מסך שונים ללא צורך בתחזוקה של גיליון סגנון נפרד או תוספים מיוחדים שכל מטרתם היא לזהות את פרטי הדפדפן ולשלוח עבורו הוראות עיצוב מיוחדות. למעשה, ניתן להשתמש ביכולות אלו גם בהקשר של מחשבים רגילים ולא רק טלפונים ניידים ומחשבי לוח; נסו לשנות את גודל החלון של אתר שמשתמש ב־Media Queries ותראו איך אלמנטים שונים בדף משנים את המיקומים שלהם בהתאם לגודל החלון. עוד על התכונות החדשות של התבנית ניתן למצוא אצל רמי מאתר wp-tricks.

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

קובץ השפה זמין פה ובצורה בינרית כאן. הדרך הפשוטה ביותר לשלב תרגום בעברית לעיצוב היא להתקין את התבנית כרגיל דרך ממשק הניהול של המערכת או ידנית באמצעות העתקת הקבצים לתיקייה המתאימה לשרת, ולאחר מכן למקם את הקובץ הבינרי על השרת בתת התיקייה languages בשם he_IL.mo. הקובץ הבינרי מכיל את הקובץ הטקסטואלי לאחר שהועבר התאמות קלות, וניתן לייצר אותו ידנית באמצעות הפקודה msgfmt he_IL.po -o he_IL.mo אם מעוניינים לבנות אותו בעצמנו או לבצע שינויים בקובץ השפה לפני שממקמים אותו בשרת. כולי תקווה שהאנשים האחראים כיום על תרגום המערכת יראו לנכון לשלב חזרה את השינויים שביצעתי, כך שבעתיד נזכה לתצוגה עברית ברמה הגבוהה ביותר ולא נצטרך לבצע שינויים כלשהם בצורה ידנית לשם כך.

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

כדי ליצור תבנית בת, מספיק ליצור תיקייה חדשה בתוך תיקיית התבניות שלנו, ובה שני קבצים בלבד; style.css ו־rtl.css. תוכנם של הקבצים יהיה כדלקמן:
style.css
/*
Theme Name: My website theme
Theme URI:
Description:
Author:
Author URI:
Template: twentytwelve
Version:
*/
@import url("../twentytwelve/style.css");

(כדאי מאד להקפיד למלא גם את השדות הריקים!)

rtl.css
@import url("../twentytwelve/rtl.css");
לאחר יצירת שני הקבצים הנ"ל וטעינת התבנית החדשה שיצרנו, היא אמורה להיראות זהה לתבנית twentytwelve. אם זה לא עובד טוב, כדאי לוודא כי התבנית המקורית אכן יושבת במיקום /wordpress/wp-content/themes/twentytwelve/. מכאן אתם רשאים לעצב את התבנית האישית שלכם כיד הדמיון הטובה עליכם.

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

  • טעינת גופן Gladia של מיזם קולמוס באמצעות @font-face שנותן לכותרות באתר מראה מרובע ועתידני.
  • הוספת צלליות לכותרות ולתפריטים באמצעות text-shadow ו־box-shadow.
  • הסרת כותרת המשנה והגדלת גופן הכותרת הראשית.
  • הגדרת עברית על התבנית TwentyTwelve. אני מקווה שמתחזקי השפה העברית של וורדפרס יראו לנכון לשלב חזרה את כל התיקונים שביצעתי.