wordpressでトップページ以外に全記事一覧ページを作る方法

wordpressでトップページをオリジナルで作り、別のページに新しく新着順に記事を表示したいというケース少なくありません。

今回お客様のホームページを作成していてそのような仕様にしたかったので、合わせて作り方を紹介したいと思います。

完成イメージ

一覧ページ以外で新着記事を表示する方法です。完成系は下記の様なレイアウトになります。
本記事で紹介するコードをコピー&ペーストしていただければ、表示できるようになります。

テーマ内にテンプレートを作る

テンプレートを下記のように新しく作成し、アップロードします。

ファイル名は、alllist.php。テンプレート名は、前記事リスト(トップの替わり)固定ページテンプレートとします。

メイン部分のソースコードは1行目~4行目と9行目~43行目のハイライトされた部分です。

その他の部分は、ページとしてのレイアウトを整えるためのコードです。ヘッダーやサイドメニューやフッターなどを読み込んでいます。

また、「category__not_in’ => array(71,72,73),」の部分は、この記事一覧に、特定のカテゴリに登録された記事を含めない。という記述になります。除外するカテゴリがない場合には、行ごと削除して問題ありません。

<!--?php /** * Template Name: 全記事リスト(トップの替わり) */ ?-->
<!--?php get_header(); ?--></pre>
<div id="content">
<div id="inner-content" class="wrap cf"><!--?php $paged = (int) get_query_var('paged'); $args = array( 'category__not_in' => array(71,72,73),
 'posts_per_page' => 10,
 'paged' => $paged,
 'orderby' => 'post_date',
 'order' => 'DESC',
 'post_type' => 'post',
 'post_status' => 'publish'
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
 while ( $the_query->have_posts() ) : $the_query->the_post();
?-->
<div class="indenx2itembox">
<div class="imgbox"></div>
<div class="titlebox"><!--?php the_time('Y年n月j日'); ?-->
<h2 class="titlebox_title"></h2>
<div class="titlebox_contentin"><!--?php echo mb_substr(get_the_excerpt(), 0, 52); ?-->...</div>
</div>
</div>
<!--?php endwhile; endif; ?-->
<div class="pagenum"></div>
<!--?php wp_reset_postdata(); ?--> <!--?php get_sidebar(); ?--></div>
</div>
<pre>
<!--?php get_footer(); ?-->

3行目にある、「Template Name: テンプレート名」を任意の名前で入力しましょう。

サムネイル書き出し用コードを追加する

テンプレート内にあるfunction.phpに下記コードを追加します。

add_image_size( 'index2listthum', 265, 156, true );

一覧で表示する用のサイズを決めます。265となっている部分が横幅で、156となっている部分が縦幅になります。一覧ページの仕様にあわせてサイズを調整してください。

style.cssにcssを追加する

下記コードがcssになります。style.cssに追加してください。
それぞれの幅(width)はブログのコンテンツ領域に合わせて調整してください。

.indenx2itembox {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap:         wrap;
	-webkit-justify-content: space-between;
	justify-content:         space-between;
	margin-bottom: 25px;
	border-bottom: 1px solid #dddddd;
	padding-bottom: 20px;
}

.indenx2itembox .imgbox {
	width: 225px;
}

.indenx2itembox .titlebox{
	width: 360px;
}

.indenx2itembox .titlebox_time {
	font-size: 11px;
	display:block;
	line-height: 100%;
}

.indenx2itembox .titlebox_title {
	margin-top: 5px;
}

.indenx2itembox .titlebox_contentin {
	font-size: 13px;
}
}

.indenx2itembox .titlebox_title a,
.indenx2itembox .titlebox_title a:hover,
.indenx2itembox .titlebox_title a:link,
.indenx2itembox .titlebox_title a:visited {
	text-decoration:none !important;
	color: #000000;
}

固定ページでテンプレートを選択

アップが完了したら、固定ページを開きます。
右側のテンプレートの欄の中から先程作成したテンプレート名を選択します。

あとは、本文内は何を書いても表示されないので、適当に記述して公開するだけで完成です!

とても簡単ですね!

まとめ

トップページ以外で、新着記事一覧を表示する方法を紹介しました。オプションを付けることで、特定のカテゴリを除外したりすることも可能なので、是非挑戦していただければと思います。

実際に作成したページはコチラからご確認いただけます。

ホームページの売上がなかなか伸びない。

どうしたら売れるホームページになるのか分からない。

そのようにお考えのあなたに、是非読んでいただきたい!

15年間のノウハウと実績から得たホームページ改善ポイントをまとめました!

超オトクな特典付き!!!

無料ダウンロードはコチラ
売上アップ間違いなし!34個の改善ポイント