2.header / footer / sidebar の分割

1.ワイヤーフレームを作るで作成したHTMLを

  • index
  • header
  • sidebar
  • footer

の4つに分割する。
分割というか、index から他の3つを抜き出す。

header.php ——

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>TEST CONTENT</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="wrap">
  <div id="header">
   <h1 id="title">サイトのタイトルだよー</h1>
   <div id="search">検索?<input type="text" size="10" /></div>
   <div id="desc">サイトの説明文が入ったりします</div>
  </div>

footer.php ——

  <div id="footer">
   <div id="copyright">Powered by WordPress</div>
  </div>
 </div>
</body>
</html>

sidebar.php —–

   <div id="widget">
    <ul class="widget_block">
     <li class="widget_container">
      <h3 class="widget_title">widget_title</h3>
      <div class="widget_parts">
       WIDGET の 中身 1
      </div>
     </li>
    </ul>
   </div>

それぞれを抜き出してファイルとして作成。
index には代わりに

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

を入れておく。

そうすると index はこんな感じになる。

<?php get_header(); ?>
  <div id="main">
   <div id="content">
    <div class="content_container">
     <h2 class="content_title">content_title</h2>
     <div class="content_category">content_category</div>
     <div class="content_tag">content_tag</div>
     <div class="content_author">content_author</div>
     <div class="content_create_datetime">0000/00/00 00:00:00</div>
     <div class="content_updator">content_updator</div>
     <div class="content_update_datetime">0000/00/00 00:00:00</div>
     <div class="content_parts">
      CONTENT の 中身 1
     </div>
    </div>
   </div>
<?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>

この状態だと結構悲しい事態なので、さくっと次に進める。