[ 解決済 ] スクロールした時のヘッダーロゴ画像を動的に変更したい

[渡井紀尋]

■ WordPress のバージョン
6.7.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.29.4

■ Pro Unit のバージョン
1.94.2.1

■ スキンの種類
Evergreen

■ スキンのバージョン
どのように確認するかわかりませんでした。

■ プラグインの種類・バージョン
なし

■ 期待する動作
ヘッダーロゴ画像を動的に変更したいと思っております。
例：季節や時間帯によって変更する

フォーラムのトピックで下記を見つけ試した結果、成功しました。
しかし、スクロールした時の画像も変更したいのですが、何か変更する方法はないでしょうか？

add_filter( ‘lightning_head_logo_image_url’, function( $options ){
$options = ‘スマホ用のヘッダーロゴ画像のURL’;
return $options;
} );

■ 自分で試した事
それらしい、フック名を検索しましたが見つかりませんでした。

■ 症状が発生するブラウザ
全てのブラウザ

■ 実際の症状
スクロールした時の画像を動的に変更することができない。

■ 期待する動作
スクロールした時の画像を動的に変更したい。

フォーラムのトピックで下記を見つけ試した結果、ヘッダーロゴの置換に成功しました。

add_filter( ‘lightning_head_logo_image_url’, function( $options ){
$options = ‘スマホ用のヘッダーロゴ画像のURL’;
return $options;
} );

しかし、スクロールした時の画像も変更したいのですが、何か変更する方法はないでしょうか？

■ 自分で試した事
それらしい、フック名を検索しましたが見つかりませんでした。

■ 症状が発生するブラウザ
全てのブラウザ

■ 実際の症状
スクロールした時の画像も動的に変更したいのですが、フックなどが用意されているのでしょうか？

[渡井紀尋]

すいません。
ヘッダー透過時のロゴ画像についても、動的に変更したいと考えております。
これについても、わかるようでしたら、教えて頂けると助かります。

[対馬 俊彦]

スクロールした時の画像も動的に変更したいのですが、フックなどが用意されているのでしょうか？

フックは用意されていないようですが、
スクロール時には背景画像でヘッダーロゴ画像を表示しているので、
以下の CSS で切り替えできます。

.header_scrolled .site-header-container--scrolled--logo-and-nav-container .site-header-logo,
.header_scrolled .site-header-container--scrolled--logo-and-nav-full .site-header-logo {
    background-image: url(スクロール時に表示したい画像のURL);
}

ヘッダー透過時のロゴ画像はカスタマイズ画面で設定できます。

[渡井紀尋]

対馬様
素早いアドバイス、ありがとうございます。
アドバイス頂いた内容を使って、動的に画像を変更することに成功しました。
具体的には、下記の手順で行いました。

１．ご指摘の内容を<style>…</style>で囲み、共通部品コンテンツにしました。
２．「lightning_site_header_prepend」フックでフィルターを追加し、以下の処理を行います。
　　・上記コンテンツを読み込む
　　・読み込んだコンテンツの画像URLを差し替える

アドバイスありがとうございました。
本当に助かりました。

[投稿者]

投稿