[WordPress]固定ページで記事一覧を表示するために行き詰まったあれこれ

[WordPress]固定ページで記事一覧を表示するために行き詰まったあれこれ

仕事でWordPressを使ったサイトを構築して、home.phpをサイト全体のトップページにして、blog.phpという固定ページをブログのトップにしたいなーと思って、行き詰まったり解決したりしたまとめです。同じようなことしてる方はいっぱいいると思うんですが、メモをかねて。


2013/3/25追記

このエントリはquery_postsを使った方法を紹介しています。

その後こちらの記事を拝見し、非推奨な書き方をしていたことに気がつきまして、ご迷惑をおかけして非常に申し訳ありません。これもきっとpre_get_postsで出来るんだ!とがんばってみたのですが、固定ページのループへの作用のさせ方がわからず…。

どなたか、参考になる記事などご存知でしたら教えていただけると嬉しいです。なにとぞ、宜しくお願い致します。

更に追記:解決策を教えて頂きました!

WP_Queryで記事一覧を取得する方法の他に、管理画面の設定から簡単にできるという事実…!こっちのほうが断然お勧めです!

それでは以下、こんな書き方もできますよということで、一応残しておきます。

WordPressで普通の構造のWebサイトを作りたい

120918-1

サイトのアドレスがsample.comという名前だとして、その直下にWordPressをインストールすると、最終的にはindex.phpが読み込まれるのですが、home.phpが存在する場合はそちらが優先されるので、その性質を利用します。

で、普通のブログならば記事一覧のループをindex.phpに書いていたのを、blog.phpという名前(スラッグ)の固定ページを作ってその役割を担ってもらおうという、そういう考えです。

サイトトップに新着記事を表示

表示したい場所にこんな感じで書きます。

home.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>

参考

  • テンプレートタグ get_posts で新着記事リスト等を表示|power source*http://bono.s206.xrea.com/2007/04/394-wp_get_posts/

ブログのトップ(記事一覧)ページをつくる

120918-2

超簡単に、このような構造だとします。まずは普通のブログのように、index.phpにメインループを書いてみます。

index.phpをトップで使わない場合でも、カテゴリーやアーカイブページではindex.phpを使うことになるので、どのみち必要になります。まずはここからつくりましょう。

index.php

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

こんな感じになりますね。sideber.phpは、レイアウト上は左にありますが、SEO的にコンテンツが先にきたほうが良いのでCSSで順番を入れ替えます。さて、じゃあこれをコピーしてblog.phpって名前にすればいいのかな!

index.phpをコピーして、blog.phpっていう名前にして、冒頭に

<?php /*
Template Name: ブログ
*/ ?>

って名前をつけて。

120918-3

「blog」っていうスラッグの固定ページを新規でつくって、ページのテンプレートをさっきつくったblog.phpにして。おー、思ったより簡単じゃーん!

…と、思いきや、表示されない…orz 「blog」っていう名前でつくった固定ページが何故かひとつだけ出てくるのみ。なんでー!!

固定ページへのループはそのままじゃダメ

いろいろ調べた結果、どうやらquery_post()というテンプレートタグを使うと出来るみたいです。メインループを詳細にカスタマイズできたりするもので、1ページに1回しか使えないなど制約があるようです。詳しくはコーデックを。

blog.php

<?php /*
Template Name: ブログ
*/ ?>
<?php get_header(); ?>

// 略

<?php query_posts('post_type=post&paged='.$paged); ?>
<?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(); ?>

こんな感じで、投稿記事のみという指定をして、query_postsをループの直前に書いたら、表示されたー!!

2012/9/24追記:8行目を修正しました!

当初、query_posts('post_type=post');と書いていたんですが、そのままだと記事が増えてページングが必要になった際、同じ記事が表示されるという不具合に遭遇しました。query_posts()を使用の際は、ページ番号が入っていないと、常に1ページ目を取得しようとしてしまうらしいので、'paged='.$pagedも書かねばならないようです。

条件分岐ができなくなった

表示されてウキウキしながら作業をしてたら、あれ…is_single()とかの条件分岐が…効かない!?なんでー!!ということで、またもググったところ、query_postsを変更してしまうと、条件分岐は使えないとのこと。

そうだったのか…。query_postsを変更したらリセットするのを忘れてはいけないようです。

blog.php

<?php /*
Template Name: ブログ
*/ ?>
<?php get_header(); ?>

// 略

<?php query_posts('post_type=post&paged='.$paged); ?>
<?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 wp_reset_query(); ?>

// 略

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

こういうことかー!!!

query_postsを変更している以上、ループの中は条件分岐は使えませんが、リセットすることで外では使えるようになりました!

moreタグが効いてない

さて、これで、OK…と思ったら、記事の「続きを読む」がない…?全文表示されてる!先生ー!Googleせんせー!!

<?php /*
Template Name: ブログ
*/ ?>
<?php get_header(); ?>

// 略

<?php query_posts('post_type=post&paged='.$paged); ?>
<?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 global $more; $more = FALSE; ?>
				<?php the_content('続きを読む'); ?>
			<?php $more = TRUE; ?>
		</div>
	<?php endwhile; ?>
<?php else : ?>
	<div class="post">
		<h2>記事が見つかりません</h2>
		<p>記事が存在しないときのテキスト</p>
	</div>
<?php endif; ?>
<?php wp_reset_query(); ?>

// 略

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

MANAさんマジ女神!!ありがとうございます!!!

ようやく形になりました

行き詰まってググるの繰り返しだったので、まとめてみました。どなたかのお役に立てたら嬉しいです!

公開日:2012/09/18
更新日:2014/02/24

2件のピンバック

  1. […] 参考:[WordPress]固定ページで記事一覧を表示するために行き詰まったあれこれ *Ateitexe […]

  2. […] [WordPress]固定ページで記事一覧を表示するために行き詰まったあれこれ *Ateitexe […]

12件のコメント

  1. Satoshi より:

    固定ページでブログ一覧を表示させるのに手間取っていたので、助かりました。
    ありがとうございます!

    • *you より:

      Satoshiさんコメントありがとうございます。
      お役にたてて光栄ですー!

  2. toyomachi より:

    本気でドツボにハマっていました。
    シンプルで分かりやすい説明に助けていただきました。
    やっと寝れる(笑)。。ありがとうございます!

    • *you より:

      toyomachiさん、コメントありがとうございます!
      睡眠時間確保に貢献できて光栄であります(*`・ω・)ゞ

  3. Yousan より:

    あざっす助かりました。

    • *you より:

      Yousanさん、コメントありがとうございます。お役に立てて嬉しいです!

  4. 2020mirai より:

    随分時間をかけて悩みましたが、この記事のお陰で解決できました。大変助かりました。ありがとうございました。

    • *you より:

      2020miraiさん、コメントありがとうございます。結構前の記事なのに未だに誰かのお役に立てるとは嬉しい限りです(´∀`*)

  5. かば場のかば力 より:

    本当に勉強になりました。足を向けてねれません!

    • *you より:

      そんな、滅相もございませんΣ(゚д゚lll) どうぞむけてください!!w

  6. たこすけ より:

    大変勉強になりました。
    ありがとうございました。

    • *you より:

      たこすけさん、コメントありがとうございます! こんなに息の長い記事になるとは自分でもびっくりですー!


コメントを残す

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

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

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