WordPress 特定カテゴリーの記事を指定件数分表示する

たくさん方法がある中で今回とっても参考になった(というかマルマル使わせてもらった)記事があり、あっさりできたので、備忘録として残しておきます。

ブログページ以外にも、投稿記事を表示させたい場合はよくあります。
たとえば、トップページに新着記事とか
ニュースページに投稿記事のカテゴリ”ニュース”のみとか。

カスタム投稿タイプを作成する方法も考えたのですが、なんかいまいち理解しきれていないようで断念。

 

今回は、

・固定ページのテンプレートを追加で作成して、

そのテンプレートに、

・投稿記事のカテゴリが”販売”で

・最新記事5件を

・アイキャッチ画像もキレイに並べて

・一覧表示させる

っていうのをやりました。

テンプレートの作成

まずは、固定ページのテンプレート作成

もともとある、page.phpをダウンロードし、page-second.phpとファイル名を変更。

page-second.phpの一番上に、

<!--?php /* Template Name: page-second(任意の名前) */ ?-->

とする

このファイルを子テーマフォルダに入れる

※page.phpと同じ階層においてもいいけど、改版が多いテンプレートのため子テーマを作っていたので。

固定ページの作成

管理画面から固定ページを新規作成し、テンプレートに先ほど作成した、page-secondを指定する

固定ページに投稿記事を表示させる

page-second.phpを開き、以下を追加
※表示させる投稿数やカテゴリIDは変更してみてください。以下だと6行目あたり

<?php //------------------------------------ 最新の投稿 10件 ------------------------------------開始 ?>
<table><tr><td>
<?php dynamic_content_gallery(); ?>
<h2 class="pagetitle">新着 10件</h2> 

<?php query_posts('showposts=10&posts_per_page=-1&cat=-7'); ?>

<?php while (have_posts()) : the_post(); ?> 

<?php
// アイキャッチ画像取得 開始
$thumb = get_the_post_thumbnail($post->ID,'thumbnail');
$pattern= "/(?<=src=['|\"])[^'|\"]*?(?=['|\"])/i";
preg_match($pattern, $thumb, $thePath);
$theSrc = $thePath[0];
// アイキャッチ画像取得 終了
?>

<?php
// このカテゴリーへのリンクを取得 Start 
    // このカテゴリーの URL を取得
    $category_link = get_category_link( $category_id );

// このカテゴリーへのリンクを取得 End 
?>

<ul> 
<div class="entry"> 
	<img src="<?php echo $theSrc; ?>" class="alignleft post_thumbnail wp-post-image" width="10%"  alt="アイキャッチ" />
	<h1 class="title"> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>

	<?php //記事の本文を指定文字数取得する ?>
	<p><?php echo strip_tags(mb_substr($post->post_content, 0, 120)); ?>....</p>

	<!-- このカテゴリーへのリンクを出力  続きを見る  -->
	<div class="readmorecontent"> 
		<a class="readmore" href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>">Read More &raquo;</a> 
	</div> 
	<hr>
</div>
</ul> 
<?php endwhile;?> 

<?php wp_reset_query(); ?>
</td></tr></table>
<?php //------------------------------------ 最新の投稿 10件 ------------------------------------終了 ?>

微調整

アイキャッチの画像が小さいな、と思ったら29行目あたらいの%の数値を変更

こんな感じにできました!

無題

参考サイト:WordPressの固定ページに新着情報とか表示する.

コメントを残す

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