Simplicityの内部ブログカードのサムネイルサイズを変更する方法

ブログカードとは

内部ブログカードのサムネイルを変更する方法

このブログの内部ブログカード

テーマカスタマイザーの設定

functions.phpの編集

//サムネイルの取得
$thumbnail = get_the_post_thumbnail($id, 'thumb100', array('class' => 'blog-card-thumb-image', 'alt' => ''));

//サムネイルの取得
$thumbnail = get_the_post_thumbnail($id, 'thumb320', array('class' => 'blog-card-thumb-image', 'alt' => ''));

//ブログカードサムネイルサイズ変更
function url_to_blog_card_tag($url){
if ( !$url ) return;
$url = strip_tags($url);//URL
$id = url_to_postid( $url );//IDを取得（URLから投稿ID変換）
if ( !$id ) return;//IDを取得できない場合はループを飛ばす

//global $post;
$post_data = get_post($id);
setup_postdata($post_data);
$exce = $post_data->post_excerpt;
$no_image = get_site_screenshot_url($url);

$title = $post_data->post_title;//タイトルの取得
$date = null;
if (is_blog_card_date_type_post_date()) {
$date = mysql2date('Y-m-d H:i', $post_data->post_date);//投稿日の取得
} else {
$date = mysql2date('Y-m-d H:i', $post_data->post_modified);//更新日の取得
}

$excerpt = get_content_excerpt($post_data->post_content, get_excerpt_length());
//抜粋の取得
if ( is_wordpress_excerpt() && $exce ) {//Wordpress固有の抜粋のとき
$excerpt = $exce;
}

//メタディスクリプションが設定してある場合はメタディスクリプションを抜粋表示
$meta_description = get_post_meta($id, 'meta_description', true);
if ( is_wordpress_excerpt() && $meta_description ) {
$excerpt = $meta_description;
}

//ブログカードのサムネイルを右側に
$thumbnail_class = ' blog-card-thumbnail-left';
if ( is_blog_card_thumbnail_right() ) {
$thumbnail_class = ' blog-card-thumbnail-right';
}

//新しいタブで開く場合
$target = is_blog_card_target_blank() ? ' target="_blank"' : '';

//ブログカードの幅を広げる
$wide_class = null;
if ( is_blog_card_width_auto() ) {
$wide_class = ' blog-card-wide';
}
$hatena_wh = null;
if ( is_amp() ) {
$hatena_wh = ' width="48" height="13"';
}

//$hatebu_url = preg_replace('/^https?:\/\//i', '', $url);
//はてブを表示する場合
$hatebu_tag = is_blog_card_hatena_visible() && !is_amp() ? '<div class="blog-card-hatebu"><a href="//b.hatena.ne.jp/entry/'.$url.'"'.$target.'><img src="//b.hatena.ne.jp/entry/image/'.$url.'" alt=""'.$hatena_wh.' /></a></div>' : '';

//ファビコン
$favicon_tag = '';
if ( is_favicon_enable() && get_the_favicon_url() ) {//ファビコンが有効か確認

//GoogleファビコンAPIを利用する
////www.google.com/s2/favicons?domain=nelog.jp
$favicon_tag = '<span class="blog-card-favicon"><img src="//www.google.com/s2/favicons?domain='.get_this_site_domain().'" class="blog-card-favicon-img" alt="" width="16" height="16" /></span>';
}

//サイトロゴ
if ( is_blog_card_site_logo_visible() ) {
if ( is_blog_card_site_logo_link_enable() ) {
$site_logo_tag = '<a href="'.home_url().'"'.$target.'>'.get_this_site_domain().'</a>';
} else {
$site_logo_tag = get_this_site_domain();
}
$site_logo_tag = '<div class="blog-card-site">'.$favicon_tag.$site_logo_tag.'</div>';
}

$date_tag = '';
if ( !is_blog_card_date_type_none() ) {//日付を表示するとき
$date_tag = '<div class="blog-card-date">'.$date.'</div>';
}
//サムネイルの取得
$thumbnail = get_the_post_thumbnail($id, 'thumb320', array('class' => 'blog-card-thumb-image', 'alt' => ''));
if ( !$thumbnail ) {//サムネイルが存在しない場合
$thumbnail = '<img src="'.$no_image.'" alt="" class="blog-card-thumb-image"'.get_noimage_sizes_attr($no_image).' />';
//$thumbnail = '<img src="'.get_template_directory_uri().'/images/no-image.png" alt="'.$title.'" class="blog-card-thumb-image"'.get_noimage_sizes_attr().' />';
}
//取得した情報からブログカードのHTMLタグを作成
$tag = '<div class="blog-card internal-blog-card'.$thumbnail_class.$wide_class.' cf"><div class="blog-card-thumbnail"><a href="'.$url.'" class="blog-card-thumbnail-link"'.$target.'>'.$thumbnail.'</a></div><div class="blog-card-content"><div class="blog-card-title"><a href="'.$url.'" class="blog-card-title-link"'.$target.'>'.$title.'</a></div><div class="blog-card-excerpt">'.$excerpt.'</div></div><div class="blog-card-footer">'.$site_logo_tag.$hatebu_tag.$date_tag.'</div></div>';

if ( is_wraped_entry_card() ) {

$wide_hover_card_class = null;
if (is_blog_card_width_auto()) {
$wide_hover_card_class = ' hover-blog-card-wide';
} //エントリーカードをカード化する場合はaタグを削除して全体をa.hover-cardで囲む
$tag = wrap_entry_card($tag, $url, $target, false, ' hover-blog-card hover-internal-blog-card'.$wide_hover_card_class);
}
return $tag;
}

CSSでスタイル調整

/* ブログカードスタイル */
.blog-card{
 min-height:120px;
}
.internal-blog-card .blog-card-content {
 margin-left: 170px;
}
.internal-blog-card img.blog-card-thumb-image{
width: 160px;
height: 90px;
}
@media screen and (max-width: 560px){
.internal-blog-card .blog-card-excerpt, .blog-card-footer {
 display:none;
}
}

さいごに