ブログカードとは？おしゃれなブログカードを超簡単に作る方法を大公開！

[blogcard url="https://〇〇〇〇.com（リンク先の記事URL）" title="記事のタイトル（任意）" content="記事の概要（任意）"]

function render_blogcard_shortcode($items) {

extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'content'=>""
),$items));

$page_id = url_to_postid($url);
$no_image = '';

//titleが指定されない場合は、記事タイトルを自動取得
if(empty($title)){
$title = esc_html(get_the_title($page_id));
}
//contentが指定されない場合は、記事の概要(最初の55文字)を自動抜粋
if(empty($content)){
$content = esc_html(get_post_summary($page_id));
}

//アイキャッチ画像を取得
if(has_post_thumbnail($page_id)) {
//アイキャッチが設定されている場合
$img = wp_get_attachment_image_src(get_post_thumbnail_id($page_id),'medium');
$img_tag = "<span class=\"card-img\"><img src='" . esc_url($img[0]) . "' alt='" . esc_attr($title) . "' width='" . esc_attr($img[1]) . "' height='" . esc_attr($img[2]) . "' /></span>";
}else{
//アイキャッチが設定されていない場合
$img_tag = '<span class="no_image"></span>';
}

//HTMLを作成
$nlink .=' <div>
<a class="blogcard" href="'. $url .'" title="'.$title.'" target="_blank" rel="noopener">
'. $img_tag .'
<span class="blogcard-text">
<span class="blogcard-title">'. $title .' </span>
<span class="blogcard-content">'. $content .'</span>
</span></a></div>';

return $nlink;
}

// 記事内容の取得
function get_post_summary($post_id){
global $post;
$post_bu = $post;
$post = get_post($post_id);
setup_postdata($post);
$output = get_the_excerpt(); // ←ここはご利用の環境に合わせてコードを書き換えてください。
$post = $post_bu;
return $output;
}

add_shortcode("blogcard1", "render_blogcard_shortcode");

.blogcard {
position: relative;
overflow: hidden;
width: 95%;
background: #fff;
font-weight: bold;
text-decoration: none !important;
display: inline-block;
max-width: 310px;
margin-right: 20px;
padding: 10px;
margin-bottom: 1.5em;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
max-width: 100%;
display: table;
border: solid 1px #ffffff;
background-color: #ffffff;
}
.blogcard:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
color: #888;
text-decoration: none;
}
.blogcard img {
width: 100%;
border-radius: 2px;
}
.blogcard-title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
color: #000000;
}
.blogcard-content {
padding-top: .8em;
font-size: .8em;
line-height: 1.4;
font-weight: normal;
opacity: .8;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 0px;
color: #333232;
}
.blogcard .blogcard-text {
color: #525252;
padding: 0px 10px;
display: block;
line-height: 1.6;
display: table-cell;
vertical-align: top;
width: 80%;
}
.card-img img {
width: 100%;
}
.no_image {
display: table-cell;
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 2px;
position: relative;
overflow: hidden;
}
.no_image::before {
content: "no image";
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
@media only screen and (max-width: 480px) {
.blogcard img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
aspect-ratio: 1 / 1;
display: block;
}
.blogcard-content {
display:none;
}
.blogcard-title {
font-size:0.8em;
}
}

[blogcard1 url="https://〇〇〇〇.com（リンク先の記事URL）" content="記事の概要（任意）"]