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.

WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪

12,722 views

Published on

2013.1.18 赤羽デザイン勉強会

WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪

  1. 1. WordPressの多言語プラグイン 「qTranslate」で、 あなたのサイトも 世界にデビュー♪2013.1.18 赤羽デザイン勉強会  うぇぶるじょん
  2. 2. 軽く自己紹介など
  3. 3. 軽く自己紹介など うぇぶるじょんといいます
  4. 4. 軽く自己紹介など うぇぶるじょんといいます ブログ書いてます (http://webourgeon.com/)
  5. 5. 軽く自己紹介など うぇぶるじょんといいます ブログ書いてます (http://webourgeon.com/) WordPress HTMLコーディング / Webデザイン Flashアニメーション など
  6. 6. 軽く自己紹介など うぇぶるじょんといいます ブログ書いてます (http://webourgeon.com/) WordPress HTMLコーディング / Webデザイン Flashアニメーション など WordBench千葉はじめました
  7. 7. 軽く自己紹介など うぇぶるじょんといいます ブログ書いてます (http://webourgeon.com/) WordPress HTMLコーディング / Webデザイン Flashアニメーション など WordBench千葉はじめました
  8. 8. 軽く自己紹介など うぇぶるじょんといいます ブログ書いてます (http://webourgeon.com/) WordPress HTMLコーディング / Webデザイン Flashアニメーション など WordBench千葉はじめました この顔見たら話しかけてね Twitter @Webourgeon_com
  9. 9. 本日のお話WordPressの多言語化とは 5.ウィジェットタイトルを出し分けてみよう多言語化方法いろいろ 6.カスタムフィールドを使ってみよう 1.翻訳ツールなどを利用して自動的に翻訳してもらう 7.パンくずを表示してみよう 2.それぞれの言語用にコンテンツを用意して 8.お問い合わせも多言語化してみよう  切り替えて表示できるようにする 9.タイトルやサイトの説明qTranslateの使い方 管理画面の国際化 1.プラグインをインストールして有効化します 2.最新版のWordPress3.5に対応させる 3.初期設定 4.qTranslateの独自タグ
  10. 10. 始めます
  11. 11. そもそも....
  12. 12. そもそも....WordPressの多言語化って 何ですか?
  13. 13. WordPressで作ったサイトを日本語だけでなく、英語や中国語など、各国語で表示できるようにする
  14. 14. 世界中の人にブログを読んでもらえる! これでうちの会社も 国際的に! 広告収入も増えたりして...
  15. 15. 夢は広がりますね
  16. 16. では、そんなWordPressの多言語化についていろいろ見ていきましょう
  17. 17. 多言語化方法いろいろ
  18. 18. 多言語化方法いろいろ多言語化の方法は大きく分けて2つ
  19. 19. 多言語化方法いろいろ多言語化の方法は大きく分けて2つ1.翻訳ツールなどを利用して自動的に翻訳してもらう
  20. 20. 多言語化方法いろいろ多言語化の方法は大きく分けて2つ1.翻訳ツールなどを利用して自動的に翻訳してもらう2.それぞれの言語用にコンテンツを用意して 切り替えて表示できるようにする
  21. 21. 多言語化方法いろいろ WordPressなら どちらもプラグインや標準機能で 実現できるよ
  22. 22. 多言語化方法いろいろ1.翻訳ツールなどを利用して自動的に翻訳してもらう
  23. 23. 多言語化方法いろいろ 1.翻訳ツールなどを利用して自動的に翻訳してもらう自動翻訳のプラグインの例Translate This Blog Translator http://wordpress.org/extend/plugins/translate-this-blog-translator/ 他にも探してみよう
  24. 24. 多言語化方法いろいろ 1.翻訳ツールなどを利用して自動的に翻訳してもらうTranslate This Blog Translator 基本の言語を選ぶ
  25. 25. 多言語化方法いろいろ 1.翻訳ツールなどを利用して自動的に翻訳してもらうTranslate This Blog Translator
  26. 26. 多言語化方法いろいろ 1.翻訳ツールなどを利用して自動的に翻訳してもらうTranslate This Blog Translator
  27. 27. 多言語化方法いろいろ 1.翻訳ツールなどを利用して自動的に翻訳してもらうTranslate This Blog Translator 勝手に翻訳してくれる!!
  28. 28. 多言語化方法いろいろ 1.翻訳ツールなどを利用して自動的に翻訳してもらうTranslate This Blog Translator翻訳は機械任せなので..... まあまあ? 残念な感じになる可能性もあります
  29. 29. 多言語化方法いろいろ 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して  切り替えて表示できるようにする
  30. 30. 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 いくつか方法を考えてみた!
  31. 31. 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示①自分で書く 例えばブラウザの言語を取得して、 表示を変えるプログラムを書く
  32. 32. 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 ①自分で書く http://stocker.jp/diary/wordpress_multilingual/
  33. 33. 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 ①自分で書く http://stocker.jp/diary/wordpress_multilingual/ 「メジャーな方法ではないので あまりおすすめはしません」 とのコメントいただきました
  34. 34. 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 ①自分で書く 自分で書く自分で書けば安心ですが、かなり難易度が高い!
  35. 35. 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示②マルチサイトを使うWordPressの標準機能、マルチサイトを使い各国語用の子サイトを作る
  36. 36. 多言語化方法いろいろ 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 ②マルチサイトを使うメリット ・マルチサイトはWordPress標準の機能であり、  比較的開発が楽。
  37. 37. 多言語化方法いろいろ 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 ②マルチサイトを使うメリット ・マルチサイトはWordPress標準の機能であり、  比較的開発が楽。 ・多言語にするためにプラグインを使わないので、  プラグインに依存しない。
  38. 38. 多言語化方法いろいろ 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 ②マルチサイトを使うメリット ・マルチサイトはWordPress標準の機能であり、  比較的開発が楽。 ・多言語にするためにプラグインを使わないので、  プラグインに依存しない。 ・テンプレート・コンテンツ・URLなど自由に  コントロールできる。
  39. 39. 多言語化方法いろいろ 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 ②マルチサイトを使うデメリット ・コンテンツをひとサイトごとに入れていかないと  いけないので運用は少し面倒。
  40. 40. 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示③多言語化用のプラグインを使う
  41. 41. 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 ③多言語化用のプラグインを使う無料の代表的なものqTranslate http://wordpress.org/extend/plugins/qtranslate/
  42. 42. 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 ③多言語化用のプラグインを使う無料の代表的なものqTranslate http://wordpress.org/extend/plugins/qtranslate/ 無料なので導入は楽 ただし、無料なので、いつ開発が止まるかわからないし、やめられちゃっても文句はいえない
  43. 43. 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 ③多言語化用のプラグインを使う無料の代表的なものqTranslate http://wordpress.org/extend/plugins/qtranslate/ 無料なので導入は楽 ただし、無料なので、いつ開発が止まるかわからないし、やめられちゃっても文句はいえない有料の代表的なものWPML http://wpml.org/ja/
  44. 44. 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 ③多言語化用のプラグインを使う無料の代表的なものqTranslate http://wordpress.org/extend/plugins/qtranslate/ 無料なので導入は楽 ただし、無料なので、いつ開発が止まるかわからないし、やめられちゃっても文句はいえない有料の代表的なものWPML http://wpml.org/ja/ 有料なので、初期費用はかかる かなり高機能っぽい。 サポートもある。有料とはいえ、開発が止まることは考えられるが、少し安心。
  45. 45. 多言語化方法いろいろ 2.それぞれの言語用にコンテンツを用意して切り替えて表示 ③多言語化用のプラグインを使うプラグインを使うということは、サイトの根本がそのプラグインに依存してしまう、ということ。運営の利便性や、将来性、色んなことを考えて方法を選ぶべき!
  46. 46. それを踏まえて、qTranslate での多言語化に挑戦してみましょう!
  47. 47. qTranslateの使い方
  48. 48. qTranslateの使い方1.プラグインをインストールして有効化します
  49. 49. qTranslateの使い方 1.プラグインをインストールして有効化しますところが....
  50. 50. qTranslateの使い方 1.プラグインをインストールして有効化します なんかエラーが出てる 多言語化されるはずのところがされてない
  51. 51. qTranslateの使い方 1.プラグインをインストールして有効化します それもそのはず....
  52. 52. qTranslateの使い方 1.プラグインをインストールして有効化します 2013年1月15日現在 なんと qTranslateは、最新版の WordPress3.5に未対応!!!!
  53. 53. qTranslateの使い方 1.プラグインをインストールして有効化します 2013年1月15日現在 なんと qTranslateは、最新版の WordPress3.5に未対応!!!! Broken???
  54. 54. qTranslateの使い方 1.プラグインをインストールして有効化します 2013年1月15日現在 なんと qTranslateは、最新版の WordPress3.5に未対応!!!! ガ━━(;゚Д゚)━━ン!! Broken???
  55. 55. qTranslateの使い方2.最新版のWordPress3.5に対応させる そんな訳で、まず 最新版の WordPress3.5に対応させます
  56. 56. qTranslateの使い方 2.最新版のWordPress3.5に対応させる プラグインのフォーラムで調べました!
  57. 57. qTranslateの使い方 2.最新版のWordPress3.5に対応させる ①プラグインのファイルに書かれている 対応バージョンを書き換えます
  58. 58. qTranslateの使い方 2.最新版のWordPress3.5に対応させる ①プラグインのファイルに書かれている 対応バージョンを書き換えますwp-content/plugins/qtranslate/qtranslate.php
  59. 59. qTranslateの使い方 2.最新版のWordPress3.5に対応させる ①プラグインのファイルに書かれている 対応バージョンを書き換えますwp-content/plugins/qtranslate/qtranslate.php90行目define(QT_SUPPORTED_WP_VERSION, 3.5);
  60. 60. qTranslateの使い方 2.最新版のWordPress3.5に対応させる②qtranslate_javascript.phpを入れ替えます
  61. 61. qTranslateの使い方 2.最新版のWordPress3.5に対応させる ②qtranslate_javascript.phpを入れ替えます wp-content/plugins/qtranslate/qtranslate_javascript.php
  62. 62. qTranslateの使い方 2.最新版のWordPress3.5に対応させる ②qtranslate_javascript.phpを入れ替えますqTranslate qtranslate_javascript.php fix for WP 3.5http://pastebin.com/DCWLHqPG
  63. 63. qTranslateの使い方 2.最新版のWordPress3.5に対応させる ②qtranslate_javascript.phpを入れ替えますqTranslate qtranslate_javascript.php fix for WP 3.5http://pastebin.com/DCWLHqPGここにアップされているものと入れ替えます
  64. 64. qTranslateの使い方 2.最新版のWordPress3.5に対応させる ②qtranslate_javascript.phpを入れ替えますqTranslate qtranslate_javascript.php fix for WP 3.5http://pastebin.com/DCWLHqPGここにアップされているものと入れ替えます(フォーラム)http://www.qianqin.de/qtranslate/forum/viewtopic.php?f=3&t=3831
  65. 65. qTranslateの使い方 2.最新版のWordPress3.5に対応させる フォーラムの他の記事に、 qtranslate_javascript.phpの一部のコードを 入れ替えるものがあるけどそれだと動かない
  66. 66. qTranslateの使い方 2.最新版のWordPress3.5に対応させる エラーが消えて、タイトルのエリアが複数、 エディタにタブが追加されてたら成功 *これは2か国語に設定したあとのキャプチャです
  67. 67. qTranslateの使い方3.初期設定プラグインの初期設定をします。
  68. 68. qTranslateの使い方 3.初期設定 ①デフォルトの言語と使用言語を設定
  69. 69. qTranslateの使い方 3.初期設定 ①デフォルトの言語と使用言語を設定
  70. 70. qTranslateの使い方 3.初期設定 ①デフォルトの言語と使用言語を設定 使用する言語を選ぶ いらないのは消す
  71. 71. qTranslateの使い方 3.初期設定 ①デフォルトの言語と使用言語を設定
  72. 72. qTranslateの使い方 3.初期設定 ①デフォルトの言語と使用言語を設定 設定した言語用のタイトル タブで切り替える入力エリア
  73. 73. qTranslateの使い方 3.初期設定 ②URLを設定
  74. 74. qTranslateの使い方 3.初期設定 ②URLを設定
  75. 75. qTranslateの使い方 3.初期設定 ②URLを設定Use Query Mode (?lang=en) デフォルトのパーマリンクと同じ形式
  76. 76. qTranslateの使い方 3.初期設定 ②URLを設定Use Query Mode (?lang=en) デフォルトのパーマリンクと同じ形式Use Pre-Path Mode (Default, puts /en/ in front of URL) /en などというサブフォルダ形式
  77. 77. qTranslateの使い方 3.初期設定 ②URLを設定Use Query Mode (?lang=en) デフォルトのパーマリンクと同じ形式Use Pre-Path Mode (Default, puts /en/ in front of URL) /en などというサブフォルダ形式
  78. 78. 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) サブドメイン形式(サブドメインの設定が必要)
  79. 79. 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) サブドメイン形式(サブドメインの設定が必要)
  80. 80. 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) サブドメイン形式(サブドメインの設定が必要) (́;ω;`)
  81. 81. qTranslateの使い方 3.初期設定 ③言語切替ボタンを設置
  82. 82. qTranslateの使い方 3.初期設定 ③言語切替ボタンを設置
  83. 83. qTranslateの使い方 3.初期設定 ③言語切替ボタンを設置 サイドバー
  84. 84. qTranslateの使い方 3.初期設定④日付が変な場合
  85. 85. qTranslateの使い方 3.初期設定 ⑤カテゴリーを多言語化
  86. 86. qTranslateの使い方 3.初期設定⑤カテゴリーを多言語化
  87. 87. qTranslateの使い方 3.初期設定⑤カテゴリーを多言語化
  88. 88. qTranslateの使い方 ここまで設定すれば、普通のブログなら、 ほとんどの部分が多言語化できてるはずです!
  89. 89. qTranslateの使い方でも、せっかくだから、もうちょっと色々出来たらいいなって思うよね?
  90. 90. qTranslateの使い方4.qTranslateの独自タグ テンプレートの中で使ったり、 カスタムフィールドなどを言語別に 出力させたりするための独自タグ
  91. 91. qTranslateの使い方 4.qTranslateの独自タグ①カスタムフィールドやウィジェットタイトルなど管理画面から入力するものを出し分ける [:ja]日本語向けの内容 [:en]英語向けの内容
  92. 92. qTranslateの使い方 4.qTranslateの独自タグ②テンプレート内で出し分ける<?php _e("<!--:en-->English Here!!<!--:--><!--:ja-->こっちは日本語だよ∼<!--:-->"); ?><?phpqtrans_getLanguage();?> 現在の言語を習得<?phpif (qtrans_getLanguage() == en) { ?>   ここに英語で出力させたいコード 条件分岐でこんなふうに使える<?php }else{ ?>   そうじゃなかったらこれが表示される<?php } ?>
  93. 93. qTranslateの使い方5.ウィジェットタイトルを出し分けてみよう
  94. 94. qTranslateの使い方5.ウィジェットタイトルを出し分けてみよう
  95. 95. qTranslateの使い方5.ウィジェットタイトルを出し分けてみよう
  96. 96. qTranslateの使い方5.ウィジェットタイトルを出し分けてみよう
  97. 97. qTranslateの使い方6.カスタムフィールドを使ってみよう
  98. 98. qTranslateの使い方 6.カスタムフィールドを使ってみよう
  99. 99. qTranslateの使い方 6.カスタムフィールドを使ってみよう<?php echo e_(get_post_meta( $post->ID , price , true )); ?>
  100. 100. qTranslateの使い方 6.カスタムフィールドを使ってみよう<?php echo e_(get_post_meta( $post->ID , price , true )); ?> これがないと動かない
  101. 101. qTranslateの使い方6.カスタムフィールドを使ってみよう<?php echo e_(get_post_meta( $post->ID , price , true )); ?><?php echo(_e(types_render_field("item-name", array()))); ?> (参)これは typesで出したカスタムフィールドだよ
  102. 102. qTranslateの使い方7.パンくずを表示してみよう
  103. 103. qTranslateの使い方 7.パンくずを表示してみようWP SiteManagerWordPress をCMSとして利用する際に必要な機能を網羅した統合パッケージ http://wordpress.org/extend/plugins/wp-sitemanager/ 公式サポートサイト http://www.wp-sitemanager.com/
  104. 104. qTranslateの使い方 7.パンくずを表示してみようWP SiteManager特にパラメーターを入れなくても多言語化に対応
  105. 105. qTranslateの使い方 7.パンくずを表示してみよう WP SiteManager<?php if ( class_exists( WP_SiteManager_bread_crumb ) ) { WP_SiteManager_bread_crumb::bread_crumb( type=string&home_label=<!--:en-->HOME <!--:--><!--:ja-->トップページ<!--:--> ); } ?> 出し分けもバッチリ
  106. 106. qTranslateの使い方 8.お問い合わせも多言語化してみよう Contact Form 78.お問い合わせも多言語化してみよう① Contact Form 7 http://wordpress.org/extend/plugins/contact-form-7/② Trust Form http://wordpress.org/extend/plugins/trust-form/
  107. 107. qTranslateの使い方 8.お問い合わせも多言語化してみよう Contact Form 7 ① Contact Form 7
  108. 108. qTranslateの使い方 8.お問い合わせも多言語化してみよう Contact Form 7日本語用フォーム
  109. 109. qTranslateの使い方 8.お問い合わせも多言語化してみよう Contact Form 7英語用フォーム
  110. 110. qTranslateの使い方 8.お問い合わせも多言語化してみよう Contact Form 7英語用フォーム
  111. 111. qTranslateの使い方 8.お問い合わせも多言語化してみよう Contact Form 7 エラーも自動で多言語化!
  112. 112. qTranslateの使い方 8.お問い合わせも多言語化してみよう Contact Form 7 ただしこのままでは動かない
  113. 113. qTranslateの使い方 8.お問い合わせも多言語化してみよう Contact Form 7functions.php//**********************************************************************************// 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"];}
  114. 114. qTranslateの使い方 8.お問い合わせも多言語化してみよう Trust form ② Trust Form
  115. 115. qTranslateの使い方 8.お問い合わせも多言語化してみよう Trust formこちらも英語用、日本語用2つのフォームを作成
  116. 116. qTranslateの使い方 8.お問い合わせも多言語化してみよう Trust form そのまま使うと日本語用でも 英語のエラー表示に
  117. 117. qTranslateの使い方 8.お問い合わせも多言語化してみよう Trust formqtranslateと干渉して、Trust Formのエラーメッセージが英語になってしまう原因を調べてみたhttp://www.warna.info/archives/2261/
  118. 118. qTranslateの使い方 8.お問い合わせも多言語化してみよう Trust form//********************************************************************************** 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 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 );
  119. 119. qTranslateの使い方 8.お問い合わせも多言語化してみよう Trust form エラーもバッチリ日本語化
  120. 120. qTranslateの使い方9.タイトルやサイトの説明
  121. 121. qTranslateの使い方9.タイトルやサイトの説明
  122. 122. qTranslateの使い方9.タイトルやサイトの説明 管理画面は....
  123. 123. qTranslateの使い方 あとは応用で!
  124. 124. 管理画面の国際化おまけ
  125. 125. 管理画面の国際化おまけ
  126. 126. 管理画面の国際化おまけ
  127. 127. 翻訳がんばって!!http://multilingual-test.webourgeon.net

×