Wordpressでポップアップが表示されない。

Wordpressでブログをローカル環境で開発しています。
現在、ポップアップ表示画面を作成しており、画面は表示されているのですが、クリックしてもポップアップが表示されません。
プラグインのPOPUP MAKERとPOPUP BUILDERを使用しましたが、こちらも表示はされるのですが、クリックできなかったり、なんにも挙動がありません。やむなく、jQueryで作成しようと、ネットからプログラムを引用したのですが、こちらもクリックしてもポップアップが表示されませんでした。
どなたか解決方法をご教示いただけないでしょうか。
（グーグルのポップアップは許可済み、JS許可済み、他ページでJSの動作は確認済み）

php
1<!DOCTYPE html>
2
3<html lang="ja">
4
5<head>
6  <meta charset="utf-8">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <title>kokokoko</title>
9  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
10  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" />
11  <script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.3.1.min.js"></script>
12  <script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
13  <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
14  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
15    </head>
16    
17<header>
18    <div class="header-wrapper">
19    <div class="header-logo">
20    <a href=file:///Users/takachanman/Desktop/%E5%B1%B1%E4%B8%8B%E6%A7%98%E7%94%A8/index.html><img class="logo" src="<?php echo get_template_directory_uri(); ?>/img/img_logo.png" alt="link" ></a>
21  </div>
22    <div class="header-li">
23      <ul>
24        <li><a href="#">HOME</a></li>
25        <li><a href="#">GALLREY</a></li>
26        <li><a href="#">PRICE</a></li>
27        <li><a href="#">PROFILE</a></li>
28        <li><a href="#">NEWS</a></li>
29        <li><a href="#">SCHEDULE</a></li>
30        <li><a href="#">CONTACT</a></li>
31      </ul>
32    </div>
33    </div>
34</header>
35
36
37<main>
38
39  <div id="header-img">
40 <img src="<?php echo get_template_directory_uri(); ?>/img/img1.jpg" width="100%" height="360" alt="画像1" >
41  <h1 class="logo-moji">CONTACT</h1> 
42  <div id="header-bar">
43  <div id="header-inner">
44    <ul class="fa-ul">
45    <li><a href="#"><i class="fa fa-home fa-li"></i></a></li>
46    <li><img src="<?php echo get_template_directory_uri(); ?>/img/migi.png" alt="img" ></li>
47    <li>CONTACT</li>
48  </ul>
49  </div>
50</div>  
51</div>
52
53<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
54<?php the_content(); ?>
55<?php endwhile; endif; ?>
56
57<!-- ============ここからポップアップ=============== -->
58
59<!--Creates the popup body-->
60<div class="popup-overlay">
61  <!--Creates the popup content-->
62   <div class="popup-content">
63      <h2>Pop-Up</h2>
64      <p> This is an example pop-up that you can make using jQuery.</p>
65     <!--popup's close button-->
66      <button class="close">Close</button>    </div>
67</div>
68<!--Content shown when popup is not displayed-->
69<h2>jQuery Pop-Up Example</h2>
70<button class="open">Open</button>
71
72<!-- ============ここまでポップアップ=============== -->
73
74</main>
75<?php get_footer(); ?>

jQuery
1//appends an "active" class to .popup and .popup-content when the "Open" button is clicked
2jQuery(".open").on("click", function(){
3  jQuery(".popup-overlay, .popup-content").addClass("active");
4});
5
6//removes the "active" class to .popup and .popup-content when the "Close" button is clicked 
7jQuery(".close, .popup-overlay").on("click", function(){
8  jQuery(".popup-overlay, .popup-content").removeClass("active");
9});
10

css
1html{
2  font-family: "Helvetica Neue", sans-serif;
3  width:100%;
4  color:#666666;
5  text-align:center;
6}
7
8.popup-overlay{
9  /*Hides pop-up when there is no "active" class*/
10  visibility:hidden;
11  position:absolute;
12  background:#ffffff;
13  border:3px solid #666666;
14  width:50%;
15  height:50%;
16  left:25%; 
17}
18.popup-overlay.active{
19  /*displays pop-up when "active" class is present*/
20  visibility:visible;
21  text-align:center;
22}
23
24.popup-content {
25  /*Hides pop-up content when there is no "active" class */
26 visibility:hidden;
27}
28
29.popup-content.active {
30  /*Shows pop-up content when "active" class is present */
31  visibility:visible;
32}
33
34button{
35  display:inline-block;
36  vertical-align:middle;
37  border-radius:30px;
38  margin:.20rem;
39  font-size: 1rem;
40  color:#666666;
41  background: #ffffff;
42  border:1px solid #666666;  
43}
44
45button:hover{
46  border:1px solid #666666;
47  background:#666666;
48  color:#ffffff;
49}

以上、宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

get_header() が呼ばれていないので、wp_head() も呼ばれず、jQueryが呼び出されていないのでは。
とりあえずデベロッパーツールでエラーを確認してみては。

【get_header – WordPress私的マニュアル】
https://elearn.jp/wpman/function/get_header.html

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
https://www.buildinsider.net/web/chromedevtools/01#page-9

【ChromeのデベロッパーツールでJSをデバッグする方法(2018年版) - ICS MEDIA】
https://ics.media/entry/11735

追記：

js
1jQuery(function(){
2  //appends an "active" class to .popup and .popup-content when the "Open" button is clicked
3  jQuery(".open").on("click", function(){
4    jQuery(".popup-overlay, .popup-content").addClass("active");
5  });
6
7  //removes the "active" class to .popup and .popup-content when the "Close" button is clicked 
8  jQuery(".close, .popup-overlay").on("click", function(){
9    jQuery(".popup-overlay, .popup-content").removeClass("active");
10  });
11});