アーカイブページに各記事のアイキャッチだけを表示
アイキャッチをクリックすると、その記事の内容がモーダルで表示される
というページがあるのですが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>
WordPressのデフォルト機能にモーダルは無いのでは。
説明が不足していました。すみません。
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属性をどうやってユニークにして受け渡せば良いのかわかりません。
ご教授お願いします。
回答1件
あなたの回答
tips
プレビュー