WordPressテーマ作成その5~ヘッダーとフッター

ここで、wordpressの「ループ」という概念について触れておく。

例えば記事を書いたとしよう。
wordpressでは、書かれた記事を読むというリクエストがきたときにまず、その記事がそこにあるかという確認をする。そして、その記事があれば記事を表示する処理をする。複数の記事があればそれを繰り返す。もし記事がない場合は記事がないという表示をする処理をする。

つまりは、条件(if)によって「処理した結果を表示する」を繰り返していくのだが、簡単に言うと、この処理をコードとして書き表したものが「ループ」である。

WordPressのテンプレートファイルは、表示するページの種類によって決まっている。


single.php 単一の記事ページ
category.php カテゴリーページ

ではこれらのファイルがない場合、どうなるのか?
wordpressでは最終手段としてindex.phpを使う。その辺の優先順位は公式ページを見ていただくとして、ここではトップページの構成を考えてみる。
その2の図にあったようなサイト構成の場合、その構成図をコードで書いてやれば、表示することが出来る。

1枚の紙としてみると、上にheader.php、横にsidebar.php、sidebar2.php、下にfooter.phpとなっている。真ん中にindex.phpとなっているわけだが、index.phpという大きな紙の上にheader.php、sidebar.php、sidebar2.php、footer.phpと言うそれぞれのパーツを置いたという見方も出来る。
htmlで書くと下記のようになる。

これを分割してやる。分割してやることによってどのページでも使用できる。まず、ヘッダとなるパーツを書いてみよう。ダッシュボードの「外観 > テーマ編集」から、右メニューにある「ヘッダー(header.php)」をクリックして編集する。

header.php

 

そのまんまである。ただ、実はこれではwordpressのルールには当てはまらない部分があるので修正していく。

まず、スタールシートを読み込む記述を変更する。

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

ここを

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" /> 

に修正する。スタイルシートの言語も指定しておくには次の1文も入れる。

<meta http-equiv="content-style-type" content="style/css"> 

次に

<title>タイトル</title> 

の部分を

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title> 

と修正する。

文字化けを防ぐために文字コードを指定する。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>"> 

修正後は下記のようになる。

 

最後に左下の「ファイルを更新ボタン」を押して保存する。

続いて右メニューにある「フッター(footer.php)」をクリックして編集する。
footer.php

 

ここにコピーライト記述を加える。
修正後は下記のようになる。

 

最後に左下の「ファイルを更新ボタン」を押して保存する。

そしてこれらをまとめたものを作る。右メニューにある「メインインデックスのテンプレート(index.php)」をクリックして編集する。

 左下の「ファイルを更新ボタン」を押して保存する。

何となくサイトらしい形になったと思う。
次はサイドバーをつくっていく。

コメントは停止中です。