מדריך בסיסי להמרת תבניות וורדפרס
מאת חנית כהן | נשלח 8.08.2006 | נושאים וורדפרס, מדריכים, מחשבים
החלטתי שהדרך הטובה ביותר לכתוב את המדריך הזה היא פשוט שתלוו אותי צעד צעד בהמרה של תבנית.
קודם כל - הורדה: ניתן למצוא תבניות חינם באתר התבניות של וורדפרס, פשוט תבחרי אחת שאת אוהבת (עדיף כזו שתומכת ב widgets) ותורידי.
על מנת לבדוק שכל מה את עושה ייראה טוב ויעבוד כראוי, כדאי שתהיה לך מערכת וורדפרס מותקנת מקומית (על המחשב שלך), לשם כך צריך שרת ווב, מערכת מסד נתונים ותמיכה בשפת תכנות PHP.
אם כל הנ”ל נשמע לך כמו סינית - תתקיני וורדפרס על דיסק-און-קי ועברי לשלב העבודה מול התבניות, אם לא - הנה מספר אופציות:
- EasyPHP - נועד עבור אלו שמצד אחד רוצות מערכת פיתוח, ומצד שני לא חייבות קדמה ובעיקר לא רוצות להתעסק עם זה יותר מידי. כתבתי על זה פה.
- Xampp - עוד מערכת התקנה אוטומטית, מכילה גרסאות יותר מתקדמות של התוכנות ושני ממשקי ניהול מערכת. מצד אחד גרסה זו יותר ממומלצת, מצד שני, מנסיוני יש להתקנה נטייה להכשל אם יש לכן skype מותקן ובעוד כל מיני מקרים.
- התקנה ידנית - לכל אחד מהכלים שהזכרתי למעלה יש תוכנת התקנה באתר אליו קישרתי, יש להוריד את כולן, להתקין ולגרום לכך שיעבדו יחדיו. זה דיי מעיק ואלא אם כן יש לך סיבה טובה לעשות את זה (למשל שימוש ארוך טווח במערכות ווב) פשוט ותרי ובחרי באחת האופציות האחרות.
בשלב זה אני מניחה שיש לך מערכת וורדפרס מותקנת, ואנחנו נתחיל בהמרת התבנית.
אני בחרתי לעבוד עם התבנית : flowery שהיא תבנית יחסית פשוטה וקל ללמוד איתה.
קודם כל יש לפתוח את התבנית שהורדת ולמקם את התיקייה המכילה אותה בספריית התבניות של הוורדפרס שהיא:
בתוך הספרייה ישנם מספר סוגי קבצים: php,css וקבצי תמונות.
בקבצי ה php עלינו לתרגם טקסטים מאנגלית לעברית ולשנות את הפורמט של השעה והתאריך.
בכדי לערוך את קבצי ה php נשתמש ב-notepad בעורך שיודע לעבוד בקידוד utf8 כמו : notepad++.
נתחיל עם הקובץ הראשון: במקרה של התבנית שלי - comments.php
החל מרגע זה אנחנו בעצם מחפשות מחרוזות טקסט (בד”כ בין ” או בין ”), כל מחרוזת שמופיעה באנגלית צריך פשוט לתרגם לעברית. דבר נוסף שצריך לעשות הוא לשנות את התאריכים: תאריכים מוצגים בעזרת אחת משתי פונקציות: the_time ו the_date, למעשה צריך להחליף בהן את המחרוזת מ’F jS, Y’ ל ‘j F, Y’ והמהדרות תוכלנה להוסיף את האות ב לפני(ובצמוד) לאות F. הסבר על משמעות האותיות האלו אם בא לך לשחק קצת ניתן למצוא כאן.
לאחר שסיימנו עם כל קבצי ה php נעבור לקובץ ה css.
קובץ ה css אחראי למעשה על ממראה התבנית שלנו וכיוון התצוגה (ימין לשמאל), ניתן למצוא מדריך css בסיסי כאן.
ברמת הסבר בסיסי (אחרת לא נוכל להמשיך) הקובץ מחולק לפי תגיות עבורן מוגדר עיצוב. לאחר כל תגית יופיעו מאפייני העיצוב בתוך סוגריים מסולסלים, מאפיינים מופרדים זה מזה ב-; . לדוגמה :
body {background-color: red; margin: 10px 30px; }כאן העבודה שלנו הרבה יותר פשוטה, או לפחות יותר פרגמטית.
- שינוי כיווניות הדף: הוסיפי למאפייני תווית ה body את המאפיין הבא direction: rtl; מאפיין זה משמעותו שזהו מסמך שמוצג מימין לשמאל, לאחר השינוי
body {background-color: red; margin: 10px 30px; direction: rtl;} - החלפת ימין ושמאל בעיצוב: לכל אורך הדף החליפי את המילים left ו right כאשר הן מופיעות במאפיינים, אם הן חלק משם התווית אל תחליפי אותן.
- גבולות דיפון ותיחומים (margin, border,padding): מאפיינים אלו יכולים ללבוש מספר צורות, אך רק אחת מעניינת אותנו באמת, בצורה זו מופיעים 4 מספרים שונים. לדוגמה:
margin: 50px 0 0 25px;המספרים האלו מסמנים את המאפיינים עבור למעלה,ימין,למטה ושמאל לפי הסדר. במקרים אלו נחליף את המספר השני והאחרון זה בזה (כלומר את המאפיינים לצד ימין ושמאל) ונקבל עבור הדוגמה שלנו את זה:
border-width: 2px 3px 2px 5px;
padding: 10px 0 10px 10px;
margin: 50px 25px 0 0;
border-width: 2px 5px 2px 3px;
padding: 10px 10px 10px 0; - רשימות: לפעמים בתבנית שבחרתן הרשימות בתפריט הניווט (ולא רק בו) משתמשות בתמונות, בדרך כלל במקרה כזה, החלפת שמאל בימין (שלב 2) אמורה לפתור את הבעיה, אבל אם זה לא עזר, נסו לחפש בקובץ שורה כזו:
background: url(images/bullet.gif) no-repeat;ולהוסיף לה כיווניות, ככה:background: url(images/bullet.gif) right no-repeat; - פונטים: אחד הפונטים המומלצים בעברית הוא אריאל (Arial) ואחריו דויד מרים וכו’ חפשו בקוד שורה של הגדרת פונטים למשל:
font-family: helvetica,sans-serif;
ודאגו לשנות את תוכנה כך שהאופציה הראשונה תהיה אריאל:
font-family:Arial, helvetica,sans-serif;
לכל פונט יש גודל מומלץ עבורו כך שאם שיניתם פונט יכול להיות שתאלצו לשנות את הגדלים. גודל פונט מוגדר במאפיין font-size.
סיימנו עם קובץ ה css.
השלב האחרון שנשאר לעשות הוא לסובב את התמונות בכדי שיתאימו לעיצוב האתר, פותחים כל אחת מהתמונות בעזרת העורך הגרפי החביב עלייכן ופשוט עושים flip.
בזאת סיימנו, עכשיו כל שנותר לך הוא להיכנס לוורדפרס המקומי שלך ולהחליף את התבנית לתבנית המתורגמת על מנת לראות שאכן תרגמת הכל והכל נראה טוב.
את התבנית לאחר ההמרה ניתן להוריד מכאן ולהעזר בה לשם לימוד.
ניתן להשאיר הערות והצעות לתיקונים בתגובה לפוסט זה, ואני אשתדל לתקן ולעדכן את המדריך לפי הצורך.
תודות על תיקונים והצעות: שרון גפן, אסף פדרמן, ערן ושרית שלמעשה גרמה לכתיבת הפוסט.
נהניתם מהפוסט ? כדאי להרשם לעדכוני RSS ולקבל הכל ישירות.
שמי חנית כהן, אני בת 32 ואשת מחשבים משנת 93.
ראשית, את מלכה שכתבת את המדריך הזה.
שנית, במקום לעבוד עם Notepad, אני ממליצה בחום על Notepad++ החינמית שהיא בעצם מיני-סביבת פיתוח קלת משקל ונהנית ממספר יתרונות:
- יש בה יותר מ-UNDO אחד (שזה החסרון הבולט בעיניי בנוטפד)
- היא תומכת ביוניקוד בלי להתאמץ יותר מדי
- אפשר לפתוח מספר קבצים במקביל (וגם לחפש בהם!) ולנווט בהם עם טאבים.
- אם את מגדירה שהעמוד הוא מסוג PHP או CSS או ווטאבר, התוכנה תדגיש לך את התגים.
- יש לה יכולות (מינימליות) של השלמת תגים ע”פ סכימה.
ראשית, תודה
חוצמזה, אני פשוט עובדת עם vim ולכן לא מכירה אף עורך טקסט אחר - אני ישר מוסיפה את ההמלצה שלך עם קרדיט
יש לי זיכרון עמום של נסיון לעבוד עם notepad++ שלא הוכתר בהצלחה (אבל באותה מידה זה יכול להיות notepad2)
(ארררר……נשאלתי כמה זה 10 ועוד 1 והיות ואני מחזיק מעצמי מתוחכם, עניתי בבינארית, ומכיוון שהתשובה לא התקבלה, חזרתי לאחור וכל מה שכתבתי נמחק).
אם כבר עורכים וכאלה.
את התרגום שלי עשיתי עם Gedit.
לכל דבר אחר אני מעדיף את Vi, אבל לדבר הזה הוא מתאים בצורה מושלמת.
יש שם הדגשת צבעים, מה שמאוד עוזר לעין לאתר את המחרוזות הדרושות.
למרות שכשאני חושב על זה, גם בVim יש משהו כזה, לא?
את הבדיקה עשיתי בזמן שלקוח ftp היה מחובר לשרת של חברת האכסון שלי וכל פעם שגיליתי משהו שלא תורגם או תורגם לא נכון, פשוט העליתי אותו ישירות לשרת ודרסתי את הקובץ הקודם (כמובן שהכל גובה לפני כן).
אכן גם לvim יש צביעה ברורה של מחרוזות, שלא לומר מערכת מאד נוחה של מקרואים והחלפות וכו’
חוצמזה vim עוד יש על חלונות, אני דיי בטוחה שאין Gedit.
למעשה כשאני עושה את התהליך הוא פחות מסורבל כי אני משתמשת ביכולות של vim אבל המדריך נועד לכל העולם ולא רק לי
אני חושבת שלדרוש חישובים בינאריים יסנן לי יותר מידי אנשים, אבל אולי אני אשפר את המסנן כך שגם חישובים בינאריים יתקבלו בברכה (גם ככה הוא קיים בעיקר בשל השעשוע).
הבעיה עם בדיקה ב online היא שבאתר עובד שיש לו תעבורה, זה ייצור בעיות. בעקרון לאחר שעוברים את כל השלבים שכתבתי זה אמור להיות עובד, אבל אני נגד לשחק על גרסאות פרודקשן.
הא…הנחתי באופן טבעי שאם Vim אז גם לינוקס.
My bad
ובקשר לתעבורה וזה, אני מניח שאת צודקת.
לי פשוט אין בעיה כזאת:)
אז זהו ש vim כי אני אשת לינוקס, לא לינוקס כי לא הצלחתי לגרום לWIFI בבית (ורק בבית) לעבוד לי עם הלפטופ (בעבודה הוא עובד, ככה שזה כנראה קשור ל AP שלי).
אשר לתעבורה, גם לי אין בעיה כזו, אבל אני כבר רגילה לעבוד נכון - יותר מידי שנות עבודה בפיתוח כנראה.
אויה. ורק אני כאן פקאצת וינדוס קטנה ומרגיזה. אני חושבת שאשב בפינה ואשתוק.
(ואולי אהנהן בעיניים מזוגגות בכל פעם שמישהו יזכיר תוכנה שאין לי מושג מהי)
איזו תוכנה את לא מכירה ? (אפשר להכיר לך מהר)
ובסופו של יום כאמור - גם אני עובדת על החלונות המזורגגים.
זה קצת מפחיד. בטיוטות שלי, המדריך שלי לתרגום תבניות בנוי בדיוק אותו דבר. עם אותה ההקדמה.
יש לי מספר הערות משלי אז כנראה שכשאתאושש קצת יותר (נגמרה השבעה, סוף סוף) אוסיף את שלי בפרדוקס ואקשר אל ההסברים שלך.
תודה
אשמח להערותייך ולקישור כמובן.
שיהיה רק יותר טוב.
אחלה של מדריך…
חשבתי, אולי גם לציין את סוגי הפונטים הממולצים והגודל המקובל.
ואם בבלוג ישנם שתי שפות לפעמים אפשר להוסיף את התג unicode bidi.
ס’חתיין על היוזמה.
האמת היא שאני לאט לאט מגלה עוד מקומות שפספסתי (כמו למשל עניין הגבולות) כך שאני מקווה לעדכן את המדריך היום מאוחר יותר, כאשר אעשה זאת אוסיף גם את ההערה שלך (עם קרדיט כמובן)
[...] למדתי אצל אח“י דקר איך לתרגם תבניות כבסיס, וזה לא קשה - ולכן החלטתי גם לערוך את התבנית המעוברתת של שרון (זאתי, שכעת נמצאת כברירת מחדל) לאיך שאני אוהב. נעזרתי בעורך Npp. [...]
קודם כל סחתיין על המדריך!
אני לא מומחה גדול אבל לדעתי יש לך שגיאה בהוראות לתיקון css
אני מתיחס לתיקון margin ו padding.
קודם כל אין משמעות ל”אמצעי” מבין 4 פריטים
דבר שני, צריך להחליף את היחידה השניה משמאל עם הרביעית משמאל. הסדר, משמאל לימין, משקף: למעלה, ימינה, למטה, שמאלה - כמו שעון.
נקווה שאני לא טועה בענין הזה.
חוצמזה לגבי body לא צרפת את הדוגמה לאחר התיקון (עם שנוי הכוון לעברית).
[...] מדריך בסיסי להמרת תבניות וורדפרס של דקר [...]
ברמה התיאורטית קלטתי את זה
כל זה טוב ויפה, אבל נתקלתי בתבנית שזה לא כ”כ עובד ואין לי מושג איך לסדר, אם אפשר יהיה לקבל עזרה יהיה נחמד.
http://cordobo.de/free-wordpress-templates/cordobo-green-park/
ב-firefox השינויים עובדים וזה נראה בסדר, אבל IE לחלוטין מתחרפן.
רעיונות להבדלים בין השניים?
תודה
אשמח לעזור.
רוצה לשלוח לי את התבנית אחרי המרה ?
בד”כ מדובר על בעיות CSS
מנוע פענוח הדף של IE שונה מזה של השועל, וזה גורם לבעיות לפעמים.
אני מוכן לשלוח לך את התבנית, אבל איך?
אני לא רואה כאן אפשרות לAttachments.
מדריך נפלא… אני רק בניסיונות ראשונים להקמת בלוג, ותוך כמה שעות הצלחתי (כמעט) לתרגם ערכה.
יש לי עדיין כמה בעיות קטנות ואחת גדולה: איך מוסיפים תמיכה בווידג’טים לערכה?
אגב, הערכה תמכה בווידג’טים לפני ההמרה וגם אחרי ההמרה, אבל אחרי שניסיתי להוסיף ווידג’טים והם לא הופיעו בדף, סימניית ה”ווידג’טים לבר הצדדי” לא מופיעה יותר… (כמובן שהתוסף של הווידג’טים עדיין מופעל).
בקיצור, קיוויתי לקבל הסבר קצר על תמיכה בווידגטים בערכות כדי שאוכל לבדוק מה לא בסדר בערכה המתורגמת שלי.
עדכון: הצלחתי להחזיר את סימניית הווידג’טים לערכה שלי, הבעיה היתה המשחקים שלי ב-functions.php.
בכל מקרה, עדיין אין לי ווידג’טים אבל זו בעיה אצלי בכל ערכות העיצוב, אז אני אפנה לפורום ואקווה לטוב.
שוב תודה על המדריך הנפלא!
היי זואית, יש מצב שהבעיה נובעת מכך שלא התקנת\הפעל את תוסף הווידג’טים.
תסבירי יותר טוב למה כוונת ב “אין לי ווידג’טים”.
בכל מקרה - אני אשמח לעזור
התכוונתי שלמרות שהוספתי את הווידג’טים לברים (יש בערכה שלי שניים - שמאלי וימני), הם לא הופיעו באתר שלי.
בכל מקרה, הצלחתי להחזיר אותם הביתה ע”י השוואה בין ה-CSS המקורי וזה שהמרתי. נשארה לי רק בעיה של החלפת הרוחב בין הווידג’טים המוצגים בבר הימני עם אלה המוצגים בשמאלי (רוחב הברים לא זהה). החלפה של הערך בwidth שמה אותם אחד על השני בבר השמאלי במקום להחליף את ערכי הרוחב. כנ”ל עם הבר הימני אם אני משנה את ה-float ל-right.
הנה השורות הבעייתיות (במקור):
#column2 {float: left; width: 210px; margin-left: -100%; font-size: 0.9em;}
#column3 {float: left; width: 190px; margin-left: -190px; font-size: 0.8em;}
כאשר column2 הוא ה-id של הבר השמאלי ו-column3 ה-id של הבר הימני. אז למה צריך להמיר אותן?
מקווה שהסברתי ברור… ותודה, כמובן.
אוקיי, פתרתי את זה. החלפתי לא רק את הרוחב בין שני הברים אלא גם עדכנתי את ה-margin-left של הבר הימני (column3), כי הוא מופיע בערך מוחלט ולא באחוזים כמו השני.
אז התקבל (מן הסתם גם עכשיו האנגלית תצא מעוותת… מנפלאות הטקסט הדו-לשוני):
#column2 {float: left; width: 190px; margin-left: -100%; font-size: 0.8em;}
#column3 {float: left; width: 210px; margin-left: -210px; font-size: 0.9em;}
בינתיים אני לא מבינה הרבה, אלא מנסה לפי אינסטינקטים. כך או כך, כרגע אין בעיות. תודה!
[...] למעשה יש כאן שני נושאים: אתחיל בשני. ההיפוך בסוגריים יכול להגיע רק מבעיות בתרגום התבנית. שווה לפנות למתרגם התבנית עם הסבר ברור של הבעיה ועם צלום מסך לקבלת עזרה. אם תרגמת בעצמך את התבנית אולי הבעיה היא בתרגום שלך, נסה להעזר במדריך לתרגום תבניות וורדפרס. [...]
המון תודה על המדריך הזה.
[...] אז החלטתי לנסות לעשות את זה לבד, או יותר נכון לפי ההוראות של אח”י דקר. המדריך שלה פשוט מצויין וכשסיימתי איתו, העיצוב היה [...]
[...] עיצובים נוספים מעוברתים וכן שני מדריכי עיברות תבניות ([1], [2]). כפי שכתבתי בתחילת הפוסט, יש לכם מעט זמן לתפוס את [...]
[...] עיצוב ודחוף. תציץ בבלוג התבניות המעוברתות או במדריכךהעברות , קרא קצת על בחירת תבניות ופשוט תחליף [...]
איזה מדריך נפלא! השתמשתי בו עכשיו בשביל לעברת תבנית שיצרתי לאתר שדורש עברית ואנגלית. אבל יש לי קושי שאני לא מצליחה להתגבר עליו: הכל עכשיו מימין לשמאל, אבל העברית מופיעה כמו כל מיני סימנים, ואי אפשר לקרוא אותו. אני משתמשת בוורדפרס באנגלית - האם אפשר ליצור אתר בעברית עם הגרסה האנגלית של וורדפרס? ואם כן, איך?
תודה!
תודה מרים, ההימור שלי הוא ששמרת את קבצי התבנית בפורמט ascii ולא בפורמט utf-8 (כפי שציינתי במדריך).
נסי להמיר את הפורמט (יכול להיות שתאלצי לתרגם שוב כתלות בעורך הטקסט שלך)
[...] הפעם על תבניות. הראשון: בלוג עצמאי - בחירת שם מתחם השני: בלוג עצמאי - בחירת תוכנה השלישי: בלוג עצמאי - בחירת חברת אחסון הרביעי: בלוג [...]
[...] מדריך בסיסי להמרת תבניות וורדפרס - על תרגם תבניות וורדפרס לעברית. שווה לכל מי שרוצה תבנית וורדפרס שאינה מתורגמת [...]
בקשר לגודל הפונט, כדאי להגדיר אותו ב em ולא בפיקסלים.
(המדריך רמז להגדרה בפיקסלים - בחלק של קביעת גודל פונט)
ההבדל? ב IE ואולי באחרים כשבוחרים view > text size ומשנים את מה שמסומן, אם עשינו EM גודל האותיות משתנה, אם עשינו px / pt - לא.
מומלץ גם להוסיף, אם אין, html { font-size: 100.01%; } , זה פותר באג באקספלורר עם EMים ונדמה לי בעוד דפדפן.
האמת היא שאני משתדלת מאד שלא לשחק עם גדלי גופנים ככל שניתן, ובטח לא עם מידות.
אני נוטה להשתמש במידות שהוגדרו בתבנית מראש, ואולי לשנות את הערכים אבל לא את המידות.
אני מסכימה איתך ש-em היא האפשרות העדיפה, אני רק ממש משתדלת שלא באמת לשנות תבניות שאני מתרגמת יותר מהנדרש.
היי חנית,
אז ערכתי את הכל שוב.
תירגמתי עכשיו תבנית לבלוג שלי http://www.pintophotography.com/wp/
עכשוי הבעיה הראשונה הייתה שאחרי שערכתי הכל והעלתי ראיתי סימני שאלה ושראיתי את התגובות הבנתי את הבעיה,
אבל כבר ערכתי את כולם
לגבי מיקום מימין לשמאל שמתי את השורה שלך אבל דבר אחד,
הכל זז יפה רק שהאייקונים עולים על הטקסט (או הפוך אני כבר לא יודע חח).
איך אני פותר את זה?
אם תרצי אני יותר מאשמח לשלוח לך את קובץ ה CSS או את הקבצים שתרגמתי.
בתודה מראש על העזרה,
פינטו.
[...] וורדפרס מתורגמות לעברית |עוד תבניות. מדריך בסיסי להמרת תבניות וורדפרס. בנה את התבנית בעצמך. פורום [...]
פשוט מצויין.
רציתי רק להוסיף שמשתמשי מק יכולים גם להנות מהתקנה מקומית של וורדפרס על ידי הורדה של התוכנה MAMP
או בקיצור
Mac - Apache - MySQL - PHP
http://www.mamp.info
[...] תבניות לוורדפרס: המרת תבניות, [...]
[...] בסיסיות ושינויים לתבנית. מדריך (בעברית) בסיסי להמרת תבניות וורדפרס. הוספת תמונה וקישורים לקובץ הכותרת: Clickable Header Images הגדרת [...]
ענק, מעולה ומשובח.
תודה על המדריך!
בקשר לתרגום תבניות שמכילות קובץ שפה
מצאתי תבנית אנגלית שנותנת החלפת שפה בקובץ הלוקליזציה
זה אתר כותב התבנית
http://www.onehertz.com/portfolio/wordpress/
ערכתי אותו (את קובץ PO עם poEfdit) ושיניתי כל מיני ביטויים
והוא לא מביא שינויים בתבנית
מה צריך עוד לעשות?
תודה
[...] תבנית של וורדפרס, עומדים לרשותך שני מדריכים מצוינים: זה של חנית (ידידותי יותר), וזה של ארז (מפורט יותר). גם אם אתה במערכת [...]
מתי מישהו ירים את הככפה ויקים אתר עם עיצובים מתורגמים לוורדפראס בחינם.
יש - בלוג התבניות.
http://themes.dakars.info
למיטב ידיעתי גם לארז (http://www.we-cms.info/blog) יש משהו דומה.
השארת תגובה