記事一覧

index.php を作成する – [1]

公開日：　 最終更新日： 　posted by suzu
テンプレート作成のススメ

先の記事 「作成するテンプレートを整理する」 で
作成すべきテンプレートを拾い出しました。
今回からは、実際にPHPでテンプレートファイルを作成していきます。

初回はまず、全ての リクエスト(ページアクセス) の間口 となる index.php と
デザインを司るであろう style.css です。

「必要なテンプレートの種類」 でも触れていますが、
WordPress では、テンプレートに階層構造があります。
アクセスページ種別によって (本来) 実行されるべき優先度の高いテンプレートが
存在しなければ、次の優先度の上位階層のテンプレートファイルが実行されます。
ですので、この index.php が全ての間口となり、順次優先度のより高いテンプレートに
処理を委譲していくわけですね。

ぶっちゃけ、意図したページを表示できるかどうかは別にして、
この index.php さえあれば、WordPress は動作可能であるということになります。

何はともあれ、やってみましょう！ ベースとなるのは、
「HTMLをデザインする [カラム装飾]」
で作成した HTML と CSS です。
それぞれ、HTML を index.php、CSS を style.css として保存しておきます。
WordPress の 文字エンコーディングは UTF-8 で書かれていますので、
自作テーマのテンプレートも UTF-8 で用意しましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>デザインサンプル - 3カラム</title>
	<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
	<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>

<body>
	<div id="container">
		<div id="header">header</div>
		<div id="wrapper">
			<div id="side-left">side L</div>
			<div id="main">main</div>
		</div>
		<div id="side-right">side R</div>
		<div id="footer">footer</div>
	</div>
</body>
</html>

@charset "UTF-8";

/* base */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre
, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp
, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label
, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	font-family: arial, helvetica, osaka, "MS PGothic", sans-serif;
}
/* body */
body {
	background-color: #f3f3f3;
	margin: 0px;
	padding: 0px;
	text-align: center;			/* #container(大枠)をセンタリングするため */
}
/* 大枠 */
#container {
	background-color: none;
	width: 986px;
	margin: 0px auto 0px auto;	/* body内でセンタリングするため */
	padding: 0px;
	text-align: left;
}
/* header */
#header {
	background-color: none;
	width: 100%;
	min-height: 150px;			/* 最低限の高さを指定する */
	margin: 0px;
	padding: 0px;
}
/* 内枠 */
#wrapper {
	background-color: none;
	float: left;
	margin: 0px;
	padding: 0px;
}
/* 左サイドバー */
#side-left {
	background-color: none;
	width: 226px;
	min-height: 500px;			/* 最低限の高さを指定する */
	float: left;
	margin: 5px 10px 5px 0px;
	padding: 5px 0px 10px 0px;
}
/* メインコンテンツ */
#main {
	background-color: #ffffff;
	width: 462px;
	min-height: 500px;			/* 最低限の高さを指定する */
	float: left;
	margin: 5px 5px 5px 5px;
	padding: 10px 20px 10px 20px;
	border: 1px solid #cccccc;
	border-radius: 4px 4px 4px 4px;		/* CSS3で角丸に */
}
/* 右サイドバー */
#side-right {
	background-color: none;
	width: 226px;
	min-height: 500px;			/* 最低限の高さを指定する */
	float: left;
	margin: 5px 0px 5px 10px;
	padding: 5px 0px 10px 0px;
}
/* footer */
#footer {
	background-color: none;
	width: 100%;
	clear: left;
	margin: 0px;
	padding: 0px;
	text-align: center;
}

 

まず、index.php に動的な値を出力するために、
WordPress で用意されている、(基本的な) テンプレートタグや関数を埋めていきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php bloginfo('name'); ?></title>
	<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?>>
	<div id="container">
		<div id="header">header</div>
		<div id="wrapper">
			<div id="side-left">side L</div>
			<div id="main">main</div>
		</div>
		<div id="side-right">side R</div>
		<div id="footer">footer</div>
	</div>
<?php wp_footer(); ?>
</body>
</html>

2行目の language_attributes は、HTMLタグの言語属性を出力してくれます。
日本語環境下であれば、「lang=”ja”」 が出力されますので、
出力結果は、「<html lang=”ja”>」 となります。

4、5、7行目の bloginfo は、パラメータで指定した内容に応じて、
様々なサイト情報を出力してくれます。
ちなみに、ここで使用しているパラメータはそれぞれ、
html_type → ページタイプ（’text/html’など）
charset → ページ文字コード
name → ブログタイトル
stylesheet_url → テーマ内の style.css ファイルのURL
となります。

8行目の wp_head は head 内に、
WordPress本体が必要な (と思っている) タグを出力してくれるアクション関数です。
インストールしているプラグイン等によっても内容が変わってくるものですので、
記述しておいた方がよいです。
デフォルトで出力される内容やこの関数で出力される内容の削除や追加方法は
後々解説します。

11行目の body_class は、body タグの class 属性を出力します。
管理画面で設定できるカスタム背景は、ここで出力される class 属性を指定して
コントロールされますので、こちらも記述しておいた方がよいでしょう。

21行目の wp_footer は body 終了直前に、
WordPress本体が必要な (と思っている) タグを出力してくれるアクション関数です。
インストールしているプラグイン等によっても内容が変わってくるものですので、
wp_head 同様、記述しておいた方がよいです。
管理画面へログインしている場合、ユーザープロフィールの設定によっては、
ブログページを表示した際に上部にツールバーが表示されます。
このツールバーは wp_footer を記述しておかないと
(きれいに) 表示されませんので、必ず記述しておきましょう。

これで、とりあえずテーマディレクトリへ配置する準備ができました。
「自作テーマの設置方法」 でも書いているように、
自作テーマ用のディレクトリへ index.php と style.css を配置してみます。
「HTMLをデザインする [カラム装飾]」 で作成したような
画面が表示されているかと思います。
ただ、これでは、画面がなんとなく表示されただけですので、
何の役にも立ちません (笑)
次回は、これに、一覧画面として表示するための実際の処理を
書き入れていきます。

関連記事

eyecatch_template

HTMLをデザインする [カラム装飾]

今回は、先の記事 「HTMLをデザインする [カラム]」 で カラムレイアウトを...

記事を読む

eyecatch_template

index.php を作成する – [2]

前の記事 「index.php を作成する – [1]」 で、 なんとなく画面が...

記事を読む

eyecatch_template

archive.php を作成する

今回は、アーカイブ一覧ページである archive.php を作成します。 ar...

記事を読む

Prev：
自作テーマの設置方法
Next：
index.php を作成する - [2]

カレンダー

2025年11月
日 月 火 水 木 金 土
« 7月    
 1
2345678
9101112131415
16171819202122
23242526272829
30  
PAGE TOP ↑