MacBook
iWatch
iPad
WordPress
EC-CUBE
主にコーポレートサイトを制作することが多いのですが、最新記事以外にコラムなどとしてサムネイル写真付きでトップページに最新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」というスラッグ名のカテゴリを最新５件、サムネイル付き＆記事内容を文字数指定して抽出しています。
カテゴリの指定
カテゴリの指定は２行目。スラッグ名を入力。
$cat = 'wordpress';
最新の記事数を指定
3行目に記事数の指定を行なっています。最新５件出す様にしています。
$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>';
