WordPress ショートコードで『ブログカード風』『関連記事一覧』を表示

// "num" = 表示記事数, "cat" = カテゴリ番号
// 呼び出し元での指定も可能 -> [getCategoryArticle num="x" cat="y"]
function kkiji_proc($atts, $content = null) {
	extract(shortcode_atts(array(
	  "num" => '2',
	  "cat" => '12'
	), $atts));
	
	// 処理中のpost変数をoldpost変数に退避
	global $post;
	$oldpost = $post;
	
	// カテゴリーの記事データ取得
	$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
	
	if($myposts) {
		// 記事がある場合↓
		$retHtml = '<div class="kkijiDispArea">';
		// 取得した記事の個数分繰り返す
		foreach($myposts as $post) :
			// 投稿ごとの区切りのdiv
			$retHtml .= '<div class="kkiji">';
 
			// 記事オブジェクトの整形
			setup_postdata($post);
 
			// サムネイルの有無チェック
			if ( has_post_thumbnail() ) {
				// サムネイルがある場合↓
				$retHtml .= '<div class="kkijiImgArea">' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</div>';
			} else {
				// サムネイルがない場合↓※Default画像を表示
				$retHtml .= '<div class="kkijiImgArea">' . '<img src="https://arakan60.com/wp-content/uploads/2016/06/negorotr101.jpg" />' . '</div>';
			}
			
			// 文章のみのエリアをdivで囲う
			$retHtml .= '<div class="kkijiStringArea">';
			
			// 投稿年月日を取得
			$year = get_the_time('Y');	// 年
			$month = get_the_time('n');	// 月
			$day = get_the_time('j');	// 日
			
	// 		$retHtml .= '<span>この記事は' . $year . '年' . $month . '月' . $day . '日に投稿されました</span>';
			
			// タイトル設定(リンクも設定する)
			$retHtml.= '<div class="kkijiTitle">';
			$retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) .'</a> ' ;
			$retHtml.= '</div>';
			
			// 本文を抜粋して取得
			$getString = get_the_custom_excerpt($post->post_content, 90);
			$retHtml.= '<div><a href="' . get_permalink() . '">' ;
			$retHtml.= '<div class="kkijiContent">' . $getString . '</div>';
			$retHtml.= '</a></div>';
			
			$retHtml.= '</div></div>';
			
		endforeach;
		
		$retHtml.= '</div>';
	} else {
		// 記事がない場合↓
		$retHtml='<p>このカテゴリーの関連記事はありません。</p>';
	}
	
	// oldpost変数をpost変数に戻す
	$post = $oldpost;
	
	return $retHtml;
}
// 呼び出し名称の指定＝ショートコードの設定
add_shortcode("k-kiji", "kkiji_proc");
//　記事一覧表示ルーティン  ここまで　--------------------------------------------------------------------------------
/*-----------------------------------------------------------*/

/*-----------------------------------------------------------*/
/* functions.php ショートコードでの記事一覧表示用 */
/*-----------------------------------------------------------*/
.kkijiDispArea .kkiji {
    padding: 5px 10px 5px 5px;
    margin: 0px 10px 0px 5px;
 border:1px solid #bbb;
 word-wrap:break-word;
 max-width:100%;
 border-radius:5px;
 margin-bottom: 20px;
}

.kkijiDispArea a {
 color: #333;
 background: #fbfaf8;
 display: block;
 -webkit-transition: 0.3s ease-in-out;
 -moz-transition: 0.3s ease-in-out;
 -o-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}
 
.kkijiDispArea a:hover{
 background: #fee;
}

.kkijiDispArea .kkiji:after {
    content: '';
    display: table;
    clear: both;
}
 
.kkijiImgArea {
    width: 20%;
	height:100px;
  	border: 1px solid #9a9a9a;
    float: left;
}
 
.kkijiStringArea {
    width: 80%;
    font-size: 75%;
    padding-left: 15px;
    float: left;
}
 
.kkijiTitle {
    font-size: 14px;
    font-weight: bold;
}
/* functions.php ショートコードでの記事一覧表示ここまで */

[k-kiji num="3" cat="5"]