index.phpの中でHTMLの体裁を整えてみる

2012.03.30

　前回はシンプル（過ぎる）テーマをみてみました。今回はもう少しマシなテーマにして見ましょう。
　

サンプルテーマ02の狙い

　一般的なWebサイトの基本ファイルにindex.htmlがあります。サンプルのindex.phpにもHTML的なタグを整備します。また、テンプレートタグという便利な機能も使用してみます。
　

サンプルテーマ02に切り替えてみる

　それでは管理画面の外観＞テーマ頁にて「PCSK sample themes 02」に切り替えて見てください。ブログ画面を新タブで表示すると下の図のようになるはずです。

図.サンプルテーマ02の画面

　これは文が10行程度並んでいるだけで、サンプル01と大差無いように見えます。でも、このHTMLソースを確認すれば違いが判ります。ソースを下に記します（あなたもブラウザの「ソースを表示」で見てみてください）。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>（あなたのブログ名）</title>
<link rel="stylesheet" href="http://(各自の設定)/wp-content/themes/pcsk-s02/style.css" type="text/css" media="screen" />
</head>
<body>
サンプルテーマ０２　本文<br />
<br />
＜HTML最小限構成＞<br />
　　（省略）
</body>
</html>

　前回と異なり、HTML的にはまともなソースになっています。

html、head、bodyタグが有る
metaタグで文字コード(UTF-8)を指定
titleタグでブログ（サイト）名を指定（ブラウザのタブ部分にサイト名が表示されているはずです）
スタイルシート（style.css）を指定

　厳密に言えばDOCTYPEが無いとか、XHTML的にどうなのとか色々有ると思いますが、現段階ではシンプルな形で進めていきます。
　

サンプルテーマ02の中身

　さて、それではテーマ02のファイルはどうなっているのでしょう。index.phpの中を確認して見ましょう。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
</head>
<body>
サンプルテーマ０２　本文<br />
<br />
＜HTML最小限構成＞<br />
　　（省略）
</body>
</html>

　上のHTMLソースとindex.phpの中身とを見比べて見ると、異なる部分が有るのがお分かりでしょうか？実はindex.php内には

ブログ（サイト）名
スタイルシートのURL

は書かれていません。代わりに有るのは

<?php bloginfo('name'); ?>
<?php bloginfo('stylesheet_url'); ?>

という文字列だけです。実はこれがワードプレスのテンプレートタグと呼ばれるものです。
　

テンプレートタグとは

　テンプレートタグはワードプレスに対して「何かを実行」あるいは「何かを取得」するように指示するものです。例えば今回の例ではブログ（サイト）名やスタイルシートのURLを取得するものが使われました。

テンプレートタグの例：　<?php bloginfo(‘name’); ?>

bloginfo()タグ→あなたのユーザープロフィールと一般設定から情報を取得し、表示します。
name→ブログ（サイト）名を取得せよ、というパラメータ
<?phpや?>の部分はPHPのプログラムであることを示す印

　テンプレートタグはbloginfo()以外にも多くの種類が有ります。それは今後必要に応じて説明して行きたいと思います。
　

まとめ

　今回は、テーマ（index.php）の中にHTMLタグとワードプレスのテンプレートタグを入れて見ました。テンプレートタグを使えば、色々な情報を表示することができます。次回もテンプレートタグを追加していくと共に、HTML的にもう少し整備していく方向で進めたいと思います。

次は: 記事を表示する＋ HTML体裁整備その２

Posted at 21:39 | Category: 1.基礎編 | コメントは受け付けていません。

ワードプレスのテーマを自作しよう！