(3) WordPressテンプレート作成【home.php】

投稿記事を表示するための本体となる[ home.php ]を作成する。

home.php

コードは以下の通り

<!–ヘッダー情報の読み込み–>
<?php get_header(); ?>
<!–ここまでヘッダー情報の読み込み–>
<!–コンテンツ–>
<div id=”page”>
<div id=”content”>
<p class=”title”>最新記事</p>

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php get_template_part(‘content’);?><!–content.phpと連動–>
<?php endwhile; endif; ?>
</div><!– id=”content”–>
<!–ここまでコンテンツ–>

<!–サイドバーを取得–>
<?php get_sidebar(); ?>

</div><!– id=”page”–>

<!–古い記事ページ表示–>
<?php get_template_part(‘pagenation’); ?>
<!–フッター情報の読み込み–>
<?php get_footer(); ?>
<!–ここまでフッター情報の読み込み–>

このコードは

(1) ヘッダー情報を読み込んでいる(<?php get_header(); ?>)
(2) ヘッダーより下部でフッターより上部に[ page ]エリアを設けている
(3) ループにより、テンプレート[ content.php ]を呼び出し記事を表示する用にしている
現時点では[ content.php ]を作成していない
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php get_template_part(‘content’);?><!–content.phpと連動–>
<?php endwhile; endif; ?>
(4) サイドバーを表示している(現時点では[ sidebar.php ]は作成していない
(5) ページ下部に前ページへのリンクを作成する[ pagenation ]を設置
(6) 最後にフッターを読み込んでいる
以上の構成になっている。

テンプレートファイル関連図

表示状況

home.php を作成した時点で、サイトを表示させてみた。

きちんとした表示にはなっていない。

ソースは以下の通り。

<!–ヘッダー情報の読み込み–>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<!–以上初期宣言–>
<title>wordpress作成トレーニング</title>
<link rel=”stylesheet” href=”http://localhost/new2012/wp-content/themes/tikuwakbV02/style.css” type=”text/css” />
<link rel=”shortcut icon” href=”favicon.ico”>
<!–ヘッダー最適化–><link rel=”EditURI” type=”application/rsd+xml” title=”RSD” href=”http://localhost/new2012/xmlrpc.php?rsd” />
<link rel=”wlwmanifest” type=”application/wlwmanifest+xml” href=”http://localhost/new2012/wp-includes/wlwmanifest.xml” />
<meta name=”generator” content=”WordPress 3.3.1″ />
<!–END ヘッダー最適化–>
</head>
<!–以上ヘッダー終了–><body class=”home blog”><!–コンテナ–>
<div id=”container”><!–ヘッダー–>
<div id=”header”><h2 id=”desc”>Just another WordPress weblog</h2><!–サイトの説明–>
<h1><a href=”http://localhost/new2012″>wordpress作成トレーニング</a></h1><!–サイトのタイトル–>

<div id=”subinfo”><!–RSSマークとRSSへのリンク–>
<a href=”http://localhost/new2012/?feed=rss2″><img src=”http://localhost/new2012/wp-content/themes/tikuwakbV02/feed.png” alt=”RSS FEED” width=”28″ height=”28″ /></a>
</div><!– id=”subinfo”–>

<!–トップ下のナビゲーション表示–>
<div id=”nav”>
<div class=”menu”><ul><li class=”page_item page-item-102″><a href=”http://localhost/new2012/?page_id=102″>HOME</a></li><li class=”page_item page-item-79″><a href=”http://localhost/new2012/?page_id=79″>WordPress</a></li><li class=”page_item page-item-2″><a href=”http://localhost/new2012/?page_id=2″>紹介</a></li><li class=”page_item page-item-104″><a href=”http://localhost/new2012/?page_id=104″>MS-Office</a></li></ul></div>
</div><!– id=”nav”–>
</div><!– id=”header”–>
<!–ここまでヘッダー情報の読み込み–>
<!–コンテンツ–>
<div id=”page”>
<div id=”content”>
<p class=”title”>最新記事</p>

<!–content.phpと連動–>
<!–content.phpと連動–>
<!–content.phpと連動–>
<!–content.phpと連動–>
<!–content.phpと連動–>
</div><!– id=”content”–>
<!–ここまでコンテンツ–>

<!–サイドバーを取得–>

</div><!– id=”page”–>

<!–古い記事ページ表示–>
<!–フッター情報の読み込み–>
<!–フッター–>
<div id=”footer”>
<address>Copyright &copy; wordpress作成トレーニングAll right reserved.</address>
</div><!– id=”footer”–>

</div><!– id=”container”–><!–header.php 14行目div–>
<!–フッター最適化出力設定–>
</body>
</html> <!–ここまでフッター情報の読み込み–>

 


過去の関連記事
作成順 作成ファイル   解説
前準備 前準備 http://tikuwakb.biz/?p=80
( 1) home.php php 初期ページ http://tikuwakb.biz/?p=92
( 2) header.php php ヘッダー部分(各ファイル共有) http://tikuwakb.biz/?p=87
( 3) footer.php php フッター部分(各ファイル共有) http://tikuwakb.biz/?p=87
( 4) content.php php 記事表示テンプレート(home.phpと連動) http://tikuwakb.biz/?p=144
( 5) pagenation.php php ページ前後表示のためのリンク設定 http://tikuwakb.biz/?p=147
( 6) sidebar.php php サイドのメニュー表示
( 7) category.php php カテゴリーを表示
( 8) date.php php 月別ページを表示
( 9) single.php php 記事の個別表示 http://tikuwakb.biz/?p=147
(10) page.php php 固定ページ
(11) functions.php php 関数定義ファイル http://tikuwakb.biz/?p=108