WordPressで出力内容が動的に変わる固定ページの<title>を変更

モリヤ　 2019/08/20 17:12

こんにちは
開発部のモリヤです。

先日、以下のような仕様のページを作成する際に動的に<title>を変更する必要があったため、手法をご紹介します。

動的に出力内容を変える固定ページ

URLクエリパラメータをkeyとして、出力内容をテーブルから取得・表示内容を切り替える。
ページのタイトルは、固定ページのタイトルではなく取得データのタイトル情報にする。
動作環境は「WP 5.2.2」で、使用テーマは標準の「twentynineteen」

まずはそのままページを確認する。

特に手を加えず、該当ページを開いたところ、タイトルは固定ページのタイトルが表示されています。

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>商品ページテンプレート<title>
～
</head>

タイトル出力の仕組みを知る。

タイトル部分の出力方法を知るため、テーマ内にある「header.php」を確認、以下の記述となっていました。

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<?php wp_head(); ?>
～
</head>

wp_head()で<title>が出力される仕組みとは？

調べてみたところ<title>は、WordPress4.4より前は「wp_title()」という処理を使って出力していたようですが、4.4以降は非推奨となり、現在はfunction.php内に「add_theme_support( ‘title-tag’ );」を記述することで、wp_head()で自動的にタイトルが出力される仕組みとなっているようです。
※実際のところ「非推奨」は取り下げて当分の間復活されたようですが、いつまた使えなくなるかわからないので使わないほうが良い気がします。。。

>> 【WordPress】wp_titleは非推奨！titleタグにタイトルを出力する方法

固定ページのみ動的にタイトルを切り替えるにはどうするか？

functions.phpに以下を記述することでページタイプごとにタイトルを切り替えることが可能なようです。
固定ページのパーマリンクを「shop_list」とし、固定ページであるか判定する「is_page()」を組み合わせて判定することで特定の固定ページのタイトルを変更することが可能となりました。

function change_title_tag( $title ) {
if ( is_page(‘shop_list’) ) {
$title = ‘任意のタイトル’;
}
}
add_filter( ‘pre_get_document_title’, ‘change_title_tag’ );

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>任意のタイトル<title>
～
</head>

ここから更に、動的にタイトルを変更するために固定ページ側とfunction.php側に「global $page_title;」を定義し、wp_head()実行前にページタイトルを設定、function.php側で変数を指定することで設定したタイトルが表示されるようになりました。

function change_title_tag( $title ) {
global $page_title;
if ( is_page(‘shop_list’) ) {
$title = $page_title;
}
}
add_filter( ‘pre_get_document_title’, ‘change_title_tag’ );

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>商品名｜リンゴ<title>
～
</head>

固定ページ以外でも「is_category()」や「is_tag()」を使うことで判定・タイトル変更が可能となります。

この記事の作者

モリヤ: 総記事本数：11