WordPressでフロントページに固定ページと最新投稿を同時に表示

WordPress2010.10.19

WordPressで固定記事と最新記事と新着記事タイトルを表示したい場合。

企業サイトなどで、基本固定の内容を表示したいのだけど、新着情報も載せたい。という事とかありますよね。
Wordpress表示設定でフロントページに固定ページと最新投稿を同時に表示したいという言い方がいいのかな？

こんな形で。

Wordpressのフロントページ設定を固定ページに設定すれば、選んだページがトップージに一応固定で表示されますが。
それだと、最新の投稿はトップに表示できないワケです。

トップページに
・固定ページを表示して、後で簡単に修正できるようにしたい。
・最新投稿を新着情報として表示したい。（タイトルと本文）
・最近の記事タイトルもついでに数件表示したい。（タイトルのみ）
これを全部一度にしたいんだい！そう思う場合があったりします。

方法
まずページテンプレート（page.php）を複製します。
そして、それをトップページ（フロントページ）にしたい固定ページのテンプレートとして設定します。

固定ページのテンプレート作成については以下をご覧下さい。
・WordPressでページによってテンプレートを変更する場合

複製したpage.phpに以下の記述を追加します。（長いけどザーッと書いてしまいます。）

太字部分が追加した部分です。

テンプレートはwp.Vicuna Extを使っているので、使っているテンプレートに合わせて、必要な部分を変更するのがいいと思います。
（「１．固定ページ」など日本語の部分は実際にはないです。）

１．固定ページ


2．最新の投稿


<?php $my_query = new WP_Query('&cat=0&showposts=1'); ?>
<?php if ($my_query->have_posts()) : ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="entry">
<div class="textBody">
<?php the_content(__('Continue reading', 'vicuna')); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>

3．最近の投稿タイトル


<?php $my_query = new WP_Query('&cat=0&showposts=10&offset=1'); ?>
<?php if ($my_query->have_posts()) : ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php endwhile; ?>
<?php endif; ?>



<?php wp_reset_query(); ?>

追加した部分（太字）は記事を表示するループです。

複数ループについては以下のサイトを参考に。
ぞのものズバリが判りやすく書かれています。
・wordpressでトップページを固定ページに設定して新着記事も表示する | DAICHIFIVE blog

続いて、各部分の説明を分解して書いてみます。

１．固定ページ

略

は、固定ページを読み出して表示している部分。
そのままだけど、判りやすいようにコメント。

２．最新の投稿

<?php $my_query = new WP_Query('&cat=0&showposts=1'); ?>
<?php if ($my_query->have_posts()) : ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="entry">
<div class="textBody">
<?php the_content(__('Continue reading', 'vicuna')); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>

で、最新の投稿のみ表示するようにしている。
具体的には3行目

<?php $my_query = new WP_Query('&cat=0&showposts=1'); ?>

の&showposts=1で、一番新しい記事を呼び出している。
かつ、&cat=0はカテゴリIDが0の記事という記述。

3．最近の投稿タイトル

<?php $my_query = new WP_Query('&cat=0&showposts=10&offset=1'); ?>
<?php if ($my_query->have_posts()) : ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php endwhile; ?>
<?php endif; ?>

で、最近の投稿タイトルを表示するようにしている。
具体的には3行目

<?php $my_query = new WP_Query('&cat=0&showposts=10&offset=1'); ?>

の&showposts=10&offset=1で、最新の記事一つを除き、最近の記事を10個を呼び出している。

最新記事と最近記事の表示分けについては
・wordpressのインデックスで表示を分割する方法 - さかどん記録
を参考にしています。

最近の投稿はタイトルのみ表示なので

を残し、本文を出力している部分は削除されています。

これを元にCSSなどで上手く表示調整したり、投稿日時も表示するようにすれれば、固定記事+最新記事（最新の投稿）+最近記事タイトル（最近の投稿のタイトル）、というトップページに仕上がります。

そして、最後の呼び出しループを終わらせます。

<?php wp_reset_query(); ?>

これで私が思うように表示できてヨカッタ。
もっと他にスマートな方法がありそう（複数ループの部分がイマイチ判らないので…）なのですが、とりあえずメモしておきます。

2011年9月1日追記：
書いてある内容を一部修正しました。