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

僕が使っているWordpressテーマ「Simplicity」にはブログカードという機能があります。

今回は、Simplicityの内部ブログカードのサムネイルサイズを変更する方法を説明します。
正方形（100×100px)から長方形（長辺160px）に変更しました。

【変更後の内部ブログカード】

旅ブログを書くのに使っているソフト、サービス15選

僕がブログを書くときに使っている、おすすめのソフトやアプリ、サービスをジャンル別で15個紹介します。

ブログカードとは

ブログカードとは、記事リンクを見やすく表示する方法です。
はてなブログのブログカードを参考に、色々なブログで取り入れられています。

参考ブログカード – はてなブログヘルプ

リンク先の記事タイトルの文字列だけではなく、サムネイルや記事概要などを合わせて表示します。

Simplicityでは、ブログカードを簡単に使えるようになっています。

参考 Simplicityのブログカードの使い方と注意点

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

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

変更前と変更後の画像を載せておきます。

【変更前（PC）】

【変更後（PC）】

【変更前（モバイル）】

【変更後（モバイル）】

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

テーマカスタマイザーで内部ブログカードの設定をします。

WordPress管理画面左側の[外観]ー[カスタマイズ]をクリックして、テーマカスタマイザーを開いて下さい。

続いて、左側のメニューから[ブログカード（内部リンク）]を選択します。

[ブログカード有効]、[カード幅を広げる]の2つにチェックを入れて下さい。

functions.phpの編集

functions.phpを編集し、親テーマの関数を上書き（正確には上書きとは言わないかも）します。

ブログカードに関する関数は、親テーマ（Simplicity2）の「lib」内にある、blog-card.phpというテーマファイルで定義されています。

このblog-card.phpの中の「url_to_blog_card_tag()」という関数を子テーマのfunctions.phpに記述します。

親テーマのblog-card.phpでは、url_to_blog_card_tagの前にif ( !function_exists( ‘url_to_blog_card_tag’ ) ):と書いてあります。

このifは、「url_to_blog_card_tag」が存在していなければ、という意味です。

子テーマのfunctions.phpは親テーマのfunctions.phpよりも先に読み込まれるらしいので、子テーマのfunctions.phpに「url_to_blog_card_tag」を書けばそちらが適用されます。

「url_to_blog_card_tag」関数の変更箇所は以下の箇所です。

//サムネイルの取得
$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' => ''));

thumb100をthumb320に変更しました。
取得するサムネイルを100pxのものから320pxのものに変更しています。

functions.phpはWordpress管理画面左側の[外観]ー[テーマの編集]で編集するか、FTPクライアントソフトなどでダウンロード、編集、アップロードをして下さい。

子テーマのfunctions.phpを開き、以下のコードを貼り付けます。

//ブログカードサムネイルサイズ変更
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.' rel="nofollow"><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でスタイル調整

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;
}
}

モバイル（560px以下）のときは記事概要を表示しない設定にしています。