HTML→WordPress化でのJavaScriptがうまく機能しない

Question

既存のHTMLサイトをWordPress用に書き換えているのですが、JSだけがうまく機能しません。その他はHTMLサイトと同ように機能するのですが。
具体的な内容に関しては

現在画像10数枚がサイトに表示されていてそれをクリックすると、ポップアップ画像として表示、さらに「prev」「next」ボタンで前後の画像表示。（例：4.jpgをクリック→4.jpgがポップアップ表示→prevボタンクリック→3.jpgがポップアップ表示）というものなのですが、

WordPress用の方では、画像10数枚がサイトに表示されていてそれをクリックすると、ポップアップ画像として表示されるところまでは同じなのですが、そこから「prev」「next」ボタンどちらを押しても、勝手に1.jpgに飛ばされます。（例：4.jpgをクリック→4.jpgがポップアップ表示→prev or nextボタンクリック→1.jpgがポップアップ表示→nextボタンクリック→2.jpgがポップアップ表示）となります。

popup自体を機能させるためのJS,ハンバーガーメニューを機能させるためのJSは動作するので、読み込みには問題はなく、JSの書き方、もしくはindex.phpの書き方に問題があるのではと思います。

$(function() {
  let imageSources = ["./images/image/1.jpg","./images/image/2.jpg","./images/image/3.jpg","./images/image/4.jpg","./images/image/5.jpg","./images/image/6.jpg","./images/image/7.jpg","./images/image/8.jpg","./images/image/9.jpg","./images/image/10.jpg","./images/image/11.jpg","./images/image/12.jpg","./images/image/13.jpg","./images/image/14.jpg","./images/image/15.jpg","./images/image/16.jpg","./images/image/17.jpg"];
  
  $('#container-p img').each(function() {
    let path = $(this).attr("src");
    imageSources.push(path); 
  });
  let sourceIndex = 0;

  $("#containers-p img").on("click", function () {
    let img_src = $(this).attr("src");
    sourceIndex = imageSources.indexOf(img_src); 

    $("#popup-img img").attr("src", img_src);
    $("#popup-img").toggleClass('active');
  });

  $("#popup-close-btn").on("click", function () {
    $("#popup-img").removeClass('active');
  });

  $('#popup-prev-btn').on("click", function() {
    sourceIndex = (sourceIndex + imageSources.length - 1) % imageSources.length;
    updatePopupImage();
  });

  $('#popup-next-btn').on("click", function() {
    sourceIndex = (sourceIndex + 1) % imageSources.length;
    updatePopupImage();
  });

  function updatePopupImage() {
    $("#popup-img img").attr("src", imageSources[sourceIndex]);
  }
});

        <div id="popup-img" class="default">
            <img src="<?php echo get_template_directory_uri(); ?>/images/image/1.jpg" alt="ポップアップ">
            <div id="popup-close-btn" class="popup-close-btn"><i class="fa-solid fa-xmark"></i></div>
            <div class="popup-change-btn">
                <div id="popup-prev-btn" class="change-btn"><i class="fa-solid fa-chevron-left"></i></i></div>
                <div id="popup-next-btn" class="change-btn"><i class="fa-solid fa-chevron-right"></i></div>
            </div>
        </div>
        <ul id="containers-p" class="containers-p">
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/1.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/2.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/3.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/4.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/5.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/6.jpg" alt=""></li>
            <li class="container-p flex-pc"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/7.jpg" alt=""></li>
            <li class="container-p flex-pc"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/8.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/9.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/10.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/11.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/12.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/13.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/14.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/15.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/16.jpg" alt=""></li>
            <li class="container-p flex"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/17.jpg" alt=""></li>
        </ul>

Comments

[matsu33]

HTMLからWordPress化する際に変更した箇所は、imgタグの中のsrに<?php echo get_template_directory_uri(); ?>を追加したところです。
JSはlet imageSourcesの中身を<?php echo get_template_directory_uri(); ?>をつけたものと付けないものを両方試しましたがうまくいきません
そもそもJS自体の読み込みはできるのに、HTMLではうまく機能する、PHPでは機能しないということはあり得るのでしょうか。

[Lhankor_Mhy]

ご提示のコードを試してみましたが、問題が再現しませんでした。

おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。

問題再現の手順をもう少し詳しく書いていただけますか？

Answer 1

$(function() {
(略)
});

そもそもJS自体の読み込みはできるのに、HTMLではうまく機能する、PHPでは機能しないということはあり得るのでしょうか。

Webブラウザの開発者ツールのコンソールを確認すると「Uncaught TypeError: $ is not a function」等のエラーが出ていないでしょうか。

JavaScript というより jQuery の問題ですね。
WordPress では jQuery 読み込み後に jQuery.noConflict() を実行しているので jQuery を $ で呼び出すことはできません。

Webブラウザにコードは読み込まれているが $ では jQuery が呼び出されないので、動作しないのです。「WordPress jQuery 動作しない」等のキーワードで、検索すると同じような例がいろいろ見つかると思います。

jQuery の jQuery.noConflict() - jQuery日本語リファレンス ドキュメントに

この関数を実行すると、$関数の動作が先に定義されている動作に戻る。
noConflictを使った場合、jQueryオブジェクトの呼び出しには明確に'jQuery'と書く必要がある。
例えば$(“div p”)と書いていたものも、jQuery(“div p”)と書かなければならない。

とあるように $ の代わりに jQuery と明示して呼び出す必要があります。

ただ、すべての $ を jQury に個々に置き換えるのは手間なので、jQuery のコードを

(function($){
  // 元のコード
})(jQuery);

や

jQuery(document).ready(function($){
  // 元のコード
});

のようにカプセル化して対処することが多いと思います。

Answer 2

使用しているjQueryのバージョンは同じですか？
console.log("sourceIndex: " + sourceIndex);を各所に入れてDevToolで確認してみてはいかがでしょうか？
そうすることでどこで予想外の動作をするのか見つかられるかもしれません。

1. let imageSources ...とlet sourceIndex = 0;はブロックの外に書いたほうがいいかもしれません。
2. $('#container-p img').each(function() { ...は不要かと。実行されません。
   その上でlet imageSources ...はconst imageSources ...に。