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

Php

今日の人気記事

  1. SMART ICOCAを発行して使ってみたので良い点悪い点をまとめてみた
  2. SMART ICOCAの退会(払いもどし)をしてみたので注意すべきことをまとめておく
  3. イオンスクエアメンバーIDがロックしたのでカスタマーサービスに電話して対処してみた
  4. Xiaomi Mi Band 3を使ってみたので残しておく
  5. 栃木県益子町にある大川戸ドライブインで流しそうめんを楽しんでみた
  6. 水出しコーヒー使用のジョージア ジャパン クラフトマン ブラックを飲んでみた
  7. 炭酸で紅茶を感じる ウィルキンソン タンサン ティーを飲んでみた
  8. LinuxでGoogleドライブを使えるようにしてみたのでメモ残しておく
  9. 円錐形ドリッパーを買ってみたので台形(扇形)ドリッパーとの違いをまとめてみた
  10. GALAXY Note II(SC-02E)をAndroid 6.0.1 Marshmallow(CM13)にしてみたのでメモを残しておく
この記事の読了時間: 247

ごきげんよう

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

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

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

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

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

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

私が考えた解決策は、

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

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

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

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

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

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

Php

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

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

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

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

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

4. 最後に

今回は、WordPressテーマでトップページのサイズが大きかったときにやったことを残してみました。
かなり前にやってちょっと今回手直ししたのでそのついでに記事に残しました。
一言でいうとファイル名を正規表現で書き換えて小さいものを表示しようというそれだけです。

それでは ごきげんよう

RSS/feedlyはこちら

follow us in feedly


プッシュ通知受信はこちら



Twitterアカウントはこちら




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.