ボクステ公式ブログ

2025年
2024年
カテゴリ

Nintendo Switch版カクレザ図書館ダウンロードバナー

phpで<head>を共通化して<title>だけページ別にする方法
当ブログは、元々すべてhtmlで作成していましたが、先日phpに変更しました。

それによりページの共通パーツ(ヘッダー等)が一括変更できるようになりましたが、ページタイトルがすべて 「ボクステ株式会社 | 公式ブログ」に統一されてしまいました。

そこで、「ボクステブログ |【個別の記事タイトル】」と異なるものになるよう変更しました。

phpファイルの作成方法、ブラウザでphpを開く方法については、こちらの記事もどうぞ。

ヘッダーの共通化

ボクステ公式ブログのページ構成
ボクステ公式ブログのページ構成

現在のページ構成は以下の通りです。

blog-entry-50.php 記事ページ全体
  |_header.php htmlの<head>部と上部メニュー
  |_blogmenu.php 記事年月やカテゴリ、バナー
  |_entry50.php ブログ記事部分

一つの記事ページに共通ヘッダーを記述したphpファイルを丸ごと読み込んでいます。

header.php
<!DOCTYPE html>
<html lang="ja" >
   <head >
     <meta charaset =" UTF-8 ">
     <title>
ボクステブログ<?php if (!empty($page_title )) { echo"|" .$page_title ; } ?></title>
  </head >

「header.php」の中には、htmlの<head>~</head>部分をすべて含んでいます。

この「header.php」を各ブログ記事のphpファイルで引用する方法は以下の通りです。
blog-entry-50.php
<?php
$page_title = "phpで<head>を共通化して<title>だけページ別にする方法";

include ( 'header.php' );
?>

このphp形式での記述は、ブログ記事ファイル「blog-entry-50.php」の一番上、先頭に書いてあります。
その後は何の宣言もなしでhtml用の記述<div class="blog_entry">を続けています。

上記二つのコード例を解説します。

includeについて

「blog-entry-50.php」の中で include ('header.php'); と記述することで、「header.php」の内容をすべてページ内に引用しています。

$page_titleについて

「blog-entry-50.php」の中に

$page_title = "phpで<head>を共通化して<title>だけページ別にする方法";

と記入したものが、「header.php」内の

<title>ボクステブログ<?php if (!empty($page_title)) {echo<"|" .$page_title ; } ?></title>

部分に引用されます。

「if (!empty($page_title))」は、「$page_titleがempty(空)ではない時に」という意味の条件式です。
その後に続く「{echo<"" .$page_title; } ?> は、 「ボクステブログ」という必須パーツの後に  という区切り用の縦線を入れてから $page_titleの中身を入れ、 ページタイトルを作りなさい、という命令です。

つまり、$page_title が空ではなかったため、

「ボクステブログ|phpで<head>を共通化して<title>だけページ別にする方法」

というタイトルが<head>内の<title>要素となったのです。

もしも$page_titleが空だった場合、「ボクステブログ」だけがタイトルとして表示されます。ブログのトップページなどはそれで足りるので個別の$page_titleはつけていません。

ページタイトルを付けると何が良いの?

ページタイトルは、ブラウザの上部タブやブックマークのタイトル、Google等の検索結果として表示されます。


ブラウザのタブに表示されるタイトル
ブラウザのタブに表示されるタイトル

ブラウザでは長いと全て表示しきれませんが、検索の際には優先的に取得される文字情報であるため入れておいた方がよさそうです。
また外部からリンクする際にもタイトルとして取得・表示されることがあります。

今回の修正前に、全てのブログ記事でタイトルが共通だったのは、header.phpの記述が
<title>ボクステ株式会社|公式ブログ</title>と静的であったため、動的に変更できなかったからです。
なお、固定部が長すぎるため、省略して「ボクステブログ」としました。

blogmenu.phpの解説は省略

可変ページタイトルには直接関わらないため省略しましたが、「header.php」同様、includeで丸ごと読み込んでいます。

以前は、月が替わる度全てのページにそのカテゴリー 例えば 「2025年 5月」を手動でコピペするという恐ろしく原始的なサイト作りをしていました。

また、上部の自社ゲームバナーを、体験版や製品版、プラットフォームの変更ごとに差し替えたい時も、全ページ手動コピペをしておりました。

それが現在は「blogmenu.php」内の一か所を変更するだけで50ページ超を一括更新できるのでブログの更新がとても気楽になりました。

【関連記事】
ボクステブログ | ブラウザにおけるphpファイルの開き方


カテゴリ  Web開発