多言語機能でサイトの翻訳（2）
Webサイトを翻訳する
ここまでの設定でコンテンツを翻訳する準備が一通り整いました。早速Webサイトを翻訳していきます。
コンテンツの翻訳
まずはトップページに設定している「ホーム」(/node/3)のページから取り掛かります。
もろもろの翻訳の準備が完了したおかげで、ページにアクセスすると「翻訳」というタブが新たに追加されているのがわかります。翻訳タブをクリックします。
翻訳タブにて、各ページの翻訳ページの追加、削除を行います。英語ページはまだ「利用不可」の状態となっています。「追加」をクリックします。
コンテンツ作成画面に以下を入力し、保存します。
| Title | Home |
| Body | Maru-cha is one of the recognized bubble tea shops in Tokyo. We believe in serving quality bubble tea and a cozy place. |
翻訳後の英語版トップページ(/en)を確認してみます。画面中央のコンテンツ部分は無事翻訳されましたが、「夏のおすすめメニュー」「最新ニュース」などのブロック、ヘッダメニューがまだ翻訳されていません。これらも順に翻訳していきます。
メニューの翻訳
ヘッダメニューのリンクを翻訳します。サイト構築＞メニュー＞メインナビゲーション＞メニューの編集に遷移します。
「店舗一覧」のリンクの「操作」から「翻訳」をクリックします。
Englishを追加し、「Menu link title」を「Stores」に変更し、保存します。
カスタムブロックの翻訳
「夏のおすすめメニュー」としてサイドバーに表示されているカスタムブロックを翻訳します。サイト構築＞ブロックレイアウト の、Sidebar second に設置されている「夏のおすすめメニュー」の「操作」から「翻訳」をクリックします。
Englishを追加し、「説明」欄に「Summer Staff Picks」と入力して翻訳を保存します。これでブロックのタイトル部分を翻訳しました。
次にブロックの本文を翻訳します。サイト構築＞ブロックレイアウト＞カスタムブロックライブラリ に移動し、「夏のおすすめメニュー」の項目の「操作」から「翻訳」をクリックします。
Englishを追加し、下記項目を編集します。
| Block description | Summer Staff Picks |
| Body | Hojicha bubble tea is highly recommended. You can try it! |
これでカスタムブロックの翻訳は完了です。
サイト名を翻訳
サイト左上に表示されているサイト名も英語表記を用意します。環境設定＞サイトの基本設定＞system informationを翻訳 に移動し、Englishを追加します。
サイト名を「Marucha」と入力し、翻訳を保存します。これで英語版サイトの左上のブロックが「Marucha」という表示に切り替わりました。
ビューブロックの翻訳
「最新ニュース」がリストアップされるビューブロックを翻訳します。サイト構築＞ビューズ に移動し、「最新ニュース」項目の「翻訳」をクリックします。
Englishを追加します。次の画面で、MASTER 表示設定＞最新ニュース デフォルトのディスプレイオプション の順にクリックして項目を展開します。「ディスプレイ・タイトル」に「What’s New」と入力し、翻訳を保存します。
これでビューブロックのタイトル部分が翻訳されました。
ビューブロック内でリストアップしているコンテンツを翻訳します。コンテンツ管理ページに移動して、「2月の営業日」「3月の営業日」それぞれ翻訳ページを作成します。
| Tittle | Business days in February |
| Body | In February, We are regularly closed on Thursday. |
| Tittle | Business days in March |
| Body | In March, we are closed on 3rd. |
これでうまく表示されるかと思いきや、英語ページで該当ブロックを確認してみると、日本語記事もリストアップされてしまいました。
ビューの設定で表示言語のみリスト表示するようにフィルタリング設定を変更します。サイト構築＞ビューズ から「最新ニュース」の編集画面に移動します。
「フィルターの条件」の「追加」ボタンをクリックして、「翻訳言語」にチェックを入れて設定ボタンを押します。
「ページで選択されたインターフェイステキストの言語」にチェックを入れて、「適用」をクリックします。
最後にビューの設定画面を保存します。
これで、サイトのトップページの全ての文字を英語に置き換えることができました。
言語の切り替えブロックを設置
最後にサイト訪問者が言語を切り替えられるように、言語の切り替えブロックを設置します。サイト構築＞ブロックレイアウト にて、「Sidebar first」リージョン「ブロックを配置」をクリックします。ブロックの一覧の中から「言語の切り替え」を探して「ブロックを配置」をクリックします。
システム内部名称に「language_switcher」を入力して、他はデフォルトのままブロックを保存します。
これで英語サイトの構築が完了しました。
