WordPressでtitleタグを自由に変更する方法。コピペOKです。

こんにちはワダショウゴです。

本記事では、WordPressでtitleタグを出力し、サイトのページタイトルをブラウザのタブの最上部に適切に表示する方法について解説します。

ページタイトルを適切に表示するのはSEOとしても重要な項目なので、これからWordPressを学習される方は必ずチェックしておきましょう。

WordPressでtitleタグを出力する方法

下記のコード２つをfunctions.php内に貼り付けてください。

♦Code01（PHP）

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

♦Code02（PHP）

function correct_title($title){
   if(is_search()){
       $title['title'] = '検索結果：'.get_search_query();
   }elseif(is_404()){
       $title['title'] = 'お探しのページは見つかりません';
   }
   return $title;
}
add_filter('document_title_parts', 'correct_title');

ソースコードの解説

Code01のinsert_title()関数でadd_theme_support('title-tag')を使って、ブラウザに出力される際にtitleタグを自動補完します。

add_action('after_setup_theme', 'insert_title')を使ってワードプレステーマが全て読み込まれたあとにinsert_title()関数が実行されます。

Code02では、出力される文字列に変更を加えています。

correct_title()関数内で、is_search()（検索結果表示ページ）であれば下記のように出力されます。

検索結果：任意の検索文字列 - サイト名

また、is_404()（404エラーページ）であれば

お探しのページは見つかりません - サイト名

と表示されます。

これらをdocument_title_partsというtitleタグ内の文字列を変更するフィルターにcorrect_title()関数を適用して変更するという仕様です。

補足説明

以下は補足説明です。

head内のtitleタグは削除しましょう。

Code01のadd_theme_support('title-tag')はtitleタグを自動補完する機能なので、head内のtitleタグは削除しましょう。

…と言いたいところなのですが、あとに示す参照のサイトにも同様のことが書いてあったため試したのですが機能しませんでした。

titleタグを削除するのではなく、<!-- <title></title> -->のようにコメントアウトすると正しく動いたので試してみてください。

原因については不明です。

Code01のだけでも機能します。

前述の通り、Code01のadd_theme_support('title-tag')はtitleタグを自動補完する機能なのでこれだけ記述すれば機能します。

ただ、検索結果表示ページでは

任意の検索文字列 - サイト名

404エラーページでは

ページが見つかりませんでした - サイト名

と表示されます。ここは好みに合わせてCode02を参照して変更していただければと思います。

titleタグ内の区切り文字の変更方法

Code01、Code02を使用すれば任意の投稿ページの場合だと

投稿記事のタイトル - サイト名

というように、区切り文字が「-」で表示されます。

変更したい場合は下記コードをfunctions.php内に追加しましょう。

♦Code03（PHP）

function change_title_separator($sep){
   $sep = '|';
   return $sep;
}
add_filter('document_title_separator', 'change_title_separator');

document_title_separatorというフィルターで区切り文字を変換します。

仕組みはCode02と全く同じなので、解説は省略します。

Code03を使うと、

投稿記事のタイトル | サイト名

に変更されます。２行目の$sep = '|';を変更すれば、好きな区切り文字に変更可能です。

参照

本記事の作成にあたって、下記の記事を参考にさせていただいたので詳しく知りたい方はチェックしてみてください。

・commteblog | WordPress：タイトルを自在にカスタマイズする方法
・Web Design Leaves | WordPress title タグの出力