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

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

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

2013.1.18 赤羽デザイン勉強会
うぇぶるじょん

軽く自己紹介など

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


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



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



WordPress
など

WordBench千葉はじめました



WordPress
など

WordBench千葉はじめました

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

Twitter @Webourgeon_com

本日のお話
WordPressの多言語化とは 5．ウィジェットタイトルを出し分けてみよう

多言語化方法いろいろ 6．カスタムフィールドを使ってみよう

1．翻訳ツールなどを利用して自動的に翻訳してもらう 7．パンくずを表示してみよう

2.それぞれの言語用にコンテンツを用意して
8．お問い合わせも多言語化してみよう
切り替えて表示できるようにする
9．タイトルやサイトの説明

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

2．最新版のWordPress3.5に対応させる

3．初期設定

4．qTranslateの独自タグ

そもそも....

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

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

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

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

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

では、そんな

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

多言語化方法いろいろ


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



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


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

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

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

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

他にも探してみよう



基本の言語を選ぶ



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


翻訳は機械任せなので.....

まあまあ？

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

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

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


①自分で書く

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


①自分で書く

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


①自分で書く

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

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

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


①自分で書く

自分で書く

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


②マルチサイトを使う

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



メリット

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



メリット


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



メリット


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

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



デメリット

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

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


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



無料の代表的なもの

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





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






有料の代表的なもの

WPML http://wpml.org/ja/






有料の代表的なもの

WPML http://wpml.org/ja/

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



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

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

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

それを踏まえて、

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


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

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

ところが....


なんかエラーが出てる

多言語化されるはずのところがされてない


それもそのはず....


2013年1月15日現在

なんと qTranslateは、最新版の

WordPress3.5に未対応!!!!





Broken???





ｶﾞ━━(;ﾟДﾟ)━━ﾝ!!
Broken???


2．最新版のWordPress3.5に対応させる

そんな訳で、まず最新版の
WordPress3.5に対応させます

qTranslateの使い方 2．最新版のWordPress3.5に対応させる

プラグインのフォーラムで調べました！


①プラグインのファイルに書かれている
対応バージョンを書き換えます



wp-content/plugins/qtranslate/qtranslate.php



wp-content/plugins/qtranslate/qtranslate.php

90行目
deﬁne('QT_SUPPORTED_WP_VERSION', '3.5');


②qtranslate_javascript.phpを入れ替えます



wp-content/plugins/qtranslate/qtranslate_javascript.php



qTranslate qtranslate_javascript.php fix for WP 3.5
http://pastebin.com/DCWLHqPG




ここにアップされているものと
入れ替えます




ここにアップされているものと
入れ替えます

（フォーラム）
http://www.qianqin.de/qtranslate/forum/viewtopic.php?f=3&t=3831


フォーラムの他の記事に、
qtranslate_javascript.phpの一部のコードを
入れ替えるものがあるけどそれだと動かない


エラーが消えて、タイトルのエリアが複数、
エディタにタブが追加されてたら成功

＊これは2か国語に設定したあとのキャプチャです


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

qTranslateの使い方 3．初期設定

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

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


使用する言語を選ぶ

いらないのは消す


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

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


②URLを設定

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


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)
サブドメイン形式（サブドメインの設定が必要）


Use Pre-Domain Mode (uses http://en.yoursite.com)
サブドメイン形式（サブドメインの設定が必要）

(́；ω；｀)


③言語切替ボタンを設置

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

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

サイドバー


④日付が変な場合


⑤カテゴリーを多言語化


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


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


4．qTranslateの独自タグ

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

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

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

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

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

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

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

<?php
qtrans_getLanguage();
?> 現在の言語を習得

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


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


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

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


<?php echo e_(get_post_meta( $post->ID , 'price' , true )); ?>



これがないと動かない


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


<?php echo(_e(types_render_ﬁeld("item-name", array()))); ?>

（参）これは typesで出したカスタムフィールドだよ


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

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

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

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

公式サポートサイト
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

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

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

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


① Contact Form 7


日本語用フォーム


英語用フォーム


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


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


functions.php
//**********************************************************************************
// Contact Form 7 を動かす
//**********************************************************************************
add_ﬁlter('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"];

}

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

② Trust Form


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


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


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; http://www.warna.info/archives/2261/

if ( is_admin() ¦¦ ! class_exists( 'Trust_Form' ) ) { return; }
new Trust_Form();
$Trust_Form_Validator_Message = array(
'required' => __("Please ﬁll required ﬁeld", 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://multilingual-test.webourgeon.net

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

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

Semelhante a WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪ (20)

Mais de Chieko Aihara

Mais de Chieko Aihara (8)

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