独自言語切替ウィジェット

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 タグを、対象サイトのページに挿入してください。
HTML タグに wovn-languages クラスを挿入します。

<div class="wovn-languages"></div>

ブラウザで WOVN が読み込まれたときに、以下の 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サンプル

<!-- Insert WOVN Snippet with your token -->
<script src="https://j.wovn.io/1" data-wovnio="key=ZITIE-" async></script>

<!-- Implement your favorite html for language switch -->
<div class="wovn-languages"></div>

<!-- Your contents -->
<div>
  <h1>👋 Hello, world!</h1>
</div>

表示したい言語切替ウィジェットにあわせて、 CSS を記述します。
以下は記述のサンプルです。なお、サンプルコードのため WOVN の動作保証外です。

CSSサンプル

.wovn-languages ul {
  display: flex;
  list-style: none;
}
.wovn-languages li {
  padding: 5px;
}
.wovn-languages li + li {
  border-left: 1px solid;
}
.wovn-languages li.selected {
  font-weight: bold;
}
.wovn-languages li.wovn-switch:hover {
  text-decoration: underline;
}

実行後サンプルイメージ

【GIF】最小構成_独自言語切替ウィジェット.gif

インフォメーション
挿入されたページ上で、「公開済み」ステータスになっているページの翻訳言語の言語切替ウィジェットが自動生成されます。
この場合、出力される言語の順序や生成される HTML タグは自動で決定されます。

注意
wovn-languages クラスを付与したブロックタグには、display: block 属性が自動で付与されます。
プルダウンタイプのウィジェットなどを設置する場合、このタグよりも上位のタグで display: none を指定するなど、調整をおこなってください。

注意
<div class="wovn-languages"> ～ </div> 内のテキスト情報は翻訳対象外となります。

wovn-switch-template クラス

下記の HTML タグを、対象サイトのページに挿入してください。
<div class="wovn-languages"></div> の中に wovn-lang-name テキストを含む wovn-switch-template 要素を追加します。

<div class="wovn-languages">
  <div class="container"> <!-- 任意のクラス名を指定できます -->
    <div class="wovn-switch-template">wovn-lang-name</div>
  </div>
</div>

ブラウザで WOVN が読み込まれたときに、以下の HTML が自動生成されます。（例）
wovn-switch-template クラスを持つ HTML タグは、公開された言語数分複製され、wovn-lang-name は言語名に置き換えられます。

<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>

HTMLサンプル

<!-- ご自身のプロジェクトのトークンを記載します -->
<script src="https://j.wovn.io/1" data-wovnio="key=YOUR_TOKEN" async></script>

<!-- Implement your favorite html for language switch -->
<div class="wovn-languages">
  <div class="container"> <!-- 任意のクラス名を指定できます -->
    <div class="wovn-switch-template">wovn-lang-name</div>
  </div>
</div>

<!-- Your contents -->
<div>
  <h1>👋 Hello！</h1>
</div>

表示したい言語切替ウィジェットにあわせて、 CSS を記述します。
以下は記述のサンプルです。なお、サンプルコードのため WOVN の動作保証外です。

CSS サンプル

/* クラス名箇所（.container）は上記で指定したものを利用します。*/
.wovn-languages .container {
 display: flex;
}
.wovn-languages .container div {
 padding: 5px;
}
.wovn-languages .container div + div {
 border-left: 1px solid;
}
.wovn-languages .container div.selected {
 font-weight: bold;
}
.wovn-languages .container div.wovn-switch:hover {
 text-decoration: underline;
}

実行後サンプルイメージ

【GIF】wovn-switch-template.gif

wovn-switch クラス

下記の HTML タグを、対象サイトのページに挿入してください。
<div class="wovn-languages"></div> の中に wovn-switch クラスと data-value 属性を持つ HTML タグを追加します。
data-value 属性では、WOVN で定義されている言語コードを使用する必要があります。
詳細は言語地域コードを参照してください。

<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>

ブラウザで WOVN が読み込まれたときに、以下の HTML が自動生成されます。（例）
この方法では、生成された言語切り替え 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>

HTMLサンプル

<!-- Insert WOVN Snippet with your token -->
<script src="https://j.wovn.io/1" data-wovnio="key=YOUR_TOKEN" async></script>
<!-- Implement your favorite html for language switch -->
<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>
<!-- Your contents -->
<div>
 <h1>👋 Hello！</h1>
</div>

表示したい言語切替ウィジェットにあわせて、 CSS を記述します。
以下は記述のサンプルです。なお、サンプルコードのため WOVN の動作保証外です。

CSSサンプル

.wovn-languages ul {
 display: flex;
 list-style: none;
}
.wovn-languages span {
 padding: 5px;
}
.wovn-languages span + span {
 border-left: 1px solid;
}
.wovn-languages span.selected {
 font-weight: bold;
}
.wovn-languages span.wovn-switch:hover {
 text-decoration: underline;
}

実行後サンプルイメージ

`<a>` タグで記述した場合の注意点

単体のスイッチを <a> タグで記述した場合は特殊な動作をします。
WOVN は <a> タグを独自言語切替ウィジェットの一要素とみなし、<a> タグに wovn-switch クラスを自動的に付与します。

<div class="wovn-languages">
  <a data-value="en">English</a>
  <a data-value="ja">日本語</a>
</div>

ただし、HTML は自動変換されないため、data-value 属性を手動で追加する必要があります。

<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-switch 」で設置した場合の出来上がりイメージをご確認ください。
なお、サンプルコードのため WOVN の動作保証外です。

HTML サンプル（縦・横共通）

<!-- Insert WOVN Snippet with your token -->
<script src="https://j.wovn.io/1" data-wovnio="key=YOUR_TOKEN" async></script>

<!-- Implement your favorite html for language switch -->
<div class="wovn-languages">
  <div class="wovn-switch" data-value="ja">Japanese</div>
  <div class="wovn-switch" data-value="en">English</div>
  <div class="wovn-switch" data-value="ko">Korean</div>
</div>

<!-- Your contents -->
<div>
  <h1>👋 Hello！</h1>
</div>

CSSサンプル（縦）

.wovn-languages {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 6px 10px;
  display: inline-block;
  font-family: Arial, sans-serif;
  cursor: pointer;
  vertical-align: top;
}

.wovn-switch {
  display: block;
  line-height: 24px;
  overflow: hidden;
  transition: all .25s ease;
}

.wovn-switch:not(.selected) {
  max-height: 0;
  opacity: 0;
}

.wovn-languages:hover .wovn-switch {
  max-height: 28px;
  opacity: 1;
}

実行後サンプルイメージ（縦）

CSS サンプル（横）

.wovn-languages {
  display: inline-flex;
  align-items: center;
  border: 1px solid gray;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.wovn-switch {
  display: inline-block;
  padding: 0 8px;
  line-height: 24px;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: all 0.25s ease;
}

.wovn-switch.selected {
  opacity: 1;
  max-width: 200px;
}

.wovn-languages:hover .wovn-switch {
  opacity: 1;
  max-width: 200px;
}

実行後サンプルイメージ（横）

独自言語_wovn switchクラス.gif

インフォメーション
HTML / CSS の編集
独自言語切替ウィジェットを設置するための HTML 編集サービスは提供していません。お客様で本ページの内容をご確認いただき、編集してください。

注意
WOVN の「デフォルト言語切替ウィジェット」は編集しないでください。
編集した場合、個別にご連絡させていただく場合があります。

注意
独自言語切替ウィジェットの記述を使わない場合、以下の処理を全て独自で実装する必要があります。
・ data-wovn-ignore を付けて、言語切替部分が翻訳されないようにする
・ Cookie などで言語を保存して、起動時に使用する
・初回ブラウザ言語で最適な言語を判定する
・バックエンドライブラリ使用時は、スニペットに含まれる言語を使用する
・表示されている言語と、言語スイッチの表示の同期をする

注意
独自ウィジェットは、 select / option の構造にはご利用できません。

よくある質問

独自言語切替ウィジェット部分に wovn-lang-name と表示されてしまう

以下の一行を <head> タグ内に追加してください。

<style>.wovn-languages { display:none; }</style>

対象ページが WOVN で翻訳されている場合は、上記の CSS が上書きされて表示されるようになります。
これでも解消しない場合は、WOVN 管理画面右上の「お問い合わせ」ボタンからお問い合わせください。

このセクションの記事

目次

動画

概要

独自言語切替ウィジェットを有効にする

独自言語切替ウィジェットを設置する

最小構成

wovn-switch-template クラス

wovn-switch クラス

`<a>` タグで記述した場合の注意点

wovn-switch クラスを使った CSS のサンプルコード

よくある質問

独自言語切替ウィジェット部分に wovn-lang-name と表示されてしまう

このセクションの記事

目次

動画

概要

独自言語切替ウィジェットを有効にする

独自言語切替ウィジェットを設置する

最小構成

wovn-switch-template クラス

wovn-switch クラス

<a> タグで記述した場合の注意点

wovn-switch クラスを使った CSS のサンプルコード

よくある質問

独自言語切替ウィジェット部分に wovn-lang-name と表示されてしまう

`<a>` タグで記述した場合の注意点