Polylang無料版でブロックテーマのテンプレートに無理やり対応する方法

タイトル通り無理やりな方法ですが、概ね対応できるのではと思います。

前提

  • WordPressでブロックテーマ使用
  • フルサイト編集(Full site editing/FSE)のテンプレート機能を使用
  • Polylang無料版でテンプレート機能で追加したコンテンツやメニューを翻訳する

上記のテンプレートは「外観>エディター>テンプレート」で至れるページで編集できます。

テンプレートパーツはテンプレート編集を経由して移動できますが、「外観>エディター>パータン>テンプレートパーツ」で直接移動することもできます。
グローバルなどのメニューはテンプレートパーツに属しており、「外観>エディター>パータン>テンプレートパーツ>ヘッダー」や「外観>エディター>パータン>テンプレートパーツ>フッター」にて編集できます。

このようにブロックテーマではメニューの管理方法も変わっているため、テンプレート機能の利用はほぼ必須となります。

無料版での注意点

調査したところ当記事公開時点では以下のような状態であり、今回はこの点をどうにかできないかと思案する内容です。

  • Polylang無料版ではブロックテーマのテンプレート機能で追加されたコンテンツの翻訳ができない

有料版での注意点

有料版の使用経験がなく自分で確認はできていませんが、有料版では上記のように書かれておりある程度の対応が可能な模様です。
実際に試せていないので推測混じりですが、おそらく以下のような状態かなと思います。

  • テンプレート自体には対応しておらず、テンプレートで追加したブロックの翻訳は不可
  • テンプレートパーツの翻訳には対応している
  • テンプレートパーツで全て作れば、おそらく間接的にテンプレートに翻訳対応可能

対応方法

上記を参考に以下のような仕組みを用います。

前提

  • デフォルト言語は日本語
  • 英語を追加

方法

以下のようなCSSを作成。


[class*="only-lang"] {
  display: none!important;
}
.lang-only-jp:lang(ja),
.lang-only-en:lang(en){
	display: block!important;
}
/* 今回はメニューを想定してflexにも対応 */
.lang-only-jp-flex:lang(ja),
.lang-only-en-flex:lang(en){
	display: flex!important;
}

強制的に効かせるためにやむなく!importantを使っていますが、対象要素によってはいろいろ書き換えない意図しない状態になる場合がありますので留意ください。

続いて、テンプレートのブロックの設定画面で以下を実行。

  • 日本語用と英語用のブロックを並べて配置し、それぞれのブロックにlang-only-jpなどの表示変更用クラスを追加

結び

ブロックテーマのフルサイト編集を利用したサイトの多言語化について調べましたが非常に疲れました。
調べが足りず、もっと簡単で真っ当で簡単な方法が用意されているかもしれませんので、その点は留意ください。

いつかプラグイン対応状況も変わるでしょうし、ブロックテーマ使用サイトの多言語化に対応する場合は今まで以上に調査必須だと思います。

補足

他のプラグインに関してもメモ的に。

0人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄