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

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

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

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

PHP

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

JavaScript

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

受付中

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

matsu33
matsu33

総合スコア3

WordPress

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

PHP

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

JavaScript

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

2回答

-1評価

1クリップ

328閲覧

投稿2022/05/28 15:24

既存の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の書き方に問題があるのではと思います。

js

$(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]); } });

PHP

<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>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

matsu33

2022/05/29 21:27

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

2022/06/02 07:22

ご提示のコードを試してみましたが、問題が再現しませんでした。 おそらく、ご提示の部分には原因はなさそうに思います。 ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。 問題再現の手順をもう少し詳しく書いていただけますか?

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

WordPress

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

PHP

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

JavaScript

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