[ 解決済 ] スクロールした時のヘッダーロゴ画像を動的に変更したい
[ 解決済 ] スクロールした時のヘッダーロゴ画像を動的に変更したい
- このトピックには3件の返信、2人の参加者があり、最後に
により8時間、 41分前に更新されました。
-
投稿
-
■ 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を差し替えるアドバイスありがとうございました。
本当に助かりました。
- このトピックに返信するにはログインが必要です。
