前回のおさらい。
- サイトデザインを決める
- html・css にコーディングする
- テーマ用フォルダを作成する
- header.php と footer.php を作成する
- トップページとBlogページのテンプレートファイルを作る
- index.php と page.php を作成する
- TOPページ、Blogページ用の「ページ」を作成する
そして最後に、パーマリンクの設定をしてTOPページ、Blogページともに適切なURLに変更しました。
さて今回は…
手順8：サイドバー（sidebar.php）を作成する
前回、Blog を index.php テンプレートを使って表示できるように設定しました。
そのとき、ファイルは未実装でしたが、
1 | <?php get_sidebar(); ?> |
を読み込ませるような記述を入れておきました。
1 | <?php get_sidebar(); ?> |
とは、 sidebar.php テンプレートを呼び出す為のインクルードタグになります。
Blog のときは「検索」や「カテゴリ」、「タグ」などのメニューをサイドバーに表示したいので、ここで sidebar.php を作成しておきます。
sidebar.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <div id="blog_sidebar"> <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?> <?php include (TEMPLATEPATH . ‘/searchform.php’); ?> // 検索フォームの読み込み（テンプレート未実装ですが…） <dl> <dt><?php _e(‘Archives’); ?></dt> <dd><ul> <?php wp_get_archives(‘type=monthly&show_post_count=true’); ?> // 月別のアーカイブをリスト表示する </ul></dd> </dl> <dl> <dt>カテゴリー</dt> <dd><ul> <?php wp_list_categories(‘show_count=1&title_li=’); ?> // リンク付きのカテゴリーリストを表示する </ul></dd> </dl> <dl class="tag_cloud"> <dt>タグ</dt> <dd class="clearfix"> <?php wp_tag_cloud(‘smallest=8&largest=22′); ?> // タグクラウドを表示する。投稿件数に応じて、文字の大きさ（smallest／largest）を指定。 </dd> </dl> <?php endif; ?> </div> |
いまは、「検索、アーカイブ、カテゴリー、タグ」しか表示していませんが、以下のようなテンプレートタグを使うことでカレンダー表示などもできます。
1 | <?php get_calendar(); ?> |
いずれ増やすことはあるかもしれませんが、いまは他には特に表示させるものはないので、これで sidebar.php は完成です。
- 【ここまでのテーマフォルダの内容】
-
- sidebar.php
- index.php
- page.php
- blog
- top.php
- header.php
- footer.php
- style.css
- img フォルダ
- css フォルダ
手順9：検索フォーム searchfrom.php を作成する。
先ほど作成したサイドバーから、呼び出されていた検索フォームのテンプレートを作成します。
検索フォームの呼び出し:
1 2 3 | <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?> <?php include (TEMPLATEPATH . ‘/searchform.php’); ?> |
今回は、シンプルな検索フォームにしていたので、ソースは割と単純です。
searchfrom.php :
1 2 3 4 5 | <form method="get" id="searchform" action="<?php bloginfo(‘url’); ?>/"> <div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" class="search" /> <input type="submit" id="searchsubmit" value="検索" /> </div> </form> |
これで完了。
あっさりでしたが、デザインを変更しようと思ったときは、この searchform.php を書き換えればOKです。
- 【ここまでのテーマフォルダの内容】
-
- searchform.php
- sidebar.php
- index.php
- page.php
- blog
- top.php
- header.php
- footer.php
- style.css
- img フォルダ
- css フォルダ
手順10：Blog の単一記事を表示する single.php を作成する
ずいぶんとテンプレートが出来上がったので、Blog部分の細かな部分に着手します。
Blog の記事を単体表示させたとき、WordPress では single.php テンプレートを使って表示します。
記事に対するコメント投稿フォームや、トラックバック用URLの表示などもここで表示したいので、以下のように記述します。
single.php :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <?php get_header(); ?> <div id="blog" class="clearfix"> <div id="blog_main"> <div class="navigation"> <?php previous_post_link(‘<div class="prev">Prev » %link</div>’); ?> <?php next_post_link(‘<div class="next">Next « %link</div>’); ?> </div> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2> <p class="post_date"><?php the_date(‘Y-m-d’); ?> Posted by <?php the_author(); ?></p> <div class="entry"> <?php the_content(); ?> </div> <div class="cat_tag clearfix"> <p class="cat">カテゴリー: <?php the_category(‘, ‘); ?></p> <p class="tag"><?php the_tags(‘タグ: ‘, ‘, ‘); ?></p> </div> <div id="comment_area"> <?php comments_template(); ?> <div class="trackback"> <h3>トラックバックURL</h3> <input type="text" value="<?php trackback_url(); ?>"> </div> </div> <?php endwhile; else: ?> <p><?php echo "お探しの記事、ページは見つかりませんでした。"; ?></p> <?php endif; ?> <div class="navigation"> <?php previous_post_link(‘<div class="prev">Prev » %link</div>’); ?> <?php next_post_link(‘<div class="next">Next « %link</div>’); ?> </div> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> |
上記のソースは、まず header.php を呼び出し、そしてBlog記事全体を表示、それからさきほど作成した sidebar.php を呼び出し、最後に footer.php を読み出して終了しています。
部分的な説明を以下に記述します。
前の記事（いまより古い記事）へのリンク :
1 | <?php previous_post_link(‘<div class="prev">Prev » %link</div>’); ?> |
次の記事（いまより新しい記事）へのリンク :
1 | <?php next_post_link(‘<div class="next">Next « %link</div>’); ?> |
上記は装飾の為に <div> などが指定されていますが、両者とも基本的に
1 | &link |
さえ指定されていれば記事のタイトルと記事へのリンクがセットになって表示されます。
記事の表示 :
1 2 3 4 5 6 7 8 9 | <?php if (have_posts()) : while (have_posts()) : the_post(); ?> Blog 全文・コメント記入欄などを表示 <?php endwhile; else: ?> <p><?php echo "お探しの記事、ページは見つかりませんでした。"; ?></p> <?php endif; ?> |
表示する本文があるときは、（if 〜 endwhile までの内容）Blog の記事全文を表示します。
何らかの原因（削除された等）で記事がなかった場合は、else より以下の内容を表示します。
記事のカテゴリー、タグを表示する :
1 2 3 4 | <div class="cat_tag clearfix"> <p class="cat">カテゴリー: <?php the_category(‘, ‘); ?></p> <?php if (get_the_tags()) the_tags(‘<p class="tag">タグ: ‘, ‘, ‘, ‘</p>’); ?> </div> |
表示している記事のカテゴリーとタグを表示します。
なお、タグについては「カテゴリには属しているが、タグはない」という記事もあるので、タグがあったときにだけ表示するようにしています。
コメント入力フォームの読み込み :
1 | <?php comments_template(); ?> |
まだ作成していませんが、comments.php を呼び出すためのインクルードタグです。
トラックバックURLを表示 :
1 2 | <h3>トラックバックURL</h3> <input type="text" value="<?php trackback_url(); ?>"> |
現在の記事のトラックバックURLを表示します。
ここでは、inputタグに出力するようにしてますが、
1 | <a href="<?php trackback_url(); ?>">トラックバックURL</a> |
のような使い方でもOKです。
これで、記事全文表示用のテンプレートが完成です。
- 【ここまでのテーマフォルダの内容】
-
- single.php
- searchform.php
- sidebar.php
- index.php
- page.php
- blog
- top.php
- header.php
- footer.php
- style.css
- img フォルダ
- css フォルダ
あともう少しで完成ですが、今日はここまで…。