テンプレートファイルをわけてみた[WordPressテーマ作成#7]

Mar. 8, 2009

今回はこれまで作成したindex.phpファイルからヘッダー、フッター、サイドバーのテンプレートに分割しました。

header.php
htmlのhead要素とページのヘッダー部分を書いたテンプレート。
sidebar.php
サイドバーの内容を書いたテンプレート。
footer.php
ページのフッター部分。コピーライトとかはここです。
index.php
コンテンツ部分はこれになります。

header.php

どのあたりで切るかという問題になりましたが、htmlのhead要素とページタイトル（h1要素）を含むdiv#Headerまでを含めることにしました。

<!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" xml:lang="ja" lang="ja">
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <meta http-equiv="Content-Style-Type" content="text/css" />
       <meta http-equiv="Content-Script-Type" content="text/javascript" />
       <title><?php bloginfo('name');?></title>
       <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet" type="text/css" />
       <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url');?>" />
       <link rel="alternate" type="application/atom+xml" title="Atom cite contents" href="<?php bloginfo('atom_url');?>" />
       <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
       <?php wp_head(); ?>
</head>
<body>
  <div id="Wrapper">
    <div id="WrapperInner">
      <div id="Header">
        <div id="HeaderInner">
          <h1> <a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a> </h1>
          <p> <?php bloginfo('description');?> </p>
        </div>
      </div>
      <!-- END div#Header -->

sidebar.php

サイドバーはきっちりdiv#Secondaryで分けました。

<div id="Secondary">
  <div id="SecondaryInner">
    <ul>
      <?php wp_list_categories('show_count=1&title_li=<h2>カテゴリ</h2>'); ?>
      <li> <h2>アーカイブ</h2>
        <ul>
          <?php wp_get_archives('type=monthly'); ?>
        </ul>
      </li>
      <li><h2>タグ</h2>
      <?php wp_tag_cloud('format=list')?></li>
    </ul>
  </div>
</div>
<!-- END div#Secondary -->

footer.php

フッターに表示する内容はまだ考えてないのでとりあえず、WPのバージョンとサイト名を表記しておくことにしました。

    <div id="Footer">
      <div id="FooterInner">
        <ul class="support">
          <li>Powered by <a href="http://wordpress.org/">WordPress <?php bloginfo('version'); ?></a></li>
          <li><a href="http://scianto.net/">PAOLOG</a></li>
        </ul>
      </div>
    </div>
    <!-- END div#Footer -->
  </div>
  <!-- END div#WrapperInner -->
</div>
<!-- END div#Wrapper -->
<?php wp_footer(); ?>
</body>
</html>

index.php

上のように各ブロックをテンプレートにわけたので、それぞれを読み込む場所に次のタグを挿入します。

get_header()
header.phpを読み込みます。
get_sidebar()
sidebar.phpを読み込みます。
get_footer()
footer.phpを読み込みます。

<?php get_header();?>
<div id="PageBody">
  <div id="Primary">
    <div id="PrimaryInner">
      <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
      <div class="entry">
        <div class="entry-header">
          <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
          <ul class="entry-meta">
            <li class="entry-meta-time"><em>投稿日時</em> <span><?php the_time('Y');?></span><span><?php the_time('m');?></span><span><?php the_time('d');?></span><span><?php the_time('g:i A');?></span></li>
            <li class="entry-meta-author"><em>投稿者</em> <?php the_author();?></li>
            <li class="entry-meta-category"><em>カテゴリ</em><?php the_category(); ?></li>
            <?php if (function_exists('the_tags')) : the_tags('<li class="entry-meta-tags">', ' | ', '</li>'); endif; ?> <?php edit_post_link('編集', '<li class="admin">', '</li>'); ?>
          </ul>
        </div>
        <div class="entry-body">
          <?php the_content(); ?>
        </div>
      </div>
      <?php comments_template('', true); ?>
      <?php endwhile; endif; ?>
    </div>
  </div>
  <!-- END div#Primary -->
  <?php get_sidebar(); ?>
</div>
<!-- END div#PageBody -->
<?php get_footer(); ?>