【WordPress】多言語でラベルの文字列をJSで取り扱う

多言語サイトを作っていて、ハンバーガーメニューのaria-labelをつけたときに、「あれ、そういえば閉じるときは文字列が「メニューを閉じる」になるけど、これって翻訳できるのか？」とふと思って調べました。

さすがはWordPress。wp_localize_scriptという関数を使えば可能です。

https://developer.wordpress.org/reference/functions/wp_localize_script/

functions.php

function hamworks_scripts(): void {
    ...

	$asset_file = include __DIR__ . '/build/scripts/theme.asset.php';
	wp_enqueue_script(
		'hamworks-theme-script',
		get_parent_theme_file_uri( 'build/scripts/theme.js' ),
		$asset_file['dependencies'],
		$asset_file['version'],
		true
	);

	wp_localize_script(
		'hamworks-theme-script',
		'hamworksLocalizeTexts',
		array(
			'menuOpen'  => __( 'Menu Open', 'hamworks' ),
			'menuClose' => __( 'Menu Close', 'hamworks' ),
		)
	);
}
add_action( 'wp_enqueue_scripts', 'hamworks_scripts' );

これで準備はOK。あとはハンドルで指定してあるhamworks-theme-script、つまりtheme.js内で以下のように書けばテキストが入ります。

theme.js

hamburgerButton.setAttribute(
	'aria-label',
	expanded
		? hamworksLocalizeTexts.menuOpen
		: hamworksLocalizeTexts.menuClose
);

別のJSファイルで使いたいときは、別途wp_localize_scriptを書いて、handleの部分（先述のコードで言うところのhamworks-theme-script）を変更します。

また、JSファイル内ではhamworksLocalizeTextsを定義していないため、ESLintの環境によってはno-undefのエラーが出ますので、該当箇所のみ無効化するなりする必要があります。

theme.js

hamburgerButton.setAttribute(
	'aria-label',
	expanded
		? hamworksLocalizeTexts.menuOpen // eslint-disable-line no-undef
		: hamworksLocalizeTexts.menuClose // eslint-disable-line no-undef
);