WPCodeを使ってhtmlタグのlang属性を変更した方法

カテゴリー: ,
Banner,Software,Development.,3d,Laptop,With,Programming,Icon.,Web,Coding

こすぶろでは日本語だけでなく英語のコンテンツも少しだけど掲載している。サイトの言語を英語にして、日本語のコンテンツであることを使っている投稿テンプレートで判別して、JavaScriptを使ってhtmlタグのlang属性を「ja」にしたり「en」のままにしたりしていた。

この方法はページが表示されたときにJavaScriptで動的に変更する方法のため、検索サイトに読み込まれる場合は変更前の状態としてソースコードが登録されるため、こちらの意図とは異なる言語として認識されてしまう可能性がある。これをページが読み込まれる最初から意図した言語としてlang属性を設定しておきたい。

このためにWordPressのコードを変更する必要があるのだけど、WPCodeプラグインを使うことで変更が可能である。WordPressがhtmlタグを出力する際に、サイトに設定されている言語を取得してlang属性を設定しているため、以下のようなコードになっている。

<html <?php language_attributes(); ?> >

これをWordPressのフィルターフックで変更を加える。投稿ページに英語のテンプレートを使っており、英語ページのトップに「english」という名前でページを構築しているので、このふたつのページが表示されたときにhtmlタグのlang属性を「en」に設定するようにした。サイトの言語設定は「ja」にして英語ページの場合に「en」に変更するようにした。

add_filter( 'language_attributes', function($lang_attributes) {
	if (is_single()) {
		$template = get_page_template_slug();
		if ($template == 'english-post') {
			$lang_attributes = "lang=\"en\"";
		}
	} else {
		$pagename = get_query_var( 'pagename' );
		if ($pagename == 'english') {
			$lang_attributes = "lang=\"en\"";
		}
	}
	return "$lang_attributes";
});

WPCodeプラグインをインストールして、スニペットの追加からカスタムコードカスタムスニペットを追加する。PHPのスニペットを追加できるので、そこに上記のコードを設定することで変更が可能だ。この機能は無料で使うことができるので、有償のProにアップグレードしなくても大丈夫である。

こすぶろをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む