[ 解決済 ] G3でトップスライダーで画像の幅と高さの設定

[直美野寺]

■ 利用テーマとバージョン :
問題のテーマ・プラグインのバージョン：Lightning
選択しているデザインスキンの種類（Lightningの場合）：Origin III

■ 質問内容：
SEO会社からCore Web Vitals の改善施策として、
「イメージタグに直接「width」「height」を記載していただくことを推奨いたします。」という提案を受けています。
　CSSで記述してはどうかと聞いてみたのですが、HTMLで書く方が望ましいということです。

　Lightningのトップページスライダーにその記述をする方法はあるのでしょうか？

　(後ほどスライダーブロックで代用しようと思っていますが、
　うまくスマホで小さい画像に切り替えたりする設定が出来ず。
　とりあえず『トップページスライダー』で設定したいと思います。）

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[対馬 俊彦]

Lightningのトップページスライダーにその記述をする方法はあるのでしょうか？

おすすめできるようなものではありませんが、どうしてもやりたい!! という場合の方法を紹介します。

この方法には以下の注意点があります。(やるなら自己責任で)

• 操作に失敗すると、最悪の場合サイトが表示されなくなります。
  必ず変更するファイルのバックアップをとってから作業を行ってください。
• テーマがアップデートされるたびに書き換えた部分が上書きされてしまう(たぶん)。
• 違うサイズ(縦横比)のスライド画像に差し替えるときに、また作業を行う必要があります。

■ ■ ■ 作業手順 ■ ■ ■

/wp-content/themes/lightning/_g3/inc/ltg-g3-slider/package/class-ltg-g3-slider.php
の 742行目 あたりを以下のように書き換えます。

【変更前】

$slide_html .= '<picture>';

// If Mobile Image exist.
if ( ! empty( $options[ 'top_slide_image_mobile_' . $i ] ) ) {
	$slide_html .= '<source media="(max-width: 767px)" srcset="' . esc_attr( $options[ 'top_slide_image_mobile_' . $i ] ) . '">';
}

$slide_html .= '<img src="' . esc_attr( $options[ 'top_slide_image_' . $i ] ) . '" alt="' . esc_attr( $slide_alt ) . '" class="ltg-slide-item-img">';
$slide_html .= '</picture>';

【変更後】

$slide_html .= '<picture>';

// If Mobile Image exist.
if ( ! empty( $options[ 'top_slide_image_mobile_' . $i ] ) ) {
	$slide_html .= '<source media="(max-width: 767px)" srcset="' . esc_attr( $options[ 'top_slide_image_mobile_' . $i ] ) . '" width="△" height="△">';
}

$slide_html .= '<img src="' . esc_attr( $options[ 'top_slide_image_' . $i ] ) . '" alt="' . esc_attr( $slide_alt ) . '" class="ltg-slide-item-img" width="○" height="○">';
$slide_html .= '</picture>';

○ がスライド画像のサイズ、△ がモバイル用スライド画像のサイズの指定です。

たしかに、SEO会社が言う Core Web Vitals のスコア改善は期待できますが、手間とリスクを考えるとあまりおすすめできるやり方ではありません。その労力を他の部分でサイト改善に回した方がよいと私は思います。

それなら回答しなくていいのに…というご意見もあるかもしれませんが、「この方法しかなさそう」という参考情報として書かせていただきました。ご容赦ください。

[直美野寺]

対馬様、おはようございます。

なるほど、更新ごとにやるとなると、少し手間のかかる作業になりそうですね。
全体作業とのバランスを見ながら、少し社内で検討してみます。

ご指南いただき、ありがとうございました。

[投稿者]

投稿