WordPress+Polylangを使った英語サイトの作り方メモ

Web Creation

ふと思い立って、自分のブログ(ここ)を元に英語サイトをつくることにしました。英語サイトの構築は初めてでしたが、AIに相談しながら進めていった結果、2日くらいで完成。AIって便利ですね。この記事では、英語サイトの構築で私がつまずいた点、迷った点をまとめました。私と同じように「日本語ブログの英語版をつくってみたい」と考えた方にとって、何かしらのヒントになればうれしいです。

ドメイン構成はどうする?英語サイトに最適な選択とは

目指したのは、「英語圏の人が、英語でキーワード検索をしてたどり着けるサイト」です。
私のブログでは、MacやiPhone、iPadといったApple製品や、その他のデジタルツールの活用ノウハウを中心に発信しています。それなら日本語話者に限らず、英語圏の人にも役に立つのでは?と思ったのが英語サイトを作ろうと思ったきっかけでした。

やりたかったことを整理すると、以下のようになります。

  • 元の日本語版と同じブランドで英語版を展開したい
  • ブログの記事を英語で公開したい
  • すべての記事ではなく、選んだ記事だけを翻訳して公開したい
  • 英語ユーザーが検索でたどり着けるサイトにしたい

実現に向けて、まず考えたのが「ドメインをどうするか?」という点でした。候補は次の3つです。

  • 英語サイト専用に新しいドメインを取得する
  • サブドメインにする(例:xxx.jkodaira.info)
  • 既存ドメインの配下にディレクトリを作る(例:jkodaira.info/xxx/)

どれがSEO的に有利なのかまったくわからなかったので、ChatGPTに頼ることにしました。
いろいろ教えてもらった結果、要約すると「既存ドメインの配下にディレクトリを作るのがSEOに有利(なことが多い)」というアドバイスでした。既存ドメインのSEOパワーを英語サイトにも引き継げるのが理由だそうです。

そのアドバイスに従い、英語サイトは /en/ ディレクトリを作成して構築する方針に決めました。

英語サイトの構築方法は?もっとも手軽な選択肢とは

ドメインの方針が決まり、次に考えたのは「どうやって英語サイトを構築するか?」という点でした。

私のブログはもともとWordPressで構築していたので、候補は以下の2つに絞られました。

  • サーバー内に別のWordPressを新たにインストールして、英語サイトを独立運用する
  • 既存のWordPressを活かしつつ、多言語対応できるようにする

再びChatGPTに相談してみたところ、「既存のWordPressに多言語対応のプラグインを導入するのがよい」というアドバイスをもらいました。
いくつかプラグインの候補を挙げてもらった中から、最終的に選んだのは Polylang というプラグインです。選んだ理由は、無料で使えてネット上に情報も多いから。初めて多言語対応にチャレンジする私としては、情報が多いのは心強いです。

Polylangの初期設定:ウィザードで言語を追加

Polylangのインストールや有効化は、他のWordPressプラグインとほぼ同じ手順で行えます。
有効化すると、すぐに初期設定ウィザードが表示されます。

最初に出てくるのは言語の選択画面です。まず「日本語」を追加します。もともと日本語のサイトですが、ウィザード上であらためて「日本語」を追加し、それをデフォルト言語として設定する必要があるようです。

続いて、「アメリカ英語(English – en_US)」を追加。これで英語サイトの土台が整います。
ディレクトリは自動的に「/en/」に設定されましたが、別のディレクトリ名にしたい場合は、あとからPolylangの設定画面で変更できます。

次に出てくるのは、メディアの翻訳に関する設定です。画像のタイトルやaltテキスト、キャプションなどを翻訳対象にできるようです。
正直この時点ではよく分かっていなかったのですが、とりあえずオンにして先へ進みました。

翻訳は自動じゃない?英語記事の作り方

ウィザードが終わっても、これで英語サイトが完成するわけではありません。既存の投稿や固定ページについて、それぞれ英語版のページを自分で作成しない限り、英語サイトの中身は空っぽのままです。

Polylangは多言語対応のプラグインですが、自動でページを翻訳・生成してくれる機能はありません。
たとえば、ある投稿の英語ページを作りたい場合、投稿一覧画面から翻訳用のボタンを押します。すると空白の編集画面が開くので、そこに英語の記事を自分で入力していく必要があります。

Polylangを有効化すると、投稿一覧に翻訳ページを追加するボタンが表示されます。

私は特に英語が得意というわけではないので、ここでもChatGPTの出番です。元の記事の文章をChatGPTに貼り付けて、「自然な英語にして」とリクエスト。生成された文章をコピーして、WordPressにペーストする、そんな流れです。

もちろん、ChatGPTの翻訳が必ずしも意図どおりとは限らないため、読みながら気になる部分は少し修正しました。ただ、英語が得意なわけではないので、見直すのは本当に気になるところだけにとどめました。

「8割くらい伝わればOK」くらいの気持ちで、なるべく気楽に構えることにしました。

多言語対応の壁:テーマまわりのカスタマイズ

Polylangの導入で多言語対応の土台はできましたが、実際に英語ページを形にしていくと細かいカスタマイズが意外と多くて大変でした。以下、手間取ったポイントをいくつか紹介します。

英語版フロントページを別途作成

私のサイトでは、もともとフロントページを固定ページで作成し、それをトップページとして使っていました。英語サイトでも同じような体裁にしたかったため、英語用に別のフロントページを新たに作成する必要がありました。

最初はとりあえず、最新記事だけを表示するシンプルなフロントページにしていますが、今後コンテンツが増えてきたら、カテゴリごとの人気記事を表示するようなエリアも設けたいと考えています。

言語別にメニューを分けて設定

Polylangでは、英語サイトは日本語サイトとは別にメニューをつくる必要があります。メニュー自体はWordPressの[外観]→[メニュー]で簡単にできるのですが、メニューが表示されなくて何かのトラブルが発生したのかと焦りました。

言語ごとにロゴ画像を切り替える(Cocoon + Polylang)

ここが一番苦戦したポイントです。

私のサイトでは、WordPressテーマ「Cocoon」を使っており、Cocoonの設定画面からヘッダー画像(サイトタイトル画像)を指定しています。
ところがPolylang単体では、言語ごとに異なるヘッダー画像を表示する機能がありません。さらに、同じロゴ画像をフッターにも掲載していたため、そちらも合わせて切り替える必要がありました。

そこで、現在のページが英語かどうかを判定し、PHPで画像を出し分ける処理を実装することにしました。

まず、 functions.php には次のようなコードを記載。画像を出し分けるための関数lang_imgを追加します。

//ヘッダ画像差し替え用
function lang_img($img_path, $alt_jp = '', $alt_en = '', $url = '') {
    $request_uri = $_SERVER['REQUEST_URI'];
    $alt = $alt_jp;
    if (preg_match('#^/en(/|$)#', $request_uri)) {
        $img_path = str_replace('_jp', '_en', $img_path);
        $alt = $alt_en ? $alt_en : $alt_jp;
    }
    if (strpos($img_path, 'http') !== 0) {
        $img_path = home_url($img_path);
    }
    // リンク先URLが空ならホーム
    if (!$url) {
        $url = home_url('/');
    }
    // 画像をaタグで囲んで出力
    echo '<a href="' . esc_url($url) . '" class="site-logo-link"><img src="' . esc_url($img_path) . '" alt="' . esc_attr($alt) . '" width="500" class="site-logo-image header-site-logo-image" loading="lazy"></a>';
}

次に、tmp/header-container.phpを開いて先ほどの lang_img 関数を呼び出す形に置き換えます。

<?php //ロゴタグの生成
generate_the_site_logo_tag(); ?>

このように書かれている部分を、次のように変更しました。

<?php //generate_the_site_logo_tag(); ?>
<?php
lang_img(
    'https://www.jkodaira.info/wp-content/uploads/2025/06/jkodairalogo2025_jp.png',
    '小平淳一の共有ノート',
    'jkodairas Shared notes'
);
?>

同じようにtmp/footer-bottom.phpも編集。

<?php generate_the_site_logo_tag(false); ?>

上記のように書いてある行を次のように置き換えました。

  <?php
  lang_img(
      'https://www.jkodaira.info/wp-content/uploads/2025/06/jkodairalogo2025_jp.png',
      '小平淳一の共有ノート',
      'jkodairas Shared notes'
  );
  ?>

もう1つ。モバイル用のヘッダも書き換えます。tmp/mobile-logo-button.phpを開きます。

<li class="logo-menu-button menu-button">
<a href="<?php echo esc_url($home_url); ?>" class="menu-button-in"><?php
$logo_url = get_the_site_logo_url();
//ロゴが存在する場合は画像
if ($logo_url): ?><img class="site-logo-image" src="<?php echo esc_url($logo_url); ?>" alt="<?php echo esc_attr($site_logo_text); ?>"><?php else: ?><?php echo $_MENU_CAPTION ? $_MENU_CAPTION : $site_logo_text; ?><?php endif; ?></a>
</li>

この部分を、次のように置き換えました。

<li class="logo-menu-button menu-button">
  <a href="<?php echo esc_url($home_url); ?>" class="menu-button-in">
    <?php
      lang_img(
        'https://www.jkodaira.info/wp-content/uploads/2025/06/jkodairalogo2025_jp.png',
        '小平淳一の共有ノート',
        'jkodairas Shared notes'
      );
    ?>
  </a>
</li>

この方法では、日本語用の「jkodairalogo2025_jp.png」と英語用の「jkodairalogo2025_en.png」というファイル名のロゴ画像を用意し、同じディレクトリにアップロードしています。英語サイトの場合(/en/ディレクトリ以下のページ)、自動的にロゴが差し替えられる仕組みです。

あと、この方法の場合、CSSを追記してロゴのサイズを調整する必要があったことも付け加えておきます。

私はPHPについて詳しくないため、ChatGPTやPerplexityに聞きながら試行錯誤しました。もっとスマートなやり方があるかもしれませんが、今のところはこの方法でうまく動いています。

投稿の日付表記を言語ごとに切り替える

もうひとつ気になったのが、投稿記事の「日付フォーマット」です。
日本語では「2025年6月26日」のような表記ですが、アメリカでは通常「June 26, 2025」のような書式が使われるので、せっかくならそれに合わせたいと思いました。

Polylangの設定の[翻訳]画面では日付設定を変えられるようになっていましたが、そこで書式を記述しても反映されません。どうやらテーマのCocoonは、この設定を読んでいないようです。

そこで、functions.php に以下のようなコードを追記して対応しました。

私のサイトでは、後日記事を更新した時のために、投稿日と更新日をそれぞれ記載しています。そのため、投稿日、更新日のそれぞれで出し分けを設定しました。

// 投稿日の出し分け
add_filter('get_the_date', function($the_date, $format, $post) {
    if (function_exists('pll_current_language')) {
        $lang = pll_current_language();
        $timestamp = get_post_time('U', false, $post);
        if ($lang === 'en') {
            return date('F j, Y', $timestamp);
        } else {
            return date('Y.m.d', $timestamp);
        }
    }
    return $the_date;
}, 10, 3);

// 更新日の出し分け
add_filter('get_the_modified_date', function($the_modified_date, $format, $post) {
    if (function_exists('pll_current_language')) {
        $lang = pll_current_language();
        $timestamp = get_post_modified_time('U', false, $post);
        if ($lang === 'en') {
            return date('F j, Y', $timestamp);
        } else {
            return date('Y.m.d', $timestamp);
        }
    }
    return $the_modified_date;
}, 10, 3);

コード自体はAIに教えてもらいながら進めましたが、「Cocoonではどの関数で日付が出力されているのか?」を調べるのに少し苦労しました。

あれこれやりながら、完成したページがこちらです。このサイトのグローバルメニューにある「English Site」から確認できます。

英語サイトの効果は?やってみて感じたこと

英語サイトを作ってみたものの、実際のところ、どれくらいメリットがあるのかはまだわかりません。ただ、収益面で言えば、英語サイトをつくったからといって収益が上がるとは考えにくいです。

たとえば、Googleアドセンスは英語ページにも表示されますが、もともと私のサイトはGoogleアドセンスの収益がそれほど高くありません。ページビューが数倍に増えない限り、まとまった収益アップにはつながらないでしょう。

また、Amazonアソシエイトについても、日本のアカウントでは海外のAmazonリンクを作れないようです。調べたところ、アメリカのAmazonで収益を得たい場合は、別途アメリカのAmazonアソシエイトに登録する必要があるとのことでした。
そのほかのアフィリエイトも、基本的には日本人ユーザー向けに最適化されているため、英語ページに貼ったところで収益につながる可能性は低そうです。本格的に英語圏向けの収益化を狙うなら、英語圏のアフィリエイトサービスに登録する必要があるのかもしれません。

とはいえ、そもそも私のサイトは収益を目的としてつくったものではありません。英語サイトも、せっかく書いた記事が日本語話者以外の人にも役に立てばいいな、という思いで作りました。それに、もしかしたら海外のメディアから執筆依頼が来るかもしれませんし。……英語は話せませんけど。

そんなわけで、あまり「おいしい話」ではないかもしれませんが、この記事がこれから英語サイトを作ってみようという方にとって、少しでも参考になればうれしいです。

タイトルとURLをコピーしました