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(); ?>
この状態だと結構悲しい事態なので、さくっと次に進める。