ホーム > Webデザイナー養成講座 > 6.ヘッダー・フッターのPHPをつくろう

6.ヘッダー・フッターのPHPをつくろう

header.php、footer.phpはその名の通りヘッダーとフッターのhtml部分を記述します。

一からデザインやコーディングをすると時間がかかるので、今回は別の記事「ホームページの作り方」で作ったHTMLデータを、WordPressテーマに書き換えていきます。

>>HTMLで作ったサンプルページ

>>HTMLデータをダウンロード(zipファイル)

※テーマファイル(PHP)は最終章で配布いたします。

まず「index.html」のヘッダー部分、フッター部分のHTMLを、それぞれheader.php、footer.phpに記述します。

header.php

footer.php

ここで気をつけないといけないのは、このヘッダー部分が全てのページ共通になるため、階層がかわってもリンク切れが起きないように絶対パスに、また各ページでタイトルが変わるように、下記部分を修正します。

またこのphpがwpに「ヘッダーですよ」と認識してもらうよう、下記記述をします。

今回は必要ないのですが、サーバーやwpのバージョンによってjQueryがうまく動作しない時もあるので、もう一文追加しておくと安心です。

body内のhtmlも、絶対パスになるようパス部分を修正します。

footer.phpも同様にパスを修正したら、こちらもフッターの宣言をbody内に記述します。

以上を全部反映させたのが、下記コードになります。

header.php(修正後)

footer.php(修正後)

これで、header.phpとfooter.phpは完成です。

次回は各ページの枠組みとなるpage.phpとsingle.phpを作ります。

次のお話

「WordPressビギナー」に関連するオススメ記事

フリー漫画素材

無料で使える漫画素材です

ホームページの作り方

初心者向けHP作成講座

同人サークル専用HP

ホームページ作ります!

Copyright (C) 牛屋へ.com, All Rights Reserved.