Internationalization: Preparing Your WordPress Theme for the Rest of the World

  • 2,561 views
Uploaded on

Internationalization and localization of WordPress themes

Internationalization and localization of WordPress themes

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • If you’re interested in a tool to easily translate WordPress themes, have a look at the online localization platform https://poeditor.com/ It’s even got a plug-in you can use with it to integrate its API to your WordPress so that you save more time with the file management process. You can find it here: http://wordpress.org/extend/plugins/poeditor/
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
2,561
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
1
Likes
0

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

Transcript

  • 1. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Preparing Your Theme For The World Internationalization Monday, September 23, 13
  • 2. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Lisa Sabin-Wilson WordPress since 2003 Making a living on WP since 2005 Author: WordPress For Dummies @LisaSabinWilson Monday, September 23, 13
  • 3. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Remember, no matter where you go ... there you are. ~ Confucius Monday, September 23, 13
  • 4. @LisaSabinWilson - webdevstudios.com | September 19, 2013 WordPress is International Make sure your themes are too! Monday, September 23, 13
  • 5. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Imagine an internet like this. If you speak Chinese - it’s great! Not so great if you don’t. Monday, September 23, 13
  • 6. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Internationalization (I18n) The practice of making your theme translation ready. Monday, September 23, 13
  • 7. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Localization (l10n) The practice of translating an internationalized theme into a different language. Monday, September 23, 13
  • 8. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Internationalization (I18n) YOU ARE NOT ACTUALLY TRANSLATING IT. (Unless you really want to.) You are developing your theme to make it possible for someone else to translate it. Monday, September 23, 13
  • 9. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Monday, September 23, 13
  • 10. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Text Domain <?php _e(‘Plugin Name’, ‘text-domain’); ?> Defines which theme owns the translation-ready text and tells the GetText utility to return the translations only from the dictionary supplied with that name. Monday, September 23, 13
  • 11. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Text Domain *MOST* theme authors use the name of their theme as the text domain to make it easy to identify which language files belong to what theme. Monday, September 23, 13
  • 12. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Text Domain <?php _e(‘Plugin Name’, ‘startbox’); ?> Use a unique name here so you don’t conflict with other language libraries in your WordPress installation. Monday, September 23, 13
  • 13. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Theme Functions Define the textdomain in your Theme Functions file. This tells WordPress where your theme stores the language files and what the textdomain for your theme is. Monday, September 23, 13
  • 14. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Theme Functions 1st Parameter: texdomain This is the textdomain for the theme: lswtheme Monday, September 23, 13
  • 15. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Theme Functions 2nd Parameter: location of language files get_template_directory() . ‘/languages’ wp-content/themes/lswtheme/lanugages/ Monday, September 23, 13
  • 16. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Two Basic GetText functions _e (underscore + small case e) & __ (two underscores) Monday, September 23, 13
  • 17. @LisaSabinWilson - webdevstudios.com | September 19, 2013 _e Use this to wrap HTML text strings within a GetText function call. Monday, September 23, 13
  • 18. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Example of _e in use: <h2>Plugin Name</h2> becomes <?php _e(‘Plugin Name’, ‘text-domain’); ?> Monday, September 23, 13
  • 19. @LisaSabinWilson - webdevstudios.com | September 19, 2013 __ Use this to wrap PHP text strings within a GetText function call. Monday, September 23, 13
  • 20. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Unlike _e ... __ is used when you need to add a string of text to an EXISTING function call Monday, September 23, 13
  • 21. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Example of __ in use: <?php the_content( ‘Read More’ ); ?> becomes: <?php the_content( __(‘Read More’, ‘text-domain’) ); ?> Monday, September 23, 13
  • 22. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Use of _e or __ identifies which strings of text are available for translation. Monday, September 23, 13
  • 23. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Other functions _n , _nx, _x, _ex, esc_attr_e(), esc_attr__(), esc_html__(), esc_html_e() Some resources to read: http://ottopress.com/2012/internationalization-youre-probably-doing-it-wrong http://wp.smashingmagazine.com/2011/12/29/internationalizing-localizing-wordpress- theme http://codex.wordpress.org/I18n_for_WordPress_Developers Monday, September 23, 13
  • 24. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Without these functions, the GetText localization utility will ignore the text and those text strings will not be translatable on the fly. Monday, September 23, 13
  • 25. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Is Translatable even a word? Monday, September 23, 13
  • 26. @LisaSabinWilson - webdevstudios.com | September 19, 2013 YES! Monday, September 23, 13
  • 27. @LisaSabinWilson - webdevstudios.com | September 19, 2013 You want your themes to be eminently translatable. Monday, September 23, 13
  • 28. @LisaSabinWilson - webdevstudios.com | September 19, 2013 i18n Tips Do not put HTML markup inside your GetText functions. Translators should not have the ability to change your markup. Not this: <?php _e(‘<h2>Title</h2>’, ‘text-domain’); ?> Do this: <h2><?php _e(‘Title’,‘text-domain’); ?></h2> Monday, September 23, 13
  • 29. @LisaSabinWilson - webdevstudios.com | September 19, 2013 i18n Tips Acknowledge international date formats by allowing users to set their own formats in Settings-->General in their Dashboard. Not this: the_time(‘F j, Y’); Do this: the_time( get_option('date_format') ) Monday, September 23, 13
  • 30. @LisaSabinWilson - webdevstudios.com | September 19, 2013 i18n Tips Google Fonts and other font packs Not all font packs are made equal. Some do not support cyrillic languages (Russian, Japanese, etc) or languages with western european characters (Polish, etc). Monday, September 23, 13
  • 31. @LisaSabinWilson - webdevstudios.com | September 19, 2013 i18n Tips RTL (Right to Left) Support Some languages read/write right to left (RTL): Arabic, Hebrew, Urdu Monday, September 23, 13
  • 32. @LisaSabinWilson - webdevstudios.com | September 19, 2013 i18n Tips RTL (Right to Left) Support Create a stylesheet for RTL: style-rtl.css Monday, September 23, 13
  • 33. @LisaSabinWilson - webdevstudios.com | September 19, 2013 i18n Tips RTL (Right to Left) Support is_rtl(); Checks if current locale is RTL. if ( is_rtl() ) { wp_enqueue_style('rtl', get_stylesheet_directory_uri().'/css/ rtl.css’); } Monday, September 23, 13
  • 34. @LisaSabinWilson - webdevstudios.com | September 19, 2013 i18n Tips RTL (Right to Left) Support - CSS Start by adding this to your body selector in your style-rtl.css: body { direction: rtl; unicode-bidi: embed; } Monday, September 23, 13
  • 35. @LisaSabinWilson - webdevstudios.com | September 19, 2013 i18n Tips RTL (Right to Left) Support - CSS Go through your CSS line by line to create RTL support for each selector. Some hints: http://codex.wordpress.org/Right-to- Left_Language_Support Monday, September 23, 13
  • 36. @LisaSabinWilson - webdevstudios.com | September 19, 2013 i18n Tips RTL (Right to Left) Support - Testing RTL Tester This plugin adds a button to the admin bar that allow super admins to switch the text direction of the site. It can be used to test WordPress themes and plugins with Right To Left (RTL) text direction. http://wordpress.org/plugins/rtl-tester/ Monday, September 23, 13
  • 37. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Language Files Once your theme is fully internationalized... Create a .pot file and include it in your /languages folder Monday, September 23, 13
  • 38. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Language Files .pot stands for Portable Object Template. Contains a list of all translatable messages in your theme. Monday, September 23, 13
  • 39. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Language Files .po stands for Portable Object. Created when you translate a .pot file to a specific language - contains Human Readable text. Monday, September 23, 13
  • 40. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Language Files .mo stands for Machine Object. A binary file created automatically by translation software - - is NOT human readable. Monday, September 23, 13
  • 41. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Example default .po file From StartBox: http://wpstartbox.com Monday, September 23, 13
  • 42. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Example .po file msgid = text string available for translation msgstr = translated text Monday, September 23, 13
  • 43. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Example .po file Notice: the msgstr string is blank in the default file. Monday, September 23, 13
  • 44. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Example fr_FR.po file Notice: the msgstr string is filled in with the French translation of the msgid Monday, September 23, 13
  • 45. @LisaSabinWilson - webdevstudios.com | September 19, 2013 .pot | .po | .mo How do you create these files? Monday, September 23, 13
  • 46. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Translation Tools Poedit: http://poedit.com GlotPress: http://glotpress.org GNU GetText: http://gnu.org/software/gettext Monday, September 23, 13
  • 47. @LisaSabinWilson - webdevstudios.com | September 19, 2013 Translation Plugins for WordPress WPML: http://wpml.org/ WP Native Dashboard: http://wordpress.org/plugins/wp-native-dashboard/ Codestyling Localization: http://wordpress.org/plugins/codestyling-localization/ Monday, September 23, 13
  • 48. @LisaSabinWilson - webdevstudios.com | September 19, 2013 The End. Thank you for listening. Monday, September 23, 13