WordPressテーマでトップページのサイズが大きかったときにやったことを残しておく

ごきげんよう

今回は、WordPressテーマでトップページのサイズが大きかったときにやったことを残しておく。
これは過去やったことをまとめておくもの。
各自の環境・テーマによって本当に異なると思うので場所よりも「やり方」として見てほしい。

1. アイキャッチ画像でトップページが重い

WordPressのトップページに記事を沢山表示させるとアイキャッチ画像も同時に載るので、ネットの通信速度が遅いときに読み込みが遅くなった。
このあたりは当ブログのトップページと見比べてもらったほうが早い。キャプチャよりも早い。

さて、何故かなと思ったらアイキャッチ画像。それそのものは小さく見えるのに何故かファイルサイズが大きい。
そう、これって各記事の上部に出ているアイキャッチ画像と全く同じ。使っているテーマの仕様なのかもしれない。
元は大きな画像をファイルサイズ変わらず見た目だけ変えて表示している。

そうなるとどうしよう。初回訪問の方はとにかくトップページが重くなる。記事を表示していればしているほど重くなる。

2. 解決策は表示画像変更

私が考えた解決策は、

・記事に表示するアイキャッチ画像をそもそも小さくする。

うーん、そうなると記事トップに表示されるアイキャッチがアイキャッチ感薄れる。
むしろ他の画像に比べて小さいので違和感が出る。

・アイキャッチと同じ画像でもっとサイズを小さくしたものを使う。

このうち、後者を行ってみた。

ただ、同じ画像でもっとサイズを小さくしたものって何だという。

WordPressには標準で画像アップロードするといくつかのサイズにしてくれます。
特に設定を変えてないならサムネイル用で「150x150px」のものができていると思います。
そう、別に小さいサイズを保存しているならこれを使えばいいじゃない。

3. テーマのphpを書き換えよう

ここからはテーマのphp書き換え。

テーマは複数のファイルで構成されていて、今回私が書き換えたファイルはcontent.phpでした。

じゃあ、ここで何をするって、サムネイルを表示するためにファイル名を記事から取得するんですが、
そのファイル名に対して全部「-150×150」をつけてサムネイル用の小さいファイルの名前に変えてしまえというもの。
phpの「preg_replace関数」で片付けました。ただの正規表現です。
因みに、アイキャッチ画像によっては「-???x???.jpg」みたいな名前で表示されているものもあるのでこちらも考慮して正規表現で置換のパターンを書きます。
その後echoしたら表示です。これでおわり。

あら不思議、テーマを反映したらトップページのサムネイル画像のファイルサイズが小さくなりました。
各記事アイキャッチ画像は大きく表示されます。