wordpressの多言語プラグイン「qtranslate」で、あなたのサイトも世界にデビュー♪...

あなたのサイトも世界にデビュー♪

WordPressの多言語プラグイン「qTranslate」で、

うぇぶるじょん

2013.2.5　@Co-Edo バージョン

だいぶ変わったよ！

軽く自己紹介など

うぇぶるじょんといいます


うぇぶるじょんといいますブログ書いてます(http://webourgeon.com/)


http://webourgeon.com



WordPressHTMLコーディング / WebデザインFlashアニメーションなど

ブログ書いてます(http://webourgeon.com/)







WordBench千葉はじめました







WordBench千葉はじめました

この顔見たら話しかけてね

Twitter @Webourgeon_com




本日のお話WordPressの多言語化とは

多言語化方法いろいろ1．翻訳ツールなどを利用して自動的に翻訳してもらう

2.それぞれの言語用にコンテンツを用意して　切り替えて表示できるようにする

qTranslateの使い方

1．プラグインをインストールして有効化します

3．初期設定

4．qTranslateの独自タグ

5．ウィジェットタイトルを出し分けてみよう

6．カスタムフィールドを使ってみよう

7．パンくずを表示してみよう

8．お問い合わせも多言語化してみよう

9．タイトルやサイトの説明

管理画面の国際化

始めます

そもそも....

そもそも....

WordPressの多言語化って何ですか？

WordPressで作ったサイトを日本語だけでなく、英語や中国語など、各国語で表示できるようにする

世界中の人にブログを読んでもらえる！

これでうちの会社も国際的に！

広告収入も増えたりして...

夢は広がりますね

では、そんな

WordPressの多言語化についていろいろ見ていきましょう

多言語化方法いろいろ

多言語化の方法は大きく分けて2つ



1．翻訳ツールなどを利用して自動的に翻訳してもらう


WordPressならどちらもプラグインや標準機能で実現できるよ



自動翻訳のプラグインの例

Translate This Blog Translatorhttp://wordpress.org/extend/plugins/translate-this-blog-translator/

他にも探してみよう


http://wordpress.org/extend/plugins/translate-this-blog-translator/

http://wordpress.org/extend/plugins/translate-this-blog-translator/

多言語化方法いろいろ 1．翻訳ツールなどを利用して自動的に翻訳してもらう

Translate This Blog Translator

基本の言語を選ぶ



勝手に翻訳してくれる！！


Translate This Blog Translator翻訳は機械任せなので.....

残念な感じになる可能性もあります

まあまあ？

2.それぞれの言語用にコンテンツを用意して切り替えて表示多言語化方法いろいろ

いくつか方法を考えてみた！


①自分で書く

例えばブラウザの言語を取得して、表示を変えるプログラムを書く

2.それぞれの言語用にコンテンツを用意して切り替えて表示多言語化方法いろいろ①自分で書く

http://stocker.jp/diary/wordpress_multilingual/



2.それぞれの言語用にコンテンツを用意して切り替えて表示多言語化方法いろいろ①自分で書く


「メジャーな方法ではないのであまりおすすめはしません」

とのコメントいただきました



自分で書けば安心ですが、かなり難易度が高い！


自分で書く

①自分で書く


②マルチサイトを使う

WordPressの標準機能、マルチサイトを使い各国語用の子サイトを作る

多言語化方法いろいろ2.それぞれの言語用にコンテンツを用意して切り替えて表示多言語化方法いろいろ②マルチサイトを使う

メリット

・マルチサイトはWordPress標準の機能であり、　比較的開発が楽。


メリット


・多言語にするためにプラグインを使わないので、　プラグインに依存しない。


メリット


・多言語にするためにプラグインを使わないので、　プラグインに依存しない。

・テンプレート・コンテンツ・URLなど自由に　コントロールできる。


・コンテンツをひとサイトごとに入れていかないと

　いけないので運用は少し面倒。

デメリット


③多言語化用のプラグインを使う

2.それぞれの言語用にコンテンツを用意して切り替えて表示


qTranslate無料の代表的なもの


http://wordpress.org/extend/plugins/qtranslate/









無料なので導入は楽ただし、無料なので、いつ開発が止まるかわからないし、やめられちゃっても文句はいえない







有料の代表的なもの

WPML http://wpml.org/ja/



http://wpml.org/ja/

http://wpml.org/ja/







有料の代表的なもの

WPML http://wpml.org/ja/

有料なので、初期費用はかかるかなり高機能っぽい。サポートもある。有料とはいえ、開発が止まることは考えられるが、少し安心。



http://wpml.org/ja/

http://wpml.org/ja/



プラグインを使うということは、

サイトの根本がそのプラグインに依存してしまう、ということ。

運営の利便性や、将来性、色んなことを考えて方法を選ぶべき！

多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示


qTranslate での多言語化に挑戦してみましょう！

それを踏まえて、

1．プラグインをインストールして有効化します


1．プラグインをインストールして有効化しますqTranslateの使い方


ここからダウンロードするか

プラグインのインストールで

qTranslateを検索

qTranslateの使い方 1．プラグインをインストールして有効化します

できましたか？

qTranslateの使い方 1．プラグインをインストールして有効化します

こんなふうに管理画面が英語になってしまうけど、焦らず初期設定をしていきましょう


3．初期設定プラグインの初期設定をします。

qTranslateの使い方 3．初期設定

①デフォルトの言語と使用言語を設定


使用する言語を選ぶ

いらないのは消す

①デフォルトの言語と使用言語を設定

日本語はココ

qTranslateの使い方 3．初期設定 ①デフォルトの言語と使用言語を設定

表示順

デフォルト言語


設定した言語用のタイトル

タブで切り替える入力エリア


②URLを設定

qTranslateの使い方 3．初期設定 ②URLを設定


Use Query Mode (?lang=en)　デフォルトのパーマリンクと同じ形式


Use Query Mode (?lang=en)　デフォルトのパーマリンクと同じ形式Use Pre-Path Mode (Default, puts /en/ in front of URL)　/en などというサブフォルダ形式


Use Query Mode (?lang=en)　デフォルトのパーマリンクと同じ形式Use Pre-Path Mode (Default, puts /en/ in front of URL)　/en などというサブフォルダ形式Use Pre-Domain Mode (uses http://en.yoursite.com)　サブドメイン形式（サブドメインの設定が必要）

http://en.yoursite.com



Use Query Mode (?lang=en)　デフォルトのパーマリンクと同じ形式Use Pre-Path Mode (Default, puts /en/ in front of URL)　/en などというサブフォルダ形式Use Pre-Domain Mode (uses http://en.yoursite.com)　サブドメイン形式（サブドメインの設定が必要）

(́；ω；｀)




③言語切替ボタンを設置

qTranslateの使い方 3．初期設定 ③言語切替ボタンを設置

qTranslateの使い方 3．初期設定 ③言語切替ボタンを設置

サイドバー


出来ましたか？ここまででサイトを見てみましょう

qTranslateの使い方 3．初期設定 ④コンテンツ表示方法

④コンテンツ表示方法


すべての記事を多言語化しない場合もありますよね？


言語別コンテンツがないものは表示しないようにすることができます


⑤日付が変な場合

qTranslateの使い方 3．初期設定 ⑤日付が変な場合


日付の設定はテーマや初期設定にも依存するので


個別設定もできる


⑤カテゴリーを多言語化


ここまで設定すれば、普通のブログなら、ほとんどの部分が多言語化できてるはずです！


でも、せっかくだから、もうちょっと色々出来たらいいなって思うよね？


4．qTranslateの独自タグ

テンプレートの中で使ったり、カスタムフィールドなどを言語別に出力させたりするための独自タグ

qTranslateの使い方 4．qTranslateの独自タグ

①カスタムフィールドやウィジェットタイトルなど管理画面から入力するものを出し分ける

[:ja]日本語向けの内容 [:en]英語向けの内容

qTranslateの使い方 4．qTranslateの独自タグ

②テンプレート内で出し分ける

<?php _e("English Here!!こっちは日本語だよ～"); ?>

<?phpqtrans_getLanguage();?>

<?phpif (qtrans_getLanguage() == 'en') { ?>　　　ここに英語で出力させたいコード<?php }else{ ?>　　　そうじゃなかったらこれが表示される<?php } ?>

現在の言語を習得

条件分岐でこんなふうに使える


5．ウィジェットタイトルを出し分けてみよう


6．カスタムフィールドを使ってみよう

qTranslateの使い方 6．カスタムフィールドを使ってみよう

qTranslateの使い方 6．カスタムフィールドを使ってみよう

<?php echo __(get_post_meta( $post->ID , 'item-name' , true )); ?>

<?php echo e_(get_post_meta( $post->ID , 'item-name' , true )); ?>＊最近まではこちらでしたが動かなくなっていました×

これがないと動かない


7．パンくずを表示してみよう

qTranslateの使い方 7．パンくずを表示してみよう

WP SiteManagerWordPress をCMSとして利用する際に必要な機能を網羅した統合パッケージ

http://wordpress.org/extend/plugins/wp-sitemanager/

http://www.wp-sitemanager.com/公式サポートサイト



http://www.wp-sitemanager.com/

http://www.wp-sitemanager.com/


WP SiteManager特にパラメーターを入れなくても多言語化に対応

WP SiteManager<?php if ( class_exists( 'WP_SiteManager_bread_crumb' ) ) { WP_SiteManager_bread_crumb::bread_crumb( 'type=string&home_label=HOME トップページ' ); } ?>

出し分けもバッチリ

qTranslateの使い方8．お問い合わせも多言語化してみよう Contact Form 7

① Contact Form 7

8．お問い合わせも多言語化してみよう

② Trust Formhttp://wordpress.org/extend/plugins/trust-form/

http://wordpress.org/extend/plugins/contact-form-7/

http://wordpress.org/extend/plugins/trust-form/

http://wordpress.org/extend/plugins/trust-form/




① Contact Form 7


日本語用フォーム


英語用フォーム


エラーも自動で多言語化！


ただしこのままでは動かない


動きました！素晴らしい！＼(^o^)／

ただしこのままでは動かない

WordPress 3.5.1+ｑTranslate 2.5.34+

Contact Form 7 3.3.3


//**********************************************************************************// Contact Form 7 を動かす//**********************************************************************************add_filter('wpcf7_form_action_url', 'wpcf7_action_url');

function wpcf7_action_url(){

if(function_exists('qtrans_convertURL')){

return qtrans_convertURL($_SERVER["REQUEST_URI"]);

}

return $_SERVER["REQUEST_URI"];

}

functions.php

qTranslateの使い方8．お問い合わせも多言語化してみよう Trust form

② Trust Form


こちらも英語用、日本語用2つのフォームを作成


そのまま使うと日本語用でも英語のエラー表示に


http://www.warna.info/archives/2261/

qtranslateと干渉して、Trust Formのエラーメッセージが英語になってしまう原因を調べてみた


http://www.warna.info/archives/2261/

qtranslateと干渉して、Trust Formのエラーメッセージが英語になってしまう原因を調べてみた

//**********************************************************************************// Trust Form エラーメッセージ読み込み//**********************************************************************************

function trust_form_validator_message_override() { global $Trust_Form_Validator_Message;

if ( is_admin() || ! class_exists( 'Trust_Form' ) ) { return; } new Trust_Form(); $Trust_Form_Validator_Message = array( 'required' => __("Please fill required field", TRUST_FORM_DOMAIN), 'hiragana' => __("Please enter by using Japanese hiragana", TRUST_FORM_DOMAIN), 'minlength' => __("Please enter more than __minlength__ charactors", TRUST_FORM_DOMAIN), 'maxlength' => __("Please enter within __maxlength__ charactors", TRUST_FORM_DOMAIN), 'bothlength' => __("Please enter more than __minlength__ within __maxlength__ charactors", TRUST_FORM_DOMAIN), 'zenkaku' => __("Please enter by using multibyte charactor", TRUST_FORM_DOMAIN), 'eiji' => __("Please enter by using English", TRUST_FORM_DOMAIN), 'number' => __("Please enter by using number", TRUST_FORM_DOMAIN), 'katakana' => __("Please enter by using Japanese katakana", TRUST_FORM_DOMAIN), 'hankaku' => __("Please enter by using English or number", TRUST_FORM_DOMAIN), 'hankaku2' => __("Please enter by using English or number or code", TRUST_FORM_DOMAIN), 'e-mail' => __("The format of the e-mail address is invalid", TRUST_FORM_DOMAIN), );}add_action( 'after_setup_theme', 'trust_form_validator_message_override', 1000 );


エラーもバッチリ日本語化素晴らしい！！



管理画面は....

テーマとかで対応したほうが綺麗にできそう..


あとは応用で！

管理画面の国際化

おまけ

http://www.qianqin.de/qtranslate/forum/viewtopic.php?f=3&t=9

Functions for Developers and Template Authors





http://www.qianqin.de/qtranslate/forum/viewtopic.php?f=3&t=9&start=0

http://www.qianqin.de/qtranslate/forum/viewtopic.php?f=3&t=9&start=0

翻訳がんばって！！

http://multilingual-test.webourgeon.net

http://multilingual-test.webourgeon.net/

http://multilingual-test.webourgeon.net/

wordpressの多言語プラグイン「qtranslate」で、あなたのサイトも世界にデビュー♪...

Documents