Concrete CMS は、 サイト標準機能でもともと多言語化機能をもっているCMS。しかし、Concreteの標準機能を使う場合の原理としては「同一ページを複製し、手動で外国語へと翻訳されたテキストへと編集する」という方法となります。（もちろんパス・URLは日本語ページとは異なるものとなります）
この複製する方法の場合、柔軟な翻訳テキストへの対応が可能な反面、「すべてのページのテキストをすべて編集していく」という作業が必要となり、手間と面倒さが発生します…！
そこで、他言語への自動翻訳および翻訳ボタンをサイトに設置してくれるサービス”Weglot”をConcrete CMSにテスト導入して、どのような結果になるのか試してみました。
本記事では、Concrete CMSにWeglotをトライアルプランでテスト設置（JavaScript埋め込み）する方法と、WeglotをConcreteCMSに導入した際の気づきを書いていきます。
目次:
Weglotにトライアル登録し、JavaScript埋め込みコードを取得
テスト用のJavaScript埋め込みコードの取得方法については、公式のチュートリアル動画でWeglotアカウント登録の段階から丁寧に説明されています。（英語）
本番環境では、WeglotはJavaScript埋め込みではなくDNS設定にてCNAMEを利用して自動翻訳させるという方法になりますが、テスト実装においては簡便なJavaScript埋め込みの方法を採用します。
動画内でも説明されていますが、Weglot設定画面ではドメイン名などを入力するのではなく、STEP1の下側にある ”Use Javascript Integrateion” をクリックします。
Concrete CMSテーマのheader.phpに取得したコードを貼り付ける
Concrete CMSテーマのヘッダー内に、取得したJavaScriptコードを貼り付けます。
参考:
エックスサーバー にインストールしたConcrete CMS(v.8系)でかつ、マーケットプレイスで購入したテーマファイルにおいては、下記がヘッダーファイル(header_top.php)へのパスでした。
/home/UserName/yourdomain.com/public_html/packages/ThemeName/themes/ThemeName/elements/header_top.php下記のように、header_top.phpのheadタグ内にweglotのコードを貼り付けます。
<?php defined('C5_EXECUTE') or die("Access Denied.");?>
<!DOCTYPE html>
<html lang="<?php echo Localization::activeLanguage()?>">
<head>
...
}
</script>
# Weglot ここから #
<script type="text/javascript" src="https://cdn.weglot.com/weglot.min
.js"></script>
<script>
Weglot.initialize({
api_key: 'wg_xxxxxxxxxxxxxxxxxxxxxxxxx'
});
</script>
# End of Weglot ここまで #
<?php if ($c->isEditMode()) { ?>
<style type="text/css">
...
.top_bar .hidden{
display:block !important;
visibility: visible !important;
}
</style>
<?php } ?>
</head>ConoHa VPS にインストールしたver.9系のConcrete CMSで、公式デフォルトテーマであるAtomikを採用していた場合は、下記がテーマファイルのヘッダーへのパスでした。
# /var/www/html/concrete/themes/atomik/elements/header_top.phpAtomikの場合は、下記の場所に挿入すると良いと思います。
<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
<!DOCTYPE html>
<html lang="<?php echo Localization::activeLanguage() ?>">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<?=$view->getThemeStyles()?>
<?php
View::element('header_required', [
'pageTitle' => isset($pageTitle) ? $pageTitle : '',
'pageDescription' => isset($pageDescription) ? $pageDescription : '',
'pageMetaKeywords' => isset($pageMetaKeywords) ? $pageMetaKeywords : ''
]);
?>
# Weglot ここから #
<script type="text/javascript" src="https://cdn.weglot.com/weglot.min
.js"></script>
<script>
Weglot.initialize({
api_key: 'wg_xxxxxxxxxxxxxxxxxxxxxxxxx'
});
</script>
# End of Weglot ここまで #
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="theme-atomik <?php echo $c->getPageWrapperClass()?>">WeglotのJavaScriptコードを貼り付けたあと、オリジナル言語と変換後の言語を選択して、Weglot設定を終えます。
するとサイト画面の下部に言語切り替え表示ボタンが表れ、ワンクリックでの言語自動翻訳が可能となりました！🎉
WeglotをConcrete CMSに採用してみての気づき
- 変換させると、メニューが段落ちしてレイアウトが崩れる。クリック範囲がメニューテキストとずれてしまう。
- すべての箇所が変換される訳ではない？（トライアルでは10,000Wordsまでなので、変換語数の制限にひっかかった可能性もあり）
- 変換される英語はなかなか優秀。ネイティブレベルではないだろうが、違和感なく伝わるレベルなのでは
- 細かいテキスト内容を修正しようと思うと、Weglotのダッシュボード上から該当テキストの修正が必要。やや面倒そう。
個人的には、メニューのレイアウト崩れが致命的でした。
やはりConcrete CMSにおいては標準機能の多言語化機能を使い、手元で翻訳したものを多言語サイトとして運用していく方がベターかもしれません…！
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。
🍀 Webサイト制作とSEOの専門家 - Marketing Wizard
上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。
この記事の気になった箇所を読み返す:
Category: Concrete CMS
Tags: concrete CMS / concrete5 | SaaS