実現したいこと
ウィジェットのサイドバーに広告バナーや最新記事・ソーシャルウィジェットを置いています。
広告バナー(画像)を追従するように自作JavaScriptを実装して、ブラウザをスクロールされると画像が追従するようにしました。
この広告バナーを3個入れたところ、ブラウザが広告バナーで埋もれてしまい最新記事をウィジェットから削除したところ
この広告バナーの追従機能が無効になっていまいました。(自作JavaScriptが呼び出されていない様子)
functions.phpにはjsファイルを呼び出す設定だけしています。
wp_enqueue_script('app', get_stylesheet_directory_uri() . '/js/app.js', array('jquery'));
ChatGPIに聞いたところ、wp_enqueue_scriptsアクションフックを使用しろというのですが分かりません。
具体的にどうすればよいのでしょうか?
よろしくお願いします。
前提
ここに質問の内容を詳しく書いてください。
(例)
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
エラーメッセージ uery.Deferred exception: Cannot read properties of undefined (reading 'top') TypeError: Cannot read properties of undefined (reading 'top') at objOffset (https://xxxx.jp/wp-content/themes/xxxx/js/app.js?ver=1683177113:447:20) at HTMLDocument.<anonymous> (https://xxxx.jp/wp-content/themes/xxxx/js/app.js?ver=1683177113:415:17) at e (https://xxxx.jp/wp-includes/js/jquery/jquery.min.js:2:30038) at t (https://xxxx.jp/wp-includes/js/jquery/jquery.min.js:2:30340) undefine
該当のソースコード
functions.php
1functions.phpの冒頭でactionフックしています。 2 3function bzbsk_temp_wp_enqueue_scripts() 4{ 5 wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css'); //cssファイルの場合 6 wp_enqueue_script('app', get_stylesheet_directory_uri() . '/js/app.js', array('jquery')); 7} 8add_action('wp_enqueue_scripts', 'bzbsk_temp_wp_enqueue_scripts');
app.js
1 2// 追従の部分を抜粋 3 var scrollStart = $('#secondary').offset().top; 4 var scrollEnd = $('#colophon').offset().top; 5 var distance = $(this).scrollTop(); 6 var offset1 = objOffset($('#xeory_banner_manager-3')); 7 var offset2 = objOffset($('#xeory_banner_manager-4')); 8 var offset3 = objOffset($('#xeory_banner_manager-5')); 9 10 $(window).on('load',function(){ 11 setBannerPosition('#xeory_banner_manager-3', distance, scrollStart, scrollEnd, offset1); 12 setBannerPosition('#xeory_banner_manager-4', distance, scrollStart, scrollEnd, offset2); 13 setBannerPosition('#xeory_banner_manager-5', distance, scrollStart, scrollEnd, offset3); 14 15 $(document).scroll(function () { 16 scrollStart = $('#secondary').offset().top; 17 scrollEnd = $('#colophon').offset().top; 18 distance = $(this).scrollTop(); 19 setBannerPosition('#xeory_banner_manager-3', distance, scrollStart, scrollEnd, offset1); 20 setBannerPosition('#xeory_banner_manager-4', distance, scrollStart, scrollEnd, offset2); 21 setBannerPosition('#xeory_banner_manager-5', distance, scrollStart, scrollEnd, offset3); 22 }); 23 }); 24 function setBannerPosition(obj, scroll, start, end, offset){ 25 if (1024 < $(window).width()) { 26 var sideHeight = $('#secondary').height() - $('#xeory_recentviews-2').height() - $('#social_widget-2').height(); 27 if (start < scroll) { 28 if (end - sideHeight > scroll) { 29 $(obj).offset({top: scroll + offset}); 30 }else{ 31 $(obj).offset({top: end - sideHeight + offset}); 32 } 33 } else { 34 $(obj).offset({top: start + offset}); 35 } 36 } 37 } 38 function objOffset(obj){ 39 var position = $(obj).position(); 40 return position.top; 41 } 42 $(window).on('resize', function(){ 43 if (1024 < $(window).width()) { 44 scrollStart2 = $('#secondary').offset().top; 45 scrollEnd2 = $('#colophon').offset().top; 46 distance2 = $(this).scrollTop(); 47 48 $('#xeory_banner_manager-3, #xeory_banner_manager-4').css('position', 'relative'); 49 setBannerPosition('#xeory_banner_manager-3', distance2, scrollStart2, scrollEnd2, offset1); 50 setBannerPosition('#xeory_banner_manager-4', distance2, scrollStart2, scrollEnd2, offset2); 51 setBannerPosition('#xeory_banner_manager-5', distance2, scrollStart2, scrollEnd2, offset3); 52 }else{ 53 $('#xeory_banner_manager-3, #xeory_banner_manager-4').css('position', 'static'); 54 } 55 }) 56 }); 57 58 59 60 61
試したこと
ウィジェットを入れ替えたことにより、cssのIDが自動的に変わった影響ということが分かったのですがIDを変更しても動作しませんでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。

回答1件
あなたの回答
tips
プレビュー