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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

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

Q&A

解決済

1回答

2721閲覧

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

tattakahiiii

総合スコア27

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

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

0グッド

0クリップ

投稿2018/10/08 06:23

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}

イメージ説明

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

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});

投稿2018/10/08 06:39

編集2018/10/08 07:43
kei344

総合スコア69364

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

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

tattakahiiii

2018/10/08 07:00

回答ありがとうございます。 get_header()は呼んで検証済みです。 質問用で、あえてheaderタグの情報を書き込みました。 紛らわしくて申し訳ありません。 上記のタグを呼んで、コンソールエラーは出ていませんでした。
tattakahiiii

2018/10/08 08:17

追記のプログラムを打ち込んだ結果 動作することができました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問