WordPressで言語スイッチャーをひかえめに表示

2023.06.10

はじめに

こんにちはPike8です。Polylangでブログを多言語化して言語スイッチャーを設置したので、その作業メモを残します。Polylangは言語スイッチャーをウィジェットやメニュー項目として用意しています。記事やサイドバー、ヘッダーメニューやフッターメニューに設置するのはUI操作で簡単にできます。今回Pike8は、言語スイッチャーをページ右上にひかえめに表示しました。そのためにやったことを残します。

やりたいこと

画像のように、ヘッダーの右上にひかえめに言語スイッチャーを表示します。また、対応している言語の記事がない場合は、その言語へのスイッチャーを表示しないようにします。

環境

  • Cocoon: 2.6.0.3
  • Polylang: 3.4.2

言語スイッチャー

Polylangの言語スイッチャーの設置

テーマファイルエディタの functions.php に以下のコードを追記します。

add_action('wp_header_logo_before_open', function() {
  pll_the_languages(array('hide_current' => 1, 'hide_if_no_translation' => 1));
});

wp_header_logo_before_open は、ヘッダーのロゴの前にコードを追加するためのフックです。pll_the_languages はPolylangが提供している言語スイッチャーを表示するためのAPIです。ロゴの後にコードを追加したい場合は wp_header_logo_after_open を利用します。

引数の hide_current は、現在選択されている言語は表示せず、切り替え可能な言語だけを表示するオプションです。hide_if_no_translation は、開いているページに対応する翻訳済みページが存在するときだけ、その言語のスイッチャーを表示するオプションです。その他のオプションについては、リファレンスを参照してください。

この段階で言語スイッチャーは、画像ようにヘッダーの左上に表示されます。次はCSSで見た目を整えます。

見た目のカスタマイズ

追加CSSに以下のコードを追記します。

.header-in.wrap.cf > li {
  text-align: right;
  font-size: 12px;
  list-style: none;
}
.header-in.wrap.cf > li > a {
  color: #fff;
  text-decoration: none;
  padding: 4px;
}
.header-in.wrap.cf > li > a:hover {
  text-decoration: underline;
}

言語スイッチャーを右寄せして、リストの点を消し、文字サイズや色を調整しています。これでヘッダーにひかえめに言語スイッチャーを置くことができました。