Craft CMSには多言語対応機能があるとのことで、少し試してみました。公式ドキュメント「Guide: Setting Up a Localized Site | Craft 3 Documentation」を参考にしました。
試すにあたり、Pro版の試用が可能となるcraftdemo
という文字を含むURLを設定したのですが(詳細は「How Craft License Enforcement Works | Support | Craft CMS」をご覧ください)、Pricingを再度確認すると「Multi-site Multi-lingual」機能はSolo版でも使えるようですね。
管理画面での設定
さて、多言語サイトを制作するにはまず「サイト」を追加します。今回はデフォルトで用意されたサイトを日本語版サイトとし、英語版サイトを新たに追加します。パスの最初に/en
を付けると英語版サイトとなるように、ベースURLを@web/en/
と設定します。
次に入力フィールドを設定します。テストなのでハンドルをtest_text
とした複数行入力が可能なテキストフィールドを用意しました。この時、翻訳方法を「各サイトに対して翻訳」を設定します。日本語の入力フィールドと英語の入力フィールド2つ用意する、といったことは必要ありません。
次にセクションの設定です。ハンドルがsitehome
、タイプがSingle
の「サイトホーム」セクションを制作しました。入力タイプの設定で、先程作成したテキストフィールドを配置します。
テンプレートの制作
セクションの設定でテンプレートは日本語版・英語版ともindex.twig
を表示するよう設定しましたので、テンプレートを作っていきます。
まずはベースの制作です。最終的にどういうテンプレート構成にするかは現時点では判断しかねるので、ひとまず練習も兼ねて日本語版・英語版でベーステンプレートを分けてみました。
以下は日本語版の_base_ja.twig
です。今回はまだサイトホームしか作っていないのですが、英語版へのリンクに/en{{ craft.app.request.url }}
を設定することで英語版の同一コンテンツページに遷移できるかなと考えています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% if title is defined %}{{ title }} | {% endif %}CraftCMS デモ</title>
</head>
<body>
<header>
<div><a href="/en{{ craft.app.request.url }}" lang="en">English</a></div>
</header>
{% block mainContent %}
{% endblock %}
</body>
</html>
次に英語版の_base_en.twig
です。html要素のlang属性とタイトルが違います。日本語ページへのリンクも設定します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% if title is defined %}{{ title }} | {% endif %}CraftCMS Demo</title>
</head>
<body>
<header>
<div><a href="{{ craft.app.request.url|replace('/en', '') }}" lang="ja">日本語</a></div>
</header>
{% block mainContent %}
{% endblock %}
</body>
</html>
次にサイトホームのテンプレートindex.twig
です。日本語版・英語版ともこのテンプレートでまかないます。extends
でcraft.app.language
を使うことにより、表示する言語に応じたベーステンプレートが読み込まれるようにしました。
{% extends '_base_' ~ craft.app.language %}
{% block mainContent %}
{% set entry = craft.entries.section('sitehome').one() %}
<h1>{{ entry.test_text }}</h1>
{% endblock %}
コンテンツの入力
最後にコンテンツの入力を行います。セクションの追加で設定した「サイトホーム」にテキストを入力します。編集画面が開いたらまずは日本語を入力します。「こんにちは、世界!」とでも入れて保存しておきましょう。
次に英語版の入力です。英語版を入力するには「サイトホーム」というタイトルの右にあるドロップダウンメニューをクリックし、英語版のサイト(今回は「CraftCMS Demo English」というサイト名に設定してあります)を選択します。そして、日本語版と同じテキストフィールドに「Hello World!!」と入力して保存します。
同一の編集画面で設定を行ったサイト(言語)分の入力ができるのが良いですね。
コンテンツの表示
ではいよいよコンテンツの表示です。まずは日本語版から。https://craftdemo.***.anothersky.pw/
にアクセスすると、「こんにちは、世界!」が表示されました。
次に英語版です。意図した表示になるでしょうか。https://craftdemo.***.anothersky.pw/en/
にアクセスしてみます。おっ、「Hello World!!」と表示されました!
ちなみに、編集中にライブプレビューを押した時も、現在選択しているサイト(言語)に応じたプレビューが表示されます。
まとめ
Craft CMSを使うと標準機能で容易に多言語対応ができそうですね。今回は簡単な実験でしたが、今後も研究を続けてみたいと考えています。