0016 - WordPressテンプレートのヘッダーフッターを共通化しよう の回では、header.php を使ってヘッダー部を共通化しました。
ヘッダーを共通化したことで titleタグ に固定ページまたは投稿のタイトルが表示されるようになりました。
<!DOCTYPE html>
<html>
<head>
<title><?php the_title();?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>'/style.css'">
</head>4行目の titleタグに the_title関数 を使って、固定ページまたは投稿のタイトルを表示しています。
しかし、一般的には
| ページ名 | titleタグ | |
|---|---|---|
| トップページ | 〇〇商事株式会社【公式】 | |
| サービス | サービス｜〇〇商事株式会社【公式】 | |
| 会社概要 | 会社概要｜〇〇商事株式会社【公式】 | |
| 経営理念 | 経営理念｜会社概要｜〇〇商事株式会社【公式】 | |
| 役員紹介 | 役員紹介｜会社概要｜〇〇商事株式会社【公式】 |
のように ページ名＋区切り（｜など）＋サイト名 にすることが多いと思います。
そこで今回は、ページの階層によって titleタグ を変更する方法を紹介します。
トップページのタイトル
WordPressには、現在表示されているページがトップページかどうか判定する関数があります。
それが is_front_page関数 です。
if (is_front_page()){
// トップページだったら
} else {
// トップページ以外だったら
}is_front_page関数を使用してトップページの場合は titleタグ にサイト名を取得する関数 get_bloginfo('name'）で取得した値をセットします。
<!DOCTYPE html>
<html>
<head>
<?php
if (is_front_page()){
// トップページだったら
$title = get_bloginfo('name');
} else {
// トップページ以外だったら
}
?>
<title><?php echo $title;?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>'/style.css'">
</head>5行目の if によってトップページを判定。
7行目の get_bloginfo でサイト名を取得し $title変数に保存。
12行目で $title変数 をecho で表示。
これでトップページの場合、サイト名が表示されるようになりました。
トップページ以外のタイトル
トップページ以外のタイトルは、ページタイトル＋区切り＋サイト名となります。
ページのタイトルは、the_title関数で取得できます。
<!DOCTYPE html>
<html>
<head>
<?php
if (is_front_page()){
// トップページだったら
$title = get_bloginfo('name');
} else {
// トップページ以外だったら
$title = get_the_title() . '｜' . get_bloginfo('name');
}
?>
<title><?php echo $title;?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>'/style.css'">
</head>10行目で、ページタイトル＋区切り（｜）＋サイト名 を $title変数 に保存。
13行目で $title変数 をecho で表示。
the_title関数でページのタイトルを取得できると書きましたが、the_title関数はタイトルを取得して表示する関数ですので、取得するだけの get_the_title関数を使用しています。
しかし、上記の処理だけでは不十分です。
それは、ページの階層に対応できないからです。
具体的には、経営理念のページを表示するとき、「経営理念｜会社概要｜〇〇商事株式会社【公式】」となるべきところが、「経営理念｜〇〇商事株式会社【公式】」となってしまうからです。
経営理念ページは、会社概要ページの子ページにあたります。
子ページの場合は、親ページのタイトルを付け加える必要があります。
親ページのタイトルを付け加える
親ページがあるかどうか、そして親ページが何個あるかを取得し、親ページ分タイトルを取得する必要があります。
そこで、使用するのが get_post_ancestors関数です。
get_post_ancestors関数は、今表示しているページの親ページを大元となる親ページまでさかのぼって取得することができます。
具体的な使用例は次のようになります。
$current_id = get_the_ID(); // 今表示しているページのページIDを取得
$ancestors = get_post_ancestors($current_id); // 今表示しているページの親ページを取得例えば、表示しているページが「階層３」でIDが10とします。
「階層３」の親ページは「階層２」でIDが5とします。
さらに「階層２」の親ページが「階層１」でIDが3とします。
この場合、「階層３」に対する$ancestors変数の値は {5,3} となります。
get_post_ancestors関数で取得できる値は、親ページのIDを階層が深い順に並ぶ配列となります。
したがってget_post_ancestors関数で取得した親ページIDの配列を繰り返し処理することで、階層順にページタイトルを取得することができます。
具体的には、次のようになります。
<!DOCTYPE html>
<html>
<head>
<?php
if (is_front_page()){
// トップページだったら
$title = get_bloginfo('name');
} else {
$title = get_the_title(); // 今表示しているページのタイトルを取得
$current_id = get_the_ID(); // 今表示しているページのページIDを取得
$ancestors = get_post_ancestors($current_id); // 今表示しているページの親ページを取得
if(!empty($ancestors)){ // 親ページがあるか判定
foreach ($ancestors as $ancestor) { // 親ページの個数分繰り返す
$title = $title . '｜' . get_the_title($ancestor); // 親ページのタイトルを付け加える
}
}
$title = $title . '｜' . get_bloginfo('name'); // サイト名を付け加える
}
?>
<title><?php echo $title;?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>'/style.css'">
</head>9行目で現在表示中のページのタイトルを取得。
10行目で現在表示中のページのIDを取得。
11行目で現在表示中のページの親ページを取得。
12行目では、親ページがあるかどうかを判定。empty関数は、変数が空かどうかの判定です。！はNOTを意味しますので!emptyで「空じゃないとき」となります。
13行目～15行目はforeachによる繰り返し処理。$ancestors変数の中身を１つずつ$ancestor変数に移しながら繰り返し処理を行っています。
14行目で区切りと親ページのタイトルを付け加えています。
16行目でタイトルの最後にサイト名を付け加えています。
これにより$title変数が「階層３」→「階層３｜階層２」→「階層３｜階層２｜階層１」→「階層３｜階層２｜階層１｜サイト名」と変化していきます。
親ページがない時
親ページがない時でも、先ほどのプログラムは有効です。
親ページがない時は、12行目の if文で「ない」と判断され16行目までの処理がスキップされます。
結果として、9行目で取得した現在表示中のページのタイトルと17行目のサイト名だけが採用され、タイトルとなります。
まとめ
今回は、階層を考慮した固定ページのtitleタグの取得方法を紹介しました。
いっきにプログラミングっぽくなりましたが、プログラムの1行1行が分かりやすい内容となっていますので、「関数の使い方」や「なんのための処理なのか」をご理解いただけると思います。
