WordPressのページタイトルに入る区切り文字を変更する方法

Table of Contents

WordPressのページタイトルは「サイトのタイトル + 区切り文字 + キャッチフレーズ」のように構成されます。

例えば、サイトのタイトルが「区切り文字」でキャッチフレーズが「セパレータ」、区切り文字が「-（ハイフン）」であったとすると、次のようになります。

区切り文字 - セパレータ

しかし、WordPressの標準設定では、この区切り文字がハイフンであった場合、幅ダッシュ（enダッシュ）に自動変換されてしまいます。

この変換が行われると、ページタイトルをSNSなどで表示しようとした際、以下のようにエスケープされてしまうことがあります。

区切り文字 &#8211; セパレータ

この問題を回避するためには、区切り文字を変更するか、そもそもこの自動変換を無効化してしまうかの2つの方法があります。

区切り文字の変更方法

サイトのタイトルとキャッチフレーズは設定 > 一般から変更できますが、区切りの文字は変更できません。タイトルの区切り文字を変更するには、テーマスクリプトに変更を加える必要があります。

テーマのための関数 (functions.php) の一番下に以下のコードを追加します。

// タイトルのセパレータ
function change_separator() {
  return "|"; // ここに変更したい区切り文字を書く
}
add_filter('document_title_separator', 'change_separator');

これで、区切り文字が縦線（|）に変更できます。

return の後を変更すると、自由に区切り文字が指定できます。

自動変換そのものを無効化するには、WordPressの関数である wptexturize の動作を止めます。

具体的には、functions.php に以下のコードを追加します。

// ハイフンをenダッシュに変換されるのを防ぐ
remove_filter('the_title', 'wptexturize');
remove_filter('the_content', 'wptexturize');

これで、自動変換のスクリプトが動作しなくなります。ただし、ハイフン以外の自動変換も無効化されるので注意が必要です。