1. /
  2. /
  3. [WordPress] 静的HTMLサイトを使ったテンプレートテーマ作成～共通部分の読み込み～
  • 公開日：
  • 更新日：

[WordPress] 静的HTMLサイトを使ったテンプレートテーマ作成～共通部分の読み込み～

  HTML, WordPress , ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
wordpress　theme　テーマ　作成　PHP

WordPressはヘッダー・サイドバー・フッターなどをパーツ化して読み込んで1つのページとして構成してから表示しています。
そこで今回は、前回ご紹介した「静的HTMLサイトの共通部分をPHPによるパーツ化する方法」の発展版として、WordPressのテンプレートテーマ作成の初期段階である、静的HTMLサイトの共通部分をパーツ化して読み込む方法をご紹介したいと思います。

既存の静的HTMLファイル

まず、WordPressでテンプレートテーマを制作する静的HTMLサイトをコーディングします。
下記に、今回使用する静的HTMLファイルを示したいと思います。

<!doctype html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>無題ドキュメント</title>
<link rel="apple-touch-icon" href="./images/touch-icon.png" />
<link rel="shortcut icon" href="./images/favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="./style.css" />
</head>

<body class="home">
<div id="wrap">
	<header>
		<h1><a href="#"><img src="./images/logo.png" alt="ロゴ" /></a></h1>
	</header>
	<!--グローバルナビゲーション部分-->
	<nav>
		<ul id="menu">
			<li><a href="index.html">TOP</a></li>
			<li><a href="about.html">ABOUT</a></li>
			<li><a href="company.html">COMPANY</a></li>
			<li><a href="contact.html">CONTACT</a></li>
		</ul>
	</nav>
	<!--グローバルナビゲーション部分-->
	
	<article>
		<h2>コンテンツ部分</h2>
		<p>テキスト・テキスト・テキスト・テキスト・テキスト</p>
	</article>
	<section id="sidebar">
		<aside>
			<ul id="side-menu">
				<li><a href="index.html">TOP</a></li>
				<li><a href="about.html">ABOUT</a></li>
				<li><a href="company.html">COMPANY</a></li>
				<li><a href="contact.html">CONTACT</a></li>
			</ul>
		</aside>
	</section>
	<!-- #sidebar end  -->
	<div id="footer-container">
		<footer>
			<p id="copyright"><small>Copyright &copy; 2015 <a href="#">BUBURIN</a> All rights reserved.</small></p>
		</footer>
	</div>
	<!-- #footer-container end -->
</div>
<!-- #wrap end -->
</body>
</html>

静的HTMLファイルの分割

次に既存の静的HTMLファイルを分割して、下記のようにphpの別ファイルとして保存する。

<!doctype html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>無題ドキュメント</title>
<link rel="apple-touch-icon" href="./images/touch-icon.png" />
<link rel="shortcut icon" href="./images/favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="./style.css" />
</head>

<body class="home">
<div id="wrap">
	<header>
		<h1><a href="#"><img src="./images/logo.png" alt="ロゴ" /></a></h1>
	</header>
	<!--グローバルナビゲーション部分-->
	<nav>
		<ul id="menu">
			<li><a href="index.html">TOP</a></li>
			<li><a href="about.html">ABOUT</a></li>
			<li><a href="company.html">COMPANY</a></li>
			<li><a href="contact.html">CONTACT</a></li>
		</ul>
	</nav>
	<!--グローバルナビゲーション部分-->

<article>
	<h2>コンテンツ部分</h2>
	<p>テキスト・テキスト・テキスト・テキスト・テキスト</p>
</article>

	<section id="sidebar">
		<aside>
			<ul id="side-menu">
				<li><a href="index.html">TOP</a></li>
				<li><a href="about.html">ABOUT</a></li>
				<li><a href="company.html">COMPANY</a></li>
				<li><a href="contact.html">CONTACT</a></li>
			</ul>
		</aside>
	</section>
	<!-- #sidebar end  -->

	<div id="footer-container">
		<footer>
			<p id="copyright"><small>Copyright &copy; 2015 <a href="#">BUBURIN</a> All rights reserved.</small></p>
		</footer>
	</div>
	<!-- #footer-container end -->
</div>
<!-- #wrap end -->
</body>
</html>

必須テンプレートタグ

「WordPressの管理画面・ダッシュボードとサイト表示を切り替えるツールバーの表示」、「メタタグの出力」、「Javascriptライブラリの読み込み」、「フックポイントによるプラグイン動作の為」などテーマ作成には必ず記述すべきテンプレートタグです。

<?php wp_head(); ?>

上記のコードを‹/head›の直前に記述する。

<?php wp_footer(); ?>

上記のコードを‹/body›の直前に記述する。

パスに関するテンプレートタグ

WordPressのテンプレートタグを用いて、パスやURLやスタイルシートなどの出力する。

<?php bloginfo('stylesheet_url'); ?>

上記のコードで、現在有効化されているテーマのディレクトリ内のスタイルシート「style.css」までのURLを自動的に出力する。

<?php bloginfo('template_url'); ?>

上記のコードで、現在有効化されているテーマのディレクトリのURLを出力する。

<?php echo home_url('/'); ?>

上記のコードで、トップページへのリンクを出力する。

その他のテンプレートタグ

WordPressのテンプレートタグを用いて、サイト名やキャッチフレーズなどの出力する。

<?php bloginfo('name'); ?>

上記のコードで、サイト名を出力する。

<?php bloginfo('description'); ?>

上記のコードで、サイトのキャッチフレーズ・descriptionを出力する。

テンプレートタグによるPHPファイルの修正

次に既存の静的HTMLファイルを修正して、下記のようにphpの別ファイルとして保存する。

<!doctype html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?php bloginfo('name'); ?></title>
<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/images/touch-icon.png" />
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php wp_head(); ?>
</head>

<body class="home">
<div id="wrap">
	<header>
		<h1><a href="<?php echo home_url('/'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" /></a></h1>
	</header>
	<!--グローバルナビゲーション部分-->
	<nav>
		<ul id="menu">
			<li><a href="index.html">TOP</a></li>
			<li><a href="about.html">ABOUT</a></li>
			<li><a href="company.html">COMPANY</a></li>
			<li><a href="contact.html">CONTACT</a></li>
		</ul>
	</nav>
	<!--グローバルナビゲーション部分-->

	<div id="footer-container">
		<footer>
			<p id="copyright"><small>Copyright &copy; 2015 <a href="<?php echo home_url('/'); ?>">BUBURIN</a> All rights reserved.</small></p>
		</footer>
	</div>
	<!-- #footer-container end -->
</div>
<!-- #wrap end -->
<?php wp_footer(); ?>
</body>
</html>

PHPファイルの読み込み

<?php get_header(); ?>

上記のテンプレートタグを用いたコードで、分割したPHPファイルを読み込みます。

<?php get_sidebar('top'); ?>

上記のようにテンプレートタグに引数を持たせて読み込み、ファイル名を一部変更して分割したPHPファイルを読み込みます。

分割ファイルの読み込み

次に分割したPHPファイルを下記のように読み込みます。これにより、WordPress上にサイト・テーマを構築することができます。

<?php get_header(); ?>
<article>
	<h2>コンテンツ部分</h2>
	<p>テキスト・テキスト・テキスト・テキスト・テキスト</p>
</article>
<?php get_sidebar('top'); ?>
<?php get_footer(); ?>

参考サイト

参考にさせていただいたサイトを下記に示したいと思います。

SNSでもご購読できます。

ぶぶりん

コメントを残す

*