皆様の事業に貢献します

部品を組み合わせて様々なページを効率よく作る

Webサイトにはブログページ、知らせページ、サイトマップもあるしユーザーの入力フォームなどたくさんのページが含まれています。それらのページごとにページのデーターを全部作成するのは効率が悪すぎます。各ページに共通の部分もたくさんありますので共通する部分は使いまわすのが良い方法です。WordPressSにはこの共通する部分をあたかも部品のように組み合わせてWebデーターを生成する機能が備わっています。

という事で前回の記事で編集した”index.php”をWebページの部品(テンプレート)に分解してみます。まずは表示されているイメージでを元に部品を切り分けます。下では、”index.php”を

  • ヘッダー
  • サイドバー
  • メイン
  • フッター

の4つに分解しています。”index.php”をひも解いて、それぞれを表示させているコードを切り分けて行きます。

index.phpを4つに分解する

index.phpを4つに分解する

ヘッダーを切り分ける

“index.php”でヘッダーを表示しているのは
[xhtml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ホームページのタイトルを入れてください</title>
<meta name="keywords" content="ホームページのキーワードを入れてください" />
<meta name="description" content="ホームページの紹介文を入れてください" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<!– 外部CSS読み込み –>
<link href="<?php bloginfo(‘stylesheet_url’); ?>" rel="stylesheet" type="text/css" />
<!–
<link href="css/index.css" rel="stylesheet" type="text/css" />
–>
<!– /ここまで –>
<script type="text/javascript" src="js/default.js"></script>
</head>

<body>

<div id="wrap">

<!– ヘッダー –>
<div id="head">
<h1>重要なキーワードを入れてください</h1>
<p id="logo"><a href="./">Homepage NAME</a></p>
</div>

<!– ヘッダーメニュー –>
<div id="head_menu">
<ul>
<li><a href="./">TOP</a></li>
<li><a href="contents01.html">コンテンツ</a></li>
<li><a href="contents01.html">コンテンツ</a></li>
<li><a href="contents01.html">コンテンツ</a></li>
<li><a href="contents01.html">コンテンツ</a></li>
<li><a href="contents01.html">コンテンツ</a></li>
</ul>
</div>
[/xhtml]
のコードです。この部分を切り分けます。

まず”index.php”をコピーし

ファイル名変更

ファイル名変更

“header.php”にファイル名を変更します。”header.php”はヘッダーを表示させるテンプレートです。

header.phpにファイル名変更

header.phpにファイル名変更

次に”header.php”をWebMatrixで編集し上記のヘッダーを表示しているコード以外を削除し上書き保存します。

header.phpを編集

header.phpを編集

次に”index.php”をWebmatrixで編集し”header.php”に切り分けたコードを削除して代わりに

<?php get_header(); ?>

と記述し上書き保存します。

index.phpを編集

index.phpを編集

この

get_header();

は”header.php”をWebで表示させるテンプレートタグです。ここが丸ごと”header.php”に置き換わると考えれば解りやすいです。

ファイルの編集が終わったら改めてWebを表示させます。今までと同じページが表示されれば成功です。

同じページが表示された

同じページが表示された

サイドバーを切り分ける

今度はサイドバーを切り分けします。ヘッダーのときと同様に”index.php”をファイルコピーして”sidebar.php”にファイル名を変更します。”sidebar.php”はサイドバーを表示させるテンプレートです。

次に”sidebar.php”をWebMatrixで編集しサイドバーを表示させているコード
[xhtml]
<div id="contents">

<!– レフトメニュー –>
<div id="left_menu">
<ul>
<li class="title">sub menu</li>
<li><a href="contents01.html">サブコンテンツ</a></li>
<li><a href="contents01.html">サブコンテンツ</a></li>
<li><a href="contents01.html/">サブコンテンツ</a></li>
<li><a href="contents01.html/">サブコンテンツ</a></li>
<li><a href="contents01.html/">メニューは追加可能です</a></li>
</ul>
<ul>
<li class="title">sub menu</li>
<li><a href="contents01.html">サブコンテンツ</a></li>
<li><a href="contents01.html">サブコンテンツ</a></li>
<li><a href="contents01.html/">サブコンテンツ</a></li>
<li><a href="contents01.html/">サブコンテンツ</a></li>
<li><a href="contents01.html/">メニューは追加可能です</a></li>
</ul>
<ul>
<li class="title">sub menu</li>
<li><a href="contents01.html">メニューは追加可能です</a></li>
<li><a href="contents01.html">メニューは削除もです</a></li>
</ul>
</div>
[/xhtml]
の部分だけを残して後のコードは削除します。

そして”index.php”の方もWebMatrixで編集しサイドバーを表示させているコードを削除し、代わりに

<?php get_sidebar(); ?>

と記述し上書き保存です。ヘッダーの場合と同様です。

ファイルの編集が終わったらWebブラウザで表示を確認して完了です。

フッターを切り分ける

今度はフッター部分を切り分けします。要領はこれまでと同じです。”index.php”をファイルコピーし”footer.php”にファイル名を変更します。”footer.php”はフッターを表示させるテンプレートです。

これまでと同様に”footer.php”をWebMatrixで編集しフッターを表示しているコード
[xhtml]
<!– フッター –>
<div id="foot">
<p>copyright (c)<script type="text/javascript">document.write(new Date().getFullYear())</script> <a href="./">ホームページの名前</a> All rights reserved.</p>
</div>

</div>

</body>
</html>
[/xhtml]
以外のコードを削除します。

そして、”index.php”は上記のフッターを表示させているコードを削除し代わりに

<?php get_footer(); ?>

を記述し上書き保存です。ヘッダーやサイドバーと同様です。

ファイルの編集が終わったらWebブラウザで表示を確認します。
最終的な”index.php”は以下のようになります。
[xhtml]
<?php get_header();?>
<?php get_sidebar(); ?>
<!– コンテンツ –>
<div id="main">
<div id="top">
<div id="bg_main_image">
<div id="main_image">
<p>文章がはいります  文章がはいります<br />文章がはいります</p>
<p>背景の画像は差し替えが可能です。(画像サイズ固定 横:690px 高さ:290px)</p>
</div>
</div>
<!– インフォメーション –>
<div id="info">
<h2><img src="img/top/st_info.gif" alt="インフォメーション" width="700" height="40" /></h2>
<div id="info_inner">
<h3>2009/05/08</h3>
<p>本テンプレート追加</p>
</div>
<p><img src="img/top/info_btm.gif" alt="line" width="700" height="3" /></p>
</div>
<!– フリースペース –>
<h3>フリースペース</h3>
<div class="obj">
<p>テキスト テキスト テキスト<br />テキスト テキスト テキスト テキスト テキスト テキスト</p>
<p>テキスト テキスト テキスト</p>
</div>
</div>
</div>
<!– /コンテンツ –>

</div>
<!– /ボディ –>
<?php get_footer(); ?>
[/xhtml]

“index.php”を”front-page.php”に移行

これまでWebページを”index.php”テンプレートファイルを使って表示させました。これを”front-page.php”に移行します。”front-page.php”はトップページを表示するテンプレートです。WordPressではテンプレートごとの機能が決められていますので機能に応じたテンプレートを使うと管理しやすくなります。一方”index.php”は、ほかのテンプレートがない場合に受け皿として表示されるテンプレートです。詳しい事はこのページをご参照ください。
Webを製作する際にどの機能を使おうとしているのか解りやすくするため、また不具合を直すときにどのテンプレートで不具合がおきているのか問題の切り分けをしやすくするため、WordPressで決められたテンプレートを使うのが便利です。

“index.php”をファイルコピーし”front-page.php”にファイル名変更をします。”index.php”をWebMatrixで編集し中身を

index.php

にします。こうすることで、themeが意図せず”index.php”を表示していればすぐに不具合がわかります。

次回はWordPressのカスタムメニューでメニューを表示させる機能をご紹介します。

春日渡辺会計事務所では、WordPressによる格安Webサイト制作サービスをご提供しております。詳細はこちらをご覧下さい。ご依頼、お問い合わせはお問い合わせからお知らせ下さい。

春日渡辺会計事務所は文京区の会計士・税理士事務所です。皆様の事業を全力でサポートいたします。

[smartslider3 slider=5]
ページのトップへ戻る