タグ: テーマ

4.style.css にテーマ情報を付加して最低ラインは終了

ここまでやると

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

3-4.中身のPHP化(sidebar.php + functions.php)

現在の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>

で。
widgetに対応してるということにしなくてはいけないので、<li>部分を

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>

で囲むことにする。

  <div id="widget">
   <ul class="widget_block">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    <li class="widget_container">
     <h3 class="widget_title">widget_title</h3>
     <div class="widget_parts">
      WIDGET の 中身 1
     </div>
    </li>
<?php endif; ?>
   </ul>
  </div>

さらに、functions.php ファイルを作成して以下のソースを書き込む。

<?php
if ( function_exists('register_sidebar') ) {
    register_sidebar();
}

とりあえずこれでwidgetに対応してるテーマということになる。
このへんのやり方はWidgetizing Themes – WordPress Codex 日本語版を参考に。というかそのままやっただけです。

3-3.中身のPHP化(footer.php)

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>

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

3-2.中身のPHP化(header.php)

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>

テンプレートタグ – WordPress Codex 日本語版を参考に進める。

  • 変更点01:titleタグ
    <title>TEST CONTENT</title>

    bloginfoでブログ名の表示、wp_titleで記事タイトルを表示できるようなのでコレを使う。
    google等の表示に合わせたいので「記事タイトル – ブログタイトル」の表示形態で。

    <title><?php wp_title(' - ', true, 'right'); ?><?php bloginfo('name'); ?></title>
  • 変更点02:CSSリンク
    <link rel="stylesheet" type="text/css" href="style.css" />

    ここでもbloginfoを使う。

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

    これで、使用中のメインCSSファイルのURLに変換できる。

  • 変更点03:headタグ終了部分直前
    </head>

    headの中身はここに書いてあるだけしか使わない!という事なら必要ないんだけど、
    プラグイン入れたりすると必要に応じてheadの中身を追加されたりするので
    「追加するならここによろしく」
    という意味合いで。

    <?php wp_head(); ?>
    </head>
  • 変更点04:サイトのタイトル
    <h1 id="title">サイトのタイトルだよー</h1>

    サイトのタイトルをbloginfoから持ってくる。
    ついでにリンクになっていると便利なのでこれもbloginfoから持ってきてAタグで囲む。

    <h1 id="title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
  • 変更点05:サイトの説明
    <div id="desc">サイトの説明文が入ったりします</div>

    サイトの説明文もbloginfoから持ってくる。

    <div id="desc"><?php bloginfo('description'); ?></div>
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title><?php wp_title(' - ', true, 'right'); ?><?php bloginfo('name'); ?></title>
 <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
 <div id="wrap">
  <div id="header">
   <h1 id="title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
   <div id="search">検索?<input type="text" size="10" /></div>
   <div id="desc"><?php bloginfo('description'); ?></div>
  </div>

こんなかな?

3-1.中身のPHP化(index.php)

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

<?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_datethe_time
    ※the_dateは「同じ日に複数の記事がある場合は、最初の記事とともに一度だけ出力される。」ということなので、the_timeに “Y/m/d H:i:s” を出力させた方がイイ。
    更新者 → the modified author
    更新日時 → the_modified_datethe_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(); ?>

ふむ。いいかな。

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

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

1.ワイヤーフレームを作る

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

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

<!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 で書いておいたほうが後々いいらしいので、そうしておく。