WOVN が提供する「デフォルト言語切替ウィジェット」ではなく、「独自言語切替ウィジェット」を設置してカスタマイズする手順について説明します。
目次
動画
概要
WOVN ではいくつかのテーマから言語切替ウィジェットを選択することができますが、必ずしもサイトのイメージに合うわけではありません。
本ページで紹介する「独自言語切替ウィジェット」は、サイトに埋め込んだ HTML をウィジェットとして利用できるので、サイトイメージに合った言語切替ウィジェットを構築できます。
インフォメーション
独自言語切替ウィジェットは、Free プラン以外の有料プランで利用可能です。
| 種類 | 概要 |
| 最小構成 | 最も簡単に設置ができます。 記述するタグの量が少なく、ウィジェットのデザイン指定に専念ができます。 出力される言語の順番や言語表示名、HTML タグは WOVN によって自動で決定されます。 |
| wovn-switch-template | 言語切り替えウィジェットの HTML タグをカスタマイズできます。 出力される言語の順番や言語表示名は自動で決定されます。 表示したい言語リストと公開されている言語が同じ場合は、wovn-switch-template が最適です。 |
| wovn-switch | 最も柔軟にカスタマイズができます。 言語切り替えウィジェットの HTML タグ、出力される言語の順番や言語表示名も全て指定ができます。 設置にあたっては時間と HTML の知識が最も必要となります。 表示したい言語リストが公開された言語と異なる場合、または表示したい言語リストを言語ごとに変えたい場合は、wovn-switch が最適です。 |
インフォメーション
1 つのページで複数のオプションを使用しないでください。
独自言語切替ウィジェットを有効にする
- 対象プロジェクトを選択し、ページリストへ移動します。
- 「設定」タブ→「ウィジェット」→「独自ウィジェット」の項目を「ON」にします。
「OPTION」が表示されます。 - 独自言語切替ウィジェットの HTML を、WOVN で翻訳しているサイトに埋め込んでください。
独自言語切替ウィジェットの HTML 記述方法は、独自言語切替ウィジェットを設置するを参照してください。 - CSS をカスタマイズし、サイトデザインに合わせてください。
インフォメーション
WOVN デフォルト言語切替ウィジェットを非表示にしたい場合
「独自ウィジェットが挿入されていないページでも、WOVN ウィジェットを表示しない。」を「ON」にすると、独自言語切替ウィジェットの HTML の有無にかかわらず、WOVN デフォルト言語切替ウィジェットが表示されなくなります。
※「OFF」にすると、独自言語切替ウィジェットの HTML がない場合には、WOVN デフォルト言語切替ウィジェットが表示されます。
独自言語切替ウィジェットを設置する
タグに記載する言語コードについては、言語地域コードを参照してください。
最小構成
HTML タグに wovn-languages クラスを挿入するだけで、ブラウザで WOVN が読み込まれたときに、自動で言語切替ウィジェットの HTML を生成します。
下記の HTML タグを、対象サイトのページに挿入してください。
```html
<div class="wovn-languages"></div>
```
自動で生成される HTML 例
```html
<div class="wovn-languages wovn-is-visible" data-ready="true" data-theme="built-in" style="display: block;">
<ul class="wovn-lang-list">
<li class="wovn-switch" data-value="en">English</li>
<li class="wovn-switch" data-value="ja">日本語</li>
<li class="wovn-switch selected" data-value="ko">한국어</li>
</ul>
</div>
```
インフォメーション
挿入されたページ上で、「公開済み」ステータスになっているページの翻訳言語の言語切替ウィジェットが自動生成されます。
この場合、出力される言語の順序や生成される HTML タグは自動で決定されます。
注意
wovn-languages クラスを付与したブロックタグには、display: block 属性が自動で付与されます。
プルダウンタイプのウィジェットなどを設置する場合、このタグよりも上位のタグで display: none を指定するなど、調整をおこなってください。
注意
<div class="wovn-languages"> ～ </div> 内のテキスト情報は翻訳対象外となります。
wovn-switch-template クラス
<div class="wovn-languages"></div> の中に wovn-lang-name テキストを含む wovn-switch-template 要素を追加してください。
wovn-switch-template クラスを持つ HTML タグは、公開された言語数分複製され、wovn-lang-name は言語名に置き換えられます。
下記の HTML タグを、対象サイトのページに挿入してください。
```html
<div class="wovn-languages">
<div class="container">
<div class="wovn-switch-template">wovn-lang-name</div>
</div>
</div>
```
自動で生成される HTML 例
```html
<div class="wovn-languages wovn-is-visible" data-ready="true" data-theme="built-in" style="display: block;">
<div class="container">
<div class="wovn-switch-template wovn-switch" data-value="en">English</div>
<div class="wovn-switch-template wovn-switch" data-value="ja">日本語</div>
<div class="wovn-switch-template wovn-switch selected" data-value="ko">한국어</div>
</div>
</div>
```
wovn-switch クラス
<div class="wovn-languages"></div> の中に wovn-switch クラスと data-value 属性を持つ HTML タグを追加してください。
data-value は、WOVN で定義されている言語コードを使用する必要があります。
詳細は言語地域コードを参照してください。
この方法では、生成された言語切り替え HTML の構造が挿入された HTML と同じになるため、言語や要素を自由に隠したり追加したりすることができます。
下記の HTML タグを、対象サイトのページに挿入してください。
```html
<div class="wovn-languages">
<span class="wovn-switch" data-value="ja">Japanese</span>
<span class="wovn-switch" data-value="en">English</span>
<span class="wovn-switch" data-value="ko">Korean</span>
</div>
```
自動で生成される HTML タグ
```html
<div class="wovn-languages wovn-is-visible" data-ready="true" data-theme="built-in" style="display: block;">
<span class="wovn-switch" data-value="ja">Japanese</span>
<span class="wovn-switch" data-value="en">English</span>
<span class="wovn-switch selected" data-value="ko">Korean</span>
</div>
```
<a> タグで記述した場合の注意点
単体のスイッチを <a> タグで記述した場合は特殊な動作をします。
WOVN は <a> タグを独自言語切替ウィジェットの一要素とみなし、<a> タグに wovn-switch クラスを自動的に付与します。
```html
<div class="wovn-languages">
<a data-value="en">English</a>
<a data-value="ja">日本語</a>
</div>
```
ただし、HTML は自動変換されないため、data-value 属性を手動で追加する必要があります。
```html
<div class="wovn-languages">
<a class="wovn-switch" data-value="en">English</a>
<a class="wovn-switch" data-value="ja">日本語</a>
</div>
```
wovn-switch クラスを使った CSS のサンプルコード
インフォメーション
・HTML / CSS の編集
Wovn Technologies では、独自言語切替ウィジェットを設置するための HTML 編集サービスは提供していません。お客様で本ページの内容をご確認いただき、編集してください。
注意
WOVN の「デフォルト言語切替ウィジェット」は編集しないでください。
編集した場合、個別にご連絡させていただく場合があります。
注意
独自言語切替ウィジェットの記述を使わない場合、以下の処理を全て独自で実装する必要があります。
・ data-wovn-ignore を付けて、言語切替部分が翻訳されないようにする
・ Cookie などで言語を保存して、起動時に使用する ・ 初回ブラウザ言語で最適な言語を判定する
・ バックエンドライブラリ使用時は、スニペットに含まれる言語を使用する
・ 表示されている言語と、言語スイッチの表示の同期をする