WordPressで固定ページをブログのトップとして記事を一覧表示する方法

WordPressで固定ページをブログのトップとして記事を一覧表示する方法

過去に、query_postsを使って試行錯誤して固定ページに記事一覧を表示させる記事を書いたのですが、もっと簡単にできる方法を教えて頂いたのでシェアさせて頂きます!ありがとうございますー!。・゚・(ノД`)・゚・。


ここまでの流れ

query_postsで固定ページに一覧表示していた

昨年、こんな記事を書きました。

サイト構造の図

こんな構造のサイトを作りたくて、blog.phpという固定ページをブログのトップにしたいんだよーと。で、試行錯誤して書いたのがこちらの記事です。

query_postsは非推奨…!?

それが、冒頭に追記させて頂いていたようにquery_postsが非推奨である、という記事を拝見してこれ、ダメなんじゃないかと…。

ここで、私は非推奨=使っちゃダメ!なんだと思ってしまい、焦って「ヤバい!あんな間違った記事晒してたらヤバい!」とわたわたしてしまったのですが、

…というものなのですね…!Hishikawaさん(@HissyNC)、今村さん(@s56bouya)、大変失礼致しました…!優しく接してくださってありがとうございます…!!

もっと簡単な方法が…!

そして私のトラックバックから、Hishikawaさんがこのような記事を書いてくださいました。

WP_Queryで記事一覧を取得する方法を紹介して頂きました。こんなふうに書けばいいのかー!と感動していたら、その後半、@jim0912さんの発言が。普通に、管理画面の設定からできるみたいです。知らなかった…なんてことなの…

方法

まず、投稿ページ用とトップページ用のふたつの固定ページを用意して、

130326-1

管理ページから、設定→表示設定。

130326-2

ここで、フロントページと投稿ページをさっきつくった固定ページに設定します。

当初、blog.phpなどのファイルを用意して、ページテンプレートの設定に…としていたのですが、また教えて頂きました。

130326-3

つまり、上記の設定をすればこのように使えるようになるということですね…!ありがとうございますー!。・゚・(ノД`)・゚・。

<?php get_header(); ?>

// 略

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<div class="post">
			<p><?php the_time("Y年m月j日") ?></p>
			<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
			<?php if(has_post_thumbnail()) { the_post_thumbnail(); } ?>
			<?php the_content('続きを読む'); ?>
		</div>
	<?php endwhile; ?>
<?php else : ?>
	<div class="post">
		<h2>記事が見つかりません</h2>
		<p>記事が存在しないときのテキスト</p>
	</div>
<?php endif; ?>

// 略

<?php get_sidebar(); ?>
<?php get_footer(); ?>

あとは普通のブログをつくるようにindex.phpに書くのと同じことをhome.phpに書けば良いのです!こんな、方法が、あったなんて…orz

追記:front-page.phphome.phpを作成すると優先的にそちらが使われ、存在しない場合はテンプレート階層に従って、最終的にはすべてindex.phpに行き着きます。

今回の例でこの2つを作成しないと、私の環境では

  • front-page.phppage.php
  • home.phpindex.php

が該当するので、そのファイルにてis_front_page()is_home()の分岐を使ってレイアウトを変えることも可能です。

特に、home.phpindex.phpの表示させたい内容がほとんど変わらない場合は、home.phpは作成せず、index.phpにて、必要なところだけis_home()の分岐でレイアウトを変える、という使い方が便利だなーと思いましたのでよろしければご参考までに。

追記:トップに新着情報を表示

トップページ(front-page.php)にブログの新着情報を載せておきたい場合は、こんなふうに書くのが良いんじゃないでしょうか。

<ul>
	<?php
	global $post;
	$args = array( 'posts_per_page' => 5 );
	$myposts = get_posts( $args );
	foreach( $myposts as $post ) {
		setup_postdata($post);
		?>
		<li>
			<dl>
				<dt><?php the_time('Y.m.d') ?> 【<?php the_category('|') ?>】</dt>
				<dd><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></dd>
			</dl>
		</li>
		<?php
	}
	wp_reset_postdata();
	?>
</ul>

日付、カテゴリー、リンク付きのタイトルを5件取得します。

たくさんの方に助けて頂きました

今回、トラックバックという形から解決策を教えて頂き、本当にネットってすごいなぁと感じています。WP_Queryを使った方法も、とても勉強になります。本当に、皆様、ありがとうございました!

公開日:2013/03/26
更新日:2015/11/18

1件のピンバック

  1. […] ※「WordPressで固定ページをブログのトップとして記事を一覧表示する方法 *Ateitexe」さんでわかりやすく紹介されています。 […]

4件のコメント

  1. yuya より:

    ちょうど同じ状況で悩んでおり、googleしてたどりつき、参考にさせていただきました。わかりやすくまとめていただきありがとうございます!フロントページの表示設定を行った場合、トップページはfront-page.php、投稿ページはhome.phpがテンプレートとなるのですね。
    運営者さんのおっしゃるとおり、こんなに情報がきれいに繋がるとは。。ネットってすごいです。

    • *you より:

      yuyaさん、コメントありがとうございます。

      お役に立てて光栄です(*´∀`*) ブログだけじゃない使い方をしたい、って思ったときに便利ですよね。たくさんの方に教えていただけて、わたしもとっても嬉しかったですー!

  2. hiroshi より:

    home.php / front-page.php を使うということは、
    「設定>表示設定>フロントページの表示」
    の部分は特に設定しないということになるのでしょうか?
    プルダウンに出てこなくなりますので。

    その場合 front-page.php のURLは何になるのでしょうか?

    • *you より:

      hiroshiさん、コメントありがとうございます。

      home.php / front-page.php を使う場合でも、固定ページを2つ作って設定が必要です。

      例えば、http://sample.com/ に WP があるとして、

      • フロントページ(スラッグ:front-page)
      • ブログトップ(スラッグ:blog-top)

      という2つの固定ページを作成して「設定>表示設定>フロントページの表示」からそれぞれ設定し、front-page.php / home.php を用意してやると、

      • フロントページ → http://sample.com/(front-page.phpを使用)
      • ブログトップ → http://sample.com/blog-top/(home.phpを使用)

      というURLになるかと思います。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)

YouTubeでQ&Aコンテンツを企画しています

運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。