2月になりましたが、今年初の記事になります。昨年末からブログのデザイン変更を進めており、今回の記事から数本はその過程で得た知見を書こうと思います。今回はブログカードをプラグインなしで実装する際に、ブログカードのサムネ画像をリンク先のアイキャッチ画像に設定する方法です。ブログカードの実装方法の骨格は下記の記事を参考にしています。
この記事がどなたかの参考になりましたら幸いです。
1. 全体のコード
まず、全体のコードは下記になります。ほとんどは上記記事の外部リンク用ブログカードを取得した部分になります。
// ブログカード(外部リンク対応)
function show_linkcard($atts) {
extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'excerpt'=>""
),$atts));
// 画像サイズの横幅を指定
$img_width ="150";
// 画像サイズの高さを指定
$img_height = "150";
// OGP情報を取得
require_once 'OpenGraph.php';
$graph = OpenGraph::fetch($url);
// OGPタグからタイトルを取得($titleの入力がある場合はそちらを優先)
$Link_title = $graph->title;
if(!empty($title)){
$Link_title = $title;
}
// OGPタグからdescriptionを取得(抜粋文として利用)
$Link_description = wp_trim_words($graph->description, 180, '…' ); // 文字数は任意で変更
if(!empty($excerpt)){
$Link_description = $excerpt;
}
// 変更部分:imageの取得
$image = $graph->image;
if ( !empty($image) ) {
$xLink_img = '<img src="'. $image .'" width="'. $img_width .'" />';
} else {
// wordpress.comのAPIを利用してスクリーンショットを取得
$image = 'https://s.wordpress.com/mshots/v1/'. urlencode(esc_url(rtrim( $url, '/' ))) .'?w='. $img_width .'&h='.$img_height.'';
$xLink_img = '<img src="'. $image .'" width="'. $img_width .'" />';
}
//ファビコンを取得(GoogleのAPIでスクレイピング)
$host = parse_url($url)['host'];
$searchFavcon = 'https://www.google.com/s2/favicons?domain='.$host;
if($searchFavcon){
$favicon = '<img class="favicon" src="'.$searchFavcon.'">';
}
//外部リンク用ブログカードHTML出力
$sc_linkcard ='
<div class="blogcard ex">
<a href="'. $url .'" target="_blank">
<div class="blogcard_thumbnail">'. $xLink_img .'</div>
<div class="blogcard_content">
<div class="blogcard_title">'. $favicon .' '. $Link_title .'</div>
<div class="blogcard_excerpt">'. $Link_description .'</div>
</div>
<div class="clear"></div>
</a>
</div>';
return $sc_linkcard;
}
//ショートコードに追加
add_shortcode("sc_linkcard", "show_linkcard");```
2. 変更部分
変更部分は以下になります。
// 変更部分:imageの取得
$image = $graph->image;
if ( !empty($image) ) {
$xLink_img = '<img src="'. $image .'" width="'. $img_width .'" />';
} else {
// wordpress.comのAPIを利用してスクリーンショットを取得
$image = 'https://s.wordpress.com/mshots/v1/'. urlencode(esc_url(rtrim( $url, '/' ))) .'?w='. $img_width .'&h='.$img_height.'';
$xLink_img = '<img src="'. $image .'" width="'. $img_width .'" />';
}
OpenGraph.php
で指定したリンク先のOGP情報が取得されます。この変更コードではこのOGP情報からimage
情報が取得されるように変更されています。設定されていない場合はデフォルトと同じ様にスクリーンショットが取得されます。ちょっとした変更ですが、ブログカードの見栄えがガラッと変わります。私のブログ内のブログカードを見て頂けるとどの様な見栄えになるかわかると思います。
3. 最後に
以上が、ブログカードのサムネイル画像にアイキャッチ画像を設定する方法です。非常に簡単ですが、記事全体の印象が変わるので試して見て頂ければと思います。この記事が参考になりましたら、幸いです。読んで頂き、ありがとうございました。