Your SlideShare is downloading. ×
WordPress theme translation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WordPress theme translation

1,838
views

Published on

Slides from my WordCamp Jerusalem 2010 about how to translate a theme and add RTL languages support.

Slides from my WordCamp Jerusalem 2010 about how to translate a theme and add RTL languages support.

Published in: Technology

1 Comment
1 Like
Statistics
Notes
  • Actually not working with my plugin.

    I have done following tasks: loaded the TextDomain

    $my_td = 'mysignup';
    function my_signup_textdomain_init() {
    load_plugin_textdomain( $my_td, false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
    }
    add_action('plugins_loaded', 'my_signup_textdomain_init');

    Added language files(po, pot, mo) in wp_plugin_folder\my_signup\languages (for Bengali bn_BD)

    mysignup.pot
    mysignup.mo
    bn_BD.po
    bn_BD.mo

    changed the language code in wp_config.php file

    define('WPLANG', 'bn_BD');

    But problem is nothing is changed. I am not sure what i have done as mistake. Now i need to know how can i test everything is fine i have done and how can i solve the issue.

    Please help me. Thanks in advance.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,838
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
55
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

  • כדי להפיק את המירב מהרצאה הזו, תצטרכו ידע ב-CSS, והיכרות טובה עם מבנה ערכות העיצוב של וורדפרס וגם fמעט PHP
  • לפני שאני מתחיל - כמה שאלות קצרות
    - כמה מכם כבר תרגמו בעבר ערכת עיצוב לעברית
    - וכמה מכם בונים אתרי וורדפרס גם עבור אחרים, כמקצוע או תחביב?
  • נניח והחלטתם לבנות לעצמכם אתר באמצעות וורדפרס. התקנת וורדפרס בעברית, ודרך לוח הבקרה חיפשתם ומצאת ערכת עיצוב מהממת.
    בשמחה ובגיל, הורדתם את ערכת העיצוב והפעלתם אותה…
  • רק כדי לגלות שהיישור בעברית נראה משובש (כל הטקסט בצד שמאל), ושהרבה מאוד טקסטים באתר נשארו באנגלית. באסה!!

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

  • בואנו נתחיל ולדבר על התאמה לשפות הנכתבות מימין לשמאל, או בקצרה RTL
    קיצור של Right To Left
  • כמו בהרבה דברים בחיים, גם כאן אנחנו יכולים לבחור בדרך הקצרה או הפשוטה יותר, ובדרך הנכונה
  • הדרך הלא נכונה אומרת שנפתח את קובץ ה-CSS של ערכת העיצוב, Style.css ונערוך אותו ישירות

  • למה הדרך הזו לא נכונה
    - כי אז, אם מפתח הערכת העיצוב יוציא עדכון -למשל עדכון אבטחה, או התאמה לדפדפן חדש שיצא לשוק - לא נוכל להינות ממנו
    - כי לא נוכל לשלוח את ההתאמה שעשינו לRTL למפתח - אין לו ממש מה לעשות עם קובץ style.css נוסף. אני בטוח שאחרים גם היו רוצים להשתמש בקוד שלנו, למה לא לשתף?
    - כי אנחנו ממש מסתבכים אם מדובר בChild theme, וחבל
  • למה הדרך הזו לא נכונה
    - כי אז, אם מפתח הערכת העיצוב יוציא עדכון -למשל עדכון אבטחה, או התאמה לדפדפן חדש שיצא לשוק - לא נוכל להינות ממנו
    - כי לא נוכל לשלוח את ההתאמה שעשינו לRTL למפתח - אין לו ממש מה לעשות עם קובץ style.css נוסף. אני בטוח שאחרים גם היו רוצים להשתמש בקוד שלנו, למה לא לשתף?
    - כי אנחנו ממש מסתבכים אם מדובר בChild theme, וחבל
  • למה הדרך הזו לא נכונה
    - כי אז, אם מפתח הערכת העיצוב יוציא עדכון -למשל עדכון אבטחה, או התאמה לדפדפן חדש שיצא לשוק - לא נוכל להינות ממנו
    - כי לא נוכל לשלוח את ההתאמה שעשינו לRTL למפתח - אין לו ממש מה לעשות עם קובץ style.css נוסף. אני בטוח שאחרים גם היו רוצים להשתמש בקוד שלנו, למה לא לשתף?
    - כי אנחנו ממש מסתבכים אם מדובר בChild theme, וחבל
  • הדרך הנכונה היא ליצור קובץ rtl.css
    בתיקיית ערכת העיצוב (היכן שממוקם קובץ ה style.css שלנו
  • rtl.css הוא קובץ שיטען באופן אוטומטי כשהאתר שלנו יעלה במידה ושפת האתר מוגדרת כשפה הנכתבת מימין לשמאל
    קובץ הrtl.css יטען לאחר קובץ הstyle.css, מה שאומר שאם נשתמש באותם סלקטורים בCSS, ההגדרות בקובץ ה-rtl הן אלא שתקבענה איך האתר יראה
  • הנה רשימה של התאמות שקובץ ה-rtl.css צריך לעשות, אל דאגה - נעבור על כולן אחת אחת
  • נתחיל עם מספר הגדרות בסיסיות
    קודם כל נרצה לומר לדפדפן שאנחנו מציגים תוכן שנכתב מימין לשמאל - בדומה למאפיין DIR ב-HTML, אנחנו נוסיף את Direction לBODY.
    אפשר להוסיף לHTML במקום, אבל מה שיקרה הוא שבחלק מהדפדפנים הסקרולבר - פסי הגלילה של החלון יתהפכו גם הם, ובאופן אישי אני שונא שזה קורה - אז בואו ונסכים לשים את זה על הBODY, בסדר?

    ההגדרה השנייה שיש לנו שם - unicode-bidi אינה חובה, אבל היא תסייע לדפדפן להציג טקסטים במקרים שבהם יש לנו עברית, אנגלית ו/ספרות בפסקה אחת וכדאי להוסיף גם אותה

  • שימו לב שהגדרה של direction על ה body מחלחלת מטה לכל האלמנטים שלנו, ויתכן שנרצה לא להפעיל אותה במקרים מסוימים - למשל בשדות של כתובת url או שם משתמש. במקרים כאלו אפשר פשוט לעשות override נקודתי עם ltr
  • בואו ונבדוק את האתר שלנו - שום דבר לא השתנה - אבל זה בסדר, רק התחלנו
    נמשיך:
  • ישור טקסט - מה שאנחנו רוצים לעשות הוא ליישר את כל הטקסטים הפוך מהגרסה המקורית. מה שיושר בצד שמאל ייושר כעת בצד ימין ולהפך.
  • נראה מה יצא:
    אחלה - זו כבר התקדמות. שימו לב שתפריט הצד עדיין בצד שמאל, וכנראה שיש כאן positioning - בואו ונראה מה צריך לעשות
  • אוקי - אז כדי לטפל במיקומים חשוב לזכור שלא ניתן להגדיר, לאותו אלמנט, גם מיקום שמאלי וגם מיקום ימינ. לכן, במקרה הזה אנחנו קודם כל נאפס את המיקום הימני, ולאחר מכן נגדיר את המיקום השמאלי
  • משתפר
    הטסקסט הראשי נמצא מתחת לתפריט, וכנראה שיש לנו שם ריווחים - בואו נבדוק מה אפשר לעשות עם זה
  • כשאנחנו אומרים בוקס מודל, אנחנו מתכוונים לשוליים - אורווח החיצוני של האלמנט לאוביקטים שמסביבו - margin, לגבול של האלמנט - border, ולרווח מהגבול לתוכן padding (ריפוד)
  • לאלמנט שלנו מוגדר גם padding וגם margin - אבל בדרכים שונות
    הmargin מוגדר בתצורה של 4 כיוונים: TRBL - top right bottom left
    כדי להפוך אותו, פשוט נחליף בין הערך ה2 (ימין) והרביעי (שמאל)
    הפדינג מוגדר ישירות לצד ימין בלבד. מה שנעשה הוא שנאפס את הערך הזה, ונגדיר אותו בצד שמאל
    בגבול נעשה אותו דבר - שימו לב שהדרך התקנית לבצע איפוס היא באמצעות none
  • לאלמנט שלנו מוגדר גם padding וגם margin - אבל בדרכים שונות
    הmargin מוגדר בתצורה של 4 כיוונים: TRBL - top right bottom left
    כדי להפוך אותו, פשוט נחליף בין הערך ה2 (ימין) והרביעי (שמאל)
    הפדינג מוגדר ישירות לצד ימין בלבד. מה שנעשה הוא שנאפס את הערך הזה, ונגדיר אותו בצד שמאל
    בגבול נעשה אותו דבר - שימו לב שהדרך התקנית לבצע איפוס היא באמצעות none
  • לאלמנט שלנו מוגדר גם padding וגם margin - אבל בדרכים שונות
    הmargin מוגדר בתצורה של 4 כיוונים: TRBL - top right bottom left
    כדי להפוך אותו, פשוט נחליף בין הערך ה2 (ימין) והרביעי (שמאל)
    הפדינג מוגדר ישירות לצד ימין בלבד. מה שנעשה הוא שנאפס את הערך הזה, ונגדיר אותו בצד שמאל
    בגבול נעשה אותו דבר - שימו לב שהדרך התקנית לבצע איפוס היא באמצעות none
  • לאלמנט שלנו מוגדר גם padding וגם margin - אבל בדרכים שונות
    הmargin מוגדר בתצורה של 4 כיוונים: TRBL - top right bottom left
    כדי להפוך אותו, פשוט נחליף בין הערך ה2 (ימין) והרביעי (שמאל)
    הפדינג מוגדר ישירות לצד ימין בלבד. מה שנעשה הוא שנאפס את הערך הזה, ונגדיר אותו בצד שמאל
    בגבול נעשה אותו דבר - שימו לב שהדרך התקנית לבצע איפוס היא באמצעות none
  • בואו נראה - מעולה - אבל אנחנו יכולים לזהות כאן בעיה נוסף - שימו לב לתאריך שנדחף לו לצד שמאל - בטח מוגדר כאן floats
  • אכן - כאן, פשוט מאוד - נהפוך את ההגדרה

  • והנה נראה שהכל בסדר.
    אבל משהו עדיין חסר פה- הלוגו של וורדפרס שהיה לנו ברקע
    הלוגו מוגדר כרקע, והוא מוצמד לצד שמאל של האובייקט ולכן הוא מוסתר על ידי תפריט הצד
  • מה שאנחנו צריכים לעשות הוא לשנות את הערך של המיקום האופקי של הרקע- כך ש0 הופך ל100% ו 10% 90
    במקרים מסוימים יתכן ונצטרך תמונה שונה, אבל לא במקרה הזה מאחר ומדובר בלוגו פשוט
  • שימו לב שכשהרגע ממוקם בפיקסלים, יש לנו בעיה וקשה מאוד לדעת איך למקם אותו בRTL
  • בואו נראה,
    יופי
    דבר אחרון שאני אתייחס אליו, והוא יותר רשות - זה עניין הפונטים.
  • באופן כללי - אני חושב שאין היגיון בכתב נטוי בעברית. אני נוטה לבטל את רוב ההטיות. בעיה נוספת היא הפונטים - אני חושב שהפונט היחיד שנראה פחות או יותר זהה בכל הפלטפורמות הוא Arial.

  • ככה זה נראה בערכת העיצוב שלנו

  • מעולה, מה אתם אומרים?

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

  • אז סיימנו עם הrtl, נעבור ל i18n
    מה זה בעצם?
  • אז סיימנו עם הrtl, נעבור ל i18n
    מה זה בעצם?
  • i18n זה קיצור ל internationalization
  • i18n זה קיצור ל internationalization




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




















  • That’s about it - if you want to test your theme or plugin with RTL mode without messing around to much, just download the RTL tester plugin from the repository.Also - there’s a nice tool called CSS Janus - google it up ->it *will* make your life much easier. One last thing - all the information presented here today is available in the codex!
  • That’s about it - if you want to test your theme or plugin with RTL mode without messing around to much, just download the RTL tester plugin from the repository.Also - there’s a nice tool called CSS Janus - google it up ->it *will* make your life much easier. One last thing - all the information presented here today is available in the codex!
  • That’s about it - if you want to test your theme or plugin with RTL mode without messing around to much, just download the RTL tester plugin from the repository.Also - there’s a nice tool called CSS Janus - google it up ->it *will* make your life much easier. One last thing - all the information presented here today is available in the codex!
  • That’s about it - if you want to test your theme or plugin with RTL mode without messing around to much, just download the RTL tester plugin from the repository.Also - there’s a nice tool called CSS Janus - google it up ->it *will* make your life much easier. One last thing - all the information presented here today is available in the codex!

  • Transcript

    • 1. Translate a theme Yoav Farhi @yoavf, yoav@farhi.org http://blog.yoavfarhi.com
    • 2. Prerequisites To get the most out of this presentation you should be familiar with the basic structure of a WordPress theme and have a good grasp of CSS.
    • 3. ?
    • 4. right to left i18n
    • 5. right to left
    • 6. rtl
    • 7. The ugly way The right way
    • 8. Ugly Directly edit the style.css file
    • 9. Why ugly?
    • 10. Why ugly? No updates
    • 11. Why ugly? No updates Cannot redistribute
    • 12. Why ugly? No updates Cannot redistribute Hard with child themes
    • 13. Right Create an rtl.css file
    • 14. rtl.css
    • 15. rtl.css
    • 16. rtl.css The Basics Text Alignment Floats Positioning Padding, Margin and Borders Fonts Backgrounds
    • 17. The basics body { direction:rtl; unicode-bidi:embed; }
    • 18. The basics input#url { direction:ltr; }
    • 19. Text Alignment style.css #body { text-align: left; } rtl.css #body { text-align: right; }
    • 20. Positioning style.css #menu { position: absolute; right: 2px; top: 0; } rtl.css #menu { }
    • 21. Positioning style.css #menu { position: absolute; right: 2px; top: 0; } rtl.css #menu { right: auto; left: 2px; }
    • 22. The Box Model Diagram CC http://css.flepstudio.org/en/css-box-model/introduction.html
    • 23. The Box Model style.css #content { margin: 30px 14em 0 3em; padding-right: 60px; border-right: 1px dashed #000; } rtl.css #content { }
    • 24. The Box Model style.css #content { margin: 30px 14em 0 3em; padding-right: 60px; border-right: 1px dashed #000; } rtl.css #content { margin: 30px 3em 0 14em; }
    • 25. The Box Model style.css #content { margin: 30px 14em 0 3em; padding-right: 60px; border-right: 1px dashed #000; } rtl.css #content { margin: 30px 3em 0 14em; padding-right: 0; padding-left: 60px; }
    • 26. The Box Model style.css #content { margin: 30px 14em 0 3em; padding-right: 60px; border-right: 1px dashed #000; } rtl.css #content { margin: 30px 3em 0 14em; padding-right: 0; padding-left: 60px; border-right: none; border-left: 1px dashed #000; }
    • 27. Floats style.css #content h2 { float: right; clear: left; } rtl.css #content h2{ float: left; clear: right; }
    • 28. Backgrounds style.css #header a { background: url(grey-s.png) 0 0 no-repeat; } rtl.css #header { background-position: 100% 0; }
    • 29. Backgrounds style.css #header a { background: url(grey-s.png) 0 0 no-repeat; } rtl.css #header { background-position: 100% 0; background-image: url(header-rtl.png); }
    • 30. Backgrounds style.css #header a{ background: url(header.png) 22px 0 no-repeat; } rtl.css #header a{ background-position: ??? 0; }
    • 31. Fonts use basic sans-serif fonts no italics
    • 32. Fonts style.css #header, h3, #menu ul li { font: italic 230% Times, serif; } #header, h3, #menu ul li { rtl.css font-family: Arial, Helvetica, sans-serif; font-style: normal; }
    • 33. Basic classes style.css .alignleft { float: left; } rtl.css Don’t!
    • 34. right to left
    • 35. right to left i18n
    • 36. i18n ?
    • 37. i18n ? internationalization 18
    • 38. The ugly way The right way
    • 39. Ugly Translate in the template files
    • 40. Right Create po/mo translation files
    • 41. How Wrap your strings Generate the .POT file Distribute (and translate)
    • 42. Wrap your strings
    • 43. functions _e( 'text' ) __( 'text' ) esc_attr_e( 'text' ) _x( 'text' , 'comment' ) _n( '1 comment', ' Lots of comments ', $count )
    • 44. _e( 'text' ) = echo the translation
    • 45. _e( 'text' ) <div class="meta">Filed Under [...] <div class="meta"><?php _e( "Filed Under", 'mytheme' ); ?>[...]
    • 46. __( 'text' ) = pass the translation
    • 47. __( 'text' ) <?php the_tags('Tags: '); ?> <?php the_tags( __('Tags: ', mytheme) ); ?>
    • 48. the textdomain _e( 'text', 'mytheme' ) __( 'text', 'mytheme' ) separates the translation from the core WordPress translation
    • 49. for more info, check out: wp-includes/l10n.php
    • 50. Generate the .POT file
    • 51. 1.Start POEdit http://poedit.net
    • 52. 2.File -> New Catalog...
    • 53. 3. Enter Project name
    • 54. 4. Paths -> New item -> '. '
    • 55. 5. Keywords -> New item -> '__'
    • 56. 5. New item -> '_e'
    • 57. 6. Save POT in theme dir
    • 58. 7. POEdit will find strings
    • 59. 8. Translate
    • 60. 9. Save as lang_code.po
    • 61. 10. load_theme_textdomain functions.php load_theme_textdomain( 'mytheme', get_template_directory() );
    • 62. Almost done
    • 63. Almost done RTL Tester plugin
    • 64. Almost done RTL Tester plugin CSS Janus (RTLize your css)
    • 65. Almost done RTL Tester plugin CSS Janus (RTLize your css) The codex
    • 66. Almost done RTL Tester plugin CSS Janus (RTLize your css) The codex Multilingual Plugins
    • 67. Questions? @yoavf, yoav@farhi.org http://blog.yoavfarhi.com

    ×