WordPress自作テーマメモ：PHPファイル分割

web-thumbnail-604x270
Update Web制作メモ >

前回作成したPHPファイルを使ったテーマ作成のメモです。

全ページ共通の部分（ヘッダーやフッター、サイドバー）を別ファイルとして分割する

前回、4つのファイル（index.php,single.php,page.php,archive.php）に書いたstyle.cssへのリンクを絶対パスに修正する、という作業をしました。

（この部分を）

<link rel="stylesheet" type="text/css" href="style.css">

（絶対パスに書き換える）

<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/ファイル一式を入れたフォルダ名/style.css">

こんなふうに、そのつど4つのファイルを開いて修正するのは大変です…。なので、ヘッダーやフッター・サイドバーなど、どのページにも共通する部分を分割（別のファイルとして保存）し、どのページでも同じヘッダー・フッター・サイドバーを表示させられるようにします。

なお、はじめはよくわかっていなかったのですが…WordPressの場合index.phpとstyle.cssさえあればテーマとして機能します。なのでヘッダーなどを分割するこの作業は必須というわけではないのですね。別にそのつど複数のファイルを修正したって良いわけです。

ですが、管理が複雑にならないよう、ヘッダー・フッター・サイドバーあたりは別ファイルとして分割するのがスタンダードみたいですね。

index.phpからヘッダー・サイドバー・フッターを分割する

index.phpからヘッダー部分を分割する

これからの分割の作業がちょっと楽になるよう、前回作成したindex.phpには、ヘッダー・メインコンテンツ（左カラム）・サイドバー（右カラム）・フッターの部分にそれぞれこんなふうにコメントを入れてあります。

  • 1行目 … <!–header–>
  • 24行目 … <!–index–>
  • 78行目 … <!–sidebar–>
  • 97行目 … <!–footer–>
  • 前回作成したindex.php：
    • <!--header-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
    <title>10251</title >
    <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/ThemeSample/style.css">
</head>
	
<body><!--あとで-->
<header class="site-header"><!--追加-->
	<h1 class="site-title"><a href="#">10251</a></h1><!--追加-->
	<nav>
		<div><!--あとで-->
		<ul>
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
		</ul>
		</div>
	</nav>
</header>

<!--index-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content"><!--追加-->
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.22</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.21</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<div class="nav-links">1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div><!--追加-->
	</div>

<!--sidebar-->
<aside class="sidebar"><!--追加-->
	<section><!--あとで-->
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>
</div>

<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>

</body>
</html>

このindex.phpからヘッダーにあたる部分を分割します。1行目の<!–header–>から、22行目（<!–index–>の直前）までをカットしてしまいます。

カットした部分（1～22行目の記述）をテキストエディタにコピーして、header.phpという名前で同じフォルダに保存します。

cut header1
  • index.phpからカットして作成したheader.php：
    • <!--header-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
    <title>10251</title >
    <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/ThemeSample/style.css">
</head>
	
<body><!--あとで-->
<header class="site-header"><!--追加-->
	<h1 class="site-title"><a href="#">10251</a></h1><!--追加-->
	<nav>
		<div><!--あとで-->
		<ul>
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
		</ul>
		</div>
	</nav>
</header>

残った部分はそのままindex.phpとして上書き保存します。

  • ヘッダー部分をカットして上書き保存したindex.php：
    • <!--index-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content"><!--追加-->
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.22</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.21</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<div class="nav-links">1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div><!--追加-->
	</div>

<!--sidebar-->
<aside class="sidebar"><!--追加-->
	<section><!--あとで-->
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>
</div>

<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>

</body>
</html>

この時点でWebサイトを表示させてみると、こうなります。

index php

最初のほうのコードをカットしてしまいましたので、サイトの上のほうも（ヘッダー）そっくり消えています。また、<head>～</head>部分もカットしてしまっていますので、スタイルシートも読み込まれていません。

header.phpを読み込むための「インクルードタグ」を書き込む

そこで、index.phpからヘッダーをカットした部分に、先ほど作成したheader.phpを表示させるため、WordPressのインクルードタグというものを書き加えます。

header.phpを読み込むためのインクルードタグ

<?php get_header(); ?>
テンプレートインクルードタグは、あるテンプレートファイル（例えば index.php）の中で、他のテンプレートファイル（例えば header.php）の HTML や PHP を実行するために使います。PHP にはこの用途の include() 文がありますが、以下の WordPress テンプレートタグを使えば、より簡単に特定のファイルを読み込めます。-WordPress Codex
get_header() タグは、現在のテーマディレクトリから header.php または header-{name}.php ファイルを読み込みます。-WordPress Codex
  • header.phpを読み込むためのインクルードタグを書き加えたindex.php：
    • <?php get_header(); ?>

<!--index-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content"><!--追加-->
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.22</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.21</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<div class="nav-links">1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div><!--追加-->
	</div>

<!--sidebar-->
<aside class="sidebar"><!--追加-->
	<section><!--あとで-->
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>
</div>

<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>

</body>
</html>

書き加えたら上書き保存して、Webサイトを開いてみます。

index php 2 600x264

ちゃんとヘッダー部分が表示されました。スタイルシートも効いています。元通りです。

こんなかんじで、サイドバーやフッターも分割していきます。

index.phpからサイドバー部分を分割する

<?php get_header(); ?>（ヘッダーを読み込むインクルードタグ）を書き加えたindex.phpから、こんどはサイドバーにあたる部分を分割します。

57行目の<!–sidebar–>から、74行目（<><!–footer–>の直前）までをカットします。

カットした部分（57行目～74行目）をテキストエディタにコピーして、sidebar.phpという名前で保存します。

cut sidebar 1
  • index.phpからカットして作成したsidebar.php：
    • <!--sidebar-->
<aside class="sidebar"><!--追加-->
	<section><!--あとで-->
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>
</div><!--★メインコンテンツとサイドバーを包んでいるdivの終了タグ。これはindex.phpに残しておいてもどっちでもいいかも。後述。-->

残った部分はそのままindex.phpとして上書き保存します。

  • ヘッダーとサイドバー部分をカットして上書き保存したindex.php：
    • <?php get_header(); ?>

<!--index-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content"><!--追加-->
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.22</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.21</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<div class="nav-links">1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div><!--追加-->
	</div>

<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>

</body>
</html>

サイトを表示させてみます。もちろんサイドバーは消えていますね。ですが先ほどとは違ってheader.phpが読み込まれていますので、スタイルシートはちゃんと効いています。

cut sidebar 600x254

sidebar.phpを読み込むための「インクルードタグ」を書き込む

サイドバーをカットした部分に、先ほど作成したsidebar.phpを表示させるため、インクルードタグを書き加えます。

sidebar.phpを読み込むためのインクルードタグ

<?php get_sidebar(); ?>
  • sidebar.phpを読み込むためのインクルードタグを書き加えたindex.php：
    • <?php get_header(); ?>

<!--index-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content"><!--追加-->
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.22</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.21</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<div class="nav-links">1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div><!--追加-->
	</div>

<?php get_sidebar(); ?>

<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>

</body>
</html>

index.phpからフッター部分を分割する

さいごに、<?php get_header(); ?>と<?php get_sidebar(); ?>を書き加えたindex.phpから、フッターにあたる部分を分割します。59行目の<!–footer–>から最後までをカットします。

カットした部分（59行目～最後）をテキストエディタにコピーして、footer.phpという名前で保存します。

cut footer 1
  • index.phpからカットして作成したfooter.php：
    • <!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>
 
</body>
</html>

残った部分はそのままindex.phpとして上書き保存します。

  • ヘッダーとサイドバーとフッター部分をカットして上書き保存したindex.php：
    • <?php get_header(); ?>
 
<!--index-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content"><!--追加-->
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>
 
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>
 
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.22</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>
 
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>
 
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.21</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>
 
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>
 
	<div class="nav-links">1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div><!--追加-->
	</div>
 
<?php get_sidebar(); ?>

footer.phpを読み込むための「インクルードタグ」を書き込む

カットした部分に先ほど作成したfooter.phpを表示させるため、インクルードタグを書き加えます。

footer.phpを読み込むためのインクルードタグ

<?php get_footer(); ?>
  • footer.phpを読み込むためのインクルードタグを書き加えたindex.php：
    • <?php get_header(); ?>
 
<!--index-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content"><!--追加-->
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>
 
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>
 
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.22</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>
 
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>
 
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.21</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>
 
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>
 
	<div class="nav-links">1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div><!--追加-->
	</div>
 
<?php get_sidebar(); ?>

<?php get_footer(); ?>

ここまでのまとめ

  • 前回作成したindex.php：
    • <!--header-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
    <title>10251</title >
    <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/ThemeSample/style.css">
</head>
	
<body><!--あとで-->
<header class="site-header"><!--追加-->
	<h1 class="site-title"><a href="#">10251</a></h1><!--追加-->
	<nav>
		<div><!--あとで-->
		<ul>
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
		</ul>
		</div>
	</nav>
</header>
 
<!--index-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content"><!--追加-->
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>
 
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>
 
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.22</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>
 
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>
 
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.21</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>
 
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>
 
	<div class="nav-links">1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div><!--追加-->
	</div>
 
<!--sidebar-->
<aside class="sidebar"><!--追加-->
	<section><!--あとで-->
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
 
	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
 
	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>
</div>
 
<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>
 
</body>
</html>
  • ヘッダー・サイドバー・フッター部分をカットしてインクルードタグを書き加えたindex.php：
    • <?php get_header(); ?>
 
<!--index-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content"><!--追加-->
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>
 
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>
 
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.22</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>
 
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>
 
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.21</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>
 
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>
 
	<div class="nav-links">1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div><!--追加-->
	</div>
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>
  • index.phpからカットして作成したheader.php：
    • <!--header-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
    <title>10251</title >
    <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/ThemeSample/style.css">
</head>
	
<body><!--あとで-->
<header class="site-header"><!--追加-->
	<h1 class="site-title"><a href="#">10251</a></h1><!--追加-->
	<nav>
		<div><!--あとで-->
		<ul>
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
		</ul>
		</div>
	</nav>
</header>
  • index.phpからカットして作成したsidebar.php：
    • <!--sidebar-->
<aside class="sidebar"><!--追加-->
	<section><!--あとで-->
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
 
	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
 
	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>
</div><!--★メインコンテンツとサイドバーを包んでいるdivの終了タグ。これはindex.phpに残しておいてもどっちでもいいかも。後述。-->
  • index.phpからカットして作成したfooter.php：
    • <!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>
 
</body>
</html>

single.phpの分割

同様に、single.phpからもヘッダー・サイドバー・フッター部分を削除して、インクルードタグを書き加えます。

  • 前回作成したsingle.php：
    • <!--header-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
    <title>10251</title >
    <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/ThemeSample/style.css">
</head>
	
<body><!--あとで-->
<header class="site-header"><!--追加-->
	<h1 class="site-title"><a href="#">10251</a></h1><!--追加-->
	<nav>
		<div><!--あとで-->
		<ul>
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
		</ul>
		</div>
	</nav>
</header>

<div class="bread"><a href="#">Home </a> > <a href="#">カテゴリー名とか</a> > 記事タイトル</div>
<!--single-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content"><!--追加-->
	<article><!--あとで-->
		<header>
			<h1 class="entry-title">記事タイトル</h1><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
			
			<ul class="related-top"><!--追加-->
				<h3>関連記事</h3>
				<li><a href="#">記事タイトル</a></li>
				<li><a href="#">記事タイトル</a></li>
				<li><a href="#">記事タイトル</a></li>
			</ul>
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>



<ul class="share"><!--シェアボタン-->
<li><a href="#">FB</a></li>
<li><a href="#">Twitterシェア</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">はてぶ</a></li>
<li><a href="#">Pocket</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Feedly</a></li>
</ul>

		
<ul class="related-bottom"><!--追加-->
	<h3>関連記事</h3>
	<li><a href="#"><img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png"><div class="title">記事タイトル</div></a></li>
	<li><a href="#"><img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png"><div class="title">記事タイトル</div></a></li>
	<li><a href="#"><img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png"><div class="title">記事タイトル</div></a></li>
	<li><a href="#"><img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png"><div class="title">記事タイトル</div></a></li>
</ul>

	<div class="single-nav-links clearfix"><!--追加-->
	<dl><!--追加-->
		<dt>前の記事</dt>
		<dd><a href="#">
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
			<div class="title">記事タイトル</div></a><!--追加-->
		</dd>
	</dl>

	<dl><!--追加-->
		<dt>次の記事</dt>
		<dd><a href="#">
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
			<div class="title">記事タイトル</div></a><!--追加-->
		</dd>
	</dl>
	</div>
</article>
	</div>
<!--sidebar-->
<aside class="sidebar"><!--追加-->
	<section><!--あとで-->
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>
</div>
<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>

</body>
</html>
  • ヘッダー・サイドバー・フッター部分を削除して、インクルードタグを書き加えたsingle.php：
    • <?php get_header(); ?>

<div class="bread"><a href="#">Home </a> > <a href="#">カテゴリー名とか</a> > 記事タイトル</div>
<!--single-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content"><!--追加-->
	<article><!--あとで-->
		<header>
			<h1 class="entry-title">記事タイトル</h1><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
			
			<ul class="related-top"><!--追加-->
				<h3>関連記事</h3>
				<li><a href="#">記事タイトル</a></li>
				<li><a href="#">記事タイトル</a></li>
				<li><a href="#">記事タイトル</a></li>
			</ul>
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>



<ul class="share"><!--シェアボタン-->
<li><a href="#">FB</a></li>
<li><a href="#">Twitterシェア</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">はてぶ</a></li>
<li><a href="#">Pocket</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Feedly</a></li>
</ul>

		
<ul class="related-bottom"><!--追加-->
	<h3>関連記事</h3>
	<li><a href="#"><img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png"><div class="title">記事タイトル</div></a></li>
	<li><a href="#"><img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png"><div class="title">記事タイトル</div></a></li>
	<li><a href="#"><img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png"><div class="title">記事タイトル</div></a></li>
	<li><a href="#"><img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png"><div class="title">記事タイトル</div></a></li>
</ul>

	<div class="single-nav-links clearfix"><!--追加-->
	<dl><!--追加-->
		<dt>前の記事</dt>
		<dd><a href="#">
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
			<div class="title">記事タイトル</div></a><!--追加-->
		</dd>
	</dl>

	<dl><!--追加-->
		<dt>次の記事</dt>
		<dd><a href="#">
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
			<div class="title">記事タイトル</div></a><!--追加-->
		</dd>
	</dl>
	</div>
</article>
	</div>

<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

page.phpの分割

  • 前回作成したpage.php：
    • <!--header-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
    <title>10251</title >
    <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/ThemeSample/style.css">
</head>
	
<body><!--あとで-->
<header class="site-header"><!--追加-->
	<h1 class="site-title"><a href="#">10251</a></h1><!--追加-->
	<nav>
		<div><!--あとで-->
		<ul>
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
		</ul>
		</div>
	</nav>
</header>

<div class="bread"><a href="#">Home </a> > ページタイトル</div><!--追加-->
<!--page-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content">
	<article><!--あとで-->
		<header>
			<h1 class="entry-title">ページタイトル</h1><!--追加-->
		</header>

		<p>お問い合わせフォームとか、</p>
		<p>サイトマップとか、</p>
		<p>プロフィールとかとかを載せるページ</p>
	</article>
	</div>

<!--sidebar-->
<aside class="sidebar"><!--追加-->
	<section><!--あとで-->
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>
</div>
<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>

</body>
</html>
  • ヘッダー・サイドバー・フッター部分を削除して、インクルードタグを書き加えたpage.php：
    • <?php get_header(); ?>

<div class="bread"><a href="#">Home </a> > ページタイトル</div><!--追加-->
<!--page-->
<div id="main" class="clearfix"><!--追加-->
	<div class="content">
	<article><!--あとで-->
		<header>
			<h1 class="entry-title">ページタイトル</h1><!--追加-->
		</header>

		<p>お問い合わせフォームとか、</p>
		<p>サイトマップとか、</p>
		<p>プロフィールとかとかを載せるページ</p>
	</article>
	</div>

<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

archive.phpの分割

  • 前回作成したarchive.php：
    • <!--header-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
    <title>10251</title >
    <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/ThemeSample/style.css">
</head>
	
<body><!--あとで-->
<header class="site-header"><!--追加-->
	<h1 class="site-title"><a href="#">10251</a></h1><!--追加-->
	<nav>
		<div><!--あとで-->
		<ul>
			<li><a href="#">メニュー1</a></li>
			<li><a href="#">メニュー2</a></li>
			<li><a href="#">メニュー3</a></li>
		</ul>
		</div>
	</nav>
</header>

<div class="bread"><a href="#">Home </a> > カテゴリー名とか</div><!--追加-->
<!--archive-->

<div id="main" class="clearfix"><!--追加-->
	<div class="content">
	<h2 class="archive-title">‘カテゴリー名’ の記事一覧</h2><!--追加-->
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.22</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.21</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<div class="nav-links">1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div><!--追加-->
	</div>


<!--sidebar-->
<aside class="sidebar"><!--追加-->
	<section><!--あとで-->
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>

	<section>
		<h3>ウィジェットタイトル</h3>
		<p>ウィジェットなかみ</p>
	</section>
</aside>
</div>
<!--footer-->
<footer>
<a href="#">コピーライト表記</a>
</footer>

</body>
</html>
  • ヘッダー・サイドバー・フッター部分を削除して、インクルードタグを書き加えたarchive.php：
    • <?php get_header(); ?>

<div class="bread"><a href="#">Home </a> > カテゴリー名とか</div><!--追加-->
<!--archive-->

<div id="main" class="clearfix"><!--追加-->
	<div class="content">
	<h2 class="archive-title">‘カテゴリー名’ の記事一覧</h2><!--追加-->
	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.23</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.22</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<article><!--あとで-->
		<header>
			<h2 class="entry-title"><a href="#">記事タイトル</a></h2><!--追加-->
			<div class="entry-meta"><!--追加-->
				<time>2013.10.21</time>
				<span class="categories-links"><a href="#">カテゴリー名とか</a></span><!--追加-->
				<span class="tags-links"><a href="#">タグ名とか</a></span><!--追加-->
			</div>
			<img src="http://localhost/wordpress/wp-content/themes/ThemeSample/dummy.png">
		</header>

		<p>テキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキスト</p>
		<a href="#">続きを読む</a><!--あとで-->
	</article>

	<div class="nav-links">1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div><!--追加-->
	</div>

<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

補足

ヘッダー・フッター・サイドバー以外のテーマテンプレートを読み込みたい場合

WordPressのデフォルトテーマ「Twenty Thirteen」などでは、ブログの記事にあたる部分をindex.phpやsingle.phpに直接書かず、別のcontent(-***).phpという名前のファイルとしており、それを読み込んでいます。

「Twenty Thirteen」テーマフォルダの中身（一部）

twenty thirteen themefolder 500x600

じょうずに説明できないので、図解してみます。今回作成しているテーマはこんな構成です。

phpsample 600x455
  • 全体がindex.php（赤）
  • インクルードタグでheader.phpを読み込む（緑）
  • インクルードタグでsidebar.phpを読み込む（青）
  • インクルードタグでfooter.phpを読み込む

デフォルトテーマなどの場合は、こんなふうになっています。

phpsample 2 600x455
  • 全体がindex.php（赤）
  • インクルードタグでheader.phpを読み込む（緑）
  • ブログの記事にあたる部分（content.php）を読み込む（ピンク）
  • インクルードタグでsidebar.phpを読み込む（青）
  • インクルードタグでfooter.phpを読み込む

ヘッダー・サイドバー・フッターを読み込むのと同じように、記事の中身にあたる部分（content.php）を読み込んでいるわけです。ですが、header.php、sidebar.php、footer.php以外のファイルを読み込む場合、先ほどのようなインクルードタグを使うことができません。

（こんなインクルードタグは無い！）

<?php get_content(); ?>

ヘッダー・サイドバー・フッター以外のテンプレートパーツを読み込む場合はこのように書きます。

<?php get_template_part(); ?>
テンプレートパーツ (ヘッダー、サイドバー、フッター以外) をテンプレートに読み込みます。これにより、テーマがコードのセクションを再利用すること、また子テーマが親テーマのセクションを置き換えることが容易になります。-WordPress Codex
テーマのその名前のテンプレートパーツをインクルードします。name が指定された場合は、特定の部分をインクルードします。テーマに{slug}.php ファイルが無い場合は、インクルードしません。 パラメータに関しては、”{slug}-{name}.php” を呼び出します。-WordPress Codex

こうするとindex.phpやsingle.phpのコードがすっきりしますし、例えば様々な投稿フォーマットを活用することを想定してテーマをつくる場合などは、管理がずいぶん楽になりそうですよね。

ファイルを分割する場所のこと

これは、現在のWordPressデフォルトテーマ「Twenty Thirteen」のheader.phpをとってもシンプルにしたものです。ちょっと見てみてください。

<!DOCTYPE html>
<head><!--省略--></head>

<body>
    <header id="masthead" class="site-header" role="banner">
    <!--省略-->
    </header>

	<div id="main" class="site-main">

サイトのヘッダーにあたる部分は7行目の</header>までなのですが…その次の、メインコンテンツとサイドバーを包む<div>もこのheader.phpに書かれています。

どうしてだろう？と考えたのですが、例えばこのメインコンテンツとサイドバーを包む<div>のクラス名を修正したいなーと思ったとき、デフォルトテーマのようにheader.phpに書いてあると、ここ一箇所だけの修正で済むんですよね。

今回作成しているテーマだと、4つのファイル（index,single,page,archive）を全部修正しなくてはなりません。せっかく管理が楽になるようファイルを分割しているわけですから、ほんとうはこういうところに気を配ったほうが良いかもしれないですね。

わたしはまだ慣れていないため、ヘッダーにあたる部分はheader.phpに、フッターにあたる部分はfooter.phpにと素直に書いてしまっていますが。

ファイルを分割する場所について、WordPress Codexでは以下のように説明されていました。

HTML 要素と CSS 参照は、あるテンプレートファイルで開始して別のテンプレートファイルで終了するというように、複数のテンプレートファイルにまたがっても構いません。例えば、html と body HTML 要素は、典型的には header.php で開始し、footer.php で終了します。ほとんどの WordPress テーマは、HTML div 要素を使用しますが、これは複数のファイルにまたがっても構いません。例えば、ページコンテンツの main div が header.php で開始し、index.php あるいは single.php で終了しても構いません。-WordPress Codex

ちなみにこの引用元ページ「テンプレート入門」にはテーマ作成の流れがとってもわかりやすくまとめられていますので、ぜひ読んでみてください。

今回は短いですが、ここまでです。

このあとの流れ

  • WordPress側の準備（タイトルを入れておいたり、記事やページをいくつか作成しておいたりする）
  • タイトルや記事、ページを表示させるため、HTMLの一部をPHPに書き換える
  • function.phpを作成する
  • CSSを微調整する
  • 本番環境にアップロードして、完成！