functions.phpからtitleタグを出力・コントロールする方法

これまでwp_title関数を使ってheader.php内に直接titleタグを書く方法は、現在は推奨されていません。

これからは新しく登場したwp_get_document_title関数を使って、wp_head()実行時に生成する様にしましょう。

functions.phpにadd_theme_supportを記述してタイトルを生成し、さらに3つのフィルターを駆使して様々なカスタマイズが可能です。

titleタグ出力をコントロールする

これまでのWordpressでのタイトルの出し方

通常HTMLページのタイトルは、headタグ内に<title>～</title>を書きますよね。

Wordpressでタイトルを出力する際、テーマテンプレート「header.php」内に直接書いていたはずです。

header.php内titleタグ記述例

例えば、headタグ内に以下のような記述をしていました。

<title><?php bloginfo('name'); wp_title('|', true, 'left'); ?></title>

上記の様にwp_title()を使えば、簡単にタイトルを表示できる訳です。

上記コードでは、同時に「|」をサイトタイトルの左側につけています。

冒頭にページのタイトルbloginfo('name');をつけて「ページタイトル|サイトタイトル」の状態を生成している訳です。

実際の出力HTMLソース

<title>サイト名|記事のタイトル</title>

functions.php記述でタイトルタグを出す

実はWordpress4.1 以降から、titleタグはfunctions.phpでコントロールできる様になりました。

functions.phpに書く事で、ページの種類に応じてシステム側がtitleタグを自動表示してくれる訳です。

それが「add_theme_support」関数です。

add_theme_support関数

add_theme_support()は、Wordpressの特定の機能をテーマ内で有効にする関数です。

引数に「'title-tag'」を指定する事で、titleタグが自動的にheadタグ内に挿入されます。

functions.phpの記述例

具体的には、以下の一行を入れるだけですね。

add_theme_support('title-tag');

基本はこれだけで、ページタイトル・サイト名が入ったtitleタグが自動挿入されます。

headerに書かずに様々なカスタマイズが可能になり、利便性が高くなりました。

header.php内にtitleタグは書かない

add_theme_support()を使う場合、逆にheader.phpにtitleタグを書かない様にしましょう。

そうしないと、ソース内にtitleタグが2つ表示されてしまいます。

ありがちなミスですので、注意しましょう。

wp_get_document_title

functions.phpからタイトルがコントロールできる様になった背景を紹介します。

Version4.4からwp_title()に代わってページタイトルを生成する関数が導入されました。

それが「wp_get_document_title」関数です。

現在のページの種類に応じて処理された、タイトルの文字列の値が取得されます。

ただしタイトルの出力まではせず、単に値を返すだけです。

Wordpressがwp_head()内で使用

このwp_get_document_title()は、wp_head()の中で実行される様になっています。

current_theme_supports()が準備

wp_head()を実行する際に動くファイル「wp-includes/general-template.php」内に、「current_theme_supports」関数の記述があります。

ここで'title-tag'が有効になっている場合、wp_get_document_title()でタイトルを出力する準備ができているのですね。

結果、functions.phpにadd_theme_support('title-tag')を記述する事で、headタグ内にtitleタグが自動挿入される訳です。

wp_get_document_title()で返ってくる値

wp_get_document_title()で生成する値について詳しく紹介しましょう。

生成されるタイトルの例（一部）

ページの種類により、それぞれ以下のタイトル情報が生成されます。

変数に格納される配列情報

タイトル情報を$title等の変数で配列に格納した場合、以下のパーツに分かれます。

タイトル・キャッチフレーズ

基本的にフロント（TOP）ページにはタイトルに「キャッチフレーズ」がつき、その他ページには「サイト名」が付く様になっています。

サイト名は、get_bloginfo( 'name', 'display' )で取得されます。

キャッチフレーズは、get_bloginfo( 'description', 'display' ) で取得されます。

【フロントページ】…サイト名 – キャッチフレーズ 【サブページ】…ページのタイトル – サイト名 if ( is_front_page() ) { $title['tagline'] = get_bloginfo( 'description', 'display' ); } else { $title['site'] = get_bloginfo( 'name', 'display' ); }

ページ番号について

ページ番号は $title['page'] に格納されます。

ページが分割されている場合、以下の様にページ番号が入る形で生成されます。

タイトル – ページ番号 – サイト名 if ( ( $paged >= 2 || $page >= 2 ) && ! is_404() ) { $title['page'] = sprintf( __( 'Page %s' ), max( $paged, $page ) ); }

titleの出力をカスタマイズする

ここまで、wp_get_document_title()がwp_head()内で実行される事で、titleタグが自動出力されるのがわかりました。

さらに場合によっては、その出力内容をカスタマイズするケースもあるでしょう。

そんな時は、大元となるwp_get_document_title()に3つのフィルターが設置されていますので、それらを活用する事になります。

これらのフィルターも全てfunctions.php内に記述して、出力をコントロールします。

フィルターを駆使する関数

上記3つのフィルターをfunctions.php内で使うために必要な、2つの関数を紹介します。

apply_filters()

apply_filters()は、フィルター処理に使われます。

apply_filters()の第一引数には「フィルターフック名」が入り、第二引数には「変更できる値」が入ります。

add_filter()

add_filter()は、フィルターフックの実行に使われます。

add_filter()の第一引数には「フィルターフック名」、第二引数には値を変更する「フィルター関数」が指定されます。

実際に両者がどのように使われるのかは、実例を見ながら確認して下さいね。

pre_get_document_title

最初に設置されているフィルターが「pre_get_document_title」です。

このフィルターはタイトル自体を丸ごと変更する際に使用されます。

条件分岐を設けることで、場面に応じて全く違うタイトルを生成することができます。

pre_get_document_titleの機能

pre_get_document_titleフィルターは、wp_get_document_title()内で使用されています。

つまり、Wordpressのタイトル生成実行中に割り込みするフィルターです。

このpre_get_document_titleフィルターで「空文字以外」が指定された場合、本来の生成処理は止まります。

タイトル文字自体を丸ごと書き換える

このフィルターと条件分岐を使えば、場面によって全く違うタイトルを表示できる様になります。

functions.phpの記述例（ファイル判定）

function change_title_tag( $title ) { if ( is_404() ) { $title = '404エラーページ：このページは表示できません'; }elseif ( is_search() ) { $title = ''; } return $title; } add_filter( 'pre_get_document_title', 'change_title_tag' );

404エラーページの場合、$titleに専用文字列が入っているので、この文字のみに変換されます。

それに対して検索結果ページの場合、中は空文字「''」になっていますね。

この場合、wp_get_document_title()にようる通常の生成処理がされ、いつものタイトルが表示される訳です。

document_title_separator

2番目に設置されているフィルター名が「document_title_separator」です。

このフィルターはWordpressが各ページごとに設定したタイトル文字列内の「区切り文字」を変更する場合に使用します。

区切り文字を変える

通常、wp_get_document_title()で生成するページタイトルとタイトルの間には「-」が入ります。

この「-」を「|」に変更したい場合は、以下様に書きましょう。

functions.phpの記述（-を|に変換）

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

この様にdocument_title_separatorを使う事で、区切り文字を自由に変更する事ができます。

document_title_parts

3つ目のフィルターが「document_title_parts」ですね。

このフィルターは、設定したタイトル文字列を「パーツ単位に分割・変更」する場合に使用します。

タイトル情報をパーツごとに分割配列

apply_filters()でdocument_title_partsを実行すると、タイトル情報は配列に変換されます。

$title = apply_filters( 'document_title_parts', $title );

これにより、変数$title内にパーツごとに格納されます。

$titleに格納された各パーツ情報

これによりタイトル情報は、wp_get_document_title()で紹介した様に以下のパーツに分割・格納されます。

事例1：要素の表示・非表示

特定のページにおいて、特定パーツの内容を変更したり非表示にする例です。

TOPページでデフォルト表示されるキャッチフレーズを非表示にしています。

functions.php記述例（キャッチフレーズ削除）

function change_title_parts ( $title ) { if ( is_home() || is_front_page() ) { unset( $title['tagline'] ); //キャッチフレーズを非表示 } return $title; } add_filter( 'document_title_parts', 'change_title_parts');

unset()を使うと、配列の要素や配列自体を削除する事ができます。

この分岐設定により、フロントページで「サイト名 – キャッチフレーズ」だったタイトルが、「サイト名」のみになります。

事例2：ページ種類ごとのカスタマイズ

次は、ページごとに各パーツを組み合わせるカスタマイズ例です。

functions.php記述例

function cus_Title($title) { unset($title['tagline']); //キャッチフレーズを非表示 $title['site'] = 'えるぺぐ'; //サイト名を任意の名前に変更 //ページごとの分岐 if(is_home()){ $title['title'] = $title['site'].'TOPページ'; //TOP }else if(is_archive()){ $title['title'] = $title['site'].'記事一覧アーカイブ'; //アーカイブ }else if(is_single()){ $title['title'] = $title['title'].'の詳細ページ'; //記事詳細 } return $title; } add_filter('document_title_parts','cus_Title');

この場合、フロントページのタイトルは「えるぺぐTOPページ」になります。

記事のアーカイブ一覧ページのタイトルは「えるぺぐ記事一覧アーカイブ」になります。

記事詳細ページのタイトルは「○○○○詳細ページ」になります。

この様にページの種類によってパーツ単位でカスタマイズする事ができます。

いかがでしたか

特にオリジナルテーマを構築する場合、いまだにheadタグにtitleタグを記述している人も多いと思います。

これからはfunctions.php内（add_theme_support）で、wp_get_document_title()が生み出すタイトル生成機能を使う様にしましょう。

条件分岐と3つのフィルターを駆使すれば、様々なカスタマイズが可能になります。

一押し人気コーナー紹介