【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でデフォルト表示が出来なくなります。

ソース言語は”ja” 、種類はキャプションを選択します。

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

関連情報

1)Google Translatorの組み込みについては、こちらのブログをお読みください。

2)キャプション作成は、「字幕工房」がシンプルです。但し、SRTファイルだけなので後で変換が必要です。

3)VTTへの変換は、Webサービスを使っています。

4)WordPress固定ページのタイトルを非表示にするには。 以下のコードを、

.page .entry-title{
  display: none;
}

Cocoon Child->style.cssの以下の位置にコピペします。

以上です。