ここまでやると

• index.php
• header.php
• footer.php
• sidebar.php
• functions.php
• style.css

の6ファイルができている、はず。
最後に、style.cssにテーマ詳細を付加する。
現在の style.css はこれだけ。

#header, #main, #footer {
  width: 1000px;
  text-align: center;
  border: 1px solid #FF9999;
}
#content {
  float: right;
  width: 100%;
  margin-left: -260px;
  border: 1px solid #99FF99;
}
#widget {
  float: left;
  width: 240px;
  border: 1px solid #9999FF;
}
#footer {
  clear: both;
}

コレの頭に

/*   
Theme Name: Katz_Test
Theme URI: http://katzplus.com/
Description: katzのテスト用テーマ
Author: katzplus
Author URI: http://katzplus.com/
Version: 0.0.1
*/

このくらい追加する。

できあがったら、6ファイルすべてをひとつのディレクトリの中に入れて
「WordPressインストールディレクトリ/wp-content/themes」
の中に配置する。
実際には themes 配下はどれだけ深くディレクトリを掘っても認識されるっぽいけど、わかりにくくなるだけなので themes の直下に置くことにする。
とりあえずはコレで最低限完成。

1記事テンプレートやコメントテンプレートがないとか
見栄えがヒドイとか
まだまだやることはいっぱいあるけど、これで画面が真っ白になっていなければ最低限のモチベーションは維持できる、かも。

footer.phpは6行しかないので一気に。

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

これを・・・変えるところは1箇所だけだった。

• 変更点01：bodyタグ終了部分直前

  </body>

  head終了直前の追記と同様に、bodyの終了直前にも追加可能な場所を確保しておく。

  <?php wp_footer(); ?>
  </body>

  <div id="footer">
   <div id="copyright">Powered by WordPress</div>
  </div>
 </div>
<?php wp_footer(); ?>
</body>
</html>

今後変更点が出るかもしれないし。いまのところはこれで。

現在、この状態。
ここから置き換えが必要なところを書き換えていく。

<?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(); ?>

• 変更点01：記事の中身を表示するためのループ

      <div class="content_container">
        ・・・
      </div>

  この中身が表示記事数分だけループする。whileで回すのが吉らしい。

  <?php while (have_posts()) : the_post(); ?>
  <?php endwhile; ?>

  have_postsで表示する投稿が残っているか判断し
  the_postで次の投稿に進み、グローバル変数$postを設定するとのこと。
  詳細は関数リファレンス/WP Query – WordPress Codex 日本語版に。

• 変更点02：記事の中身
  前述のthe_postで、記事ごとの情報を$postに割り当てているので、その中身を引っ張り出せるように書き換えていく。

       <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>
  

  それぞれに使用するテンプレートタグは以下のとおり。
  テンプレートタグのリストはこちら。
  タイトル → the_title
  該当ページURL → the_permalink
  カテゴリー → the_category
  タグ → the_tags
  投稿者 → the_author
  公開日時 → the_dateとthe_time
  ※the_dateは「同じ日に複数の記事がある場合は、最初の記事とともに一度だけ出力される。」ということなので、the_timeに “Y/m/d H:i:s” を出力させた方がイイ。
  更新者 → the modified author
  更新日時 → the_modified_dateとthe_modified_time
  本文 → the_content

       <h2 class="content_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
       <div class="content_category"><?php the_category(', ') ?></div>
       <div class="content_tag"><?php the_tags(); ?></div>
       <div class="content_author"><?php the_author(); ?></div>
       <div class="content_create_datetime"><?php the_time('Y/m/d H:i:s'); ?></div>
       <div class="content_updator"><?php the_modified_author(); ?></div>
       <div class="content_update_datetime"><?php the_modified_date('Y/m/d'); ?> <?php the_modified_time('H:i:s'); ?></div>
       <div class="content_parts">
        <?php the_content('more...', 'false'); ?>
       </div>
  

ここまでやるとこうなる。

<?php get_header(); ?>
  <div id="main">
   <div id="content">
    <div class="content_container">
    <?php while (have_posts()) : the_post(); ?>
     <h2 class="content_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
     <div class="content_category"><?php the_category(', ') ?></div>
     <div class="content_tag"><?php the_tags(); ?></div>
     <div class="content_author"><?php the_author(); ?></div>
     <div class="content_create_datetime"><?php the_time('Y/m/d H:i:s'); ?></div>
     <div class="content_updator"><?php the_modified_author(); ?></div>
     <div class="content_update_datetime"><?php the_modified_date('Y/m/d'); ?> <?php the_modified_time('H:i:s'); ?></div>
     <div class="content_parts">
      <?php the_content('more...', 'false'); ?>
     </div>
    <?php endwhile; ?>
    </div>
   </div>
<?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>

ふむ。いいかな。

作成方法、というかパーツの構成要素が
テーマの作成
テンプレート入門
あたりに書いてあるので読みながら進める。

が、パッと見のモックがないとやる気が出ないので
とりあえず、ワイヤーフレームだけ作ってみる。
作るのは今じゃあまり見かけない、左サイドバー形式。

<!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">HEADER</div>
  <div id="main">
   <div id="content">CONTENT</div>
   <div id="widget">WIDGET</div>
  </div>
  <div id="footer">FOOTER</div>
 </div>
</body>
</html>

htmlはこんな感じだろう、きっと。

これにCSSを合わせて左サイドバー形式にする。
CSS Tools: Reset CSSもあとで組み合わせる。

#header, #main, #footer {
  width: 1000px;
  text-align: center;
  border: 1px solid #FF9999;
}
#content {
  float: right;
  width: 100%;
  margin-left: -260px;
  border: 1px solid #99FF99;
}
#widget {
  float: left;
  width: 240px;
  border: 1px solid #9999FF;
}
#footer {
  clear: both;
}

MediaQueriesの適用とかはとりあえず後回しで。
テーマ情報というものを記述しないといけないらしいけど、これも後で。
コレで最低限できた。
・・・ま、ただのHTMLです。
さすがにこれだけだと何が何やらなので、もうちょっと書き足してみる。

<!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>
  <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>
   <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>
  </div>
  <div id="footer">
   <div id="copyright">Powered by WordPress</div>
  </div>
 </div>
</body>
</html>

こんな。
content_container と widget_container は繰り返せるようにすればいいだろう、多分。
widget部分については ul / li で書いておいたほうが後々いいらしいので、そうしておく。