アクアリウムのおすすめグッズはこちら!

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

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

TAGS:

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;
}

キャッシュのクリア

キャッシュのクリアを行って、変更を反映させましょう。

CSSはバージョン管理するのがおすすめです。

CSSのバージョン管理【CSSのバージョン管理】スーパーリロードなしで変更を反映させる【SANGO】

ショートコードの説明

ショートコードの設定と見た目の調整は上記部分で完了ですが、ショートコード自体の使い方を説明します。

ショートコードの呼び出し

ショートコードは[catlist id=”数字” num=”数字”]とショートコードボックスに入力してください。

ショートコードの呼び出し

idとnumの指定はそれぞれ、下記の内容になります。

  • id:カテゴリーのID
  • num:表示する記事の数

カテゴリーIDは複数指定することが可能です

その場合は、「,」で区切って入力してください。

動作の詳細

今回のPHPとCSSでの動作をある程度紹介しておきます。

記事の取得の部分については、

  • 最新記事から表示する。
  • 現在の記事を除外。

となっており、わざわざ指定することないかな、と個人的に感じる部分は固定してしまっていますので、変更したい場合は、get_posts部分を変更してください。

見た目の部分に関しては、このような感じです。

  • ホバー時は薄くなって上に少し上がる
  • スマホ時の画像の大きさは100px、PCの場合は150px。

CSSを変更して自由にカスタマイズしてください。

まとめ

ショートコードを使って、カテゴリー一覧を画像(サムネイル)付きで表示する方法を紹介しました。

その他、特定tagを持つ記事の一覧やショートコードで内部リンクを表示する方法も、改めて紹介したいと思います。

特に無料のテーマを使っている人はぜひ。

同じように特定のタグを持つ記事一覧を表示するショートコードはこちらにあります。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です