WordPressでtitleタグをカスタマイズする方法

WordPressでadd_theme_support();を使用してtitleタグをカスタマイズする方法です。

titleタグの出力方法

WordPressでタイトルを表示させたい時、以前はwp_titleという関数を使って出力させていましたが、現在はadd_theme_support();を使ってタイトルを出力させることが推奨されています。

従来は、「header.php」内の「<title></title> 」に以下のように記述していました。

<title>><?php bloginfo('name'); wp_title('|', true, 'right'); ?></title>

出力されるHTMLは以下のようになります。

<title>記事タイトル | サイト名</title>

add_theme_support('title-tag')

現在推奨されているやり方は、header.phpに直接記述しなくても、functions.phpに以下を記述すると自動的にタイトルを表示してくれるようになりました。なので、以前のようにheader.php内に「<title></title>」を記述してしまうと、２重で出力されてしまうので注意してください。

add_theme_support( 'title-tag' );

titleタグのカスタマイズ

document_title_separator

add_theme_support( 'title-tag' );を使うと、「タイトル - サイト名」と出力されるので、このセパレーターを変更したい場合は、functions.phpに以下を記述します。

function wp_document_title_separator( $separator ) {
  $separator = '|';
  return $separator;
}
add_filter( 'document_title_separator', 'wp_document_title_separator' );

document_title_parts

タイトルを変更したい場合に使用します。

• $title['title'] - ページタイトル
• $title['page'] - 現在閲覧しているページ
• $title['tagline'] - サイトのディスクリプション
• $title['site'] - サイト名

function wp_document_title_separator ( $title ) {
  if ( is_home() || is_front_page() ) {
    unset( $title['tagline'] );　// ディスクリプションを出力しない
  }
  return $title;
}
add_filter( 'document_title_parts', 'wp_document_title_separator', 10, 1 );