WordPress のテーマを自作するのは簡単だろうということで始めた「テーマをゼロから作ってみる」の２回目です。
当面 WordPress の仕組みを理解するためにすべて index.php で処理する方法を取っています。つまり、投稿ページ以外はすべてリクエスト（カテゴリーや検索ワードという意味）に該当する最新記事の一覧が表示されるということです。
html テンプレを入れる
前回はヘッダ要素を作成しました。次はボディ要素 <body></body> です。
まずは、html のテンプレを index.php に入れてみます。
<body> <header> <h1>サイトのタイトル</h1> <p>キャッチフレーズ</p> </header> <nav>メニュー</nav> <main> <nav>パンくずリスト</nav> <article> <header> <h2>投稿タイトル</h2> <p>投稿日付</p> <p>カテゴリー</p> </header> <div>記事</div> </article> </main> <aside>サイドバー</aside> <footer>フッター</footer> </body>
当然ですが、こうなります。
テンプレートタグを入れる
この html テンプレに WordPress のテンプレートタグを入れていきます。
<body> <header> <h1> <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> </h1> <p><?php bloginfo('description'); ?></p> </header> <nav>メニュー</nav> <main> <nav>パンくずリスト</nav> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article> <header> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p><?php the_date(); ?></p> <p><?php the_category( ', '); ?></p> </header> <div><?php (is_single()) ? the_content() : the_excerpt(); ?></div> </article> <?php endwhile; endif; ?> </main> <aside>サイドバー</aside> <footer>フッター</footer> </body>
こうなります。使っているテンプレートタグは次のとおりです。
- テンプレートタグ/bloginfo – WordPress Codex 日本語版
- テンプレートタグ/the permalink – WordPress Codex 日本語版
- テンプレートタグ/the title – WordPress Codex 日本語版
- テンプレートタグ/the date – WordPress Codex 日本語版
- テンプレートタグ/the content – WordPress Codex 日本語版
- テンプレートタグ/the excerpt – WordPress Codex 日本語版
本文表示では、
<?php (is_single()) ? the_content() : the_excerpt(); ?>
としていますので、投稿ページでは全文を表示し、その他ホームなどでは抜粋を表示します。
なお、サンプルとして使っているデータは次のサイトのものです。
投稿ページはどうなるか？
記事タイトルに各記事へのリンクが張ってありますのでクリックすれば投稿ページへ飛びます。
こうなります。記事本文については、CSS で配置などを見やすく整理すれば完成しそうです。
ただ、ここでひとつやっておくべきことは、<h1></h1> タグの付け替えです。上記の index.php では投稿ページでも <h1></h1> がサイトタイトルになってしまい、記事タイトルが <h2></h2> のままです。これを変えます。
<body> <header> <?php echo (is_home()) ? '<h1>' : '<p>'; ?> <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> <?php echo (is_home()) ? '</h1>' : '</p>'; ?> <p><?php bloginfo('description'); ?></p> </header> 略 <article> <header> <?php echo (is_single()) ? '<h1>' : '<h2>'; ?> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <?php echo (is_single()) ? '</h1>' : '</h2>'; ?> <p><?php the_date(); ?></p> <p><?php the_category( ', '); ?></p> </header> <div><?php (is_single()) ? the_content() : the_excerpt(); ?></div> </article>
これで、ホームではサイトタイトルが h1 になり、投稿ページでは記事タイトルが h1 になります。
なお、ここで使っている is_home() や is_single() による分岐はすべての表示を index.php で行っているから可能な分岐です。現実的なテーマでホームを固定ページで作ったりする場合はこの限りではありません。
次はメニューとサイドバーへのウィジェット登録です。
