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のバージョン管理】スーパーリロードなしで変更を反映させる【SANGO】
ショートコードの説明
ショートコードの設定と見た目の調整は上記部分で完了ですが、ショートコード自体の使い方を説明します。
ショートコードの呼び出し
ショートコードは[catlist id=”数字” num=”数字”]とショートコードボックスに入力してください。
idとnumの指定はそれぞれ、下記の内容になります。
- id:カテゴリーのID
- num:表示する記事の数
カテゴリーIDは複数指定することが可能です。
その場合は、「,」で区切って入力してください。
動作の詳細
今回のPHPとCSSでの動作をある程度紹介しておきます。
記事の取得の部分については、
- 最新記事から表示する。
- 現在の記事を除外。
となっており、わざわざ指定することないかな、と個人的に感じる部分は固定してしまっていますので、変更したい場合は、get_posts部分を変更してください。
見た目の部分に関しては、このような感じです。
- ホバー時は薄くなって上に少し上がる
- スマホ時の画像の大きさは100px、PCの場合は150px。
CSSを変更して自由にカスタマイズしてください。
まとめ
ショートコードを使って、カテゴリー一覧を画像(サムネイル)付きで表示する方法を紹介しました。
その他、特定tagを持つ記事の一覧やショートコードで内部リンクを表示する方法も、改めて紹介したいと思います。
同じように特定のタグを持つ記事一覧を表示するショートコードはこちらにあります。