1
/
5

【開発日誌 #34】多言語プラグインWPML のおすすめ設定方法を詳しく紹介! #02

今回は多言語プラグインのWPMLの実装方法を実際にお見せし、おすすめ機能やバージョンアップしたカスタムフィールドを実装する際の注意点を共有したいと思います。

以前もWPMLに関して記事を書き反響が大きかったため、第二弾はより詳しく実装の初期設定からご紹介いたします。

前回の記事はこちらから▽

【開発日誌 #12】多言語プラグインWPMLとACFカスタムフィールドのオプションページ組み合わせ時の注意点 | Frontend developer's note
フロントエンジニアの韓と申します。 現在某大手商社様のコーポレートサイトを構築しています。今回は構築中の案件で気づいたことを共有したいと思います。 ・wordpress案件 ・多言語サイト(日・英・中) ・お客様が更新しやすいカスタムフィールドで構築する ・ACFカスタムフィールド 「Advanced Custom Fields」は、 WordPressのカスタムフィールドの仕組みを拡張して、さまざまな形式の入力項目を追加できる様にする ためのプラグインです。 ・WPML 主な特徴 WPMLは1つのWor
https://www.wantedly.com/companies/commude/post_articles/377045


WPMLは弊社の多言語の案件でよく使うプラグインになります▽

WPML - WordPress用多言語プラグイン
WPMLは、100万件以上のWordPressサイトを多言語にした実績のあるプラグインです。 企業サイトにピッタリですが、ブログにも使用できるほど使いやすいプラグインです。
https://wpml.org/ja/

はじめに

WPMLの実行には以下が必要になるので、事前に確認ください。

WPMLは有料プラグインですので、実装時は先にアカウントを申し込んで購入致します。

実装

下記のように右上のアカンウトの部分のダウンロードをクリックすると、プラグインダウンロードページが表示されます。


ダウンロードが必要になるのは下記の二つなります。

  • WPML Multilingual CMS (the core plugin)
  • String Translation

WordPressに2つプラグインをインストールした後に、WPMLの環境設定します。

言語設定の仕方

設定管理画面の入り方はWordPressの管理画面から、「WPML」を選択し「言語」を選びます。

ここでは、サイトの言語を設定します。サイトに最初表示する時の言語を初期設定します。例えば、今回の案件は「日本語」が初期設定の言語なりますので、上記のように設定しました。

サイト上で言語スイッチャーを入れる場合は、デフォルトの表示となります。しかし、画面デザインによっては言語のテキストはデフォルト設定と異なるため、「Edit Languages」をクリックしたら、下記のように編集できます。


言語URLの設定


言語URLの設定は基本的にディレクトリ内の異なる言語で設定します。

例えば、日本語では「https://○○○.○○○.com/」英語は「https://○○○.○○○.com/en/」になります。

先方の指定がないの場合はこの設定が一番管理しやすく、カスタム投稿などのパーマリンクの調整がしやすいです。

言語スイッチャー

言語スイッチャーの言語の順番はデザインの順番に従って設定します。

翻訳なしにする場合は、「言語をスキップする」を選択します。例えば上記のように4言語の多言語サイトでは、一つのページで3言語しかない時には、言語スイッチャーは自動的に3言語のみ表示するようにします。

投稿では3言語しかない場合でも、言語スイッチャーは4言語で表示されています。しかし「翻訳がないため、言語ホームへリンクする」を選択している場合、翻訳がない言語をクリックすると、ホーム画面に飛んでしまいます。


カスタム言語スイッチャー


サイトに表示する言語スイッチャーはカスタムができます。

ここでは基本のスタイルなどを調整できます。※テーマソース内のCSSでも調整ができます。

言語スイッチャーを入れるところは下記のショートコートを入れます。

<?php do_action('icl_language_selector');  ?>


言語を隠す

言語を隠すは案件の仕様によって調整できる機能です。


ブラウザ言語

ブラウザ言語リダイレクトは、仕様によって選択ができます。デフォルトでは、訪問者をリダイレクトしません。

「翻訳が存在する場合のみ、ブラウザの言語に基づいてビジターをリダイレクトする」を選択した場合

訪問者を常にリダイレクトします。常にリダイレクトすることを選択した場合、訪問者は、翻訳されたコンテンツが存在する場合は、そのコンテンツに移動し、一致する翻訳がない場合はデフォルト言語のホームページに移動します。

「常にブラウザの言語に基づいてビジターをリダイレクトする(翻訳がない場合、ホームページへリダイレクトする)」を選択した場合

WPMLは言語リダイレクトを 1 回だけ行い、その後はリダイレクトしません。これは、訪問者が引き続き言語を切り替えられるようにするためです。常にブラウザーの言語にプッシュバックすると、WPML がブラウザーによって設定された言語にリダイレクトされた後、訪問者は言語を手動で切り替えることができなくなります。 この 1 回限りのリダイレクト操作は、24 時間ごとにリセットされます 。24時間の期限は自分で設定できます。


カスタムフィールド

以前のバージョンではカスタムフィールドを言語ごとに作らないといけませんでした。しかし、バージョンアップしたことによって、一つのカスタムフィールドを作ればOKになりました。めちゃくちゃ便利になりましたね!

以前のバージョンでは下記のように、カスタムフィールドを言語ごとに作らないといけませんでした。カスタムフィールドは、エクスポートとインポートでも同じ言語になってしまいます。そのため手動で言語ごとに作らないといけませんでした。。

しかし、新しいバージョンでは、カスタムフィールドを追加する際にはカスタムフィールドの翻訳オプションを選択できます!


自動翻訳

カスタム投稿の詳細ページを自動翻訳時、そして、詳細ページはカスタムフィールドの柔軟コンテンツを使う時の設定の仕方は下記になります。

WordPress管理画面>WPML>設定>カスタムフィールド翻訳の設定

柔軟コンテンツは「一度コピーする」を設定をし、柔軟コンテンツの中のカスタムフィールドは「翻訳する」を設定します。

当初は全部「翻訳する」の設定をしたのですが、記事に自動翻訳をかけてもタイトルだけが翻訳されて、柔軟コンテンツの中身のカスタムフィールドがなくなってしまいました。。色々調べて、WPMLへ問い合わせをし設定を変えると、やっと問題なく自動翻訳できました!

WPMLは40以上の言語に対応します。これからの時代は日本だけではなく、世界に向けて魅力的なサイトを作ることが求められています。

多言語プラグインを利用することで世界中の多くの方に自分たちが作ったサイトを見てもらうことができますので、ぜひ試してください!

株式会社コムデからお誘い
この話題に共感したら、メンバーと話してみませんか?
株式会社コムデでは一緒に働く仲間を募集しています
11 いいね!
11 いいね!

同じタグの記事

今週のランキング

韓 顔彤さんにいいねを伝えよう
韓 顔彤さんや会社があなたに興味を持つかも