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

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

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

TAGS:

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

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

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

ショートコードでカテゴリーの記事一覧を表示するショートコードでカテゴリー一覧を画像付きで表示する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と被ってしまってデザインが崩れす場合は、微調整してください。

キャッシュのクリア

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

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

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

ショートコードの説明

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

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

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

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

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

  • id:タグのID
  • num:表示する記事の数

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

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

動作の詳細

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

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

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

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

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

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

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

まとめ

カテゴリー一覧と同じように、特定のタグを持つ記事一覧を表示するショートコードの作り方とCSSを紹介しました。

カテゴリー一覧の記事一覧を表示するショートコードはこちらの記事にあります。

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

コメントを残す