WordPressで記事の詳細をモーダルで表示したいです
WordPressにて、カスタム投稿タイプの各投稿詳細をモーダルにて表示したいです。
カスタムフィールドの値をモーダルで表示すること自体はできたのですが、1種類の記事データしか取得できず、各記事のデータと、モーダル表示を紐付けがうまくいきません。
<実現したいこと>
リンク「詳細を見る」をクリック→各記事の情報をモーダルにて表示
下記プラグイン等は試しましたがうまく動作せず、どうにかプラグイン等をなしで実装したいです。
https://hiroshi-yokota.com/2020/05/12/wp-modal/
モーダルは下記を参考に作成しています。
https://webdesignday.jp/inspiration/technique/css/4680/
現状のコード
<!-- モーダルを表示するためのリンク --> <?php $args = array( 'posts_per_page' => 99, 'post_type' => 'testpost', //出力したい投稿タイプを指定 ); $the_query = new WP_Query($args); ?> <?php if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?> <div class="backnumber_box"> <!-- モーダルウィンドウリンク --> <a class="js-modal-open reedmore" href="">詳細を見る</a> </div> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php endif; ?> <!-- モーダルを表示するためのリンクここまで --> <!-- モーダル部分 --> <div class="modal js-modal"> <div class="modal__bg js-modal-close"></div> <div class="modal__content"> <?php $args = array( 'posts_per_page' => 99, 'post_type' => 'testpost', //出力したい投稿タイプを指定 ); $the_query = new WP_Query($args); ?> <?php if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?> <p> <?php echo the_field('表示したいカスタムフィールド'); ?> </p> <!-- ループ終了 --> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php endif; ?> <a class="js-modal-close" href="">閉じる</a> </div> <!--modal__inner--> </div> <!--modal-->
何卒、よろしくお願いいたします。
あなたの回答
tips
プレビュー