Polylangでブログの英語展開を実施してみた

自分のブログを簡単に多言語展開してリーチ対象を日本語圏1.3億人から英語圏15億人に増加させたい！あなたはそう思ったことはありませんか？

わたしは何度かそう思ったことがあったのですが、なかなか大変そうなので実施を見合わせていたのですが、今回Polylangというプラグインを使って試しにブログの一部を英語化してみました。

今回はこのプラグインの設定方法で不明であった点や注意点、実施してみた感想をご紹介します。

こんな方におすすめ

多言語化対応を検討しているAffingerブロガーの方
Polylangの設定の仕方が良くわからない方

Polylangを選んだ理由

まずPolylangを選んだ背景を説明しますが、多言語翻訳出来るプラグインにどんなものがあるかというと、事前翻訳型とリアルタイム翻訳型に二分されます。

後者のリアルタイム翻訳型のプラグインは当ブログも入れていたことがあるのですが、ブラウザのに翻訳機能が提供されてからはそもそもそんなプラグインいらなくない？ということで削除しておりました。

今回は、事前翻訳型のプラグインを探していたのですが、その中で候補としては無料で使えて評判の良いプラグインには"Bono"と"Polylang"の二つのプラグインがありました。

実際にBonoを試したところ、ページ精製はブログの構造を壊さないで英語ページを生成出来たのですが、中身は自分で翻訳して書く必要があり、一から翻訳を全部するは流石にきついと思ったのでBonoは辞めました。

これに対して、Polylangは機械翻訳ですが、翻訳後の記事を自動生成してくれました。これが決め手となってPolylangを使うことにしました。

PolylangとLingotek Translationのインストール方法

Polylangを使って多言語展開する為には、別途「Lingotek Translation」というプラグインを併せて導入する必要があります。

こちらのインストールの方法については、Googleで検索すると沢山やり方が載っているのでここでは参考になるページをご紹介して、割愛します。

PolylangとLingotek Translationを利用したブログの英訳

PolylangとLingotek Translationを利用したブログの英訳に向けた設定と、英訳の手順として実施したほうが良い順にご紹介します。

1.メニューの英訳

タイトルやヘッダー、フッターのメニューは、外観のカスタマイズから変更を行います。

英語版のメニュー適用欄がチェックボックスで増えている為、新たにメニューを英語名で作成して割り当てます

こうすると、英語版のページを開いた際に、メニューが英語で表記されるようになります。

メニューが英語表記に！

固定ページなどもメニュー化される方が多いと思うので、固定ページ自身の英訳コンテンツ作成も忘れずに実施しておきましょう。

2.プロフィールの英訳

ユーザー一覧上に、英語のプロフィール欄が追加されているので、そこに英訳を入力しましょう。

ここを入力していないと、英訳記事を開いたときにプロフィールが空になります。

3.「この記事を書いた人」の英訳

この記事を書いた人についての文字は、テーマエディターを直接変更しないと修正が出来ません。次のように「st-author.php」の中身で日本語がべた書きされている箇所を・・・

<div class="st-author-box">
    <ul id="st-tab-menu">
        <li class="active"><i class="st-fa st-svg-user st-css-no" aria-hidden="true"></i>この記事を書いた人</li>
        <?php if ( isset($GLOBALS['stdata211']) && $GLOBALS['stdata211'] === 'yes' ) : //最新記事を表示する ?>
            <li><i class="st-fa st-svg-file-text" aria-hidden="true"></i>最新記事</li>
        <?php endif; ?>
    </ul>つ

<li class="active"><i class="st-fa st-svg-user st-css-no" aria-hidden="true"></i>この記事を書いた人</li>

<?php if ( isset($GLOBALS['stdata211']) && $GLOBALS['stdata211'] === 'yes' ) : //最新記事を表示する ?>

<?php endif; ?>

</ul>つ

次のように言語localeで場合分けして英訳しましょう。

<?php if(get_locale() == 'ja'): ?> 日本語<?php else: ?> 英語<?php endif; ?>

1	<?php if(get_locale() == 'ja'): ?> 日本語<?php else: ?> 英語<?php endif; ?>

英訳例

<div class="st-author-box">
    <ul id="st-tab-menu">
        <li class="active"><i class="st-fa st-svg-user st-css-no" aria-hidden="true">
        </i><?php if(get_locale() == 'ja'): ?>
        この記事を書いた人
        <?php else: ?>
        The person who wrote this article
        <?php endif; ?>
        </li>
        <?php if ( isset($GLOBALS['stdata211']) && $GLOBALS['stdata211'] === 'yes' ) : //最新記事を表示する ?>
            <li><i class="st-fa st-svg-file-text" aria-hidden="true"></i>
        <?php if(get_locale() == 'ja'): ?>
        最新記事
        <?php else: ?>
        latest article
        <?php endif; ?></li>
        <?php endif; ?>
    </ul>

</i><?php if(get_locale() == 'ja'): ?>

この記事を書いた人

<?php else: ?>

The person who wrote this article

<?php endif; ?>

</li>

<?php if ( isset($GLOBALS['stdata211']) && $GLOBALS['stdata211'] === 'yes' ) : //最新記事を表示する ?>

<?php if(get_locale() == 'ja'): ?>

4.ウィジェットの英訳

ウィジェットには、次のように言語を選択するボックスが追加されているので、日本語用と英語用を追加しました。

実装した結果

スマホ記事下ウィジェットの実装結果：左が英訳版で右が日本語版

5.カテゴリーの英訳

カテゴリーは連携プラグインのLingotek Translationで、カテゴリー欄をAutomaticにした状態で１つずつカテゴリーを更新することで、自動生成しました。

このときの注意点は、親カテゴリーから実施することです。

親カテゴリーから英訳版を創っていかないと、階層構造が正しく作成されない為です。

6.タグの英訳

タグは元々のタグを整理した上で、上記のLingotek Translationのプロファイルを「Atomatic」にした上で一括翻訳しました。

タグがカテゴリーとごちゃごちゃと乱立されている方は、この際に整理されることをお勧めします。

7.記事の英訳

記事の英訳は上記を全部実施してから実行するのをお勧めします。そうしないと、カテゴリーやタグの設定をし直さないといけなくなるのと、中途半端な状態で記事をリリースすることになる為です。

7.1.Polylangの設定

記事を英訳する際の推奨の設定は次の通りです。

一つずつ細かく設定すべきポイントとその理由を解説していきます。

7.1.1.URLの修正

URL は、言語毎にサブドメインを分けようと考えていなければ、「言語はプリティーパーマリンク内のディレクトリ名から設定される」がお勧めです。

右側の「URL にデフォルトの言語の言語情報を表示しない」はチェック推奨です。チェックを外すと日本語の記事のURLが変わってしまい、これまでにリンクされたサイトからアクセスが出来なくなるためです。

7.1.2.ブラウザーの言語の検出

ブラウザーの言語の検出は有効化を推奨です。これは、英語でアクセスされた際に英語ページを表示する機能で、英語圏からアクセスしてきたユーザーにとっては有効化したほうが使いやすいので有効にしておきましょう。

7.1.3..メディア

メディアは無効化推奨です。メディアを有効化にすると、記事に追加したギャラリーなどが英訳版で閲覧出来なくなり、再アップロード対応が必要になる為です。

7.1.4.同期

同期は次のように設定するのがお勧めです。

特筆ポイントはカスタムフィールドです。カスタムフィールドはチェックを付けると、メタディスクリプションを英語と日本語で分けて書けなくなるため、チェックを外すのを推奨します。

7.2.Lingotek Translationの設定

7,2.1.Manage

Lingotek TranslationのManage設定の中で、記事の英訳に関わる設定は投稿と固定ページのProfileでManualを推奨します。

ここを自動にしていると、意図しないタイミングで英訳記事が生成されたりする為です。

7,2.2.Settings

Settingsの中ではPreferencesタブのDownload translation statusの設定が重要で、「下書き」が推奨です。こちらを「公開済」にしておくと、英訳記事を校正する前に記事が更改されてしまう為です。

英訳記事はこの後にも記載しますが、修正点が必ずある為、そのまま公開はしないほうが良いです。

7.3.記事の英訳手順

記事の英訳を実施する際は、効率的に実施する為に一覧での一括操作での実施を推奨します。

7.3.1.フィルタリング

Polylang、Lingotek Translationでは、英訳を実行するとアイキャッチ画像が消えてしまいます。出来るだけ早くこれを再設定したほうが良いので、ユーザーやカテゴリー、日付で絞り、その日の内に対応が出来る分だけ翻訳するようにしましょう。

7.3.2.一括操作

一括操作では次の順に操作を行います。

Upload to Lingotek
Request translations
Download translations

多くの記事を選択していると時間が掛かりますので、気長に待ちましょう。

7.3.3.パーマネントリンクの修正

この後、すぐに日本語記事のアイキャッチ画像を再設定したいところですが、その前に英訳記事のスラッグの後に「-en」を付けましょう。

何故かと言うと、英訳直後だと英訳ページと日本語ページが同じスラッグになっており、先に保存した記事の後に重複を避ける為の枝番「-2」が自動で付与されてしまう為です。

これが付いてしまうと、既存の日本語ページのURLが変わって、既存ページに対してリンクが張られていた場合にアクセスが出来なくなってしまいます。

7.3.4.アイキャッチ画像の再登録

先ほどから記載しております通り、英訳直後は対象記事のアイキャッチ画像が外れてしまう為、日本版の記事から再度アイキャッチ画像を設定しましょう。日本版でアイキャッチ画像を登録すると、英訳版も設定されます。

アイキャッチ画像は日本語記事と英訳記事で同じものが表示される為、英語圏の方々にアピールする為には、必要に応じて英文を追加するなどの対応をすると良いです。

7.3.5.英訳記事の校正

英訳記事は必ず見直しが必要と考えてください。次のような事象が発生する為、見直さないと逆にブログの評価が下がる可能性があります。

不正な主語
日本語は主語を省略して表記する場合がありますが、英訳するとこの主語が「We」になっている場合があります。必要に応じてこれを変えましょう。
カスタムコードの崩れ
ブログに設定しているタグの記号が崩れたりします。なので、正しく機能するようにコードを修正しましょう。
メディアの改行外れ
画像や動画リンクなどのコンテンツに対して設定していた改行がよく外れて、レイアウトが崩れます。ですので、一つ一つ修正をしましょう。
ブログ内リンクの見直し
日本語記事と英語記事でブログ内リンクを貼っていた場合に、スラッグが変わる為、英訳版は英訳に張り替えましょう。

総括

まとめますと、Polylangは優秀な多言語化ツールですが、多言語化を完了させるまでに設定すべきことが多くて、結構大変でした。

さらに、英訳後の記事は見直しをしないと変な部分があるので、ちゃんとした英文になっているかを見直す必要があります。

ということで、英訳はかなりハードルが高いのですが、冒頭に述べたように、英語圏の15億人にリーチが出来る可能性がある為、挑戦してみる価値があると思います。

気になった方は挑戦してみてください！

ご閲覧ありがとうございました。
ではでは(^^)/