Vol.32 WordPressのindex.phpを分割する

2015/02/25 up カテゴリー : WEBの現場から！

WordPressではWebサイトのヘッダーやサイドバー、フッターなどを別々のファイルに分割して、それらをindex.phpなど一つのところに集めて（インクルードして）表示させている。こうすることにより、一つのファイルのソース量が分散されるので、管理が格段に楽になる。トップページと通常の下層ページとで、ヘッダーやサイドバー、フッターの構造が同じであれば、全く同じパーツテンプレートをインクルードすればいいので、非常に効率が上がる。下の図は、以前に作成した通常ページの画像である。一般的なWebサイトによくある構造なので説明しやすいので最初にもってきた。これはindex.phpではなくて、page.phpで使用していくものだが、WordPressのサイトを分割した図としては分かりやすいだろう。page.phpについては、もう少し先の回で…。
　

　
このようにパーツごとに切り離し、それぞれのファイルを作っていくのだ。htmlではあまり馴染みのない方法だが、phpでは良くある手段である。上の図では、index.php（実際はpage.php）のヘッダー、サイドバー、フッター部分をそれぞれ「header.php」「sidebar.php」「footer.php」のファイルに切り離している。これがWordPressのindex.phpを分割するときの考え方である。

トップページの構造が違う場合

しかし、昨今のWebサイトはビジュアル面でインパクトのあるサイトやデザイン性に優れたサイトが多い。特にトップページにおいては、見た目の差別化を計っている。当講座ではトップページと通常ページとの構造上の違いから、同じheader.phpを使用しない。header.phpにはヘッダーのデザインだけでなく、「head」内のスタイルシートやjQueryの読み込みなどを行っているため、トップページと下層ページとでは内容が全く違うものになっているのだ。なのでトップページ用にheader-top.phpという新しいファイルを作成してほしい。header-top.phpの「top」の部分は任意なので好きな名前をつけてもいい。また、トップページにはサイドバーがないので、sidebar.phpは不要である。そして、フッターはどちらも全く同じデザインなので、共通のfooter.phpを使用する。以上を踏まえ、トップページの構造を見てみよう。
　

　
上の図のように、index.phpにメイン部分を残して、ヘッダー部分をheader-top.phpに、フッター部分をfooter.phpというパーツに分けるのだ。まずは、header-top.phpとfooter.phpというファイルを新たに作ってほしい。そこにindex.phpから切り取った下記のソースをコピーしていく。

切り取ったパーツテンプレート

header-top.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/responsiveslides.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/meanmenu.css">
<title>MY BLOG</title>

<?php
wp_deregister_script( 'jquery' );
wp_deregister_script( 'jquery-ui-core' ); //jQuery UIを使わない場合は不要
 wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
wp_enqueue_script('jquery-ui-core','http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js', array('jquery'));
/* 以下、その他のjQueryプラグインの読み込み */
wp_enqueue_script('name1', get_template_directory_uri().'/js/jquery.heightLine.js',array('jquery'),'1.10.2');
wp_enqueue_script('name2', get_template_directory_uri().'/js/responsiveslides.js',array('jquery'),'1.10.2');
wp_enqueue_script('name3', get_template_directory_uri().'/js/responsiveslides.min.js',array('jquery'),'1.10.2');
wp_enqueue_script('name4', get_template_directory_uri().'/js/function.js',array('jquery'),'1.10.2');
wp_enqueue_script('name5', get_template_directory_uri().'/js/scrolltopcontrol.js',array('jquery'),'1.10.2');
wp_enqueue_script('name6', get_template_directory_uri().'/js/jquery.meanmenu.js',array('jquery'),'1.10.2');
?>

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->

<?php wp_head(); ?>
</head>

<body>
<div id="wrap"> 
<!-- ヘッダー -->
	<header> 
		<h1><img src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" alt="俺のブログ"></h1>
		<div id="back">
		<ul class="rslides">
			<li><img src="<?php echo get_template_directory_uri(); ?>/images/topimage.jpg" alt="俺のブログ"></li>
			<li><img src="<?php echo get_template_directory_uri(); ?>/images/topimage2.jpg" alt="内容は未定"></li>
			<li><img src="<?php echo get_template_directory_uri(); ?>/images/topimage3.jpg" alt="乞うご期待"></li>
		</ul>
		</div>
	</header>

<!-- グローバルナビゲーション -->
	<nav id="gnav">
		<ul class="cf">
			<li><a href="#">HOME</a></li>
			<li><a href="#">COLUMN</a></li>
			<li><a href="#">SNS</a></li>
			<li><a href="#">PROFILE</a></li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">CONTACT</a></li>
		</ul>
	</nav>

ここではグローバルナビ部分も含めてある。以下はフッター。
　

footer.php

<!-- フッター -->
	<footer>
		<img src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" width="100" height="17" alt="俺のブログ">
		<p>Copyright &copy; 2014 MY BLOG All Rights Reserved.</p>
	</footer>

</div><!-- #wrap end -->
</body>
</html>

パーツテンプレートを読み込むタグ

index.phpに記述するパーツ読み込みのテンプレートタグ

ヘッダー読み込み… <?php get_header(); ?>
サイドバー読み込み… <?php get_sidebar(); ?>
フッター読み込み… <?php get_footer(); ?>

上記のタグをindex.phpの切り離した部分に記述してやれば、それぞれのパーツを読み込むことができる。しかし先ほど、トップページ用に特別に作成したheader-top.phpには<?php get_header(); ?>のタグでは効果がない。このインクルードタグは、あくまでheader.phpを読み込むためのものタグなのだ。そこでheader-top.phpの任意に付けた名前「top」を、さきほどのタグ「get_header()」の( )内に入れてほしい。そうすれば見事にheader-top.phpを読み込んでくれるのだ。つまり…

トップページのヘッダー読み込み… <?php get_header(top); ?>

ということである。下記ソースはパーツを切り離し、各読み込みのテンプレートタグを記述してあるindex.phpである。ヘッダー部分とフッター部分が切り離されたところである、コードの最上部と最下部にタグが配置してあるので確認してもらいたい。
　

index.php

<?php get_header(top); ?>

<!-- コンテンツエリア -->
	<div id="contents"> 
		<section id="main" class="cf">
		<h2><img src="<?php echo get_template_directory_uri(); ?>/images/new.png" width="100" height="50" alt="works"></h2>
			<section class="news">
			<img src="<?php echo get_template_directory_uri(); ?>/images/new1.jpg" width="184" height="184" alt="work1">
			<h3>Article1</h3>
			<p>レスポンシブWebデザインとは、あらゆるデバイスに最適化したWebサイトを、一つのHTMLで…</p>
			</section>
			<section class="news">
			<img src="<?php echo get_template_directory_uri(); ?>/images/new2.jpg" width="184" height="184" alt="work1">
			<h3>Article2</h3>
			<p>実現できるシンプルな制作手法。CSSを調整することによって、画面サイズを基準にサイトの…</p>
			</section>
			 <section class="news">
			<img src="<?php echo get_template_directory_uri(); ?>/images/new3.jpg" width="184" height="184" alt="work1">
			<h3>Article3</h3>
			<p>切り替えが可能に。フルードイメージとは、ブラウザのウィンドウ幅に合わせて、画像のサイズを…</p>
			</section>
			<section class="news">
			<img src="<?php echo get_template_directory_uri(); ?>/images/new4.jpg" width="184" height="184" alt="work1">
			<h3>Article4</h3>
			<p>拡大・縮小する手法。CSSのみで実装。メディアクエリとは、「画像解像度」「ウィンドウの幅」…</p>
			</section>
			<section class="news">
			<img src="<?php echo get_template_directory_uri(); ?>/images/new5.jpg" width="184" height="184" alt="work1">
			<h3>Article5</h3>
			<p>「デバイスの向き」などを条件に、サイズに応じたCSSにスタイルを切り替えることができる。…</p>
			</section>
			<section class="news">
			<img src="<?php echo get_template_directory_uri(); ?>/images/new6.jpg" width="184" height="184" alt="work1">
			<h3>Article6</h3>
			<p>フルードグリッドとは、「グリッドデザイン」と、「リキッドレイアウト」を合わせたものである。…</p>
			</section>
		</section>
	</div><!-- #contents end -->

<?php get_footer(); ?>

通常ページで使用するpage.phpについては、もう少し先で詳しく説明する。次回は様々なテンプレートタグを追加して、サイトのトップページを編集していく。
　