WPテーマ【SANGO】カスタマイズ！アイキャッチ画像を正方形にする方法

WP有料テーマであるSANGOはカードタイプなどのアイキャッチ画像は全て520×300で表示されています。

16：9ですね。

これを1：1の表示にしたいと思います。

今回は500×500で表示するように設定しています。

サイトイメージ

イメージとしてはこんな感じです↓

管理人の別サイトですが、イメージとして参考にしてみてください。

子テーマを使用する

親テーマを直接編集するのではなく、子テーマを使用してください。

公式サイトからダウンロードできます。

▶ダウンロード

PHPを編集する

ここではアイキャッチの画像サイズを変更する場合、cssではなくPHPを編集します。

私の素人なので長らく模索しました。

子テーマにあるfunction.phpに下記のコードをコピペしてください。

※記事下の関連記事も正方形になります。

※500×500の場合↓

//サムネイル画像サイズを変更
function replace_thumbnail_src($src,$size) {
      $width = ""; $height = "";
      if($size == "thumb-160" ) {
        $width = "160";
        $height = "160";
      }
      if($size == "thumb-520" ) {
        $width = "500";
        $height = "500"; //widthと数字を合わせると画像が1:1の比率になる
      }
      if ($width && $height) {
        $search = array('.jpg','.jpeg','.png','.gif','.bmp');//画像拡張子
        $replace = array();
        foreach ($search as $ext) {
          $replace[] = '-'.$width.'x'.$height.$ext;//トリミング後の画像パスに置き換え
        }
        $replaced_src = str_replace($search, $replace , $src);
      }
      return $replaced_src;
}

function my_change_thumbnail_size() {
  add_image_size( 'thumb-520', 500, 500, true ); //2つの数字（520）を合わせると画像が1:1の比率になる
}
add_action( 'after_setup_theme', 'my_change_thumbnail_size', 11);
//END サムネイル画像をオーバーライド

元はwidthが520、heigthが300になっているのでそこを500にしています。

お好きな数字を入力してください。

CSS

CSSは以下を外観＞カスタマイズ＞追加CSSに記入してください。

.cardtype__img {
    padding-bottom: 100%; /*縦横比1:1の場合は100%*/
}

※公式サイトのQ&Aを参考にしています。

その他のデザイン

その他のデザインはCSSで変更しています。

もっと細かく知りたい人は、気になる部分で【右クリック】から【検証】でCSSやHTMLが見れるので確認してみてください。

そのほか、コメントでも受付中です。