【SANGO】デフォルトのサムネイル画像を含む全てのサムネイル画像を長方形にする

こんにちは、ダイチです。
WordPressの有料テーマ”SANGO”を使ってる方がこの記事にたどり着いたことと思います。
SANGOを販売しているサルワカさんのサイトのよくある質問で「正方形のサムネイル画像を全て長方形で表示させたい」という質問と解決策が公開されています。

WordPressテーマ SANGOについてのよくある質問

しかし公式の方法では記事で設定されたアイキャッチ画像しか反映されずデフォルトのアイキャッチ画像は画像が取得できません。
今回はデフォルトのアイキャッチ画像も長方形に表示できるようにする方法をご紹介していきます。

この記事を読むメリット
  • SANGOのサムネイルを長方形にすることができる
  • SANGOテーマの仕組みを理解できる
この記事の信頼性
  • DAICHismで実際に実装しています

前提条件【これは必須です】

子テーマを実装しよう

この記事での実装は子テーマでの実装がマストです。
詳しい実装方法や使い方は下記リンクの公式サイトより確認してください。

参考 WordPressの子テーマとは?安全にカスタマイズを行う方法saruwakakun.com

デフォルトのサムネイル画像を設定しておこう

デフォルトのサムネイル画像を設定しておいてください。

詳しい使い方は下記のリンクの公式サイトより確認してください。

参考 カスタマイザーでデザインや細かな設定をしようsaruwakakun.com

また「ウィジェットでデフォルトのサムネイル画像を使用する」にチェックを入れておいてください。

解決策【コピペでOK】

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

公式の方法を実装されてる方へ

既に公式の方法を実装されてる方は上書きを行なってください。

子テーマ functions.php
//サムネイルサイズを変更
function my_change_thumb_size() {
add_image_size( 'thumb-160', 160, 92, true );
}
add_action( 'after_setup_theme', 'my_change_thumb_size', 11);
//END サムネイルサイズを変更

//サムネイルURLを書き換える
//ex. sample.jpg =>sample-160x92.jpg
if (!function_exists('replace_thumbnail_src')) {
function replace_thumbnail_src($src, $size)
{
if ($size == "thumb-160") return replace_custom_size_thumbnail_url($src, "160", "92");
if ($size == "thumb-520") return replace_custom_size_thumbnail_url($src, "520", "300");
}
}
//END サムネイルURLを書き換える

その後Regenerate Thumbnailsなどのプラグインを使って画像の再生成を行なってください。

解説【難しいので読まなくてもOK】

公式の方法は万能ではない

SANGOでは、人気記事や最新記事のウィジェット、関連記事ショートコード、前の記事、次の記事へのリンクなどに正方形のサムネイル画像が表示されるになっています。これらの正方形サムネイルを一括で長方形に変えたい場合には、子テーマのfunctions.phpに下記のコードを追加します。

functions.php
//サムネイルサイズを変更
function my_change_thumb_size() {
add_image_size( 'thumb-160', 160, 92, true );
}
add_action( 'after_setup_theme', 'my_change_thumb_size', 11);
//END サムネイルサイズを変更

上記のコードは簡単に説明すると

「画像に対しサムネイル用の画像を160×92でトリミングするコード実行しますよ」

という意味です。
しかしこれだけを実装した場合下記の画像のようになってしまいます。

原因:存在しないURLから画像を出力しようとしている

非表示になっている画像のURLを調べてみると

(拡張子を除いたサムネイルの画像URL)-160×160.(拡張子)

このサイトでいうなら

https://daichi-ism.com/wp-content/uploads/2020/01/NoImage-160×160.jpg

となっているはずです。

ここで求められているのは(拡張子を除いたサムネイルの画像URL)-160×92.(拡張子)のファイルです。

この問題を解決するならサムネイルのURLに160×160と付け足す記述を160×92と付け足す記述に変える必要があります。

原因:サムネイル画像の有無で画像の取得ルートが違う

正しいURLを出力するためにサムネイル画像のURLを取得する関数を親テーマから探し出します。

注意
探し出す際に親テーマの書き換えを行わないようにお願いします!

サムネイル画像URL取得の関数は、
library/functions/sng-functions.phpにあります。
エディターでCtrl(Macはcommand)+Fを押し「アイキャッチ画像関連」と検索します。
中身を見ていくと

親テーマ library/functions/sng-functions.php
// サイズを指定して画像のURLを取得
if (!function_exists('featured_image_src')) {
function featured_image_src($size, $id = null)
{
// 1) 記事にサムネイル画像あり
if (has_post_thumbnail($id)) return get_the_post_thumbnail_url($id, $size);

// 2) サムネイル画像なし&デフォルト画像登録済み
$registered = esc_url(get_option('thumb_upload')); // カスタマイザーで登録されたデフォルト画像URL
if ($registered) {
if ($size == 'thumb-160') return replace_thumbnail_src($registered, $size); // サムネイルサイズ
if ($size == 'thumb-520') return replace_thumbnail_src($registered, 'thumb-520'); // 中サイズ
return $registered; // 通常のサイズ
}

// 3) それ以外の場合はテーマのデフォルト画像を返す
$template_image_path_base = get_template_directory_uri() . '/library/images/';
if($size == 'thumb-160') return $template_image_path_base . 'default_thumb.jpg';
if($size == 'thumb-520') return $template_image_path_base . 'default_small.jpg';
return $template_image_path_base . 'default.jpg';
}

1番のサムネイル画像がある場合は正しく出力されてるので詳しくは触れませんが画像の有無で返ってくる関数が異なっています。

原因:replace_thumbnail_src()で返ってくる数字が不適切

今回注目するのは「2) サムネイル画像なし&デフォルト画像登録済み」の「サムネイルサイズ」です。
この関数を文字に起こすとしたら

「デフォルト画像URLが取得できたらサムネイルサイズ(thumb-160)が要求された時replace_thumbnail_src($registered, $size)を返すよ」

という意味になります。
replace_thumbnail_src($registered, $size)は少し上に書いてあります。

親テーマ library/functions/sng-functions.php
if (!function_exists('replace_thumbnail_src')) {
function replace_thumbnail_src($src, $size)
{
if ($size == "thumb-160") return replace_custom_size_thumbnail_url($src, "160", "160");
if ($size == "thumb-520") return replace_custom_size_thumbnail_url($src, "520", "300");
}
}

全ての原因はここです。
この関数のif ($size == “thumb-160”)〜を文字に起こすとしたら

「サムネイルサイズ(thumb-160)が要求されてたらreplace_custom_size_thumbnail_url($src, “160”, “160”)を返すよ」

という意味になります。
replace_custom_size_thumbnail_urlはさらに上に記述してあるURLを書き換える関数です。

例えば

$src = ‘https://daichi-ism.com/image.jpg’
$size = ‘thumb-160’

と仮定して

if (!function_exists('replace_thumbnail_src')) {
function replace_thumbnail_src($src, $size)
{
if ($size == "thumb-160") return replace_custom_size_thumbnail_url($src, “A”, “B”);
if ($size == "thumb-520") return replace_custom_size_thumbnail_url($src, "520", "300");
}
}

を実行すると最終的にはhttps://daichi-ism.com/image-AxB.jpgと返ってきます。

というわけでreplace_custom_size_thumbnail_url($src, “160”, “92”)に書き換えれば問題は解決することがわかりました。

子テーマのfunctions.phpへの記述

原因がわかったところで最後に子テーマのfunctions.phpへの記述を行います。
公式の解答は専用の画像を生成するのに必須なので消さず下に追記する形で記述します。

子テーマ functions.php
//サムネイルURLを書き換える
//ex. sample.jpg =>sample-160x92.jpg
if (!function_exists('replace_thumbnail_src')) {
function replace_thumbnail_src($src, $size)
{
if ($size == "thumb-160") return replace_custom_size_thumbnail_url($src, "160", "92");
if ($size == "thumb-520") return replace_custom_size_thumbnail_url($src, "520", "300");
}
}
//END サムネイルURLを書き換える

最後にRegenerate Thumbnailsなどのプラグインを使って画像の再生成を行なってください。

まとめ

デフォルトのサムネイル画像は表示できたでしょうか?

あまりサムネイル画像を設定しない人はいないと思いますがいかなる場合にも対処しておくというのも大事なことだと思います。

この記事に関することで質問などありましたらTwitterでお答えできればと思いますので気軽にご連絡いただけたらと思います。