●目次
WordPressオリジナルテーマ開発において、HTMLをPHPに書き換える作業は、動的なコンテンツ管理を実現するための重要なステップです。
本記事では、WordPressテンプレートタグを使って静的なHTMLファイルを動的にする方法を解説します。
特に、the_title()やbloginfo()などのテンプレートタグを活用して、ページタイトルやサイト情報を動的に表示する手法に焦点を当てます。
WordPressのテンプレートタグに書き換え編（HTML→PHP）
まず、WordPressテーマでは通常のHTMLファイルをPHPに置き換えます。
これにより、投稿タイトルやサイト名などの情報をWordPressの管理画面から簡単に編集できるようになります。
例えば、以下のようなHTMLコードがあるとします。
変更前のHTMLコード
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML&CSS+JS</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./asset/css/reset.css">
<link rel="stylesheet" href="./asset/css/layout.css">
<link rel="stylesheet" href="./asset/css/component.css">
</head>
<body>
<header class="header">
<a href="/" class="headerLogo">
HTML&CSS+JS
</a>
<nav class="headerNav">
<ul>
<li>
<a href="/">ホーム</a>
</li>
<li>
<a href="/service">サービス内容</a>
</li>
<li>
<a href="/news">新着ニュース</a>
</li>
<li>
<a href="/contact">お問い合わせ</a>
</li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="cover--top">
<div class="coverBox">
<h1 class="heading01 top">
HTML&CSS+JavaScript
</h1>
</div>
</div>
<div class="container col_1_2">
<!-- 省略 -->
</div>
</div>
<footer class="footer">
<div class="footerBar">
<p>
<small>HTML&CSS+JavaScript © 2021</small>
</p>
</div>
</footer>
<script src="./asset/js/layout.js"></script>
</body>
</html>
WordPress用に書き換えたコード
この書き換えによって、ページタイトルはWordPressの投稿タイトルに自動的に反映され、サイト名も動的に表示されるようになります。
PHP（index.php）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php the_title(); ?> | <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/asset/css/reset.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/asset/css/layout.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/asset/css/component.css">
</head>
<body>
<header class="header">
<a href="<?php echo home_url(); ?>/" class="headerLogo">
HTML&CSS+JS
</a>
<nav class="headerNav">
<ul>
<li>
<a href="<?php echo home_url(); ?>/">ホーム</a>
</li>
<li>
<a href="<?php echo home_url(); ?>/service">サービス内容</a>
</li>
<li>
<a href="<?php echo home_url(); ?>/news">新着ニュース</a>
</li>
<li>
<a href="<?php echo home_url(); ?>/contact">お問い合わせ</a>
</li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="cover--top">
<div class="coverBox">
<h1 class="heading01 top">
<?php bloginfo('name'); ?>
</h1>
</div>
</div>
<div class="container col_1_2">
<!-- 省略 -->
</div>
</div>
<footer class="footer">
<div class="footerBar">
<p>
<small><?php bloginfo('name'); ?> © 2021</small>
</p>
</div>
</footer>
<script src="<?php echo get_template_directory_uri(); ?>/asset/js/layout.js"></script>
</body>
</html>WordPress化で使用したテンプレートタグ
以下は、今回のWordPress化で使用したテンプレートタグの一覧です。さらに多くのテンプレートタグについて知りたい方は、こちらの記事「WordPressオリジナルテーマ開発【よく使うテンプレートタグ編】」をご参照ください。
<?php bloginfo(); ?>
bloginfo()は、サイトに関する基本的な情報を取得し表示するテンプレートタグです。引数を指定することで、表示する内容をカスタマイズできます。
よく使われる引数は次の通りです：
'name': サイトの名前（タイトル）を表示します。
PHP
<title><?php bloginfo('name'); ?></title>'description': サイトのキャッチフレーズ（サイトの説明）を表示します。
PHP
<p><?php bloginfo('description'); ?></p><?php title(); ?>
the_title()は、ページや投稿のタイトルを表示するテンプレートタグです。
動的なタイトルの表示が可能になります。
PHP
<h1><?php the_title(); ?></h1><?php echo home_url(); ?>
home_url()は、サイトのトップページ（ホームページ）のURLを取得して表示するためのテンプレートタグです。
WordPressのインストールディレクトリとは関係なく、サイトの公開URLを取得します。
例えば、https://example.comがサイトのホームページのURLであれば、この関数はそのURLを返します。
PHP
<a href="<?php echo home_url(); ?>">ホームへ戻る</a>この例では、「ホームへ戻る」というリンクが、サイトのトップページ（ホームページ）へのリンクとなります。
ディレクトリ構成の確認
ディレクトリ構成
wp_site_theme/
│
├── asset/
│ ├── css/
│ │ ├── reset.css
│ │ ├── layout.css
│ │ └── component.css
│ ├── js/
│ │ ├── layout.js
│ │ └── component.js
│ └── images/
│
├── *index.php
├── *style.css
└── screenshot.pngまとめ
今回の記事では、WordPressテーマ開発の初歩的な部分として、HTMLファイルの構造を整える手順を紹介しました。