2021.02.01

WordPress プラグイン不要！でGutenbergを利用して、日本語・英語対応

Web制作

WordPress

今回は、Wordpressプラグインを利用しないGutenberg上で、日本語・英語を同時入力できる対応についてです。

実案件の中、クライアント様から投稿画面に、日本語・英語が入力できるといいんだけどなあ・・・というご要望を頂いたので考えてみました！

通常、多言語展開できるプラグインを利用すると、言語切替のために、日本語と英語などで入力画面が切り替わりますよね。
機能的には問題ないのですが、入力忘れをしてしまう・・・という事が多く発生してしまいがちです。

本記事の方法は、そんな入力忘れをなくしつつ、プラグインレスというところが特徴でしょうか。

こんな事ができます

本記事の仕組みを利用すると、下記のように切り替わります（ざっくり）。

例えば、下記のようなテキストを設定すると・・・・
[[お知らせテスト|||Information Text]]

日本語では、
お知らせテスト

英語では、
Information Text
と、表示されるようになります。

[[日本語|||英語]]
のところは、適宜書き換えることで様々なパターンに対応が可能です。

functions.phpに必要な記述を行う


//Gutenbergのブロック表示時
add_filter('render_block', function ($blockContent, $block) {
  return maro_replace_tag($blockContent);
}, 10, 2);

//タイトルの書き換え
add_filter('the_title', function ($title) {
  $title = maro_replace_tag($title);
  return $title;
});

//YoastSEOプラグインを利用している場合のフック。　別途フィルターを追加する必要があるかもしれない。
add_filter('wpseo_title', function($title) {
  $title = maro_replace_tag($title);
  return $title;
});

//日本語・英語の文字列切り替え
function maro_replace_tag($str){
  preg_match("/\[\[(.+?)\]\]/su",$str,$match );
  if(!empty($match[0])){
    $regex = $match[1];
    $strings = explode('|||', $regex);
    if( count($strings) > 1 ){
      $locale = get_locale();
      if( $locale == "en_US" ){
        return maro_replace_tag(str_replace('[['.$regex.']]', $strings[1], $str));
      }else{
        return maro_replace_tag(str_replace('[['.$regex.']]', $strings[0], $str));
      }
    }
  }
  return $str;
}