WordPressテーマSANGOの質問

記事下の関連記事なども正方形に設定したい

アバター
みかん

先月からsangoを使用させて頂いています。色使いやカスタマイズのしやすさからとっても気に入っています。
ありがとうございます。

教えていただきたいのですが、
アイキャッチ画像を正方形に設定しているのですが、記事下の関連記事なども正方形に設定できるのでしょうか?
またカードタイプの記事一覧も正方形にできるのであれば教えて頂きたいです。

似たような質問があったのでやってみたのですが、比率が違ったようでうまくいきませんでした。

教えていただけると助かります。
よろしくお願いします。

他テーマからSANGOに移行される方へ(作成中)
コメントへの回答
サルワカくん
サルワカくん
2018/11/10

アイキャッチ画像や関連記事の画像の縦横比を1:1にしたいということですね。
①子テーマのfunctions.phpに下記のコードを貼り付けます。

//サムネイル画像サイズを変更
function replace_thumbnail_src($src,$size) {
      $width = ""; $height = "";
      if($size == "thumb-160" ) {
        $width = "160";
        $height = "160";
      }
      if($size == "thumb-520" ) {
        $width = "520";
        $height = "520"; //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', 520, 520, true ); //2つの数字(520)を合わせると画像が1:1の比率になる
}
add_action( 'after_setup_theme', 'my_change_thumbnail_size', 11);
//END サムネイル画像をオーバーライド

②子テーマのstyle.cssに下記のコードを貼り付けます。

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

③Regenerate Thumbnailというプラグインで画像を再生成します。

ご確認よろしくお願いします。

アバター
みかん
2019/07/24

返信に気付けず、コメントが遅くなってしまいました。
すみません。

教えて頂いた通り子テーマのfunctions.phpとstyle.cssにコードを貼り付けてみたのですが、うまくいきませんでした。

1:1の比率で空白はあるものの、画像が以前のままです。

プラグインのEWWW Image Optimiterの影響かと思い停止してみたんですが、Regenerate Thumbnailで(520,520)の画像がリサイズできないようです。

何か他にプラグインの影響などが考えられれば教えて頂けると助かります。

サルワカくん
サルワカくん
2019/07/25

画像は520 x 520にリサイズされたものが生成されているようですよ。
サイト内のどの部分の画像が正方形にならないのでしょうか?
(見たところすべてSANGOが出力されている画像はすべて正方形のように見えるのですが・・・)

アバター
みかん
2019/07/25

見て頂きありがとうございます。

最新記事の一覧ページのPC表示が上手くいきません。

一度Regenerate Thumbnailでメディアサイズの(中)で520,520を生成しています。
この時も画像は置き換えられませんでした。

その後はRegenerate Thumbnailのリサイズされる記載の所に520,520がどうしても表示されず、されていないものだと思い込んでしまいました。

最新記事ページも他のページと同じようにリンクカードにすれば正方形なるのかなとも考えましたが、変更の仕方がわからずそのままになっています。

何か方法があればおしえて頂けると助かります。

サルワカくん
サルワカくん
2019/07/25

なるほど、
JetpackのPhotonに画像がキャッシュされている気がするので、そちらのキャッシュを削除してみると良いかと思います。
(ソースコードを見ると、画像のURLがhttps://i1.wp.com/〜となっているのが分かるかと思います)
よろしくお願いします。

アバター
みかん
2019/07/25

ありがとうございます。

Photonのキャッシュ削除ができないようでしたので、無効化してみました。

再度Regenerate Thumbnailsをトライしてみたりプラグイン自体も削除してから追加してみたりもしましたが、上手くいかないようです。

何度も見ていただいたのにすみません。

サルワカくん
サルワカくん
2019/07/25

キャッシュプラグインで古いページデータが残ったままのようです。Wp Fastest Cacheですね、おそらく。

また、本件、過去の他のカスタマイズと競合している気がします・・・
(こちらでは具体的な原因究明ができません・・・)

「もともと正方形のサムネイル画像のサイズを大きくする」処理と、今回の「長方形を正方形にする」処理を両方別々にやっても片方しか利きません。

過去にそのようなカスタマイズを行っているのであれば、そちらを消して、上記のコードのうちの

$width = "160";
$height = "160";

の値を調整するのが良いと思います。こちらの値が(もともと)正方形のサムネイルのサイズになります。

アバター
みかん
2019/07/26

何度もありがとうございます!

いろいろプラグインを停止してみたりcssを見直してみたりしています。

今のところまだ原因の特定はできていませんが、キャッシュやカスタマイズした部分をきっちり見直して上手く表示できるようにしたいと思います。

ありがとうございました。