Embed Size (px)
Citation preview
LEVELING UP YOURMULTILINGUALWORDPRESS 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
TRANSLATIONP O L I S H T H E
WORKFLOW
TO COPY ORCONTENT DILEMMA:
NOT TO COPY
https://github.com/aucor/polylang-copy-content
HOW TO CHANGESHOW YOUR USERS
ADMIN LANGUAGE
A V O I DUSER EDITABLEWIDGETSAS LONG AS POSSIBLE
THEMEMULTILINGUAL
💩 if ( $current_language == 'fi' ) { print 'Moi!'; } elseif ( $current_language == 'sv' ) { print 'Hej!'; } else { print 'Hello!'; }
THE USUAL WAY_e( 'Hello!' , 'my-text-domain' );
ARE AWFUL!.PO/.MO -FILES
THE PLUGIN WAYpll_e( 'Hello!' );
THE PLUGIN WAY
USE FALLBACKS
if ( ! function_exists( 'pll__' ) ) { function pll__( $string ) { return __( $string , 'my-theme-textdomain' ); }
}
FROM PAGE GENERATION TIMESHAVING 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 page post-new.php
15 popular plugins theme: twentysixteen
+42%
+72%
+74%
+59%
msms
NOT EVEN A SLOTH IS AS SLOW ASLOAD_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%
+30%
+6%
+42%
fi, cached
ms ms
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
CHOOSING THE BESTLANGUAGE SELECTOR
"#$%&'()
FI / SV / EN
LANGUAGE CODES
ET / RU / EL / TR / ZH / JA / HI / AR
suomeksi på Svenska In EnglishFULL LANGUAGE NAMES == 😍
SUPER ULTIMATE+
WORKING WITHNON-LATIN ALPHABET
GLOBAL SHARES OF ALPHABETS & SCRIPTS
Source: http://www.worldstandards.eu/other/alphabets/
Other 14 %
Cyrillic 4 %
Arabic 14 %
Devanagari 14 % Chinese
18 %
Latin 36 %
WEBFONTSFOR NON-LATIN CHARACTERS
90%OF DESIGNERS
HAVEN’T CONSIDERED
*
* Number completely made up in my mind
font-family: "MyFancyFontWithLimitedLanguageSupport", cursive;
CASCADING FONT-STACKS
Typographically aethstetic headlineSTRÖ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 SANSgoogle.com/get/noto/
google.com/fonts/earlyaccessGOOGLE WEBFONTS EARLY ACCESS
EASY SOLUTIONS:
TRANSLITERATIONGetting rid of unwanted characters
TRANSLITERATION: WORDPRESS DEFAULT
/tässä-osoitteessa-on-myös-å/
/tassa-osoitteessa-on-myos-a/
TRANSLITERATION: WORDPRESS DEFAULT
/芬兰全国⽓气象预报/
/芬兰全国⽓气象预报/
TRANSLITERATION PLUGINSCYRILLIC: CYR TO LAT ENHANCED
wordpress.org/plugins/cyr3lat/
CHINESE: SO PINYIN SLUGSwordpress.org/plugins/so-pinyin-slugs/
ARABIC: ARABIC TO LATwordpress.org/plugins/arabic-to-lat/
wordpress.org/plugins/tags/transliteration
RTLtfel-ot-thgir
CHANGE THE DIRECTION
<html dir="rtl">
RIGHT SHOULD BE LEFTLEFT SHOULD BE RIGHT
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
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Ä[email protected] @j_underdude
