質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

395閲覧

WordPressのウィジェットのサイドバーを編集したら、サイドバーに関する自作JavaScriptが読み込まれなくなりました。

fullmoon311

総合スコア62

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/05/04 06:22

編集2023/05/04 07:52

実現したいこと

ウィジェットのサイドバーに広告バナーや最新記事・ソーシャルウィジェットを置いています。
広告バナー(画像)を追従するように自作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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mocchiri

2023/05/04 08:14

エラー文を見ると、app.jsの415行目のobjOffsetで要素が見つからず、position.topを返せていないようです。 推測になりますがその行にもこんな風に書いてありませんか。この要素が存在してない可能性が高いです。 var offsetZ = objOffset($('#deleted_element')); ひょっとすると最新記事をウィジェットから削除したのがここに影響してるかもしれません。
mocchiri

2023/05/04 08:16

既に解決済ですね。 回答したタイミングがずれました。ご放念ください。
fullmoon311

2023/05/04 10:56

ありがとうございます。概念が理解できました。表示する中身は同じでもウィジェットという箱自体生成しなおしているので、CSSのIDも変わってしまうんですね。
guest

回答1

0

自己解決

ウィジェットのコンテンツを入れ替え何度かするとcssのIDが自動的に変わるので、
JSファイルで指定ていた番号のオブジェクトがないよというエラーでした!

投稿2023/05/04 08:02

fullmoon311

総合スコア62

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問