Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
LEVELING UP YOUR
MULTILINGUAL
WORDPRESS SITE
JANNE ALA-ÄIJÄLÄ WORDCAMP FINLAND 15.4.2016
MY PERSONAL LEVEL 1:
POLYLANG
• SMOOTH 

ADMIN WORKFLOW
• ADVANCED 

MULTILINGUAL THEME
• WORKING WITH 

NON-LATIN ALPHABET
TRANSLATION
P O L I S H T H E
WORKFLOW
TO COPY OR
CONTENT DILEMMA:
NOTTO COPY
https://github.com/aucor/polylang-copy-content
HOW TO CHANGE
SHOW YOUR USERS
ADMIN LANGUAGE
AVOID
USEREDITABLE
WIDGETS
AS LONG AS POSSIBLE
THEME
MULTILINGUAL
 💩
if ( $current_language == 'fi' ) {
print 'Moi!';
} elseif ( $current_language == 'sv' ) {
print 'Hej!';
} else {
print ...
THE USUAL WAY
_e( 'Hello!' , 'my-text-domain' );
ARE AWFUL!
.PO/.MO -FILES
THE PLUGIN WAY
pll_e( 'Hello!' );
THE PLUGIN WAY
USE FALLBACKS
if ( ! function_exists( 'pll__' ) ) {
function pll__( $string ) {
return __( $string , 'my-theme-textdomain'...
FROM PAGE GENERATION TIME
SHAVING MANY % OFF
* Actual results may vary and terms do apply
*
0
22,5
45
67,5
90
front page post-new.php
default install: 0 plugins
theme: twentysixteen
en fi
0
100
200
300
400
front pag...
NOT EVEN A SLOTH IS AS SLOW AS
LOAD_TEXTDOMAIN
WHAT IF?
0
22,5
45
67,5
90
front page post-new.php
en fi
0
100
200
300
400
front page post-new.php
+42%
+72%
+74%
+59%
+12%...
WE CAN!
NOTE: YOU NEED AN OBJECT CACHE LIKE REDIS, MEMCACHED OR APCU
wordpress.org/plugins/wp-performance-pack/
OR ONLY TH...
CHOOSING THE BEST
LANGUAGE SELECTOR
"#$%
&'()
FI / SV / EN
LANGUAGE CODES
ET / RU / EL / TR / ZH / JA / HI / AR
suomeksi på Svenska In English
FULL LANGUAGE NAMES == 😍
SUPER ULTIMATE+
WORKING WITH
NON-LATIN
ALPHABET
GLOBAL SHARES OF ALPHABETS & SCRIPTS
Source: http://www.worldstandards.eu/other/alphabets/
Other
14 %
Cyrillic
4 %
Arabic
...
WEBFONTS
FOR NON-LATIN
CHARACTERS
90%OF DESIGNERS
HAVEN’TCONSIDERED
*
* Number completely made up in my mind
font-family: "MyFancyFontWithLimitedLanguageSupport", cursive;
CASCADING FONT-STACKS
Typographically aethstetic headline
STRÖMSÖ:
Tässä otsikossa on ääkkösiä
REALITY:
CASCADING FONT-STACKS
天⽓气weather
CASCADING FONT-STACKS
font-family: "MyFancySerif", serif;
天⽓气weather
font-family: serif;
CHARACTER SUBSET
Typekit
INCLUDE CORRECT
Google Fonts
NOTO SANS
google.com/get/noto/
google.com/fonts/earlyaccess
GOOGLE WEBFONTS EARLY ACCESS
EASY SOLUTIONS:
TRANSLITERATION
Getting rid of unwanted characters
TRANSLITERATION: WORDPRESS DEFAULT
/tässä-osoitteessa-on-myös-å/
/tassa-osoitteessa-on-myos-a/
TRANSLITERATION: WORDPRESS DEFAULT
/芬兰全国⽓气象预报/
/芬兰全国⽓气象预报/
TRANSLITERATION PLUGINS
CYRILLIC: CYR TO LAT ENHANCED
wordpress.org/plugins/cyr3lat/
CHINESE: SO PINYIN SLUGS
wordpress.or...
RTL
tfel-ot-thgir
CHANGE THE DIRECTION
<html dir="rtl">
RIGHT SHOULD BE LEFT
LEFT SHOULD BE RIGHT
ASSETS FOR RTL
if ( is_rtl() ) {
wp_enqueue_style( 'style-rtl', 

get_stylesheet_directory_uri() . '/css/style-rtl.css' );...
THINGS TO BE MIRRORED
• floats
• asymmetric margins
• asymmetric paddings
• list styles
• directional JS
THINGS TO BE MIRRORED
EXCEPTION: FLEXBOX
1 2 3
123
DIR=”LTR”:
DIR=”RTL”:
.container { display: flex; }
JANNE ALA-ÄIJÄLÄ
janne@ala-aijala.fi
@j_underdude
Upcoming SlideShare
Loading in …5
×

Leveling Up Your Multilingual WordPress site

1,278 views

Published on

Presentation slides form WordCamp Finland 2016

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Leveling Up Your Multilingual WordPress site

  1. 1. LEVELING UP YOUR MULTILINGUAL WORDPRESS SITE JANNE ALA-ÄIJÄLÄ WORDCAMP FINLAND 15.4.2016
  2. 2. MY PERSONAL LEVEL 1: POLYLANG
  3. 3. • SMOOTH 
 ADMIN WORKFLOW • ADVANCED 
 MULTILINGUAL THEME • WORKING WITH 
 NON-LATIN ALPHABET
  4. 4. TRANSLATION P O L I S H T H E WORKFLOW
  5. 5. TO COPY OR CONTENT DILEMMA: NOTTO COPY https://github.com/aucor/polylang-copy-content
  6. 6. HOW TO CHANGE SHOW YOUR USERS ADMIN LANGUAGE
  7. 7. AVOID USEREDITABLE WIDGETS AS LONG AS POSSIBLE
  8. 8. THEME MULTILINGUAL
  9. 9.  💩 if ( $current_language == 'fi' ) { print 'Moi!'; } elseif ( $current_language == 'sv' ) { print 'Hej!'; } else { print 'Hello!'; }
  10. 10. THE USUAL WAY _e( 'Hello!' , 'my-text-domain' );
  11. 11. ARE AWFUL! .PO/.MO -FILES
  12. 12. THE PLUGIN WAY pll_e( 'Hello!' );
  13. 13. THE PLUGIN WAY
  14. 14. USE FALLBACKS if ( ! function_exists( 'pll__' ) ) { function pll__( $string ) { return __( $string , 'my-theme-textdomain' ); } }
  15. 15. FROM PAGE GENERATION TIME SHAVING MANY % OFF * Actual results may vary and terms do apply *
  16. 16. 0 22,5 45 67,5 90 front page post-new.php default install: 0 plugins theme: twentysixteen en fi 0 100 200 300 400 front page post-new.php 15 popular plugins theme: twentysixteen +42% +72% +74% +59% msms
  17. 17. NOT EVEN A SLOTH IS AS SLOW AS LOAD_TEXTDOMAIN
  18. 18. WHAT IF? 0 22,5 45 67,5 90 front page post-new.php en fi 0 100 200 300 400 front page post-new.php +42% +72% +74% +59% +12% +30% +6% +42% fi, cached ms ms
  19. 19. WE CAN! NOTE: YOU NEED AN OBJECT CACHE LIKE REDIS, MEMCACHED OR APCU wordpress.org/plugins/wp-performance-pack/ OR ONLY THE CACHEABLE MO LOADING: github.com/aucor/dynamic-mo-loader
  20. 20. CHOOSING THE BEST LANGUAGE SELECTOR
  21. 21. "#$% &'()
  22. 22. FI / SV / EN LANGUAGE CODES ET / RU / EL / TR / ZH / JA / HI / AR
  23. 23. suomeksi på Svenska In English FULL LANGUAGE NAMES == 😍
  24. 24. SUPER ULTIMATE+
  25. 25. WORKING WITH NON-LATIN ALPHABET
  26. 26. GLOBAL SHARES OF ALPHABETS & SCRIPTS Source: http://www.worldstandards.eu/other/alphabets/ Other 14 % Cyrillic 4 % Arabic 14 % Devanagari 14 % Chinese 18 % Latin 36 %
  27. 27. WEBFONTS FOR NON-LATIN CHARACTERS
  28. 28. 90%OF DESIGNERS HAVEN’TCONSIDERED * * Number completely made up in my mind
  29. 29. font-family: "MyFancyFontWithLimitedLanguageSupport", cursive; CASCADING FONT-STACKS
  30. 30. Typographically aethstetic headline STRÖMSÖ: Tässä otsikossa on ääkkösiä REALITY: CASCADING FONT-STACKS
  31. 31. 天⽓气weather CASCADING FONT-STACKS font-family: "MyFancySerif", serif; 天⽓气weather font-family: serif;
  32. 32. CHARACTER SUBSET Typekit INCLUDE CORRECT Google Fonts
  33. 33. NOTO SANS google.com/get/noto/ google.com/fonts/earlyaccess GOOGLE WEBFONTS EARLY ACCESS EASY SOLUTIONS:
  34. 34. TRANSLITERATION Getting rid of unwanted characters
  35. 35. TRANSLITERATION: WORDPRESS DEFAULT /tässä-osoitteessa-on-myös-å/ /tassa-osoitteessa-on-myos-a/
  36. 36. TRANSLITERATION: WORDPRESS DEFAULT /芬兰全国⽓气象预报/ /芬兰全国⽓气象预报/
  37. 37. TRANSLITERATION PLUGINS CYRILLIC: CYR TO LAT ENHANCED wordpress.org/plugins/cyr3lat/ CHINESE: SO PINYIN SLUGS wordpress.org/plugins/so-pinyin-slugs/ ARABIC: ARABIC TO LAT wordpress.org/plugins/arabic-to-lat/ wordpress.org/plugins/tags/transliteration
  38. 38. RTL tfel-ot-thgir
  39. 39. CHANGE THE DIRECTION <html dir="rtl">
  40. 40. RIGHT SHOULD BE LEFT LEFT SHOULD BE RIGHT
  41. 41. ASSETS FOR RTL if ( is_rtl() ) { wp_enqueue_style( 'style-rtl', 
 get_stylesheet_directory_uri() . '/css/style-rtl.css' ); wp_enqueue_script( 'script-rtl', get_stylesheet_directory_uri() . '/js/script-rtl.js' ); } rtl.css
  42. 42. THINGS TO BE MIRRORED • floats • asymmetric margins • asymmetric paddings • list styles • directional JS
  43. 43. THINGS TO BE MIRRORED EXCEPTION: FLEXBOX 1 2 3 123 DIR=”LTR”: DIR=”RTL”: .container { display: flex; }
  44. 44. JANNE ALA-ÄIJÄLÄ janne@ala-aijala.fi @j_underdude

×