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

WordPressで無料のテーマなどを使っている場合（僕の場合はLION MEDIA）、カテゴリー一覧を出力するショートコードがなかったりします。

意外と、記事の一覧を表示したいタイミングは僕の場合結構あって、やっぱり、一覧出力のショートコードがないのは不便です…。

そんな時にコピペしてもらえばショートコードを作成できるように、記事にしておきます。

僕の備忘録的な部分が大きいですが。

特定のタグを持つ記事一覧を表示するショートコードはこちら

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

カテゴリー一覧サンプル

注意

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

読みたいとこから

カテゴリー一覧をショートコードで表示する
ショートコードの説明
- ショートコードの呼び出し
- 動作の詳細
まとめ

カテゴリー一覧をショートコードで表示する

下記で紹介しているコードをコピペしてもらえば、動作すると思います。

phpコードを貼り付け

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

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

コード

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

if($myposts){
$retHtml.='<ul class="poslist-ul" >';
$catlink = get_category_link($cat_id);
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("catlist", "getMyCatPosts");

htmlを作成するところまでは以上の部分でOKです。

CSSで見た目を整ええる

見た目を整えるために、下記のコードをstyle.cssにコピペしてください。

僕の環境ではサンプル通りに表示されますが、既存の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;
}