Nobutake Dogen.com

WordPress オリジナルテーマ作り 第4話

第4話「indexの分割」

メニューを設置しようかと思います。
「Home」とか「About」とか。

そうなると、そろそろ何カラムで行くのか決めなければいけません。
普通は違います。コーディングする前にもっと言うならラフとか作る前に考えることです。わかってるよ、それくらい。
でも、普通ってなんだろうね。

今回は1カラムにします。はい、決めた。

インクルード

WordPressはindex.phpが分割されています。
ヘッダーやフッター、今回は無いですがサイドメニューなどを、別々のファイルにしておくことによって、各パーツごとに更新ができるようになります。
今回は、ヘッダー、メイン、フッターに分けます。

前回作った「index.php」が下のものになっているはずです。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="description" content="ディスクリプション">
	<meta name="keywords" content="キーワード">
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
	<title>タイトル</title>
</head>

<body>
	<div id="header">
		<h1>
			<?php bloginfo('name'); ?>
			<!-- サイトのタイトル -->
		</h1>
		<p class="catch_copy">
			<?php bloginfo('description'); ?>
			<!-- キャッチフレーズ -->
		</p>
	</div>

	<div id="container">
		<?php if(have_posts()): while(have_posts()): the_post(); ?>
		<!-- ループ開始 -->
		<div class="post">
			<h2>
				<?php the_title(); ?>
				<!-- 記事タイトルを表示 -->
			</h2>
			<div class="post_info">
				<span class="post_date">
					<?php echo get_the_date(); ?>
					<!-- 投稿日時を表示 -->
				</span>
				<span class="post_category">
					<?php the_category(', '); ?>
					<!-- カテゴリーを表示 -->
				</span>
			</div>
			<?php the_content(続きを読む); ?>
			<!-- 記事本文を表示 -->
		</div>
		<?php endwhile; endif; ?>
		<!-- ループ終了 -->
	</div>
	<div id="footer">
		<p class="copy_right">©コピーライトマン</p>
	</div>
</body>

</html>

この1番上から22行目までをコピーして、「header.php」として新しいphpファイルを作ってください。

header.php

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="description" content="ディスクリプション">
	<meta name="keywords" content="キーワード">
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
	<title>タイトル</title>
</head>

<body>
	<div id="header">
		<h1>
			<?php bloginfo('name'); ?>
			<!-- サイトのタイトル -->
		</h1>
		<p class="catch_copy">
			<?php bloginfo('description'); ?>
			<!-- キャッチフレーズ -->
		</p>
	</div>

そして同じように「index.php」の48〜53行目までを「footer.php」としてください。

footer.php

	<div id="footer">
		<p class="copy_right">©コピーライトマン</p>
	</div>
</body>

</html>

と、このように、一個のファイルの中で開始タグと終了タグの数がおかしくなっていますが、気にしないでください。僕は最初これが気持ち悪くて不安でしょうがなかったんですけど、そういう人他にいません?
あとでindex.phpで「header.php」と「footer.php」を読み込めば辻褄合います!

index.phpでの読み込み

先ほど「header.php」と「footer.php」へ持っていった1〜22行目と48〜53行目を削除して
一番上に
<?php get_header(); ?>
と入れ、一番下に
<?php get_footer(); ?>
と入れてください。
すると、下のような感じになりますね。

<?php get_header(); ?>

	<div id="container">
		<?php if(have_posts()): while(have_posts()): the_post(); ?>
		<!-- ループ開始 -->
		<div class="post">
			<h2>
				<?php the_title(); ?>
				<!-- 記事タイトルを表示 -->
			</h2>
			<div class="post_info">
				<span class="post_date">
					<?php echo get_the_date(); ?>
					<!-- 投稿日時を表示 -->
				</span>
				<span class="post_category">
					<?php the_category(', '); ?>
					<!-- カテゴリーを表示 -->
				</span>
			</div>
			<?php the_content(続きを読む); ?>
			<!-- 記事本文を表示 -->
		</div>
		<?php endwhile; endif; ?>
		<!-- ループ終了 -->
	</div>
	
<?php get_footer(); ?>

ここまで出来たらサイトの確認してみてください。
何にも変わってないはずです。
もし変わっていたらどこかミスがあります。
変わっていないのが正解です。

今回はがんばったのに何も見た目が変わらないところまで。
次回メニューを設置します。
だんだんと自信が無くなっていきます。

目次

スポンサーリンク

Web Design | 2017年1月12日