wordpress theme internationalization (i18n)
Post on 08-Apr-2015
785 Views
Preview:
DESCRIPTION
TRANSCRIPT
Translate a theme
Yoav Farhi
@yoavf, yoav@farhi.orghttp://blog.yoavfarhi.com
Monday, September 6, 2010
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.
Monday, September 6, 2010
?Monday, September 6, 2010
Monday, September 6, 2010
Monday, September 6, 2010
right to lefti18n
Monday, September 6, 2010
right to left
Monday, September 6, 2010
rtl
Monday, September 6, 2010
The ugly way
The right way
Monday, September 6, 2010
Ugly
Directly edit the style.css file
Monday, September 6, 2010
Why ugly?
Monday, September 6, 2010
Why ugly?
No updates
Monday, September 6, 2010
Why ugly?
No updatesCannot redistribute
Monday, September 6, 2010
Why ugly?
No updatesCannot redistribute
Hard with child themes
Monday, September 6, 2010
Right
Create an rtl.css file
Monday, September 6, 2010
rtl.css
Monday, September 6, 2010
rtl.css
Monday, September 6, 2010
rtl.cssThe Basics
Text Alignment
Floats
Positioning
Padding, Margin and Borders
Fonts
Backgrounds
Monday, September 6, 2010
The basics
body { direction:rtl; unicode-bidi:embed; }
Monday, September 6, 2010
The basics
input#url { direction:ltr; }
Monday, September 6, 2010
Monday, September 6, 2010
Text Alignment
#body { text-align: left;}
#body { text-align: right;}
rtl.css
style.css
Monday, September 6, 2010
Monday, September 6, 2010
Positioning
#menu { position: absolute; right: 2px; top: 0;}
#menu {
}
rtl.css
style.css
Monday, September 6, 2010
Positioning
#menu { position: absolute; right: 2px; top: 0;}
#menu {
}
rtl.css
style.css
right: auto; left: 2px;
Monday, September 6, 2010
Monday, September 6, 2010
The Box Model
Diagram CC http://css.flepstudio.org/en/css-box-model/introduction.html
Monday, September 6, 2010
The Box Model
#content { margin: 30px 14em 0 3em; padding-right: 60px; border-right: 1px dashed #000;}
#content {
}
rtl.css
style.css
Monday, September 6, 2010
The Box Model
#content { margin: 30px 14em 0 3em; padding-right: 60px; border-right: 1px dashed #000;}
#content {
}
rtl.css
style.css
margin: 30px 3em 0 14em;
Monday, September 6, 2010
The Box Model
#content { margin: 30px 14em 0 3em; padding-right: 60px; border-right: 1px dashed #000;}
#content {
}
rtl.css
style.css
padding-right: 0; padding-left: 60px;
margin: 30px 3em 0 14em;
Monday, September 6, 2010
The Box Model
#content { margin: 30px 14em 0 3em; padding-right: 60px; border-right: 1px dashed #000;}
#content {
}
rtl.css
style.css
padding-right: 0; padding-left: 60px; border-right: none; border-left: 1px dashed #000;
margin: 30px 3em 0 14em;
Monday, September 6, 2010
Monday, September 6, 2010
Floats
#content h2 { float: right; clear: left;}
#content h2{ float: left; clear: right; }
rtl.css
style.css
Monday, September 6, 2010
Monday, September 6, 2010
Backgrounds
#header a { background: url(grey-s.png) 0 0 no-repeat;}
#header { background-position: 100% 0;
}
rtl.css
style.css
Monday, September 6, 2010
Backgrounds
#header a { background: url(grey-s.png) 0 0 no-repeat;}
#header { background-position: 100% 0;
}
rtl.css
style.css
background-image: url(header-rtl.png);
Monday, September 6, 2010
Backgrounds
#header a{ background: url(header.png) 22px 0 no-repeat;}
#header a{
background-position: ??? 0;}
rtl.css
style.css
Monday, September 6, 2010
Monday, September 6, 2010
Fonts
use basic sans-serif fontsno italics
Monday, September 6, 2010
Fonts
#header, h3, #menu ul li { font: italic 230% Times, serif;}
#header, h3, #menu ul li { font-family: Arial, Helvetica, sans-serif; font-style: normal;}
rtl.css
style.css
Monday, September 6, 2010
Monday, September 6, 2010
Basic classes
rtl.css
style.css .alignleft { float: left;}
Don’t!
Monday, September 6, 2010
Monday, September 6, 2010
Monday, September 6, 2010
right to left
Monday, September 6, 2010
right to lefti18n
Monday, September 6, 2010
i18n ?
Monday, September 6, 2010
internationalization
18
i18n ?
Monday, September 6, 2010
The ugly way
The right way
Monday, September 6, 2010
Ugly
Translate in the template files
Monday, September 6, 2010
Right
Create po/mo translation files
Monday, September 6, 2010
How
Wrap your strings Generate the .POT file
Distribute (and translate)
Monday, September 6, 2010
Wrap your strings
Monday, September 6, 2010
_e( 'text' )__( 'text' )
esc_attr_e( 'text' )_x( 'text' , 'comment' )
_n( '1 comment', ' Lots of comments ', $count )
functions
Monday, September 6, 2010
_e( 'text' ) =
echo the translation
Monday, September 6, 2010
<div class="meta">Filed Under [...]
<div class="meta"><?php _e( "Filed Under", 'mytheme' ); ?>[...]
_e( 'text' )
Monday, September 6, 2010
__( 'text' ) =
pass the translation
Monday, September 6, 2010
<?php the_tags('Tags: '); ?>
<?php the_tags( __('Tags: ', mytheme) ); ?>
__( 'text' )
Monday, September 6, 2010
_e( 'text', 'mytheme' )__( 'text', 'mytheme' )
separates the translation from the core WordPress translation
the textdomain
Monday, September 6, 2010
for more info, check out:wp-includes/l10n.php
Monday, September 6, 2010
Generate the .POT file
Monday, September 6, 2010
http://poedit.net
1.Start POEdit
Monday, September 6, 2010
2.File -> New Catalog...
Monday, September 6, 2010
3. Enter Project name
Monday, September 6, 2010
4. Paths -> New item -> '. '
Monday, September 6, 2010
5. Keywords -> New item -> '__'
Monday, September 6, 2010
5. New item -> '_e'
Monday, September 6, 2010
6. Save POT in theme dir
Monday, September 6, 2010
7. POEdit will find strings
Monday, September 6, 2010
8. Translate
Monday, September 6, 2010
9. Save as lang_code.po
Monday, September 6, 2010
10. load_theme_textdomain
load_theme_textdomain( 'mytheme', get_template_directory() );functions.php
Monday, September 6, 2010
Monday, September 6, 2010
Almost done
Monday, September 6, 2010
Almost doneRTL Tester plugin
Monday, September 6, 2010
Almost doneRTL Tester plugin
CSS Janus (RTLize your css)
Monday, September 6, 2010
Almost doneRTL Tester plugin
CSS Janus (RTLize your css)
The codex
Monday, September 6, 2010
Almost doneRTL Tester plugin
CSS Janus (RTLize your css)
The codex
Multilingual Plugins
Monday, September 6, 2010
Questions?
@yoavf, yoav@farhi.orghttp://blog.yoavfarhi.com
Monday, September 6, 2010
top related