リンクカード｜プラグインなし

//内部リンクをブログカードにするショートコード
function show_blogcard($atts) {
	extract(shortcode_atts(array(
		'url'=>"",
		'title'=>"",
		'excerpt'=>""
	),$atts));
	
	//URLから投稿のIDを取得
	$id = url_to_postid($url);
	//画像サイズ横幅を指定
	$img_width ="100";
	//画像サイズ高さを指定
	$img_height = "100";
	//アイキャッチ画像がない場合の画像を指定
	$no_image = '任意画像のURLをここに入れる';
	
	//タイトルを自動で取得
	if(empty($title)){
		$title = esc_html(get_the_title($id));
	}
	
	//本文を自動で取得
	if(has_excerpt($id)){
		//抜粋文字列がある場合
		$excerpt = wp_trim_words(get_the_excerpt($id), 72, '…' );
	} else {
		//抜粋文字列がない場合本文から取得
		$excerpt = wp_trim_words(strip_shortcodes(get_post($id)->post_content), 72, '…' );
	}
	
	//アイキャッチ画像を取得
	if(has_post_thumbnail($id)) {
		$img = wp_get_attachment_image_src(get_post_thumbnail_id($id),array($img_width,$img_height));
		$img_tag = '<img src="'. $img[0] .'" alt="'. $title .'" width="'. $img[1] .'" height="'. $img[2] .'" />';
	} else { 
		$img_tag = '<img src="'. $no_image .'" alt="" width="'. $img_width .'" height="'. $img_height .'" />';
	}
	
	//ブログカードのHTML
	$sc_blogcard .='
	<div class="blogcard">
	<a href="'. $url .'">
	 <div class="blogcard-img">'. $img_tag .'</div>
	 <div class="blogcard-content">
	  <div class="blogcard-title">'. $title .'</div>
	  <div class="blogcard-excerpt">'. $excerpt .'</div>
	 </div>
	 <div class="clear"></div>
	</a>
	</div>';	
	return $sc_blogcard;	
}

//ショートコード
add_shortcode("blogcard_sc", "show_blogcard");

/*--------------------------------------
ブログカードのレイアウト
--------------------------------------*/
.blogcard {
	width: 100%;
	margin: 30px 0 40px;
	line-height: 1;
	background-color: #ffffff;
	border: 3px solid #eeeeee;
	word-wrap: break-word;
  }
  .blogcard a {
	color: #000;
	text-decoration: none;
	opacity: 1;
	transition: all 0.2s ease;
  }
  .blogcard a:hover {
	color: #5a91cd;
	opacity: 0.8;
  }
  .blogcard-img {
	float: left;
	padding: 20px;
  }
  .blogcard-title {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.4;
	padding: 17px 20px 10px;  
  }
  .blogcard-excerpt {
	font-size: 0.85em;
	line-height: 1.6;
	padding: 0 17px 15px 20px;
  }
  
  /** ブログカードモバイル用のレイアウト **/
  @media screen and (max-width: 768px) {
	.blogcard {
	  margin: 40px 0;
	}
	.blogcard-title {
	  font-size: 0.95em;
	  padding-bottom: 17px;
	}
	.blogcard-excerpt  {
	  display: none;
	}
  }

[blogcard_sc url="https://sample.com/aaa"]