WordPress自作テーマのベースに使うためのHTMLテンプレートを作りました

wordpress-theme-template
Update Web制作メモ >

WordPressテーマをリニューアルした際、ベースとして使うためのごくシンプルなHTMLのテンプレートを作成してみました。そのときのメモです。

使用したもの

  • テキストエディタ(Sublime Text2を使用しています)
  • ダミー画像(なんでもいいです)
  • ブラウザ(Google Chromeを使用しています)

おおまかな流れ

テンプレート作成のおおまかな流れを記します。

  • ダミー画像を1枚用意しておく
  • テキストエディタで4つのHTMLファイルを作成する
    index.htmlsingle.htmlpage.htmlarchive.html
  • ブラウザでHTMLファイルを表示させてみる
  • テキストエディタでCSSファイルを作成する
  • HTMLファイルにCSSファイルへのリンクを追記する
  • もういちどブラウザでHTMLファイルを表示させてみる

HTMLファイルを作成する

テキストエディタを開き、4つのHTMLファイルを作成します。クラス名や属性などはほとんど書いていません。

作成したら、ダミー画像といっしょに保存します。

ThemeSample01 400x168

index.html

ブログのトップページのテンプレートです。以下のような、オーソドックスなブログの構成です。

  • ヘッダー
  • ナビゲーションメニュー
  • 記事(3こ表示)
  • ページャー
  • サイドバー
  • フッター

書き終わったらindex.htmlという名前で保存します。

コード(長いので折り畳んでいます)とサンプルファイルです。

  • index.htmlのコード:
  • <!--header-->
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    	<meta charset="UTF-8" />
            <title>10251</title >
    </head>
    	
    <body>
    <header>
    	<h1><a href="#">10251</a></h1>
    	<nav>
    		<ul>
    			<li><a href="#">メニュー1</a></li>
    			<li><a href="#">メニュー2</a></li>
    			<li><a href="#">メニュー3</a></li>
    		</ul>
    	</nav>
    </header>
    
    <!--index-->
    <div>
    	<article>
    		<header>
    			<h2><a href="#">記事タイトル</a></h2>
    			<div>
    				<time>2013.10.23</time>
    				<a href="#">カテゴリー名とか</a>
    			</div>
    			<img src="dummy.png">
    		</header>
    
    		<p>テキストテキストテキストテキスト</p>
    		<p>テキストテキストテキストテキスト</p>
    		<a href="#">続きを読む</a>
    	</article>
    
    	<article>
    		<header>
    			<h2><a href="#">記事タイトル</a></h2>
    			<div>
    				<time>2013.10.22</time>
    				<a href="#">カテゴリー名とか</a>
    			</div>
    			<img src="dummy.png">
    		</header>
    
    		<p>テキストテキストテキストテキスト</p>
    		<p>テキストテキストテキストテキスト</p>
    		<a href="#">続きを読む</a>
    	</article>
    
    	<article>
    		<header>
    			<h2><a href="#">記事タイトル</a></h2>
    			<div>
    				<time>2013.10.21</time>
    				<a href="#">カテゴリー名とか</a>
    			</div>
    			<img src="dummy.png">
    		</header>
    
    		<p>テキストテキストテキストテキスト</p>
    		<p>テキストテキストテキストテキスト</p>
    		<a href="#">続きを読む</a>
    	</article>
    
    <div>1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div>
    
    </div>
    
    <!--sidebar-->
    <aside>
    	<section>
    		<h3>ウィジェットタイトル</h3>
    		<p>ウィジェットなかみ</p>
    	</section>
    
    	<section>
    		<h3>ウィジェットタイトル</h3>
    		<p>ウィジェットなかみ</p>
    	</section>
    
    	<section>
    		<h3>ウィジェットタイトル</h3>
    		<p>ウィジェットなかみ</p>
    	</section>
    </aside>
    
    <!--footer-->
    <footer>
    <a href="#">コピーライト表記</a>
    </footer>
    
    </body>
    </html>
    
  • index.htmlを開く(別ウィンドウ)

single.html

ブログの記事ページのテンプレートです。

  • ヘッダー
  • ナビゲーションメニュー
  • ぱんくずリスト
  • 記事
  • ソーシャルボタン
  • 関連記事
  • 前の記事と次の記事へのページャー
  • サイドバー
  • フッター

書き終わったらsingle.htmlという名前で保存します。

コード(長いので折り畳んでいます)とサンプルファイルです。

2013.10.25:コードとサンプルのファイルを一箇所修正しました

  • single.htmlのコード:
  • <!--header-->
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    	<meta charset="UTF-8" />
            <title>10251</title >
    </head>
    	
    <body>
    <header>
    	<h1><a href="#">10251</a></h1>
    	<nav>
    		<ul>
    			<li><a href="#">メニュー1</a></li>
    			<li><a href="#">メニュー2</a></li>
    			<li><a href="#">メニュー3</a></li>
    		</ul>
    	</nav>
    </header>
    
    <div><a href="#">Home </a> > <a href="#">カテゴリー名とか</a> > 記事タイトル</div>
    <!--single-->
    <div>
    	<article>
    		<header>
    			<h1>記事タイトル</h1>
    			<div>
    				<time>2013.10.23</time>
    				<a href="#">カテゴリー名とか</a>
    			</div>
    			<img src="dummy.png">
    			
    			<ul>
    				<h3>関連記事</h3>
    				<li><a href="#">記事タイトル</a></li>
    				<li><a href="#">記事タイトル</a></li>
    				<li><a href="#">記事タイトル</a></li>
    			</ul>
    		</header>
    
    		<p>テキストテキストテキストテキスト</p>
    		<p>テキストテキストテキストテキスト</p>
    		<p>テキストテキストテキストテキスト</p>
    		<p>テキストテキストテキストテキスト</p>
    		<p>テキストテキストテキストテキスト</p>
    	
    		<ul class="share"><!--シェアボタン-->
    		<li><a href="#">FB</a></li>
    		<li><a href="#">Twitterシェア</a></li>
    		<li><a href="#">Google+</a></li>
    		<li><a href="#">はてぶ</a></li>
    		<li><a href="#">Pocket</a></li>
    		<li><a href="#">RSS</a></li>
    		<li><a href="#">Feedly</a></li>
    		</ul>
    
    		<ul>
    			<h3>関連記事</h3>
    			<li><a href="#"><img src="dummy.png">記事タイトル</a></li>
    			<li><a href="#"><img src="dummy.png">記事タイトル</a></li>
    			<li><a href="#"><img src="dummy.png">記事タイトル</a></li>
    			<li><a href="#"><img src="dummy.png">記事タイトル</a></li>
    		</ul>
    
    
    		<dl>
    			<dt>前の記事</dt>
    			<dd><a href="#"><img src="dummy.png">記事タイトル</a></dd>
    		</dl>
    
    		<dl>
    			<dt>次の記事</dt>
    			<dd><a href="#"><img src="dummy.png">記事タイトル</a></dd>
    		</dl>
    	</article><!--2013.10.25 article要素を閉じる位置を修正-->
    </div>
    <!--sidebar-->
    <aside>
    	<section>
    		<h3>ウィジェットタイトル</h3>
    		<p>ウィジェットなかみ</p>
    	</section>
    
    	<section>
    		<h3>ウィジェットタイトル</h3>
    		<p>ウィジェットなかみ</p>
    	</section>
    
    	<section>
    		<h3>ウィジェットタイトル</h3>
    		<p>ウィジェットなかみ</p>
    	</section>
    </aside>
    
    <!--footer-->
    <footer>
    <a href="#">コピーライト表記</a>
    </footer>
    
    </body>
    </html>
    
  • single.htmlを開く(別ウィンドウ)

page.html

ブログの固定ページのテンプレートです。

  • ヘッダー
  • ナビゲーションメニュー
  • ぱんくずリスト
  • ページ部分
    (用途は様々なので、ここにはほとんど何も書いていません)
  • サイドバー
  • フッター

書き終わったらpage.htmlという名前で保存します。

コード(長いので折り畳んでいます)とサンプルファイルです。

  • page.htmlのコード:
  • <!--header-->
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    	<meta charset="UTF-8" />
            <title>10251</title >
    </head>
    	
    <body>
    <header>
    	<h1><a href="#">10251</a></h1>
    	<nav>
    		<ul>
    			<li><a href="#">メニュー1</a></li>
    			<li><a href="#">メニュー2</a></li>
    			<li><a href="#">メニュー3</a></li>
    		</ul>
    	</nav>
    </header>
    
    <div><a href="#">Home </a> > ページタイトル</div>
    <!--page-->
    <div>
    	<article>
    		<header>
    			<h1>ページタイトル</h1>
    		</header>
    
    		<p>お問い合わせフォームとか、</p>
    		<p>サイトマップとか、</p>
    		<p>プロフィールとかとかを載せるページ</p>
    	</article>
    
    </div>
    
    <!--sidebar-->
    <aside>
    	<section>
    		<h3>ウィジェットタイトル</h3>
    		<p>ウィジェットなかみ</p>
    	</section>
    
    	<section>
    		<h3>ウィジェットタイトル</h3>
    		<p>ウィジェットなかみ</p>
    	</section>
    
    	<section>
    		<h3>ウィジェットタイトル</h3>
    		<p>ウィジェットなかみ</p>
    	</section>
    </aside>
    
    <!--footer-->
    <footer>
    <a href="#">コピーライト表記</a>
    </footer>
    
    </body>
    </html>
    
  • page.htmlを開く(別ウィンドウ)

archive.html

カテゴリーやタグ、日付別に記事一覧を表示させるページのテンプレートです。

  • ヘッダー
  • ナビゲーションメニュー
  • ぱんくずリスト
  • 何のページかを表示する見出し
  • 記事(3こ表示)
  • ページャー
  • サイドバー
  • フッター

書き終わったらarchive.htmlという名前で保存します。

コード(長いので折り畳んでいます)とサンプルファイルです。

  • archive.htmlのコード:
  • <!--header-->
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    	<meta charset="UTF-8" />
            <title>10251</title >
    </head>
    	
    <body>
    <header>
    	<h1><a href="#">10251</a></h1>
    	<nav>
    		<ul>
    			<li><a href="#">メニュー1</a></li>
    			<li><a href="#">メニュー2</a></li>
    			<li><a href="#">メニュー3</a></li>
    		</ul>
    	</nav>
    </header>
    
    <div><a href="#">Home </a> > カテゴリー名とか</div>
    <!--archive-->
    
    <div>
    	<h2>‘カテゴリー名’ の記事一覧</h2>
    	<article>
    		<header>
    			<h2><a href="#">記事タイトル</a></h2>
    			<div>
    				<time>2013.10.23</time>
    				<a href="#">カテゴリー名とか</a>
    			</div>
    			<img src="dummy.png">
    		</header>
    
    		<p>テキストテキストテキストテキスト</p>
    		<p>テキストテキストテキストテキスト</p>
    		<a href="#">続きを読む</a>
    	</article>
    
    	<article>
    		<header>
    			<h2><a href="#">記事タイトル</a></h2>
    			<div>
    				<time>2013.10.22</time>
    				<a href="#">カテゴリー名とか</a>
    			</div>
    			<img src="dummy.png">
    		</header>
    
    		<p>テキストテキストテキストテキスト</p>
    		<p>テキストテキストテキストテキスト</p>
    		<a href="#">続きを読む</a>
    	</article>
    
    	<article>
    		<header>
    			<h2><a href="#">記事タイトル</a></h2>
    			<div>
    				<time>2013.10.21</time>
    				<a href="#">カテゴリー名とか</a>
    			</div>
    			<img src="dummy.png">
    		</header>
    
    		<p>テキストテキストテキストテキスト</p>
    		<p>テキストテキストテキストテキスト</p>
    		<a href="#">続きを読む</a>
    	</article>
    
    <div>1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... </div>
    
    </div>
    
    <!--sidebar-->
    <aside>
    	<section>
    		<h3>ウィジェットタイトル</h3>
    		<p>ウィジェットなかみ</p>
    	</section>
    
    	<section>
    		<h3>ウィジェットタイトル</h3>
    		<p>ウィジェットなかみ</p>
    	</section>
    
    	<section>
    		<h3>ウィジェットタイトル</h3>
    		<p>ウィジェットなかみ</p>
    	</section>
    </aside>
    
    <!--footer-->
    <footer>
    <a href="#">コピーライト表記</a>
    </footer>
    
    </body>
    </html>
    
  • archive.htmlを開く(別ウィンドウ)

CSSファイルを作成する

これだけではさすがに見づらいので、少しだけCSSを書いてみます。ひとまずイメージをつかむために、要素セレクタのみで最小限の装飾をしてみました。

a{
	color: cadetblue;
	text-decoration: none;
}

body{
	width: 50em;
        margin: 0 auto;
}

nav{
	margin-bottom: 2em;
	border-bottom: 1px solid lightgray;
}

nav ul{
	list-style: none;
}

nav li{
	display: inline;
}

body > div{
	float: left;
	width: 28em;
	margin-bottom: 3em;
}

article{
	margin-bottom: 3em;
}

article header img{
	margin-top: 1em;
}

ul img,
dl img{
	width:100px;
	height: auto;
}

dl{
	display: inline-block;
	vertical-align: top;
	width: 40%;
}

aside{
	float: right;
	width: 20em;
	margin-bottom: 3em;
}

aside section{
	margin-bottom: 2em;
}

aside section:nth-child(3){
	margin-bottom: 0;
}

footer{
	clear: both;
	padding: 1em 0;
	background: lightgray;
}

書き終わったらstyle.cssという名前で、HTMLファイルと同じ場所に保存します。

ThemeSample02 400x164

HTMLにCSSへのリンクを追記する

4つのHTMLファイルの6行目と7行目の間に、以下を追記します。

<link rel="stylesheet" type="text/css" href="style.css">

追記したら、それぞれのファイルを保存します。

もういちどHTMLファイルをひらく

4つのHTMLファイルをもういちど開いてみます。

なんとなくブログっぽいかたちになりました(ちょっとだけ)。当然これでは不十分なので、HTMLのほうで適切にクラスやidをつけたり、divで囲ったりなどしていきます。

ここからテーマ完成までの流れのメモを、引き続き書いていこうと思っています。