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

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

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

サイトのアドレスが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>

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

超簡単に、このような構造だとします。まずは普通のブログのように、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: ブログ
*/ ?>

って名前をつけて。

「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をループの直前に書いたら、表示されたー！！

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

表示されてウキウキしながら作業をしてたら、あれ…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さんマジ女神！！ありがとうございます！！！

ようやく形になりました

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