見出し画像

【Web制作者用】WordPressのPolylangで多言語サイトを作ってみた！

ゆーた 台湾移住🇯🇵🇹🇼

こんにちは！
今回仕事で多言語サイトを構築する機会があって色々勉強になったことがあったので、noteにまとめてみたいと思います。
・多言語ってどうやって制作するの？
・色々なプラグインがあるけど、コーディングで作成したサイトにも対応しているの？
などの疑問がある人に向けて書いてみます！

WordPressで多言語サイトを作るには？

多言語サイトを構築するにも色々な方法があったりと非常に悩む人も多いかと思います。実際に調べてみてもいろんなプラグインがあったり、こちらも非常に悩みました。まずはクライアントがどのように構築して欲しいが要望を聞くことが大切だと思います。
今回は、
・翻訳はクライアント自身が行う。
・ブログ、事例などの発信を多めに行う（多言語で）。
・制作費用はなるべく安くしたい
が条件でした！


多言語サイトを作る方法は調べても方法が多い
調べてみた中でも多言語サイトを構築するには大きく分けて以下のような方法がありました。
・Google翻訳で多言語対応する
・ディレクトリを完全に分けて言語ごとにサイトを構築する
・プラグインなしで自力で構築する
・プラグインで構築する


Google翻訳で多言語対応する

こちらはサイトにGoogle翻訳を組み込んで多言語対応する方法です。こちらを使用しているサイトはとても多く、とにかく工数がかからずに翻訳もいらないのが特徴です。しかしデメリットとして、Google翻訳の翻訳の正確性は低いのが現状にあります。

ディレクトリを完全に分けて言語ごとにサイトを構築する

こちらは言語ごとに完全にサイトを分けて構築する方法です。ディレクトリとサブディレクトリにそれぞれ別々にWordPressを導入して構築する感じになります。
制作会社時代にこういう方法で構築した経験もあるのですが、管理画面が全くの別なので管理画面の更新などが非常に大変です。例えばブログなどをあまりこうしない場合ならまだこちらでもいいかと思いますが、今回は更新頻度高めなクライアントなので、その場合、言語ごとに投稿を作成しなければなりません。また記事などはこちら側では管理しないので、クライアントの負担も増えるかなと思い断念しました。
またこちらの最大のデメリットとして、サイト自体が完全に別なので、SEOに深く関わるということです。

プラグインなしで自力で構築する

こちらはひとつのサイトでJSなどを駆使して多言語サイトを構築するというものです。しかし自力だと構築や、１つ１つのエラー処理に工数がかなりかかり、予算的に合わなかったです。

プラグインで構築する

WordPressには多言語サイトを構築するプラグインがいくつかあります。代表的なものでいえば以下の通りかと思います。
・Bogo
・Polylang
・WPML

※今回なぜPolylangにしたのか？
Begoの場合（無料）
こちらは日本人が作成したプラグインで使いやすいと評判なのですが、言語スイッチャー問題やカスタムがしづらい、大規模サイトだと管理が大変ということなので、やめました。サイト構築ではなくブログ目的や小規模サイトで使用するのはいいかと思います。

Polylangの場合（無料）
こちらの一番の利点というのはユーザーが使いやすいということ。ブログ投稿やカスタム投稿の際に言語別の記事をワンクリックで複製することができます。（翻訳は自動ではないです）
１つデメリットとしてはslug名がページごとに同じにはできないということくらいかなと思います。
日本語/about/
英語en/about/ ができず、en/about-en/のようにしないとダメです。
有料版では同一slugが可能で自動翻訳も対応しているそうですが、URLが違うくらいで、それ以外は対応できそうなのでこちらを採用しました。

WPMLの場合（有料）
こちらは有料プラグインになっており、年額12,000円くらいでした。（一括だと3万くらいだったと思います。）便利なのですが、予算が決まっていたことと、やりたい構築ができない場合、有料では切り返しが出来ないのでこちらは採用しませんでした。



Polylangでサイトの翻訳準備をする

今回作成したサイトは以下のようなサイトになります。
・ページ数は10pほどのコーポレートサイト
・対応言語（日本語、英語、ベトナム語）（ベトナム語は後ほど作成予定）
・ブログ投稿機能、お問い合わせ機能、カスタム投稿機能を含む
・翻訳はクライアントで対応する。（自動翻訳ではない）

基本的に以上のようなサイトだとPolylangで構築は可能かと思います。
また今回、Web制作者用に構築はコード内で行なっております。


Polylangをインストール

プラグイン新規追加からPolylangを検索し有効化します。
最新のWPバージョンにも対応しているので安心ですね。


有効化後管理画面のサイドバーに言語という項目が追加されているので、そこの言語を選択します。


ここのセットアップウィザードを利用するからPolylangの設定を行なっていきます。


ここで翻訳したい言語を選択します。
ここで注意したいのが1言語目は必ず日本語を選択しないといけないということ。ここで日本語を設定しないと日本語のサイトができません。



日本語を選択後翻訳したい言語を追加していきます。こちらで設定した後でも、後々翻訳したい言語を追加することも可能です。言語数はかなりの言語が対応されている感じでした。


こちらは許可しても問題ないです。画像などのAltタグの翻訳をするかどうかのボタンになります。


こちらは日本語に設定して次へボタンをクリック。


設定完了後ダッシュボードに戻るをクリック。


設定後、ブログの投稿記事や固定ページの右側に先ほど選択した言語が設定されていることがわかります。この＋の箇所をクリックすることで英語版のページを作成することが可能です。


クリックすると英語版の作成ページが開くので作成してみましょう。
プラグインのclass-Editorを入れているので、作成ページが少し違う人もいるかもしれません。（slug名は適宜変更してください）


カテゴリやタグなども同じです。+マークがあるところが翻訳可能なので日本語のスラッグと英語のスラッグを作成します。
例　ニュースカテゴリの場合
日本語 news
英語 news-en
などになります。



Polylangの詳細設定

ここから詳細設定を行なっていきます。
管理画面のサイドバー（言語、翻訳、設定）を見ていきます。

言語
こちらは言語を追加することができます。

翻訳
こちらではメタディスクリプションなどの翻訳を記入する箇所があります。

設定

こちらでは翻訳の際の表再設定が可能です。基本触らなくても良いかと思います。
URLの修正
パーマリンクの設定ができます。デフォルトでは、
example/en/のようにサブディレクトリ形式で表示されるようになっています。

ブラウザーの言語の検出
多言語を作成した際に、閲覧者が住んでいる地域に合わせて言語ページを優先して表示させることができます。こちらは有効でいいかと思います。
閲覧者が英語圏の場合、英語サイトを優先して表示など。

カスタム投稿タイプとタクソノミー
カスタム投稿を作成するとこちらで翻訳するか選択することが可能になります。






Polylangを使用して多言語サイトを構築する

ここから多言語サイトを構築した方法を解説していきます！
この方法が効率的かは不明ですが、以下参考になれば嬉しいです。
日本語と英語用を作成する手順として解説していきます。


テンプレート作成

今回は言語ごとにテンプレートを作成しました。

日本語のテンプレート
・header.php
・footer.php
・front-page.php
・page.php
・archive.php
・single.php
などなど

英語のテンプレート
・header-en.php
・footer-en.php
・front-page-en.php
・pager-en.php
・archiver-en.php
・singler-en.php

のように言語別でテンプレートを作成しました。
例えばフロントページの中身はこのような感じになります。

front-page.php内

<?php get_header(); ?>

記述が入ります。

<?php get_footer(); ?>

front-page-en.php内

<?php get_header('en'); ?>

記述が入ります。

<?php get_footer('en'); ?>

こうすることで、
日本語のページは日本語のheaderとfooter、
英語のページは英語のheaderとfooterを読み込むことができます。


言語スイッチャーの設定

こちらはPolylangのショートコードがあります。

<?php pll_the_languages(); ?>

以上のショートコードを記述すると、デフォルトで言語スイッチャーが以下のようにhtml形式で表示されます。

<li class="lang-item lang-item-7 lang-item-ja current-lang lang-item-first"><a lang="ja" hreflang="ja" href="http://localhost/">日本語</a></li>
<li class="lang-item lang-item-10 lang-item-en"><a lang="en-US" hreflang="en-US" href="http://localhost/en/">English</a></li>

class名もついておりますので、こちらでcss調整することが可能です。またパラメーターもついているので、ドロップダウンにしたり、国旗を表示したりすることもできます。
パラメーター参考↓


言語スイッチャーで選択された言語ごとにテンプレートを切り替える

例えば日本語TOPページの言語スイッチャーで英語を選択した場合、テンプレートをfront-page.phpからfront-page-en.phpにしたい場合などです。
以下のコードをfunctions.phpに記述します。こうすることでページの切り替えが可能になります。

//************************************************
//topページの日本語、英語切り替え
//************************************************
  function custom_front_page_template($template) {
    if (function_exists('pll_current_language')) {
        if (is_front_page() && pll_current_language() == 'en') {
            $new_template = locate_template(array('front-page-en.php'));
            if (!empty($new_template)) {
                return $new_template;
            }
        }
    }
    return $template;
}
add_filter('template_include', 'custom_front_page_template');

コードの説明として、現在のページがトップページであり、かつ言語が英語の場合に英語用のテンプレートを適用するという記述にしております。
他のテンプレートも切り替えたい場合は同じような記述で問題ないかと思います。
例えばarchiveページは以下のような感じです。

//************************************************
//ブログ一覧ページの日本語、英語切り替え
//************************************************
function custom_archive_template($template) {
  if (function_exists('pll_current_language')) {
      if (is_post_type_archive('blog') && pll_current_language() == 'en') {
          $new_template = locate_template(array('archive-en.php'));
          if (!empty($new_template)) {
              return $new_template;
          }
      }
  }
  return $template;
}

add_filter('template_include', 'custom_archive_template');

Polylangの良いところは、例えばブログ一覧で取得したブログ記事も言語ごとで切り替わるということです。
日本語ページのブログ一覧→　日本語のブログのみ表示される
英語ページのブログ一覧→　英語のブログのみ表示される

これは詳細ページも同じで、言語スイッチャーをクリックすると、翻訳した記事のページに自動的に切り替わります。ちなみに切り替え先が翻訳していないとトップページに移動します。

他に言語ごとにリンクの設定変更やテキスト変更、お問い合わせページの設定変更（送受信文）などがありますが、基本それぞれにテンプレート作成すれば良いので、手間は増えますが難しいことはないかと思います。


Polylangで構築中に困った点

今回Polylangで翻訳したのですが、所々手作業で手を加えないといけない箇所がありました。そこで気になった箇所をいくつか紹介します！

ブログページでの<title></title>タグの翻訳

今回SEO関連はAll-in-One-SEOで対応させていただきました。そこで固定ページなどはページごとにタイトルタグやメタタグは翻訳可能なのですが、ブログページなどの箇所できなかったのでfunctions.phpで対応いたしました。

//************************************************
// 言語ごとにタイトルを変更
//************************************************
add_filter( 'aioseo_title', function( $title ) {
  // 現在の言語を取得
  $current_lang = pll_current_language();

  // 英語の場合
  if ( $current_lang === 'en' && is_post_type_archive('blog') ) {
      $title = '英語のタイトルを表示';
  }

  return $title;
} );


人気記事の取得を言語別に行う

１つ多言語中に困った点として、人気記事の取得を言語別に行う点でした。
普段は、WordPressのプラグイン「WordPress Popular Posts」を使用して取得していたのですが、こちらのプラグインでは言語別ごとの取得がPolylangでは対応ができなかったです。
※プラグイン自体が違うのでいたしかたないです。

なので、WordPress Popular Postsは使用せず、functions.phpに以下を記述して、言語別に記事の人気記事を取得することにしました。

//************************************************
// 記事の閲覧回数をカウントしてカスタムフィールドに保存する関数
//************************************************
function count_post_views() {
  if (is_singular('blog')) {
      $post_id = get_the_ID();
      $views = get_post_meta($post_id, '_post_views_count', true);
      $views = $views ? $views : 0;
      $views++;
      update_post_meta($post_id, '_post_views_count', $views);
  }
}
add_action('wp_head', 'count_post_views');


//************************************************
// Polylangでカスタム投稿タイプの人気記事を取得する関数（上位3記事のみ）
//************************************************
function get_polylang_popular_posts($post_type, $limit = 3) {
  global $polylang;

  // 現在の言語を取得
  $current_lang = $polylang->curlang->slug;

  // クエリの言語を設定
  $args = array(
      'post_type' => $post_type,
      'posts_per_page' => $limit, // 上位3記事のみ取得
      'orderby' => 'meta_value_num',
      'meta_key' => '_post_views_count', // 閲覧回数メタキー
      'order' => 'DESC',
      'lang' => $current_lang // 言語ごとに異なる記事を取得するためのPolylangの設定
  );

  // カスタムループを作成
  $query = new WP_Query($args);

  // ループ開始
  if ($query->have_posts()) {
      echo '<ul class="wpp-list">';
      while ($query->have_posts()) {
          $query->the_post();
          echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
      }
      echo '</ul>';
  }

  // リセット
  wp_reset_postdata();
}

achive.php内（表示したい箇所に記述）

 <?php
if (function_exists('get_polylang_popular_posts')) {
    echo '<ul class="wpp-list">';
    get_polylang_popular_posts('blog', 3); // カスタム投稿タイプが 'blog' の場合
    echo '</ul>';
}
?>

※メインクエリ、サブクエリ、スラッグ名ごとに記述は適宜変更してください。

その他にも１つ１つ確認しては対応する感じだったかと思います。



多言語化は以外にも大変

多言語化といえば、翻訳してテキスト入力すれば完了でしょ？と思う人も思うかと思いますが、そうではありません。細かい箇所の設定が必要だったり、手間もかかるので、見積もりを出す際には注意が必要です。基本、日本語の見積もりにx1.3倍くらいが妥当かなと思いました。またより複雑な構築をしている場合は工数プラスではかかるかと思います！
多言語化のサイト作成にはいろんな方法があるので、クライアントとのヒアリングで、何が適切な作り方を探すのが大事になってくるかと思います！


X（Twitter）やInstagramやってます！
仕事は主にweb制作をしております。
台湾好きや興味がある人とお友達になりたいです。
またweb制作の仕事も随時募集中なので、
ポートフォリオを見ていただけると嬉しいです！
DMお待ちしております！

Twitter:@trizolyuta
Instagram:@yuta208817
portoforio:https://nakamayuuta.sakura.ne.jp/

大阪在住の２9歳。web制作会社勤務。noteを通してたくさんの出会いを作っていきたいです。台湾が大好きで中国語勉強中。日台夫婦。日々の挑戦の記録や、社会の生きづらさ、台湾のことなどを書いていこうと思います。2023年台湾に移住予定です。