【AFFINGER】外部URLブログカードのサムネイルサイズ変更方法

外部URLブログカードのサムネイルの設定

このサイトではアイキャッチ画像を\(1920 \times 1080\)ピクセル（アスペクト比\(16:9\)）で統一しています。

その関係でサムネイルを正方形にすると両サイドがカットされて画像の見栄えが悪いのでサムネイル画像は「メディア設定にする」にしています。（サムネイル画像設定は「AFFINGER管理」画面の「デザイン」→「サムネイル画像設定」で設定できます。）

しかし、外部URLブログカードはプラグインの標準設定で\(300 \times 300\)ピクセルの正方形で作成されてしまいます。

外部URLブログカードだけ画像のアスペクト比が\(1:1\)なので、カードの高さが高くなってしまうのでアスペクト比をそろえる方法を探していました。

サムネイルサイズを変更するためにはPHPファイルの変更が必要なので自己責任でお願いします。

また、「ブログカード外部URL対応プラグイン（WING専用）（バージョン 20180717）」の設定変更の説明になるので、バージョン等が違う場合には十分に注意して下さい。

外部URLブログカードはwordpress.comの提供しているAPIを利用して、実際のサイトのスクリーンショットを表示しているようです。

このスクリーンショットは「外部URLブログカードプラグイン」のPHPファイル内でデフォルトでは\(300 \times 300\)と指定されています。

たびすけ

こんな感じでブログカードの高さが揃っていないので見た目が悪い状態でした。

wp-content/plugins/st-card-ex\templates\shortcode\default.phpの36行目に次のコードがあります。

<img src="https://s.wordpress.com/mshots/v1/<?php echo rawurlencode( $page_meta->get_url() ); ?>?w=300&h=300">

こちらを次のように変更しました。
このサイトではアスペクト比が\(16:9\)になるよう変更していますが、変更するサイトの画像のアスペクト比にあわせて変更してください。

<img src="https://s.wordpress.com/mshots/v1/<?php echo rawurlencode( $page_meta->get_url() ); ?>?w=192&h=108">

?w=300&h=300の部分を?w=192&h=108に変更しています。

wp-content/plugins/st-card-ex\templates\shortcode\amp.phpの36行目

<img src="https://s.wordpress.com/mshots/v1/<?php echo rawurlencode( $page_meta->get_url() ); ?>?w=100&h=100">

こちらも次のように変更しましたが。

<img src="https://s.wordpress.com/mshots/v1/<?php echo rawurlencode( $page_meta->get_url() ); ?>?w=192&h=108">

同じく?w=300&h=300の部分を?w=192&h=108に変更しています。

たびすけ

このように変更されました。
高さが揃って見た目が綺麗になりました。