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

WordPress 2010 年 10 月 19 日 google+0 はてなブックマーク15 Evernote

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

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

こんな形で。

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

トップページに
・固定ページを表示して、後で簡単に修正できるようにしたい。
・最新投稿を新着情報として表示したい。(タイトルと本文)
・最近の記事タイトルもついでに数件表示したい。(タイトルのみ)

これを全部一度にしたいんだい!そう思う場合があったりします。

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

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

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

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

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

<!--end dynamic_sidebar header -->

1.固定ページ
<!--start front page -->

<div class="entry">
<div class="textBody">
<?php the_content(__('Continue reading', 'vicuna')); ?>
</div>
<?php comments_template(); ?>
</div><!--end entry-->

<!--end front page -->

2.最新の投稿
<!--start news item -->

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

<!--end news item -->

3.最近の投稿タイトル
<!--start news title -->

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

<!--end news item -->

<?php wp_reset_query(); ?>

<!-- end loop -->

<!--start dynamic_sidebar footer -->

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

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

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

1.固定ページ

<!--start front page -->
 略
<!--end front page -->

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

2.最新の投稿

<!--start news item -->

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

<!--end news item -->

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

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

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

3.最近の投稿タイトル

<!--start news title -->

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

<!--end news title -->

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

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

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

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

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

<h1><?php the_title(); ?></h1>

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

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

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

<?php wp_reset_query(); ?>

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

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

投稿一覧のループが閉じられていませんでした。

<?php wp_reset_query(); ?>

が必要なので、説明を追加しています。

(固定ページの記事を、投稿一覧の後に表示する場合、前のままでは上手くいかなかったです。)

基本からしっかりわかる WordPress 3カスタマイズブック (Web Designing Books) [単行本(ソフトカバー)] WordPress レッスンブック 3.x対応 [単行本]WordPress ポケットリファレンス (POCKET REFERENCE)WordPress関数リファレンスガイド

【ご連絡】WordPress、サイト制作関係の新しい記事は、こちらのサイトに書いてます

広告

CPI 激安ドメイン ロリポップ!レンタルサーバー @Next Style お名前.com お名前.com


人気ブログランキング にほんブログ村 blogram

関連記事

    コメントフォーム
    メールアドレスは必須ですが公開はされません

    トラックバックURL

    ピンバック

    広告
    ブックマーク
    はてぶ人気記事
    過去ログ