[WordPress] 実際に静的サイトからテンプレートテーマを作成

  WordPress ,

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

今回は、前回ご紹介した「[WordPress] 静的HTMLサイトを使ったテンプレートテーマ作成~共通部分の読み込み~」を実際に運営しているチュートリアルサイトをヘッダー・サイドバー・フッターなどのパーツ化して読み込んで1つのページとして構成してから表示することで、WordPressのテンプレートテーマ作成する方法をご紹介したいと思います。

既存の静的HTMLファイル

チュートリアルサイト 静的サイト WordPress テンプレートテーマ 作成
まず、WordPressでテンプレートテーマを制作するために、静的HTMLサイトをコーディングするか用意します。
今回は運営しているチュートリアルサイトを実際に使用して、テンプレートテーマを作成していきたいと思います。そこで下記に、今回使用する静的HTMLファイルを示したいと思います。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="ja,en" />
<meta http-equiv="Pragma" content="no-cache" />
<title>ぶぶりんのチュートリアルサイト</title>
<meta name="description" content="ぶぶりんのチュートリアルサイトのトップページをHTML5にて再構築したものです。ソースを見ていただくと、良いと思います。" />
<meta name="keywords" content="ぶぶりん,チュートリアルサイト,HTML5" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="webclip.png" />
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" />
</head>

<body>
<div id="wrapper"><!--wrapper-->
	<div class="box1">
		<header class="site">
			<h1>ぶぶりんのチュートリアルサイト</h1>
		</header>
	</div>
	<div class="box2">
		<div class="box2-inner">
			<div id="menubtn">
				<p><i class="fa fa-bars"></i>&nbsp;MENU</p>
			</div>
			<nav class="menu">
				<ul class="clearfix">
					<li><a href="index.html">トップ</a></li>
					<li><a href="about.html">掲載内容</a></li>
					<li><a href="photoshop.html">Photoshop</a></li>
					<li><a href="illustrator.html">Illustrator</a></li>
					<li><a href="html-css.html">HP作成</a></li>
					<li><a href="profile.html">プロフィール</a></li>
					<li><a href="contact.html">お問い合わせ</a></li>
					<li><a href="sitemap.html">サイトマップ</a></li>
				</ul>
			</nav>
		</div>
	</div>
	<div id="bxslider">
		<ul class="bxslider">
			<!--bxslider-->
			<li><img src="img/photo1a.gif" width="852" height="400" alt="スクリーン画像1" /></li>
			<li><img src="img/photo2a.gif" width="852" height="400" alt="スクリーン画像2" /></li>
			<li><img src="img/photo3a.gif" width="852" height="400" alt="スクリーン画像3" /></li>
			<li><img src="img/photo4a.gif" width="852" height="400" alt="スクリーン画像4" /></li>
			<li><img src="img/photo5a.gif" width="852" height="400" alt="スクリーン画像5" /></li>
		</ul>
		<!--bxslider--> 
	</div>
	<div class="boxA clearfix">
		<div class="box3">
			<article class="report">
				<div id="new"><!--new-->
					<h2>新着項目</h2>
					<div class="reportcat">
						<ul class="clearfix">
							<li><a href="html5.html">HTML5</a></li>
						</ul>
					</div>
					<div class="reportinfo">
						<time datetime="2015-03-04"><i class="fa fa-clock-o"></i> 2015年03月04日 </time>
					</div>
					<h3>HTML5</h3>
					<img src="img/index.jpg" alt="HTML5サイト" width="325" height="425" />
					<p>トップページのみを<strong>HTML5</strong>で再構築してみました。</p>
					<p class="btn"><a href="html5.html">HTML5</a></p>
				</div>
				<!--new-->
				<div class="inner"><!--inner-->
					<div class="textBox">
						<div class="time">
							<time datetime="2015-03-04"><i class="fa fa-clock-o"></i>2015年03月04日</time><span>新着!!</span>
						</div>
						<div class="text">
							<p>トップページのみを<a href="html5.html">HTML5</a>で構築しました。</p>
						</div>
					</div>
					<div class="textBox">
						<div class="time">
							<time datetime="2015-03-02"><i class="fa fa-clock-o"></i>2015年03月02日</time>
						</div>
						<div class="text">
							<p><a href="http://buburinweb.html.xdomain.jp/carwebsite/">制作課題サイト</a>をメンテナンスしました。</p>
						</div>
					</div>
					<div class="textBox">
						<div class="time">
							<time datetime="2015-02-20"><i class="fa fa-clock-o"></i>2015年02月20日</time>
						</div>
						<div class="text">
							<p>ポートフォリオに<a href="http://buburinweb.html.xdomain.jp/portfolio/assignment/">制作課題</a>を追加しました。</p>
						</div>
					</div>
					<div class="textBox">
						<div class="time">
							<time datetime="2015-02-10"><i class="fa fa-clock-o"></i>2015年02月10日</time>
						</div>
						<div class="text">
							<p>ホームページのデザインをリニューアルしました。</p>
						</div>
					</div>
				</div>
				<!--inner--> 
			</article>
			<aside class="tutorial">
				<h2>チュートリアル</h2>
				<ul class="clearfix">
					<li><a href="favicon.html" class="clearfix"><img src="img/webclip150.gif" width="150" height="150" alt="ウェブクリップアイコン" /> <span>ファビコン・ウェブクリップアイコン</span> </a></li>
					<li><a href="hack.html" class="clearfix"><img src="img/csshack150.gif" width="150" height="150" alt="CSSハック" /> <span>CSSハック</span> </a></li>
					<li><a href="iron-man.html" class="clearfix"><img src="img/iron-man150.gif" width="150" height="150" alt="アイアンマン" /> <span>アイアンマンを作るチュートリアル</span> </a></li>
					<li><a href="spider-man.html" class="clearfix"><img src="img/spider-man150.gif" width="150" height="150" alt="スパイダーマン" /> <span>スパイダーマンを作るチュートリアル</span> </a></li>
				</ul>
			</aside>
		</div>
		<div class="box4 clearfix">
			<div class="box4-1">
				<aside class="sidemenu">
					<h2>サブメニュー</h2>
					<ul>
						<li><a href="index.html"><i class="fa fa-caret-right"></i>トップページ</a></li>
						<li><a href="about.html"><i class="fa fa-caret-right"></i>掲載内容</a></li>
						<li><a href="photoshop.html"><i class="fa fa-caret-right"></i>Photoshop</a></li>
						<li><a href="illustrator.html"><i class="fa fa-caret-right"></i>Illustrator</a></li>
						<li><a href="html-css.html"><i class="fa fa-caret-right"></i>WEB制作</a></li>
						<li><a href="profile.html"><i class="fa fa-caret-right"></i>プロフィール</a></li>
						<li><a href="http://buburinweb.wp.xdomain.jp/" target="_blank"><i class="fa fa-caret-right"></i>ブログ</a></li>
						<li><a href="portfolio/index.html" target="_blank"><i class="fa fa-caret-right"></i>ポートフォリオ</a></li>
						<li><a href="contact.html"><i class="fa fa-caret-right"></i>お問い合わせ</a></li>
						<li><a href="sitemap.html"><i class="fa fa-caret-right"></i>サイトマップ</a></li>
					</ul>
				</aside>
				<aside class="recommendation">
					<h2>おすすめサイト</h2>
					<ul>
						<li><a href="http://webdesignrecipes.com/" target="_blank"><i class="fa fa-external-link"></i>デザインレシピ</a></li>
						<li><a href="http://www.webcreatorbox.com/" target="_blank"><i class="fa fa-external-link"></i>webクリエイターボックス</a></li>
						<li><a href="http://lopan.jp/" target="_blank"><i class="fa fa-external-link"></i>Lopan.jp</a></li>
						<li><a href="http://pro.muryoweb.net/" target="_blank"><i class="fa fa-external-link"></i>プロ並みのホームページを作る方法!</a></li>
						<li><a href="http://endoutakae.com/" target="_blank"><i class="fa fa-external-link"></i>Weblog Endoutakae</a></li>
					</ul>
				</aside>
			</div>
			<div class="box4-2">
				<aside class="diary">
					<h2><i class="fa fa-heart"></i>人気のチュートリアル</h2>
					<ul>
						<li><a href="favicon.html" class="clearfix"><img src="img/webclip60.gif" width="60" height="60" alt="ウェブクリップアイコン" /> ファビコン・ウェブクリップアイコン<span>HTML</span> </a></li>
						<li><a href="hack.html" class="clearfix"><img src="img/csshack60.gif" width="60" height="60" alt="CSSハック" /> CSSハック<span>CSS</span> </a></li>
						<li><a href="iron-man.html" class="clearfix"><img src="img/iron-man60.gif" width="60" height="60" alt="アイアンマン" /> Photoshopで作るアイアンマン<span>Photoshop</span> </a></li>
						<li><a href="spider-man.html" class="clearfix"><img src="img/spider-man60.gif" width="60" height="60" alt="スパイダーマン" /> Photoshopで作るスパイダーマン<span>Photoshop</span> </a></li>
					</ul>
				</aside>
				<!-- 代替コンテンツの表示 -->
				<div id="noFlash"> <a href="https://store.line.me/stickershop/product/1044967/ja"><img src="linebaner.jpg" alt="代替画像" width="200" height="150" /></a> </div>
			</div>
		</div>
	</div>
	<div class="box5">
		<footer class="box5-inner">
			<div id="pageTop"><!--pageTop--> 
				<a href="#wrapper">ページ上部へ</a> </div>
			<!--pageTop-->
			<p><small> &copy;&nbsp;2014-2015 ぶぶりん. </small></p>
		</footer>
	</div>
</div>
<!--wrapper--> 
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.bxslider.js"></script> 
<script type="text/javascript" src="js/swfobject.js"></script> 
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--javascriptSt--> 
<script type="text/javascript">
        $(document).ready(function(){
            var obj = $('.bxslider').bxSlider({
				mode: 'vertical',
				speed      : 800, //エフェクトのスピード
            	auto: true,//自動再生有効
				slideWidth:852, //スライドショーの幅
				pause:5000,//表示間隔
				onSlideAfter: function () { obj.startAuto(); }//自動的に再開
            });
        });
</script> 
<!-- swfの表示 --> 
<script type="text/javascript">
var flashvars = { };
 var params = {
 loop: "false"
};
var attributes = { };
  swfobject.embedSWF(
    "linebaner.swf", //swfファイルへのパス
    "noFlash",//代替コンテンツを表示するオブジェクトのid
    "200",//表示されるswfの幅
    "150",//表示されるswfの高さ
    "9.0.0",//flashPlayerのバージョン
	"expressInstall.swf",//これを追加します。
	flashvars, params, attributes
  );
</script> 
<script type="text/javascript">
$(function(){
	$('#pageTop a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>
<script type="text/javascript">
$(function(){
	$('#menubtn').click(function(){
		$("nav").slideToggle();
	});
});
</script>
</body>
</html>

静的HTMLファイルの分割

チュートリアルサイト 静的サイト WordPress テンプレートテーマ 作成 PHP パーツ化 共通部分
次に静的HTMLファイルを上の画像のように「header.php・index.php・sidebar.php・footer.php」の4つに分割して、下記のようにphpの別ファイルとして保存します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="ja,en" />
<meta http-equiv="Pragma" content="no-cache" />
<title>ぶぶりんのチュートリアルサイト</title>
<meta name="description" content="ぶぶりんのチュートリアルサイトのトップページをHTML5にて再構築したものです。ソースを見ていただくと、良いと思います。" />
<meta name="keywords" content="ぶぶりん,チュートリアルサイト,HTML5" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="webclip.png" />
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" />
</head>

<body>
<div id="wrapper"><!--wrapper-->
	<div class="box1">
		<header class="site">
			<h1>ぶぶりんのチュートリアルサイト</h1>
		</header>
	</div>
	<div class="box2">
		<div class="box2-inner">
			<div id="menubtn">
				<p><i class="fa fa-bars"></i>&nbsp;MENU</p>
			</div>
			<nav class="menu">
				<ul class="clearfix">
					<li><a href="index.html">トップ</a></li>
					<li><a href="about.html">掲載内容</a></li>
					<li><a href="photoshop.html">Photoshop</a></li>
					<li><a href="illustrator.html">Illustrator</a></li>
					<li><a href="html-css.html">HP作成</a></li>
					<li><a href="profile.html">プロフィール</a></li>
					<li><a href="contact.html">お問い合わせ</a></li>
					<li><a href="sitemap.html">サイトマップ</a></li>
				</ul>
			</nav>
		</div>
	</div>
	<div id="bxslider">
		<ul class="bxslider">
			<!--bxslider-->
			<li><img src="img/photo1a.gif" width="852" height="400" alt="スクリーン画像1" /></li>
			<li><img src="img/photo2a.gif" width="852" height="400" alt="スクリーン画像2" /></li>
			<li><img src="img/photo3a.gif" width="852" height="400" alt="スクリーン画像3" /></li>
			<li><img src="img/photo4a.gif" width="852" height="400" alt="スクリーン画像4" /></li>
			<li><img src="img/photo5a.gif" width="852" height="400" alt="スクリーン画像5" /></li>
		</ul>
		<!--bxslider--> 
	</div>
	<div class="boxA clearfix">
		<div class="box3">
			<article class="report">
				<div id="new"><!--new-->
					<h2>新着項目</h2>
					<div class="reportcat">
						<ul class="clearfix">
							<li><a href="html5.html">HTML5</a></li>
						</ul>
					</div>
					<div class="reportinfo">
						<time datetime="2015-03-04"><i class="fa fa-clock-o"></i> 2015年03月04日 </time>
					</div>
					<h3>HTML5</h3>
					<img src="img/index.jpg" alt="HTML5サイト" width="325" height="425" />
					<p>トップページのみを<strong>HTML5</strong>で再構築してみました。</p>
					<p class="btn"><a href="html5.html">HTML5</a></p>
				</div>
				<!--new-->
				<div class="inner"><!--inner-->
					<div class="textBox">
						<div class="time">
							<time datetime="2015-03-04"><i class="fa fa-clock-o"></i>2015年03月04日</time><span>新着!!</span>
						</div>
						<div class="text">
							<p>トップページのみを<a href="html5.html">HTML5</a>で構築しました。</p>
						</div>
					</div>
					<div class="textBox">
						<div class="time">
							<time datetime="2015-03-02"><i class="fa fa-clock-o"></i>2015年03月02日</time>
						</div>
						<div class="text">
							<p><a href="http://buburinweb.html.xdomain.jp/carwebsite/">制作課題サイト</a>をメンテナンスしました。</p>
						</div>
					</div>
					<div class="textBox">
						<div class="time">
							<time datetime="2015-02-20"><i class="fa fa-clock-o"></i>2015年02月20日</time>
						</div>
						<div class="text">
							<p>ポートフォリオに<a href="http://buburinweb.html.xdomain.jp/portfolio/assignment/">制作課題</a>を追加しました。</p>
						</div>
					</div>
					<div class="textBox">
						<div class="time">
							<time datetime="2015-02-10"><i class="fa fa-clock-o"></i>2015年02月10日</time>
						</div>
						<div class="text">
							<p>ホームページのデザインをリニューアルしました。</p>
						</div>
					</div>
				</div>
				<!--inner--> 
			</article>
			<aside class="tutorial">
				<h2>チュートリアル</h2>
				<ul class="clearfix">
					<li><a href="favicon.html" class="clearfix"><img src="img/webclip150.gif" width="150" height="150" alt="ウェブクリップアイコン" /> <span>ファビコン・ウェブクリップアイコン</span> </a></li>
					<li><a href="hack.html" class="clearfix"><img src="img/csshack150.gif" width="150" height="150" alt="CSSハック" /> <span>CSSハック</span> </a></li>
					<li><a href="iron-man.html" class="clearfix"><img src="img/iron-man150.gif" width="150" height="150" alt="アイアンマン" /> <span>アイアンマンを作るチュートリアル</span> </a></li>
					<li><a href="spider-man.html" class="clearfix"><img src="img/spider-man150.gif" width="150" height="150" alt="スパイダーマン" /> <span>スパイダーマンを作るチュートリアル</span> </a></li>
				</ul>
			</aside>
	<div class="box5">
		<footer class="box5-inner">
			<div id="pageTop"><!--pageTop--> 
				<a href="#wrapper">ページ上部へ</a> </div>
			<!--pageTop-->
			<p><small> &copy;&nbsp;2014-2015 ぶぶりん. </small></p>
		</footer>
	</div>
</div>
<!--wrapper--> 
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.bxslider.js"></script> 
<script type="text/javascript" src="js/swfobject.js"></script> 
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--javascriptSt--> 
<script type="text/javascript">
        $(document).ready(function(){
            var obj = $('.bxslider').bxSlider({
				mode: 'vertical',
				speed      : 800, //エフェクトのスピード
            	auto: true,//自動再生有効
				slideWidth:852, //スライドショーの幅
				pause:5000,//表示間隔
				onSlideAfter: function () { obj.startAuto(); }//自動的に再開
            });
        });
</script> 
<!-- swfの表示 --> 
<script type="text/javascript">
var flashvars = { };
 var params = {
 loop: "false"
};
var attributes = { };
  swfobject.embedSWF(
    "linebaner.swf", //swfファイルへのパス
    "noFlash",//代替コンテンツを表示するオブジェクトのid
    "200",//表示されるswfの幅
    "150",//表示されるswfの高さ
    "9.0.0",//flashPlayerのバージョン
	"expressInstall.swf",//これを追加します。
	flashvars, params, attributes
  );
</script> 
<script type="text/javascript">
$(function(){
	$('#pageTop a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script> 
<script type="text/javascript">
$(function(){
	$('#menubtn').click(function(){
		$("nav").slideToggle();
	});
});
</script>
</body>
</html>

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

次に静的HTMLファイルを前回ご紹介したテンプレートタグを用いて、下記のように修正します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="ja,en" />
<meta http-equiv="Pragma" content="no-cache" />
<title><?php bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<meta name="keywords" content="ぶぶりん,チュートリアルサイト,HTML5" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/webclip.png" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/jquery.bxslider.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css" />
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" />
<?php wp_head(); ?>
</head>

<body>
<div id="wrapper"><!--wrapper-->
	<div class="box1">
		<header class="site">
			<h1><?php bloginfo('name'); ?></h1>
		</header>
	</div>
	<div class="box2">
		<div class="box2-inner">
			<div id="menubtn">
				<p><i class="fa fa-bars"></i>&nbsp;MENU</p>
			</div>
			<nav class="menu">
				<ul class="clearfix">
					<li><a href="<?php echo home_url('/'); ?>">トップ</a></li>
					<li><a href="about.html">掲載内容</a></li>
					<li><a href="photoshop.html">Photoshop</a></li>
					<li><a href="illustrator.html">Illustrator</a></li>
					<li><a href="html-css.html">HP作成</a></li>
					<li><a href="profile.html">プロフィール</a></li>
					<li><a href="contact.html">お問い合わせ</a></li>
					<li><a href="sitemap.html">サイトマップ</a></li>
				</ul>
			</nav>
		</div>
	</div>
	<div id="bxslider">
		<ul class="bxslider">
			<!--bxslider-->
			<li><img src="<?php bloginfo('template_url'); ?>/img/photo1a.gif" width="852" height="400" alt="スクリーン画像1" /></li>
			<li><img src="<?php bloginfo('template_url'); ?>/img/photo2a.gif" width="852" height="400" alt="スクリーン画像2" /></li>
			<li><img src="<?php bloginfo('template_url'); ?>/img/photo3a.gif" width="852" height="400" alt="スクリーン画像3" /></li>
			<li><img src="<?php bloginfo('template_url'); ?>/img/photo4a.gif" width="852" height="400" alt="スクリーン画像4" /></li>
			<li><img src="<?php bloginfo('template_url'); ?>/img/photo5a.gif" width="852" height="400" alt="スクリーン画像5" /></li>
		</ul>
		<!--bxslider--> 
	</div>
	<div class="boxA clearfix">
		<div class="box3">

header.phpにおいて、上のコードをハイライトで示した「タイトル・description・パスの参照など」をテンプレートタグで取得できるように修正します。

sidebar-top.phpにおいて、トップページようにファイル名をsidebar-topに変更して、上のコードをハイライトで示した「トップページとパスの参照など」をテンプレートタグで取得できるように修正します。

	<div class="box5">
		<footer class="box5-inner">
			<div id="pageTop"><!--pageTop--> 
				<a href="#wrapper">ページ上部へ</a> </div>
			<!--pageTop-->
			<p><small> &copy;&nbsp;2014-2015 ぶぶりん. </small></p>
		</footer>
	</div>
</div>
<!--wrapper--> 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.bxslider.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/swfobject.js"></script> 
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--javascriptSt--> 
<script type="text/javascript">
        $(document).ready(function(){
            var obj = $('.bxslider').bxSlider({
				mode: 'vertical',
				speed      : 800, //エフェクトのスピード
            	auto: true,//自動再生有効
				slideWidth:852, //スライドショーの幅
				pause:5000,//表示間隔
				onSlideAfter: function () { obj.startAuto(); }//自動的に再開
            });
        });
</script> 
<!-- swfの表示 --> 
<script type="text/javascript">
var flashvars = { };
 var params = {
 loop: "false"
};
var attributes = { };
  swfobject.embedSWF(
    "<?php bloginfo('template_url'); ?>/linebaner.swf", //swfファイルへのパス
    "noFlash",//代替コンテンツを表示するオブジェクトのid
    "200",//表示されるswfの幅
    "150",//表示されるswfの高さ
    "9.0.0",//flashPlayerのバージョン
	"expressInstall.swf",//これを追加します。
	flashvars, params, attributes
  );
</script> 
<script type="text/javascript">
$(function(){
	$('#pageTop a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script> 
<script type="text/javascript">
$(function(){
	$('#menubtn').click(function(){
		$("nav").slideToggle();
	});
});
</script>
<?php wp_footer(); ?>
</body>
</html>

footer.phpにおいて、上のコードをハイライトで示した「画像とFlashのパスの参照など」をテンプレートタグで取得できるように修正します。

スタイルシート「style.css」の設定・読み込み

テーマの概要(テーマ名、URL、作者名など)を記述して、スタイルを記述していきます。

@charset "UTF-8";
/*
Theme Name: Tutorial site
Theme URI: http://buburinweb.html.xdomain.jp/
Description: This is our original theme.
Author: buburin
Author URI: http://buburinweb.html.xdomain.jp/
Version:1.0
*/
@import url(css/html5-style.css);//ページスタイルの参照

テーマの概要の役割を下記に示します。

  • Theme Name:テーマ名
  • Theme URI: テーマの配布場所のURL
  • Description:テーマの解説
  • Version:テーマのバージョン
  • Author:テーマの制作者名
  • Author URI:テーマの作者のサイトのURL

分割ファイルの読み込み

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

<?php get_header(); ?>
			<article class="report">
				<div id="new"><!--new-->
					<h2>新着項目</h2>
					<div class="reportcat">
						<ul class="clearfix">
							<li><a href="html5.html">HTML5</a></li>
						</ul>
					</div>
					<div class="reportinfo">
						<time datetime="2015-03-04"><i class="fa fa-clock-o"></i> 2015年03月04日 </time>
					</div>
					<h3>HTML5</h3>
					<img src="<?php bloginfo('template_url'); ?>/img/index.jpg" alt="HTML5サイト" width="325" height="425" />
					<p>トップページのみを<strong>HTML5</strong>で再構築してみました。</p>
					<p class="btn"><a href="html5.html">HTML5</a></p>
				</div>
				<!--new-->
				<div class="inner"><!--inner-->
					<div class="textBox">
						<div class="time">
							<time datetime="2015-03-04"><i class="fa fa-clock-o"></i>2015年03月04日</time><span>新着!!</span>
						</div>
						<div class="text">
							<p>トップページのみを<a href="html5.html">HTML5</a>で構築しました。</p>
						</div>
					</div>
					<div class="textBox">
						<div class="time">
							<time datetime="2015-03-02"><i class="fa fa-clock-o"></i>2015年03月02日</time>
						</div>
						<div class="text">
							<p><a href="http://buburinweb.html.xdomain.jp/carwebsite/">制作課題サイト</a>をメンテナンスしました。</p>
						</div>
					</div>
					<div class="textBox">
						<div class="time">
							<time datetime="2015-02-20"><i class="fa fa-clock-o"></i>2015年02月20日</time>
						</div>
						<div class="text">
							<p>ポートフォリオに<a href="http://buburinweb.html.xdomain.jp/portfolio/assignment/">制作課題</a>を追加しました。</p>
						</div>
					</div>
					<div class="textBox">
						<div class="time">
							<time datetime="2015-02-10"><i class="fa fa-clock-o"></i>2015年02月10日</time>
						</div>
						<div class="text">
							<p>ホームページのデザインをリニューアルしました。</p>
						</div>
					</div>
				</div>
				<!--inner--> 
			</article>
			<aside class="tutorial">
				<h2>チュートリアル</h2>
				<ul class="clearfix">
					<li><a href="favicon.html" class="clearfix"><img src="<?php bloginfo('template_url'); ?>/img/webclip150.gif" width="150" height="150" alt="ウェブクリップアイコン" /> <span>ファビコン・ウェブクリップアイコン</span> </a></li>
					<li><a href="hack.html" class="clearfix"><img src="<?php bloginfo('template_url'); ?>/img/csshack150.gif" width="150" height="150" alt="CSSハック" /> <span>CSSハック</span> </a></li>
					<li><a href="iron-man.html" class="clearfix"><img src="<?php bloginfo('template_url'); ?>/img/iron-man150.gif" width="150" height="150" alt="アイアンマン" /> <span>アイアンマンを作るチュートリアル</span> </a></li>
					<li><a href="spider-man.html" class="clearfix"><img src="<?php bloginfo('template_url'); ?>/img/spider-man150.gif" width="150" height="150" alt="スパイダーマン" /> <span>スパイダーマンを作るチュートリアル</span> </a></li>
				</ul>
			</aside>
<?php get_sidebar('top'); ?>
<?php get_footer(); ?>

チュートリアルサイト 静的サイト WordPress テンプレートテーマ 作成
上の画像のように、チュートリアルサイトのテンプレートテーマをWordPress上に実装することができました。しかし、今後、投稿ページ・固定ページ等の利用も考えられます。

そこで次回は、投稿ページ・固定ページのテンプレートテーマの作成についてご紹介できればと考えています。

参考サイト

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

SNSでもご購読できます。

コメントを残す

*