WordPressでtitleタグを設定する時に知っておきたいテンプレートタグ | KoMariCote

WordPressでtitleタグを設定する時に知っておきたいテンプレートタグ

更新2024/03/25

オリジナルのテーマを作成する際、WordPressのデフォルトのままでは <title> タグが生成されないので設定が必要です。そこで設定するための方法をメモしていきます。

自分でテーマを作っていてタイトルタグが表示されないといったときは、この記事が役立てると思います。

一般公開されているテーマを利用していたりSEOプラグインを入れていれば、自動で <title> タグが生成されるようになっているものがほとんどなので設定する必要はないかと思います。ただしちゃんと出力されているかは確認しておきましょう。

add_theme_support() でタイトルタグを自動設定

WordPress4.1以降であれば、add_theme_support('title-tag'); が使えます。

使い方は funtions.php にこのコードを記述するだけです。
この記述があれば <title> タグを記述しなくても自動的にページに応じてタイトルタグとページのタイトルが挿入されます。

add_theme_support() | Function | WordPress Developer Resources

こちらのコードを使用する際に、 <head> タグにタイトルタグを設定していたら削除してください。2つとも記述しているとタイトルタグが2つ読み込まれてしまいます。

このコードによって出力される内容をカスタマイズすることもできます。
例えば、デフォルトでのタイトルタグの区切り文字はハイフン(ー)になっていますが、パイプライン(|)に変更したい場合は以下のコードを追記します。

add_theme_support('title-tag');
function my_title_separator($separator) {
  $separator = '|';
  return $separator;
}
add_filter('document_title_separator', 'my_title_separator');

$separator='' のところに任意の文字を指定します。

初期設定のハイフンのままでよければ add_theme_support('title-tag') のみで大丈夫です。SEOプラグインを使用しているならプラグイン内の設定で反映されると思うので、その場合もこちらの記述は不要です。

タイトルタグに wp_get_document_title() や wp_title() を記述

add_theme_support('title-tag'); で簡単にタイトルの出力ができますが、テキストを追加したい・ページごとにテキストを変更したいといった場合には、タイトルタグに wp_get_document_title()wp_title() というページのタイトルを出力するテンプレートタグを使用する方法もあります。

コードを記述する際、wp_title() はこの関数だけ書けば出力されますが、wp_get_document_title()echo をつける必要があります。

<title><?php echo wp_get_document_title(); ?></title>

<title><?php wp_title(); ?></title>

wp_title() は非推奨だから使わない方がいい」といっている記事もありましたが、どうやらこのコード自体が非推奨になったわけではなさそうです。なので使っても問題はありません。

ただ私は wp_get_document_title() の方が使い勝手が良いです。

wp_title() ではタイトルが表示されないページもある

wp_title() だとトップページや404ページのタイトルが表示されませんでした。これらのページでもタイトルを表示させるために別のコードを記述する必要があります。

【コード例】

  <title><?php if(is_front_page() || is_home()) {
      echo get_bloginfo('name'); } else { echo wp_title(''); } ?></title>

また表示は >> ページタイトル というタイトル表示がデフォルトです。タイトルタグには >> はいらない…とか、ページタイトルの他にサイト名も表示させたいという人も多いのではないでしょうか。

wp_title() の場合、わざわざ出力されるテキストを変更したり、タイトルが自動でつかないページの場合条件分岐をつけたりと結構手間がかかるなと思ったんです。

【参照】wp_title() でタイトルを取得できない。WordPressテーマを自主制作|Programmer Life

wp_get_document_title() は「ページタイトル – サイト名」を出力

その点 wp_get_document_title() はデフォルトで ページタイトル - サイト名 で出力されます。トップページでもちゃんとサイト名が表示されます。

wp_get_document_title() wp_title() のようにこの関数で変更するオプションはありません。
タイトルやセパレーターを変更したい場合は pre_get_document_titledocument_title_separator といったフィルターフックを使って変更します。

<?php
// wp_get_document_title のテキスト変更
function change_document_title( $title ) {
  if (is_page('wp-title-tag')) {
    $title = '変更したいタイトル - '. get_bloginfo('name');
    return $title;
  }
  return $title;
}
add_filter( 'pre_get_document_title', 'change_document_title', 9999 );
?>

タイトルタグが設定されているか確認する

wp_get_document_title() wp_title() のようにタイトルを設定した場合は特に、 add_theme_support('title-tag'); のように自動的に設定している場合も念の為各ページにタイトルタグがちゃんと設定されているかは確認しておきましょう。

【基本的なページの種類とタイトル例】

ページの種類タイトルの参考例
トップページサイト名 – キャッチフレーズ
投稿・固定ページ・カスタム投稿の個別ページページのタイトル – サイト名
各アーカイブ(一覧)ページアーカイブタイトル – サイト名
(ページネーション2ページ目以降の場合)
アーカイブタイトル – ページ番号 – サイト名
検索結果ページ“キーワード” の検索結果 – サイト名
404ページページが見つかりませんでした – サイト名

カテゴリー : WordPress

TOPへ