COMMEND

3つの“D”の視点から
夢あるライフスタイルづくりを提案

Vol.30 オリジナルテーマをWordPressテンプレートファイル化する（2）スタイルシートと画像へのテンプレートタグ

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

WordPressではCSS内を除き、基本的に各ファイルへのパスに、相対パスは使用できない。そこで登場するのが「テンプレートタグ」。WordPressならではの記述で、相対パスを変更してやればいいのである。まずはindex.phpを開いて、スタイルシートへのパスをPHPのコードで書き直してほしい。
　

スタイルシートへのテンプレートタグ

index.php

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/responsiveslides.css">
<link rel="stylesheet" href="css/meanmenu.css">

まずは上記の「style.css」の部分を…
　

index.php

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet" href="css/responsiveslides.css">
<link rel="stylesheet" href="css/meanmenu.css">

とする。続いて、他のスタイルシートのパスを変更。他のスタイルシートは「CSS」フォルダの中に格納されているので、「css/○○.css」の先頭に下記PHPを追加してやる。
　

index.php

<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">

要するに「style.css」以外のスタイルシートは、「./css/○○.css」というパスの先頭の部分の「.」を<?php echo get_template_directory_uri(); ?>に書き換えるということである。（当講座では先頭の「./」は省略している。）

テンプレートタグ

<?php echo get_template_directory_uri(); ?>
… テンプレートのあるディレクトリURIを取得。つまりテーマディレクトリ。
<?php echo get_stylesheet_uri(); ?>
… style.cssのURIを取得。

画像へのテンプレートタグ

「get_template_directory_uri」で「style.css」以外のスタイルシートのパスを取得した。画像へのパスも同じ方法で取得できる。スタイルシートと画像の全てのURLを取得した「index.php」は下記に記述。
　
WordPress

index.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>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.heightLine.js"></script>
<script type="text/javascript" src="js/responsiveslides.js"></script>
<script type="text/javascript" src="js/responsiveslides.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>
<script type="text/javascript" src="js/jquery.meanmenu.js"></script>

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

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

</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>

<!-- コンテンツエリア -->
	<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 -->

<!-- フッター -->
	<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>

これでスタイルシートと画像のURLを取得できた。ここで問題が一点。スライダーが動いていないことに気が付いただろうか。jQueryが機能していないのだ。次回はWordPressでjQueryを動かすためのコードを伝授する。
　