WordPress

AFFINGERの子テーマ「JET」でサムネイル全体が表示されない原因と対処法

テーマをJETにしたらサムネイルが見切れるようになっちゃった・・・

WordPressでアフィリエイトブログを作る際によく使われる有料テーマのひとつ「WING(AFFINGER5)」

そしてAFFINGERには記事を2~3列のブログカード形式で表示してくれる子テーマ「JET」が存在する。

このJETを導入後に作成した記事のサムネイル(アイキャッチ)が画像全体が表示されず見切れるようになった



JET導入後のブログカード(サムネイル)


前回の記事でサムネ画像のトリム解除したよね?
ええ、たしかにトリム解除はしたので、これは別の原因がありますね


メディア設定ではないなら、原因は何なのか、どうすればサムネ画像を表示できるのか。

そこで今回はAFFINGERの子テーマ「JET」でサムネイル全体が表示されない原因と対処法について紹介する。

この記事を書いている人


システムエンジニア、AIエンジニアと、IT業界で10年以上働いている中堅。PythonとSQLが得意。

記事を読むメリット

AFFINGERの子テーマ「JET」でサムネイル全体が表示されない原因と対処法がわかる


「JET」でサムネイル全体が表示されない現象

現象としては以下の通り。

  • AFFINGERの子テーマ「JET」導入
  • 導入時点ではサムネイルにおかしいところは無かった
  • 導入後に作成した記事のサムネイルが全体表示されずに見切れてしまった

そして実際にJET導入後に作成した記事のブログカードが以下のように表示されていた。


JET導入後のブログカード(サムネイル)


上下左右で見切れて画像に書かれた文字が読めなくなっちゃってるね
ええ、これじゃ見栄えが悪いですね



「JET」でサムネイル全体が表示されない原因

「JET」でサムネイル全体が表示されない原因、それはJETが独自サイズのサムネイル画像を使っているから


JETの中では400x300(トリム有り)の設定で独自のサムネイル画像を指定している。

なのでJET導入後にアップロードした画像は、独自サイズ指定の画像がサムネイルとして優先されて表示されてしまうのだ。



「JET」でサムネイル画像全体を表示させる方法

サムネイル画像全体を表示させる方法として、まず思い浮かぶのは前回の記事と同様にメディア設定でトリムをオフにすることだろう。

しかし前回と同じようには行かない。

何故ならメディア設定の画面を開いてもJET用のサムネイル設定は出てこないからだ。


ではJETの管理画面はどうだろうか。

JETの管理画面で対応する方法はあるにはある。

管理画面を開くと以下のようになっている。


赤枠で囲んだ箇所に以下のように書かれている。

記事一覧のサムネイル画像をフルサイズにする(見切れずに全て表示できます)*

この機能を使えば確かに見切れずに表示できる。

ただしフルサイズの画像を読み込むのでブラウザで表示する際の処理が重くなる

表示が重いページはSEO的には良くないので、できればフルサイズ表示はしたくない。



JETのfunctions.phpを変更する

「JET」でサムネイル画像全体を表示させたいが、

  • WordPressのメディア設定には設定項目がない
  • JETの管理画面でフルサイズ表示にはできるが、重くなるので困る


やりたいのはJET用のサムネイルのトリム設定を解除することだ。

ならJETのfunctions.phpを変更すればできるのではないか?


WordPressのダッシュボードで 外観 → テーマエディター を開き、右側のファイルリストの中から テーマのための関数 functions.php を開く。

すると37行目付近に以下の記載がある。

//サムネイルサイズの追加
add_image_size( 'st_thumb_card', 400, 300, true );

JETのサムネイル設定


この st_thumb_card がJET用のブログカードのサムネイル画像設定で、 400,300,true400px x 300px (トリム有り)を示している。

なのでコイツを書き換えてしまえば良い。

truefalse に書き換えてトリム禁止にする。

//サムネイルサイズの追加
//add_image_size( 'st_thumb_card', 400, 300, true );
add_image_size( 'st_thumb_card', 400, 300, false );

JETのサムネイル設定(トリム解除)


あとは前回同様に Regenerate Thumbnails でサムネ画像を作り直す。


やり方は前回の記事をご参考。

WordPressのサムネイル画像が全部表示されずに見切れてしまう原因


するとTOPページのブログカードもキレイに表示できるようになった。

上下は少し見切れてるけど画像の見栄えは良くなったね
上下の見切れはサムネを作る段階じゃなくて、表示する段階で処理してるっぽいので別の箇所を見ないといけませんね
まぁ一旦これでいいでしょう



まとめ

今回はAFFINGERの子テーマ「JET」でサムネイル全体が表示されない原因と対処法について紹介した。

「JET」でサムネイル全体が表示されない原因は、JETがトリム有りの独自サイズサムネイル画像設定を持っており、新規に画像アップロードするとトリムされたサムネイルができてしまうから。

対処方法としてはJETの functions.php を開いて、サムネ設定部分のトリム許可設定を false に書き換えてサムネイルを再作成する。


しかしよく気づけたね
Regenerate Thumbnails の作成対象に st_thumb_card が追加されたので、あとはどこに設定があるかを探したくらいかな。


また他にもサーバー移行のようなWordPressノウハウブログのサーバー代の足しにできるASPの紹介記事もあるので、気になったら見てみると良いかも。

ITipsと同じようなブログを作る方法

ブログに興味がありますか?

もしブログに興味がある場合は↓このページ↓を参考にすれば、ITipsと同じ構成でブログを作ることができます

サーバー、ドメイン、ASPと【ブログに必要なものは全て】このページに書きました。
同じ構成でブログ作るのはいいけど、記事はマネしないでネ (TДT;)

ランキング参加中

にほんブログ村 IT技術ブログへ

他にもブログやSNSで紹介してくれると励みになります。

はてブのコメントで酷評されると泣きます(´;ω;`)

-WordPress
-, ,

© 2022 ITips