Slide 1

Slide 1 text

WordCamp San Francisco 2013 Shannon Smith Big A guide to theme internationalization in Japan

Slide 2

Slide 2 text

Shannon Smith Web Developer Café Noir Design www.cafenoirdesign.com @cafenoirdesign

Slide 3

Slide 3 text

What We’ll Cover • Introduction • Get a multilingual CMS • Internationalize • Localize • After the Theme • Closing

Slide 4

Slide 4 text

Introduction

Slide 5

Slide 5 text

Why build multilingual themes? Photo: nevsred

Slide 6

Slide 6 text

Defining Multilingual Multilingual vs. Unilingual (but not English) Image: wpbeginner

Slide 7

Slide 7 text

Step 0: Get a Multilingual CMS Photo:Dave Q

Slide 8

Slide 8 text

Step 0 : WordPress in Your Language 1. Install WordPress 2. Install Language Files http://codex.wordpress.org/ WordPress_in_Your_Language

Slide 9

Slide 9 text

Help! I can’t find my language! 1. Download the WordPress Translation Files http://svn.automattic.com/wordpress-i18n/ 2. Translate Core Files 3. Install Language Files http://codex.wordpress.org/WordPress_in_Your_Language

Slide 10

Slide 10 text

Find Your Peeps! WordPress Polyglots http://make.wordpress.org/polyglots/ Photo: Joelk75

Slide 11

Slide 11 text

Find Your Project! L10n: Localization Teams http://codex.wordpress.org/ L10n:Localization_Teams

Slide 12

Slide 12 text

Step 1: Internationalize Photo:andrechinn

Slide 13

Slide 13 text

i18n i18n = internationalization ʨ 18 letters i n

Slide 14

Slide 14 text

Internationalize “The first step is when the program's developers provide a mechanism and method for the eventual translation of the program and its interface to suit local preferences and languages for users worldwide.” http://codex.wordpress.org/Translating_WordPress

Slide 15

Slide 15 text

GNU gettext Localization Framework • Text Domain • Message-Level Translation • POT File http://codex.wordpress.org/Translating_WordPress http://www.gnu.org/software/gettext/gettext.html Photo:liza31337

Slide 16

Slide 16 text

Text Domains

Slide 17

Slide 17 text

Define Text Domain http://codex.wordpress.org/Function_Reference/load_theme_textdomain

Slide 18

Slide 18 text

Twenty-Twelve : Define Text Domain

Slide 19

Slide 19 text

Define Text Domain // Make theme available for translation // Translations can be filed in the /languages/ directory load_theme_textdomain( 'your-theme', TEMPLATEPATH . '/ languages' ); $locale = get_locale(); $locale_file = TEMPLATEPATH . "/languages/$locale.php"; if ( is_readable($locale_file) ) require_once($locale_file); http://codex.wordpress.org/Function_Reference/load_theme_textdomain

Slide 20

Slide 20 text

Using the Text Domain http://codex.wordpress.org/Function_Reference/load_theme_textdomain

Slide 21

Slide 21 text

Message-Level Translation

Slide 22

Slide 22 text

Message-level Translation PHP return statement → __('message') PHP echo statement → _e('message')

Slide 23

Slide 23 text

What is the difference? •PHP echo statement: outputs whatever you tell it to the browser •PHP return statement: returns a value from a function

Slide 24

Slide 24 text

Twenty-Twelve Echo Statement _e('message')

Slide 25

Slide 25 text

Twenty-Twelve Return Statement __('message')

Slide 26

Slide 26 text

Simple Strings http://codex.wordpress.org/I18n_for_WordPress_Developers echo '

' . __( 'Blog Options' ) . '

'; echo __( 'Using this option you will make a fortune!' ); _e( 'Using this option you will make a fortune!' );

Slide 27

Slide 27 text

Strings With Placeholders http://codex.wordpress.org/I18n_for_WordPress_Developers printf( __( 'Your zip code is %2$s, and your city is %1$s.' ), $city, $zipcode );

Slide 28

Slide 28 text

Strings With Plurals http://codex.wordpress.org/I18n_for_WordPress_Developers printf( _n( 'We deleted %d spam message.', 'We deleted %d spam messages.', $count ), $count );

Slide 29

Slide 29 text

Disambiguation http://codex.wordpress.org/I18n_for_WordPress_Developers http://ottopress.com/2012/internationalization-youre-probably-doing-it-wrong/ $string = _x( 'Buffalo', 'an animal', 'plugin-domain' ); $string = _x( 'Buffalo', 'a city in New York', 'plugin- domain' ); $string = _x( 'Buffalo', 'a verb meaning to confuse somebody', 'plugin-domain' ); /* translators: draft saved date format, see http:// php.net/date */ $draft_saved_date_format = __( 'g:i:s a' );

Slide 30

Slide 30 text

Otto’s Unbreakable Laws of i18n http://ottopress.com/2012/internationalization-youre-probably-doing-it-wrong/ •Thou shalt not use PHP variables of any kind inside a translation function’s strings. •Thou shalt always translate phrases and not words. •Thou shalt disambiguate when needed. •Thou shalt not put unnecessary HTML markup into the translated string.

Slide 31

Slide 31 text

Automate Adding Text Domains http://codex.wordpress.org/I18n_for_WordPress_Developers php add-textdomain.php -i domain phpfile phpfile ...

Slide 32

Slide 32 text

POT File

Slide 33

Slide 33 text

What Is a POT File? Photo:dbrekke

Slide 34

Slide 34 text

GNU gettext Files • POT (Portable Object Template) files • PO (Portable Object) files • MO (Machine Object) files http://codex.wordpress.org/Translating_WordPress

Slide 35

Slide 35 text

POT (Portable Object Template) files • only file required for i18n • includes every message passed into a __() or _e() function http://codex.wordpress.org/Translating_WordPress

Slide 36

Slide 36 text

POT (Portable Object Template) files

Slide 37

Slide 37 text

How do I get a POT file? Photo:zzpza

Slide 38

Slide 38 text

Option A: Poedit

Slide 39

Slide 39 text

Option B: WordPress-i18n Tools • SVN the WordPress-i18n tools and run the makepot.php script http://codex.wordpress.org/User:Skippy/Creating_POT_Files php makepot.php wp-theme your-theme- directory •Deprecated in favour of GlotPress

Slide 40

Slide 40 text

Option C: GlotPress •Download and install locally

Slide 41

Slide 41 text

Isn’t there a plugin for that?

Slide 42

Slide 42 text

Option D: Codestyling Localization Plugin

Slide 43

Slide 43 text

Option E: ICanLocalize Service

Slide 44

Slide 44 text

Step 2: Localize Photo:slightly everything

Slide 45

Slide 45 text

L10n L10n = Localization ʨ 10 letters L n

Slide 46

Slide 46 text

Localize “The second step is the actual localization, the process by which the text on the page and other settings are translated and adapted to another language and culture, using the framework prescribed by the developers of the software.” http://codex.wordpress.org/Translating_WordPress

Slide 47

Slide 47 text

Localize

Slide 48

Slide 48 text

Localize

Slide 49

Slide 49 text

Language & Locale en_US – US English en_UK – UK English

Slide 50

Slide 50 text

GNU gettext Files • POT (Portable Object Template) files • PO (Portable Object) files • MO (Machine Object) files http://codex.wordpress.org/Translating_WordPress

Slide 51

Slide 51 text

Create an MO File

Slide 52

Slide 52 text

What a MO File Looks Like

Slide 53

Slide 53 text

Define Your WordPress Locale

Slide 54

Slide 54 text

Step 3: Profit! Photo:Hub☺

Slide 55

Slide 55 text

Step 3: Multilingual Website Photo:Hub☺

Slide 56

Slide 56 text

Everything After the Theme • Plugins • Widgets • Language Switcher • Translated Content • Plugin (WPML) or WordPress Multisite

Slide 57

Slide 57 text

Closing

Slide 58

Slide 58 text

Shannon Smith Web Developer Café Noir Design Get The Slides: http://chroni.ca www.cafenoirdesign.com @cafenoirdesign