wordpressカスタム投稿一覧からモーダルウィンドウで内容を呼び出したい

Question

WordPressでホームページを作成しています。
htmlで元となるページを作成し、WordPressのオリジナルテーマとして組み直しています。
カスタム投稿をアイキャッチで一覧表示し、クリックするとモーダルウィンドウで内容を表示する仕組みにしたいです。

###現状
・htmlコード上では作用していて、phpの記述も狙い通りのhtmlコードが生成されているのですがモーダルウィンドウが機能しません
・カスタム投稿は「Custom Post Type UI」にて作成
・モーダルウィンドウはプラグイン不使用のjQuery
・Localを使用してWordPress環境テスト中

###試したこと
・投稿一覧をhtmlコードの状態、モーダル側をサブループで呼び出したコードの状態だとモーダルウィンドウは作動しますが、投稿一覧をサブループで呼び出したコード、モーダル側をhtmlコードの状態だと作動しません。

現状のコード

<!-- アイキャッチ一覧 -->
<ul>
  <?php
         $args = array(
           'posts_per_page' => -1,
           'post_type' => 'hoge'
                        );
         $the_query = new WP_Query( $args );
          if ( $the_query->have_posts() ) :?>
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                  <li>
                    <a class="modal_open" date-target="<?php the_ID(); ?>" href="">
                      <?php $image_id = get_post_thumbnail_id();
                      $image_url = wp_get_attachment_image_src($image_id, true);?>
                      <img src="<?php echo $image_url[0]; ?>" alt="<?php the_title(); ?>">
                      <h3 class="left_top"><?php the_title(); ?></h3>
                    </a>
                  </li>
              <?php endwhile;?>
        <?php wp_reset_postdata(); endif; ?>
</ul>

<!-- モーダルウィンドウ -->
<ul>
<?php
     $args = array(
       'posts_per_page' => -1,
       'post_type' => 'hoge'
                    );
     $the_query = new WP_Query( $args );
      if ( $the_query->have_posts() ) :?>
            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
              <li id="<?php the_ID(); ?>" class="modal">
                <div class="modal_bg modal_close"></div>
                <div class="modal_content">
                  <h3><?php the_title(); ?><span>(<?php the_time('Y'); ?>)</span></h3>
                  <?php the_content(); ?>
                  <p class="modal_close">close</p>
                </div>
              </li>
          <?php endwhile;?>
        <?php wp_reset_postdata(); endif; ?> -->
</ul>

$(function(){
  $('.modal_open').each(function(){
    $(this).on('click',function(){
        var target = $(this).data('target');
        var modal = document.getElementById(target);
        $(modal).fadeIn();
        return false;
    });
  });
  $('.modal_close').on('click',function(){
    $('.modal').fadeOut();
    return false;
  });
});

なにか解決策いただけますとありがたいです。

###追記（2021.6.6）
コンソールでのエラーはScssを利用しているのでそれに関する注意がでています。

DevTools failed to load source map: Could not load content for http://sm.local/wp-content/themes/original202105/style.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

サブループ に入れる前段階ではモーダル作用します。

<ul>
      <li>
        <a class="modal_open" data-target="hoge" href="">
        <img src="<?php echo get_template_directory_uri(); ?>/images/nowprinting.gif" alt="">
        <h3 class="left_top">タイトルが入ります</h3>
        </a>
     </li>
</ul>

<!-- モーダルウィンドウ -->
<ul class="modal_wrapper">
    <li id="hoge" class="modal">
       <div class="modal_bg modal_close"></div>
       <div class="modal_content">
         <h3>test<span>(yyyy)</span></h3>
         <img src="<?php echo get_template_directory_uri(); ?>/images/noimages.png" alt="">
         <p>テスト</p>
         <p class="modal_close">close</p>
       </div>
　</li>
</ul>

Comments

[kei344]

エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error
また、エラーが出ている場合はエラー文を具体的にコードブロックで質問文に追記ください。（質問文は編集できます）

[mmmt]

お早いご回答ありがとうございます。コンソール上ではScssに関するエラーが出ている状態です。

Answer 1

失礼します。
下記の箇所が、PHPでは「date」、jQueryでは「data」になっているからではないでしょうか？
あと「$('.modal_open').each(function(){}」は、なくてもいいと思います。

<a class="modal_open" date-target="<?php the_ID(); ?>" href="">

var target = $(this).data('target');

Answer 2

WordPressだと
jQueryが$(function(){})ではなく、jQuery(function(){})で囲まないと機能しません。
そこの部分が原因ではないでしょうか？
jQuery自体が動いていることはコンソールか何かで確認しましたか？

Comments

[mmmt]

ご回答ありがとうございます。
記載漏れていましたが、他にもjQueryのファイルを読み込んでいるのでhead内で `<?php wp_deregister_script('jquery'); ?>`を設定しています。

サブループ に入れる前段階の下記記述だとコンソール上エラーもなくモーダル作用します。
```
<ul>
<li>
<a class="modal_open" data-target="hoge" href="">
<img src="<?php echo get_template_directory_uri(); ?>/images/nowprinting.gif" alt="">
<h3 class="left_top">タイトルが入ります</h3>
</a>
</li>
</ul>

モーダル中身↓
<ul class="modal_wrapper">
<li id="hoge" class="modal">
<div class="modal_bg modal_close"></div>
<div class="modal_content">
<h3>test<span>(yyyy)</span></h3>
<img src="<?php echo get_template_directory_uri(); ?>/images/noimages.png" alt="">
<p>テスト</p>
<p class="modal_close">close</p>
</div>
　</li>
</ul>
```