WordPressでサムネイル付きの特定カテゴリを最新5件取得する

IT狐 597 ビュー | 2019/01/17

WordPressでサムネイル付きの特定カテゴリを最新5件取得する

主にコーポレートサイトを制作することが多いのですが、最新記事以外にコラムなどとしてサムネイル写真付きでトップページに最新5件出したい、ということがあります。
プラス、記事内容を少し出したいということも。
よくニュースサイトなどで見かけるやつです。

  • 特定カテゴリのみ
  • 最新5件
  • リストにして
  • サムネイル付き
  • 記事内容を文字数指定

これ全部やっちゃいます。

<?php
	$cat = 'news';
	$num = '5';
	global $post;
 
	$term_id = get_category_by_slug($cat)->term_id;
	$myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
	if ($myposts) {
		echo '<h3> ' .get_the_category_by_ID($term_id). '</h3><ul class="news_list">';
		foreach($myposts as $post):
			setup_postdata($post);
			echo '<li><div class="news_thum"><a href=' .get_permalink(). '>';
			if ( has_post_thumbnail() ) {
				echo ''.get_the_post_thumbnail($page->ID, 'thumbnail'). '';
			} else {
				echo '<span class="no_image"><i class="fa fa-ban fa-2x" aria-hidden="true"></i>&nbsp;No images</span>';
			}
			echo '</a></div><div class="news_data">';
			echo '<span class="datetime">' .get_the_time('Y/n/j').'</span>';
			echo '<h4><a href='.get_permalink().'>'. the_title("","",false).'</a></h4>';
			echo '<p>' .mb_substr( strip_tags( $post -> post_content ), 0, 30 ). '...</p></div></li>';
		endforeach;
	echo '</ul><p><a href=' .get_category_link($term_id). '>カテゴリの一覧 ≫</a></p>';
	} else {
	echo '<p>記事がありません。</p>';
	}
 
?>

 

「news」というスラッグ名のカテゴリを最新5件、サムネイル付き&記事内容を文字数指定して抽出しています。

カテゴリの指定

カテゴリの指定は2行目。スラッグ名を入力。

$cat = 'wordpress';

最新の記事数を指定

3行目に記事数の指定を行なっています。最新5件出す様にしています。

$num = '5';

 

記事内容の取得する文字数を指定

21行目に記事内容の文字数を指定しています。
0というのは何文字目から抜き出すか、ということなのでここでは「0文字目から30文字目まで抜き出す」という指定になっています。

echo '<p>' .mb_substr( strip_tags( $post -> post_content ), 0, 30 ). '...</p></div></li>';

 

アイキャッチがないときの処理

アイキャッチがないときの処理は14行目にあります。
ないときはFontAwesomeでアイコンを出すようにしています。
FontAwesomeでアイコンを出すには内に読み込むなどの処理が必要ですが、ここで書くと長くなるので、こちらがとても丁寧に説明してくださっています。とても簡単ですのでここを参考にどうぞ。

別にこれでなくても、Noimageの画像をつくって表示させるのでも大丈夫です。

if ( has_post_thumbnail() ) {//もしサムネイルがあったら
				echo ''.get_the_post_thumbnail($page->ID, 'thumbnail'). '';//サムネイル画像を出す
			} else {//ないときは
				echo '<span class="no_image"><i class="fa fa-ban fa-2x" aria-hidden="true"></i>&nbsp;No images</span>';

 

, ,

記事:itfox.jp