ConcreteCMSで自動多言語翻訳のWeglotを試す

Weglot | Translate your website - Multilingual for WordPress, Shopify and more

Make your website multilingual using Weglot. Translate your website within minutes in multiple languages. Reach a wider audience and increase your sales. No code required. Integrates easily to your website using a dedicated WordPress plugin, Shopify App or JS script.

weglot.com

Weglot | Translate your website - Multilingual for WordPress, Shopify and more

本記事では、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コードを貼り付けます。

参考:

・Add Styles and JavaScript to Your Theme :: Concrete CMS

・Create and Install a Basic, Empty Theme :: Concrete CMS

🈂️エックスサーバーにインストールした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.php

Atomikの場合は、下記の場所に挿入すると良いと思います。

<?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

上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。

この記事の気になった箇所を読み返す:

Weglotにトライアル登録し、JavaScript埋め込みコードを取得
Concrete CMSテーマのheader.phpに取得したコードを貼り付ける
WeglotをConcrete CMSに採用してみての気づき
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています

Category: ✋Concrete CMS

Tags: ✋concrete CMS / concrete5 | ⚗️SaaS