主にコーポレートサイトを制作することが多いのですが、最新記事以外にコラムなどとしてサムネイル写真付きでトップページに最新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> 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> No images</span>';