WordPressのタイトルタグをページタイプごとに変える方法｜title-tagとpre_get_document_title

ページ内には広告が含まれます広告ポリシー

WordPressの自作テーマで、タイトルタグをページタイプごとに出し分ける方法を紹介します。title-tagとpre_get_document_titleを使って、トップページ・記事ページ・カテゴリ・タグ・検索結果・404ページなどのタイトルを整理する基本例をまとめました。

WordPressのタイトルタグとは

WordPressのタイトルタグとは、HTMLの<title>に出力されるページタイトルのことです。

記事本文に表示されるh1とは別のもので、ブラウザのタブ名、検索結果に表示されるタイトル、ブックマーク名などに使われます。

タイトルタグがブラウザタブや検索結果で使われるイメージ — タイトルタグは、ブラウザタブや検索結果などで使われます。

WordPressでも通常のHTMLホームページ同様、投稿記事では記事タイトル | サイト名、カテゴリページではカテゴリ「WordPress」の記事 | サイト名のように、ページの種類に合わせてコードを書くことができます。

そこでこの記事では、WordPressテーマでタイトルタグを扱う基本例として、functions.phpにtitle-tagとpre_get_document_titleを追加して、ページごとにタイトルの中身を調整する方法を紹介します。

今回のtitle-tagを使う場合、header.phpには<title>タグは不要です。残っていると、タイトルタグが二重に出力されることがあるため、header.phpからは削除してから以下を進めてください。

SEOプラグインを使っている場合

All in One SEO、Yoast SEO、Rank MathなどのSEOプラグインを使っている場合、タイトルタグをプラグイン側で管理していることがあります。

その場合、テーマ側でもタイトルを上書きすると、プラグイン側の設定と競合、エラーの原因となる可能性があるため、どちらかにまとめるのが無難です。

タグを有効化する

今回の基本は、functions.php側でタイトルタグの出力を有効化し、必要なページだけタイトルの文言を調整する形です。

functions.phpでtitle-tagを有効化する

まずは、テーマでタイトルタグを扱えるように、以下のコードでタイトルタグをアクティブ状態にします（次のコードでまとめて紹介するので、ここでは追加不要です）。

<?php
    /* ===== タイトルタグのアクティブ化 ===== */
    add_action('after_setup_theme', function (){
        add_theme_support('title-tag');
    });
?>

これで、WordPress側でタイトルタグを出力できるようになります。

タイトル調整コードを追加

タイトルの中身を調整するには、pre_get_document_titleを使います。

以下は、トップページ・カテゴリページ・タグページ・検索結果・404ページなどに合わせて、タイトルを出し分ける例です。

完全版コード

以下をfunctions.phpに追加します。

<?php
    /* ===== タイトルタグのアクティブ化 ===== */
    add_action('after_setup_theme', function (){
        add_theme_support('title-tag');
    });

/* ===== 記事タイトル生成 ===== */
add_filter('pre_get_document_title', function($title){
    $site = get_bloginfo('name');
    $desc = trim((string) get_bloginfo('description'));

    if ($title === '' && is_singular()) {
        $title = single_post_title('', false);
    }

    if (is_404()) {
        return $site . ' | ページが見つかりません';
    }

    if (is_home() || is_front_page()) {
        return $desc !== '' ? ($site . ' | ' . $desc) : $site;
    }

    if (is_category()) {
        return $site . ' | カテゴリ「' . single_cat_title('', false) . '」の検索結果';
    }

    if (is_tag()) {
        return $site . ' | キーワード「' . single_tag_title('', false) . '」の検索結果';
    }

    if (is_date()) {
        return $site . ' | 「' . get_the_date('Y年m月') . '」のアーカイブ';
    }

    if (is_search()) {
        $keyword = get_search_query(false);

        if ($keyword === '') {
            return $site . ' | 検索結果';
        }

        return $site . ' | 「' . $keyword . '」の検索結果';
    }

    return $title . ' | ' . $site;
}, 5);
?>

これで、主なページタイプごとにタイトルの表示を変えられます。