【WordPress】字幕の翻訳も、Prisna Google Website Translatorに、任せてしまおう！

2023.2.9更新：Google Translatorプラグインが突然、動かなくなりました。そこで、その代替えとして、ほぼ同じ機能の、Prisna Google Website Translatorプラグイン、へ変更しました。プラグインをインストールした後で、スクリプトを書き換えてください。

　字幕の翻訳はトップ左の言語をお選びください。

＜字幕が表示されない場合は、ここをON↑＞

＜字幕＞
(1)左のカージナルテトラの泳ぎが変です。
(2)ひっくり返っています。
(3)戻ろうと努力している。。
(4)またひっくり返った。。
(5)ん～。
(6)運動量は一番多い。
(7)しっかり食べないと。。
E(8)しばらく様子を見ていきます。。

ポイント解説

<1> 残念ながらvttファイルまでは自動翻訳されないので、苦肉の策。

アップデートされたWordPress5.6では、動画に字幕を簡単に追加できるように機能アップされました。これは便利です。しかし、残念ながら字幕はGoogle翻訳されません。
　少し捻って、VTTファイルの内容を、書き込んだテキストファイルを、単純に、動画の外側に配置したら、どうだろうか。画面と文章の丁寧な対応が必要なら、番号を付けることで、下のGoogle翻訳と対応できます。
それなら、そこそこ、役に立つんじゃないか。
そう思いました。

なお、注意点は、種類にて「キャプション」を選択することです。「字幕」を選択すると、なぜか、iPhoneでデフォルト表示が出来なくなります。

<2> スクロールブロック内で翻訳する。

字幕を外書きする場合、下にどんどん長くなることになり、スクロールできるブロック内に翻訳が表示されれば都合がいいです。カスタムHTMLブロックへ、下のサンプルをそのままコピペすればOKです。注意点は、Google翻訳のショートコード（赤字）はこの位置です！別の位置ですと翻訳が不安定になります。

＜コードサンプル＞

<div class="example">
[prisna-google-website-translator]
＜字幕＞ <br>
(1)左のカージナルテトラの泳ぎが変です。 <br>
(2)ひっくり返っています。<br>
(3)戻ろうと努力している。。<br>
(4)またひっくり返った。。<br>
(5)ん～。<br>
(6)運動量は一番多い。<br>
(7)しっかり食べないと。。<br>
E(8)しばらく様子を見ていきます。。<br>
</div>


<style>
div.example {
width: 100%; /*ブロックの幅*/
height: 150px; /*ブロックの高さ*/
background-color: rgba(237, 247, 255 ,0.9); /*ブロックの背景色*/
overflow: scroll; /*スクロール*/
}
</style>