Locizifyの導入で微妙につまづいたので備忘録。
1. Locize上で新規プロジェクトを作成
これによって、プロジェクトIDとAPIキーが手に入ります。
右上の歯車マークから。
2. Wordpressのテーマのheader.phpに、Locizifyで指定されているスクリプトを追記する
Wordpressでヘッダーとして使われているのは、header.phpの中身の情報です。
なのでここに追記します。
こんな感じ。子テーマにheader.phpが存在しない場合は、親テーマのものをそのまま流用して使っています。
親テーマのheader.phpに直接手を入れると、更新の際に不具合が生じることがあるようです。
その場合は親テーマのheader.phpを子テーマのディレクトリにコピーして持ってきてから編集すべきらしい。
追記すべきスクリプトは、公式ではこのように書かれている。
<script
id="locizify"
projectid="[PROJECT_ID]"
apikey="[API_KEY]"
referencelng="[LNG]"
fallbacklng="[LNG]"
saveMissing="true"
src="https://unpkg.com/locizify@^5.0.5"
></script>
が、実際にはこれだけだとうまくいかない。
サイトのドメインがlocalhostでない場合
ドメインっていうのか？ 詳しくない。
allowedAddOrUpdateHost="[mydomain.com (default localhost)]"
を追記する。
翻訳先の言語のファイルがまだ存在しない場合
例えば、
referencelng="ja-JP" fallbacklng="en"
としていると何かエラーが出るときは、
referencelng="ja-JP" fallbacklng="ja-JP"
とすると、Locize上に日本語の翻訳キーが流し込まれ、
これをもとに翻訳作業を始めることができた。
やっておくといいこと
debug="true"は絶対に書いておいたほうがいいです。
3.翻訳したい自分のサイトを開き、ブラウザ上で右クリック、Inspect→Consoleでログを確認する
このログを見て、文句を言われていたら怒られている。
ログがかなり読みやすいので、すぐに解決できると思う。
i18next::translator: missingKey ~...みたいに出ていたら、未検出のキーをLocizeに追加してくれている。
自分のサイトのページを開いた後、Locizeの画面をリロードすると、キーが増えていると思う。
そうすれば翻訳作業を開始するだけ。
4.さらにつまづいています
https://youtu.be/f0ukRI0LMfo
この動画の前半、Get Startedから見ると解決するかもしれません
またLocizifyのリポジトリのReadmeもかなり丁寧に書いてあります。
Scriptの中身もじっと見ると解決するかもしれません
https://github.com/locize/locizify