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

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

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

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

Q&A

解決済

1回答

1089閲覧

WordPressでモーダル表示でのdata属性のリンク

goldenb

総合スコア29

WordPress

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

0グッド

0クリップ

投稿2019/02/02 10:09

編集2019/02/02 15:58

アーカイブページに各記事のアイキャッチだけを表示
アイキャッチをクリックすると、その記事の内容がモーダルで表示される
というページがあるのですがhtmlではdata属性でアイキャッチとモーダルの中身をリンクさせていました。
それをWordPressで実装するにはどうしたら良いでしょうか。

現在プラグインはACFのギャラリーでアイキャッチとモーダル内の画像の受け渡しはできているのですがモーダルが表示できません。

当方WordPressでの制作が初めてで伝えるべき情報漏れ等あるかもしれませんがご教授の程お願いいたします。

php

1<section id="grid_layout"> 2 <div class="grid_layout-1 grid_layout-inner"> 3 4 <?php if (have_posts()) : ?> 5 <?php while (have_posts()) : the_post(); ?> 6 7 <!-- ▽ ループ開始 ▽ --> 8 <figure class="grid_item modalBtn" data-modalIndex="31"> 9 <?php the_post_thumbnail(); ?> 10 <figcaption class="hover-mask"> 11 <h1> 12 <?php the_title(); ?> 13 </h1> 14 <p> 15 <?php the_content(); ?> 16 </p> 17 </figcaption> 18 </figure> 19 <div class="modal" data-modalIndex="31"> 20 <div class="modal_inner"> 21 <div class="modal_text"> 22 <h1> 23 <?php the_title(); ?> 24 </h1> 25 <p> 26 <?php the_content(); ?> 27 </p> 28 </div> 29 <a class="modalClose" type="button"><span></span><span></span></a> 30 <div class="modal_scroll"> 31 <div class="modal_content"> 32 <div> 33 <?php 34 $images = get_field('gallery_modal_img'); 35 $size = 'full'; 36 if( $images ): 37 ?> 38 <?php foreach( $images as $image ): ?> 39 <?php echo wp_get_attachment_image( $image['ID'], $size ); ?> 40 <?php endforeach; ?> 41 <?php endif; ?> 42 </div> 43 </div> 44 </div> 45 </div> 46 </div> 47 <!-- △ ループ終了 △ --> 48 49 <?php endwhile; ?> 50 <?php endif; ?> 51 <?php wp_reset_query(); ?> 52 </div> 53 </section>

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

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

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

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

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

kei344

2019/02/02 16:08

WordPressのデフォルト機能にモーダルは無いのでは。
goldenb

2019/02/02 16:37 編集

説明が不足していました。すみません。 1ページ内に複数のモーダルがあり、モーダルはjqueryで実装しているのですがアイキャッチとモーダル内の情報の紐付けをdata-modalIndex="31"で行っていました。複数のモーダルも静的な時は31の数値を変えればよかったのですがWordPressにするとこの部分がどうすれば良いのかわからず質問させていただきました。 WordPressのデフォルトには無い機能ですがACFというプラグインで画像をギャラリー投稿して <div class="modal_content"> <div> <?php $images = get_field('gallery_modal_img'); $size = 'full'; if( $images ): ?> <?php foreach( $images as $image ): ?> <?php echo wp_get_attachment_image( $image['ID'], $size ); ?> <?php endforeach; ?> <?php endif; ?> </div> </div> のモーダル内画像は取得できています。 あとはアイキャッチとモーダルをリンクさせたいのですがdata属性をどうやってユニークにして受け渡せば良いのかわかりません。 ご教授お願いします。
guest

回答1

0

ベストアンサー

どのモーダルライブラリを使用しているかが提示されていないのでユニーク値にするアイデアだけ。

PHP

1<?php 2$modalIndex = 0; 3while (have_posts()) : the_post(); $modalIndex++; ?> 4<!-- 略 --> 5<div class="modal" data-modalIndex="<?php echo $modalIndex; ?>"> 6<!-- 略 -->

投稿2019/02/02 16:45

kei344

総合スコア69364

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

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

goldenb

2019/02/02 16:57

ご教授いただいたようにユニークな値を持ってきたらうまく表示できました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問