2⃣ index.php部分‐オリジナルをつくる編‐

2016/04/01 2016/04/04

❷ index.php部分‐オリジナルをつくる‐

最終目的はこのようなビジネスサイトを作ります。

はじめにやること

●HTMLをWordPressテンプレートタグに書き換えていくこと

●index.htmlをindex.phpに拡張子を変更する

●style.cssを編集する

style.cssの始めに以下を書く事で、WordPressがテーマとして認識します。
ここは記載の必要は特にありませんが、記載方法を載せておきます。

/*
Theme Name:自分のテーマ名
Theme URI:テーマのホームサイトのURL
Description:テーマの説明
Author:作者である自分の名前
Author URI:作者である自分のサイトのURL
Version:バージョン（任意）
Tags:タグ（任意）
*/

Theme Name:自分のテーマ名

Theme URI:テーマのホームサイトのURL

Description:テーマの説明

Author:作者である自分の名前

Author URI:作者である自分のサイトのURL

Version:バージョン（任意）

Tags:タグ（任意）

ここの部分を記載するようになります。

●書き換える前のindex.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ビジネス向け 無料ホームページテンプレート tp_biz31</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="copyright" content="Template Party">
<meta name="description" content="ここにサイト説明を入れます">
<meta name="keywords" content="キーワード１,キーワード２,キーワード３,キーワード４,キーワード５">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/openclose.js"></script>
</head>

<body id="top">

<header>
<div class="inner">
<h1><a href="index.html"><img src="images/logo.png" width="400" height="50" alt=""></a></h1>
<address><span class="tel">Tel：03-0000-0000</span>受付：9：00～17：00　休業日：土日祝</address>
</div>
</header>

<nav id="menu">
<ul id="menubar">
<li><a href="index.html">ホーム<span>HOME</span></a></li>
<li><a href="company.html">会社概要<span>COMPANY</span></a></li>
<li><a href="service.html">サービス<span>SERVICE</span></a></li>
<li><a href="recruit.html">採用情報<span>RECRIT</span></a></li>
<li><a href="link.html">リンク<span>LINK</span></a></li>
<li><a href="contact.html">お問い合わせ<span>CONTACT</span></a></li>
</ul>
</nav>

<div id="mainimg">
<aside>
<img class="slide_file" src="images/1.jpg" title="index.html">
<img class="slide_file" src="images/2.jpg" title="index.html">
<img class="slide_file" src="images/3.jpg" title="index.html">
<input type="hidden" id="slide_loop" value="0">
<a href="index.html" id="slide_link">
<img id="slide_image" src="images/1.jpg" width="997" height="260" alt="">
<img id="slide_image2" src="images/1.jpg" width="997" height="260" alt=""></a>
</aside>
</div>

<div id="contents">

<div id="main">

<section>

<h2>無料テンプレートのご利用前に必ずお読み下さい</h2>
<p>このテンプレートは<a href="http://template-party.com/">無料ホームページテンプレート配布サイトのTemplate Party</a>が配布している『ビジネス向け 無料ホームページテンプレート tp_biz31』です。<br>
必ず<a href="http://template-party.com/read.html">利用規約</a>をご一読の上でご利用下さい。不明な点があれば<a href="http://template-party.com/faq.html">ＦＡＱコーナー</a>をご一読下さい。</p>
<p><strong class="color1">■HP最下部の著作表示「Web Design:Template-Party」は無断で削除しないで下さい</strong><br>
わざと見えなく加工する事も禁止します。お守りいただけない場合、テンプレートの利用を中止し、違反金を請求いたします。</p>
<p><strong class="color1">■どうしても下部の著作を外したい場合は</strong><br>
<a href="http://template-party.com/member.html">ライセンス契約</a>を行う事でHP下部の著作を外す事ができます。おまけ特典として、制作時Photoshopファイルももらえます。</p>

    <section>
    <h3>当テンプレートはhtml5+CSS3(レスポンシブWEBデザイン)です</h3>
    <p>パソコン、タブレット、スマートフォンに対応しています。各デバイスごとの設定変更はcssフォルダ内にある各cssファイルで行って下さい。<br>
    尚、新しいブラウザ(IEならIE10以降)でないと全ての効果を確認する事はできません。マークアップなどはご自身の判断で変更してご利用下さい。</p>
    </section>
    
    <section>
    <h3>当テンプレートの詳しい使い方</h3>
    <p><a href="company.html#about">当テンプレートの詳しい使い方はこちらをご覧下さい。</a></p>
    </section>

</section>

<section>
<h2>企業向けCMSプログラム販売中</h2>
<p>トップページや会社概要ページや業務案内ページなどの各ページレイアウト設定済みのプログラムを販売中です。<a href="http://template-party.com/hanyo_program/index2.html">詳しくはこちらをご覧下さい。</a><br />
<a href="http://template-party.com/hanyo_program/index2.html"><img src="http://template-party.com/hanyo_program/img_temp600.jpg" alt="" width="600" height="300" class="wa" /></a></p>
</section>

<section id="new">
<h2 id="newinfo_hdr" class="close">更新情報・お知らせ</h2>
<dl id="newinfo">
<dt><time datetime="2014-00-00">2015/00/00</time></dt>
<dd>ホームページリニューアル<img src="images/icon_new.gif" alt="NEW" width="30" height="11"></dd>
<dt><time datetime="2014-00-00">2015/00/00</time></dt>
<dd>ホームページリニューアル<img src="images/icon_up.gif" alt="UP" width="30" height="11"></dd>
<dt><time datetime="2014-00-00">2015/00/00</time></dt>
<dd>ホームページリニューアル</dd>
<dt><time datetime="2014-00-00">2015/00/00</time></dt>
<dd>ホームページリニューアル</dd>
<dt><time datetime="2014-00-00">2015/00/00</time></dt>
<dd>ホームページリニューアル</dd>
<dt><time datetime="2014-00-00">2015/00/00</time></dt>
<dd>ホームページリニューアル</dd>
<dt><time datetime="2014-00-00">2015/00/00</time></dt>
<dd>ホームページリニューアル</dd>
</dl>
</section>

</div>
<!--/main-->

<div id="sub">

<nav class="box1">
<h2>SUB MENU</h2>
<ul>
<li><a href="#">主要リンクサンプル</a></li>
<li><a href="#">主要リンクサンプル</a></li>
<li><a href="#">主要リンクサンプル</a></li>
<li><a href="#">主要リンクサンプル</a></li>
<li><a href="#">主要リンクサンプル</a></li>
</ul>
</nav>

<aside>
<h2>関連情報</h2>
<ul class="submenu">
<li><a href="#">関連情報リンク</a></li>
<li><a href="#">関連情報リンク</a></li>
<li><a href="#">関連情報リンク</a></li>
<li><a href="#">関連情報リンク</a></li>
<li><a href="#">関連情報リンク</a></li>
</ul>
</aside>

<section class="mb15">

<h2>製品情報</h2>

    <section class="box2">
    <a href="service2.html">
    <figure><img src="images/sample1.jpg" width="60" height="60" alt="製品名"></figure>
    <h4>製品名</h4>
    <p>ここに製品の説明を入れます。サンプルテキスト。</p>
    </a>
    </section>
    
    <section class="box2">
    <a href="service2.html">
    <figure><img src="images/sample1.jpg" width="60" height="60" alt="製品名"></figure>
    <h4>製品名</h4>
    <p>ここに製品の説明を入れます。サンプルテキスト。</p>
    </a>
    </section>
    
    <section class="box2">
    <a href="service2.html">
    <figure><img src="images/sample1.jpg" width="60" height="60" alt="製品名"></figure>
    <h4>製品名</h4>
    <p>ここに製品の説明を入れます。サンプルテキスト。</p>
    </a>
    </section>
    
    <section class="box2">
    <a href="service2.html">
    <figure><img src="images/sample1.jpg" width="60" height="60" alt="製品名"></figure>
    <h4>製品名</h4>
    <p>ここに製品の説明を入れます。サンプルテキスト。</p>
    </a>
    </section>
    
    <section class="box2">
    <a href="service2.html">
    <figure><img src="images/sample1.jpg" width="60" height="60" alt="製品名"></figure>
    <h4>製品名</h4>
    <p>ここに製品の説明を入れます。サンプルテキスト。</p>
    </a>
    </section>

</section>

</div>
<!--/sub-->

<ul id="footermenu">
<li><a href="index.html">ホーム</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="service.html">サービス</a></li>
<li><a href="recruit.html">採用情報</a></li>
<li><a href="link.html">リンク</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>

<p id="pagetop"><a href="#">↑ PAGE TOP</a></p>

</div>
<!--/contents-->

<footer>
<small>Copyright&copy; 2015 <a href="index.html">SAMPLE COMPANY</a> All Rights Reserved.</small>
<span class="pr"><a href="http://template-party.com/" target="_blank">Web Design:Template-Party</a></span>
</footer>

<!--スライドショースクリプト-->
<script type="text/javascript" src="js/slide_simple_pack.js"></script>

<!--スマホ用更新情報-->
<script type="text/javascript">
if (OCwindowWidth() < 480) {
	open_close("newinfo_hdr", "newinfo");
}
</script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

<!doctype html>

<head>

<title>ビジネス向け無料ホームページテンプレート tp_biz31</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

</div>

</header>

<li><a href="company.html">会社概要<span>COMPANY</span></a></li>

<li><a href="service.html">サービス<span>SERVICE</span></a></li>

<li><a href="recruit.html">採用情報<span>RECRIT</span></a></li>

<li><a href="contact.html">お問い合わせ<span>CONTACT</span></a></li>

</ul>

</nav>

<aside>

</aside>

</div>

<h2>無料テンプレートのご利用前に必ずお読み下さい</h2>

<p>このテンプレートは<a href="http://template-party.com/">無料ホームページテンプレート配布サイトのTemplate Party</a>が配布している『ビジネス向け無料ホームページテンプレート tp_biz31』です。<br>

必ず<a href="http://template-party.com/read.html">利用規約</a>をご一読の上でご利用下さい。不明な点があれば<a href="http://template-party.com/faq.html">ＦＡＱコーナー</a>をご一読下さい。</p>

<p><strong class="color1">■HP最下部の著作表示「Web Design:Template-Party」は無断で削除しないで下さい</strong><br>

わざと見えなく加工する事も禁止します。お守りいただけない場合、テンプレートの利用を中止し、違反金を請求いたします。</p>

<p><strong class="color1">■どうしても下部の著作を外したい場合は</strong><br>

<a href="http://template-party.com/member.html">ライセンス契約</a>を行う事でHP下部の著作を外す事ができます。おまけ特典として、制作時Photoshopファイルももらえます。</p>

<h3>当テンプレートはhtml5+CSS3(レスポンシブWEBデザイン)です</h3>

<p>パソコン、タブレット、スマートフォンに対応しています。各デバイスごとの設定変更はcssフォルダ内にある各cssファイルで行って下さい。<br>

尚、新しいブラウザ(IEならIE10以降)でないと全ての効果を確認する事はできません。マークアップなどはご自身の判断で変更してご利用下さい。</p>

</section>

<h3>当テンプレートの詳しい使い方</h3>

<p><a href="company.html#about">当テンプレートの詳しい使い方はこちらをご覧下さい。</a></p>

</section>

<h2>企業向けCMSプログラム販売中</h2>

<p>トップページや会社概要ページや業務案内ページなどの各ページレイアウト設定済みのプログラムを販売中です。<a href="http://template-party.com/hanyo_program/index2.html">詳しくはこちらをご覧下さい。</a><br />

</section>

<dd>ホームページリニューアル<img src="images/icon_new.gif" alt="NEW" width="30" height="11"></dd>

<dd>ホームページリニューアル<img src="images/icon_up.gif" alt="UP" width="30" height="11"></dd>

<dd>ホームページリニューアル</dd>

<dd>ホームページリニューアル</dd>

<dd>ホームページリニューアル</dd>

<dd>ホームページリニューアル</dd>

<dd>ホームページリニューアル</dd>

</dl>

</section>

</div>

<ul>

<li><a href="#">主要リンクサンプル</a></li>

</ul>

</nav>

<aside>

<li><a href="#">関連情報リンク</a></li>

</ul>

</aside>