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

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

ケケンタ

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

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

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

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

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

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス 

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法 

• Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
• 会員の自動更新を解除しておく＝期限が来たら自動解約
• １～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

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

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

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

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

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

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

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

【コード】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', '任意の関数名');

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

まとめ

ケケンタ

以上がページごとにtitleタグの内容を変更する方法でした！

WordPressでWeb制作をしているとページごとにtitleタグの内容を変えなければいけないことが頻繁にあります。

この記事がお役に立ったなら何よりです！