ショートコードで特定のタグ記事一覧を画像付きで表示するPHPとCSSを紹介

指定したカテゴリー一覧を画像付きで表示するのと同じく、特定のタグを持つ記事一覧を表示するショートコードの作り方を紹介します。

基本的には、カテゴリー一覧の場合と同じで、記事の抽出条件が多少変わるだけです。

カテゴリー一覧とタグ一覧での表示を同じにしています。

ショートコードでカテゴリー一覧を画像付きで表示するPHPとCSSを紹介

むろん、両方いるよね。

タグ記事一覧サンプル

注意

カスタマイズは自己責任でお願いします。

読みたいとこから

特定のタグを持つ記事一覧を表示
ショートコードの説明
- ショートコードの呼び出し
- 動作の詳細
まとめ

特定のタグを持つ記事一覧を表示

下記で紹介しているコードをコピペしてください。

phpコードを貼り付け

こちらのコードをfunctions.phpにコピペしてください。

余計な部分を触ってしまうと、画面が真っ白になるかもなので、細心の注意を払ってください。

コード

/*-----------------------------------
アイキャッチ付き
タグ記事一覧表示ショートコード
[taglist num="5" id="1,2"] 
-----------------------------------*/
function getMyTagPosts($atts) {
extract(shortcode_atts(array(
"num" => '', //最新記事リストの取得数
"id" => ''
), $atts));
global $post;
$tag_id = explode(',', $atts['id']);
$myposts = get_posts(array(
'tag__in' => $tag_id,
'numberposts' => $atts['num'],
'orderby' => 'post_date',
'exclude' => get_the_ID(),
'order' => 'DESC',
'post_type' => 'any'
));

if($myposts){
$retHtml.='<ul class="poslist-ul" >';
foreach($myposts as $post) :
setup_postdata($post);
//アイキャッチ画像（絶対ある前提）
$image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), "thumbnail" );//thumbnail, medium, large, full
list( $src, $width, $height ) = $image;

$retHtml.='<li><a href="'.get_permalink().'">';
$retHtml.='<img src="'.$src.'" width="150" alt="" class="responsive" />';
$retHtml.='<div class="poslist-div">';
$retHtml.='<span class="poslist-ttl">'.the_title("","",false).'</span>';
$retHtml.='<span class="poslist-exc">' .get_the_excerpt().'</span>';
$retHtml.='</div>';
$retHtml.='</a></li>';
endforeach;
$retHtml.='</ul>';
wp_reset_postdata();
}else{
$retHtml='<p class="none">投稿がありません。</p>';
}
return $retHtml;
}
add_shortcode("taglist", "getMyTagPosts");

以上で、ショートコード自体の設定が完了です。

CSSでデザイン調整

記事一覧のデザインを変更するために、style.cssに下記のコードを貼り付けます。

カテゴリー一覧を表示する時と同じなんで、そっちでコピペした人は不要です。

コード

/* ---------------------------------
* 記事一覧表示ショートコードのCSS
* --------------------------------*/
.poslist-ul{
list-style: none!important;
border: none!important;
padding: 0!important;
}
.poslist-ul li:before{
content: none!important; 
}
.poslist-ul li{
border: solid 2px #ececec;
margin-bottom: 10px;
padding: 0!important;
transition: .3s;
}
.poslist-ul li:hover{
font-weight: 500;
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
opacity: 0.7 ;
}
.poslist-ul li a{
padding: 10px;
width: 100%;
display: table;
text-decoration:none!important;
}
.poslist-ul li a:hover{
font-weight: 500;
border-bottom: none;
}
.poslist-ul li a img{
display: table-cell;
width: 150px;
height: 150px;
max-width: none;
vertical-align: middle;
margin-right: 20px;
margin-top: 0!important;
}
@media only screen and (max-width: 767px){
.poslist-ul li a img{
width: 100px;
height: 100px;
margin-right: 10px;
}
}
.poslist-div{
display: table-cell;
padding: 0;
width: 100%;
vertical-align: middle;
}
.poslist-ttl,
.poslist-exc{
display: block;
}
.poslist-ttl{
font-size: 1.3em;
margin-bottom: 10px;
font-weight: bold;
}
.poslist-exc{
font-size: .9em;
color:#777;
}

既存のCSSと被ってしまってデザインが崩れす場合は、微調整してください。