WordPressで内部リンク用のブログカードをプラグインを使わずに利用する

//---------------------------------------------
//   + ブログカード
//---------------------------------------------

function blogcard_scode($atts) {

	//---サムネイル画像の大きさ(px)
	$img_size = 120;

	extract(shortcode_atts(array(
		'url' => "",
		'title' => "",
		'excerpt' => ""
	) , $atts));

	//---URLから投稿IDを取得
	$id = url_to_postid($url);

	//---タイトルを取得
	if(empty($title)){

		$title = esc_html(get_the_title($id));
	}

	//---抜粋文を取得
	if(empty($excerpt)){

		$excerpt = esc_html(get_the_excerpt($id));
	}

	//---サイトアイコンを取得
	$siteicon = get_site_icon_url(32 , '');
	$siteicon_html = ($siteicon) ? "<img src='{$siteicon}' width='16' height='16' alt='' /> " : "";

	//---アイキャッチ画像を取得
	if(has_post_thumbnail($id)){

		$img = wp_get_attachment_image_src(get_post_thumbnail_id($id) , array($img_size , $img_size));
		$img_html = "<img src='{$img[0]}' width='{$img[1]}' height='{$img[2]}' alt='{$title}' />";

	} else{

		$img_html = "";
	}

	//---URL
	$url_html = $siteicon_html . str_replace('https://' , '' , $url);

	//---HTML出力
	$html ="
<div class='blog-card'>
<a href='{$url}'>
<div class='blog-card-thumbnail'>{$img_html}</div>
<div class='blog-card-content'>
<div class='blog-card-title'>{$title}</div>
<div class='blog-card-excerpt'>{$excerpt}</div>
<div class='blog-card-url'>{$url_html}</div>
</div>
</a>
</div>";


	return $html;
}

add_shortcode("nlink", "blogcard_scode");

/** ブログカードCSS **/

.blog-card {
	width: 100%;
	background: #f5f5f5;
	border: 1px solid #dddddd;
	word-wrap: break-word;
	margin: 1.5em 0 0;
	padding: 0;
}

.blog-card:hover {
	background: #dbe9f4;
}

.blog-card a {
	display: flex;
	justify-content: space-between;
}

.blog-card-thumbnail {
	width: 20%;
	padding: 10px;
}

.blog-card-thumbnail img {
	width: 100%;
	border: none;
	display: block;
	padding: 0;
}

.blog-card-content {
	width: 78%;
	line-height: 1.5;
}

.blog-card-title {
	font-weight: bold;
	font-size: 15px;
	color: #000000;
	padding: 10px 10px 10px 0;
}

.blog-card-url {
	font-size: 15px;
	padding: 10px 10px 10px 0;
}

.blog-card-excerpt {
	color: #333333;
	font-size: 13px;
	padding: 0 10px 10px 0;
}

/** ブログカード（スマホ用調整） **/

@media screen and (max-width: 500px){

	.blog-card-url {
		display: none !important;
	}

	.blog-card-excerpt {
		display: none !important;
	}
}