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

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

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

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

PHP

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

JavaScript

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

Q&A

1回答

1371閲覧

複数モーダルウィンドウで同じ内容が表示される

re-i

総合スコア10

WordPress

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

PHP

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

JavaScript

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

0グッド

1クリップ

投稿2018/09/08 19:28

###はじめに
初めてwordpressのテーマを自分で作っています。初歩的なことかも知れませんが自分では解決できないのでどうかお願いします。
知識がまだまだ足りないので分かりやすい解説をお願いします。

発生している問題

こちらのサイトをみて複数のモーダルウィンドウを導入しました。カスタム投稿の一覧で、「見出しをクリックするとモーダルウィンドウが発生する」というものを作ろうとしています。
しかし現段階では、どこの見出しをクリックしても同じ内容(一番上にある見出しの内容)が表示されてしまいます。
見出しと内容を正しく一致させて表示するにはどうしたらいいのでしょうか?

該当のソースコード

php

1<?php 2if ( have_posts() ) : 3 while ( have_posts()) : the_post(); ?> 4 <div class="box"> 5 <p class="photo"><img src="<?php echo wp_get_attachment_image(get_post_meta($post->ID,"iconImage",true),array(280,280)); ?>"></p> 6 <div id="modal-content-01" class="modal-content"> 7 <p><img src="<?php echo wp_get_attachment_image(get_post_meta($post->ID,"iconImage",true),array(280,280)); ?>"> 8 </p> 9 <h3><?php the_field('dantaimei'); ?></h3> 10 <p class="name"><?php the_title(); ?></p> 11 <p><?php the_content(); ?></p> 12 <p><a id="modal-close" class="button-link"></a></p> 13 </div> 14 <p><h3 class="modal-syncer button-link" data-target="modal-content-01"><?php the_title(); ?></h3></p> 15 <span class="tape2"></span> 16 </div> 17 <?php 18 endwhile; 19 endif; 20 ?> 21 22 </div> 23 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 24 <?php 25 wp_enqueue_script('events', get_template_directory_uri() . '/js/nijiiro.js'); 26 ?> 27

JavaScript

1 2$(function(){ 3var nowModalSyncer = null ; 4var modalClassSyncer = "modal-syncer" ; 5 6var modals = document.getElementsByClassName( modalClassSyncer ) ; 7 8for(var i=0,l=modals.length; l>i; i++){ 9 modals[i].onclick = function(){ 10 this.blur() ; 11 var target = this.getAttribute( "data-target" ) ; 12 if( typeof( target )=="undefined" || !target || target==null ){ 13 return false ; 14 } 15 16 nowModalSyncer = document.getElementById( target ) ; 17 if( nowModalSyncer == null ){ 18 return false ; 19 } 20 if( $( "#modal-overlay" )[0] ) return false ; 21 //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; 22 23 24 $( "body" ).append( '<div id="modal-overlay"></div>' ) ; 25 $( "#modal-overlay" ).fadeIn( "fast" ) ; 26 27 centeringModalSyncer() ; 28 29 $( nowModalSyncer ).fadeIn( "slow" ) ; 30 31 $( "#modal-overlay,#modal-close" ).unbind().click( function() { 32 $( "#" + target + ",#modal-overlay" ).fadeOut( "fast" , function() { 33 $( '#modal-overlay' ).remove() ; 34 35 } ) ; 36 nowModalSyncer = null ; 37 38 } ) ; 39 40 } 41 42} 43 $( window ).resize( centeringModalSyncer ) 44 function centeringModalSyncer() { 45 if( nowModalSyncer == null ) return false ; 46 var w = $( window ).width() ; 47 var h = $( window ).height() ; 48 49// var cw = $( nowModalSyncer ).outerWidth( {margin:true} ) ; 50// var ch = $( nowModalSyncer ).outerHeight( {margin:true} ) ; 51 var cw = $( nowModalSyncer ).outerWidth() ; 52 var ch = $( nowModalSyncer ).outerHeight() ; 53 54 $( nowModalSyncer ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ; 55 56 } 57 58} ) ;

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

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

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

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

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

guest

回答1

0

<p><h3 class="modal-syncer button-link" data-target="modal-content-01"><?php the_title(); ?></h3></p>

の「data-target="modal-content-01"」が固定に成ってるのが原因では?
(なんかユニークなキーになる項目は無いのですか?、例えば「$post->ID」とか)

投稿2018/09/10 03:54

tonkun4os

総合スコア321

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問