この記事にはプロモーションが含まれています。

【WordPress】ページごとのtitleタグの内容を変更する方法

2024-04-232024-10-12

WordPressでWebサイト制作をしていると

ケケンタ

ページごとにtitleタグのテキストを変えなきゃいけない…！

という状況に出くわすことがよくあります。

方法はいくつかありますが、この記事では

functions.phpにコードを記述して
ページごとにtitleタグの内容を変更する方法

について解説をしていきます。

この記事で分かること

titleタグが自動的に設定されるようにする方法
titleタグの内容を任意のテキストに変更する方法
titleタグの区切り文字を変更する方法
titleに自動設定される「キャッチフレーズ」や「サイト名」を除去する方法

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

WordPressだとheader部分の区別化にひと手間必要

WordPressでは基本的にheader部分はheader.phpによって共通化されています。

そのため、「ページごとに一部分だけ内容を変えたい」という状況に遭遇すると、ひと手間必要になることが多いです。

今回のtitleタグの内容をページごとに変えたいという状況もその一例で、この記事がどなたかの役に立てばという気持ちです。

【コード】functions.phpにコードを記述してページごとにtitleタグの内容を変える

今回の実装のポイントは次の通りです。

ページごとにtitleタグの内容を変える実装のポイント

既存のheadタグからは予めtitleタグを削除しておく
functions.phpに「headタグ内にtitleタグが自動で挿入されるようにするためのコード」を記述する
functions.php内で、「ページ判定を行い、ページごとに出力するtitleの内容を変更するためのコード」を記述する

①は、②でheadタグ内にtitleタグが自動で挿入されるように実装をすることで必要になる作業です。
もし①を行わずheadタグ内にtitleタグを残したままにしておくと、２つのtitleタグ（手入力のものと自動挿入のもの）が重複して出力されてしまいます。

functions.phpの編集方法がご不明な場合は、こちらの記事をご覧ください

あわせて読みたい

【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点 WordPressで機能カスタマイズをする際は、必ずと言っていいほどfunctions.phpを編集することになります。しかし、functions.phpを編集したことで何らかのエラーが発生…

【コード】functions.php内に記述するコード

headタグ内にtitleタグが自動で挿入されるようにするためのコード

function mytheme_ini() {
  add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'mytheme_ini' );

ケケンタ

実は、単純に「titleタグが自動的に設定されればOK」ということであれば、上記のソースコードをfunctions.phpに追記するだけで大丈夫です！

ただし、この自動挿入されるtitleタグに設定されるテキストは「その記事のタイトル」です。
もしもtitleの内容を任意のテキストに変更したい場合はさらに以下のソースコードをご利用ください。

ページごとに出力するtitleの内容を変更するためのコード

function 任意の関数名($title){
  $title['title'] = 下記のページ判定から漏れたページに適用したいタイトル;
  if ( ページを判定する条件 ){
    $title['title'] = タイトル値 ;
  }
  return $title;
};
add_filter('document_title_parts', '任意の関数名');

WordPressに用意されているフィルターフック「document_title_parts」を利用して、出力されるtitleタグの内容を変更しています。

使用例

function my_document_title_parts($title){

    if(is_home() || is_front_page()) {
        $title['title'] = 'トップページ';
    } elseif( is_page('company') ) {
        $title['title'] = '会社概要';
    } elseif( is_page('recruit') ) {
        $title['title'] = '採用情報';
    } elseif( is_page('policy') ) {
        $title['title'] = 'プライバシーポリシー';
    }
    return $title;
};
add_filter('document_title_parts', 'my_document_title_parts');

この例では以下のような判定により、ページごとのtitleタグの内容を任意のものに変更しています。

判定内容

is_home()とis_front_page()でトップページを判定
is_page(‘ スラッグ ‘)で各固定ページを判定

titleタグから不要な情報を除去したい場合

ただ、上記でtitleタグを自動設定する場合、実は以下の画像のようにタイトルの後ろに自動的に「 – サイト名」といった文字列が追加される形になってしまいます。

タイトルの後ろに「サイト名」が自動追加されている様子 — タイトルの後ろに「 – サイト名」が自動追加されている

自動的に追加されてしまう情報

トップページの場合……キャッチフレーズ
その他のページの場合……サイト名

このような状態で問題が無い場合もあれば、「サイト名は消したい！」といった場合もあるかと思います。

そこで以下より

「区切り文字」を変更する方法
サイト名を除去する方法

についてそれぞれ解説をしていきます。

titleの「区切り文字」を変更する方法

titleの「区切り文字」を変更したい場合は、以下のコードを使用します。

function 任意の関数名($separator) {
  $separator = '|'; // 好きな区切り文字を設定する
  return $separator;
}
add_filter('document_title_separator', '任意の関数名');

区切り文字を「|」に変更

titleからサイト名を除去する方法

titleからサイト名を除去する場合には、以下のコードを使用します。

function 任意の関数名($title){
    if( is_home() || is_front_page() ) {
         unset( $title['tagline'] );
    } else {
         unset( $title['site'] );
    }
    return $title;
};
add_filter('document_title_parts', '任意の関数名');

タイトルの後ろから「サイト名」を除去