ワードプレス（WordPress）でトップページをデザインする方法 #wp

2011/05/25 2014/11/09

1年以上前の記事です。内容が古い可能性があります。

さて、テーマのコピーが用意できたらそれを自分のデザインに当てはめていかなければなりません。
まずは、トップページから始めましょう。

トップページをデザインするにあたり、使用しているテーマのホームテンプレートを探さなければなりません。
ホームテンプレートと勝手に名付けていますが、つまりはトップページのテンプレートのこと。
通常のWebサイトであれば「index.html」ファイルがディレクトリ内にあれば、ディレクトリ表記で「index.html」が表示されるように出来ていますが、その「index.html」に当たるファイル（テンプレート）のことをいっています。

とりあえずこんな感じになりました。

それがWordPress（ワードプレス）の場合は以下のようになっているようです。
□ テンプレート階層 – WordPress Codex 日本語版

訪問者がサイトのメインページ（ホームページ）にアクセスした場合、WordPress はまず最初に、静的フロントページかどうかを判断します。静的フロントページが設定されている場合、固定ページのテンプレート階層に従ってテンプレートを読み込みます。設定されていなければ、次の順にテンプレートファイル名を探し、最初に見つかったテンプレートを使ってページを生成します。

home.php

index.php

とりあえずここでは「静的フロントページ」云々は置いておきます。
今回使ったテーマの元になっているのは「Twenty Ten」。
「Twenty Ten」の場合はindex.phpがホームテンプレートに当たります。

といったところでまずは「index.php」をのぞいてみるとこんな感じ。（コメント省略）

<?php get_header(); ?>
　
<div id=”container”>
　　
<div id=”content” role=”main”>
　　　
<?php
　　　get_template_part( ‘loop’, ‘index’ );
　　　?>
　　
</div><!– #content –>
　
</div><!– #container –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

これを自分のサイトのデザインに合わせて書き換えていくわけですが、ここで、当初のデザインがしっかりできているかが効いてきます。
しっかりとSEOコーディングできていればそんなに難しくはないです。

ちなみに自分の場合は以下のように書き換えました。

<?php get_header(); ?>
　
<div id=”naiyo”>
　　
<div id=”flashcontents”>
　　
※中略（Flash）
　　
</div>
　　
<div id=”info”>
　　
<h3>インフォメーション</h3>
　　
<dl>
　　　
<?php
　　　
get_template_part( ‘loop’, ‘index’ );
　　　
?>
　　
</dl>
　　
</div>
　　
<div id=”news”>
　　
※中略（カレンダー）
　　
</div>
　
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

インフォメーションの部分に新着記事が来るようになっています。
中略部分はそれぞれトップにおかれていたコンテンツ（Flash等）が入ります。

これでひとまずトップページのコンテンツ部分を埋めることができました。
次はそれぞれ「get_header();」「get_sidebar();」「get_footer();」で呼び出すことのできる部分をカスタマイズします。

それぞれ「get_header();」で呼び出すヘッダー部は「header.php」。
「get_sidebar();」で呼び出すサイドバーは「sidebar.php」。
「get_footer();」で呼び出すフッター部は「footer.php」となっています。

今回は作ったデザインHTMLをドーンとコピーして、旧テンプレから一部プログラム、及び変数を（タイトル等）もってくることにしました。

以下、できたもの。

□ header.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis” />
<title>
※中略（「twentyten」のオリジナルからコピー）
</title>
<meta name=”Description” content=”埼玉県熊谷市のパソコン教室。ホームページの制作、フラッシュの作成が出来るようになります。” />
<meta name=”Keywords” content=”パソコン教室,埼玉,パソコン,ホームページ制作,ホームページ,ホームページ作成” />
<script language=”JavaScript” type=”text/javascript” src=”cssjs/swfobject.js”></script>
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
<script type=”text/javascript”>
※中略（Google Analytics用のソース）
</script>
</head>
<body>
<div id=”body”>
　
<div id=”header”>
　　
<h1>埼玉県熊谷市のホームページ制作を教えるパソコン教室</h1>
　　
<p id=”key”>現役<em>Webディレクター</em>(元<em>Webデザイナー</em>)が教える<strong>パソコン教室</strong>。<em>DTP</em>及び<em>Web</em>アプリケーション対応。<strong>ホームページ制作</strong>、<strong>Webコンサルティング</strong>も。</p>
　　
<ul>
　　　
<li><a href=”greeting.html”>ご挨拶</a></li>
　　　
<li><a href=”outline.html”>概要</a></li>
　　　
<li><a href=”history.html”>沿革</a></li>
　　　
<li><a href=”service.html”>サービス</a></li>
　　　
<li><a href=”price.html”>料金</a></li>
　　　
<li><a href=”access.html”>アクセス</a></li>
　　　
<li><a href=”recruit.html”>人材募集</a></li>
　　　
<li><a href=”https://plotfactory.sakura.ne.jp/form/form.html”>お問合せ</a></li>
　　
</ul>
　
</div>
　
<div id=”main”>

タイトルとCSSの場所のみオリジナルのプログラム使っています。

タイトルは見直す必要ありそう。

□ sidebar.php

　<div id=”memu”>
　<ul>
　　<li id=”introduction”><a href=”coach/introduction.html”>これからパソコンを始めたい方―パソコン導入サービス</a></li>
　　<li id=”web_d”><a href=”web/”>ホームページを持ちたい方―ホームページ制作</a></li>
　　<li id=”truble”><a href=”rescue/”>パソコンで困っている方―パソコンレスキュー [お電話一本すぐに解決!!]</a></li>
　　<li id=”coach”><a href=”coach/”>パソコン教室のご案内 [出張講習・マンツーマン指導]</a></li>
　</ul>
　<p id=”blog”><a href=”http://webdirector.livedoor.biz/” target=”_blank”>代表ブログ – ちほちゅう</a></p>
　　<div align=”center”>
　　※中略（広告等）
　　</div>
　</div>
</div>

ここはもう面倒くさいのでダイレクトにメニュー部分をコピペしてしまいました。
最終的にはトップ用とコンテンツ用及びブログ用とで分けたほうがいいかもしれませんがとりあえず今はこれで。

□ footer.php

<div id=”footer”>
　　　
<div align=”center”><a href=”greeting.html”>ご挨拶</a> | <a href=”outline.html”>概要</a> | <a href=”history.html”>沿革</a> | <a href=”service.html”>サービス</a> | <a href=”price.html”>料金</a> | <a href=”access.html”>アクセス</a> | <a href=”recruit.html”>人材募集</a> | <a href=”web/introduction.html”>パソコン導入</a> | <a href=”web/”>ホームページ制作</a> | <a href=”rescue/”>パソコンレスキュー</a> | <a href=”coach/”>パソコン教室</a> | <a href=”https://plotfactory.sakura.ne.jp/form/form.html”>お問合せ</a> | <a href=”/”>トップページ</a></div>
　　　
<div id=”etc”> <a href=”sitemap.html”>[サイトマップ]</a> <a href=”guideline.html”>[ガイドライン]</a> <a href=”links/”>[リンクス]</a> <a href=”m/”>[モバイル]</a> <span class=”hidden”><a href=”sitemap.xml”>sitemap</a></span></div>
　　　
<div id=”copyright”><a href=”http://www.plot-factory.com/”>パソコン教室</a> <a href=”http://www.plot-factory.com/”>ホームページ制作</a>のPLOT-FACTORY (C) 2007 <a href=”http://www.plot-factory.com/”>PLOT-FACTORY</a></div>
　　
</div>
</div>
<script type=”text/javascript”>
※中略（色々スクリプト、あとで整理する）
</script>
</body>
</html>

ここも面倒なのでダイレクトにコピペ。
過去に無料でやってくれるというので張っていたSEO用ソースはウザイので取りました。
これでHTML関係は出来上がり。

最後に、画像やjavascript等の外部データをサーバーにアップ。
場所をちゃんと指定し直してあげると、とりあえずトップページのみ完成です。

（今回は「images（イメージフォルダ）」を「wordpress/wp-content/themes内」及び「wordpress内」、
「cssjs（Javascriptフォルダ）」を「wordpress内」にアップすることでトップページが正常に見れるようになりました。
「images（イメージフォルダ）」がダブっちゃったりしてるので後日、場所を変える予定）

なお、上記「header.php」「sidebar.php」「footer.php」のみカスタマイズしてトップページのコンテンツを「固定ページ」として設定することも可能です。

これがおそらく「静的フロントページ」のことなのでしょう。