独自言語切替ウィジェットで、公開ステータスの言語のみ表示させる

目次

• 概要
• 設定方法

概要

独自言語切替ウィジェットを設置した際、コーディング方法によっては非公開ステータスの言語がウィジェットに表示されてしまう場合があります。

WOVN が提供している Widget API を使って、独自言語切替ウィジェットの言語を公開ステータスと連動させることができます。

下記サンプルコードでは、公開ステータスの言語のみをウィジェットで表示させます。

インフォメーション
独自言語切替ウィジェットの設置方法は「独自言語切替ウィジェット」を参照してください。

インフォメーション
Widget API の詳細は「Widget API (WOVN.io Javascript)」を参照してください。

設定手順

ここでは wovn-switch クラスで独自言語切替ウィジェットを実装している場合のサンプルコードを紹介します。

下記サンプルコードを参考に実装してください。

    // サポートページ「独自言語切替ウィジェット」内の　wovn-switch クラスパターンで実装を想定
    <div class="wovn-languages">
      <a data-value="ja" class="wovn-switch lang-ja">日本語</a>
      <a data-value="en" class="wovn-switch lang-en">English</a>
      <a data-value="zh-CHS" class="wovn-switch lang-zh-CHS">簡体字</a>
      <a data-value="ko" class="wovn-switch lang-ko">韓国語</a>
    </div>
    
    <script>
      window.addEventListener('wovnApiReady', function() {
     　 // 元言語の言語コードを記述
        const sourceLangCode = 'ja'
        // 言語切替ウィジェット内の要素を取得 
        const switchItems = document.getElementsByClassName('wovn-switch') 
        
        for(item of switchItems) {
          // 取得した要素の言語が元言語ではなく、尚且つ非公開であれば `display:none` を付与する
          if(sourceLangCode !== item.dataset.value && !WOVN.io.isPublished(item.dataset.value)) {
            item.style.display = 'none'
          }
        }
      })
    </script>

注意
JavaScript の記述については WOVN のサポート対象外です。
必ず動作確認を実施してください。