今回はポップアップ。
クリックした記事の内容とポップアップしてくる内容を連動させるところにちょっと悩まされたので備忘録行きです。
カスタム投稿のarticleとポップアップの内容を連動させる方法
こちらが結論となるコード。
<main>
<?php
$paged = get_query_var('paged') ? get_query_var('paged'): 1;
$args = array(
'posts_per_page' => -1,
'paged' => $paged,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post_type',
'post_status' => 'publish',
);
$the_query = new WP_Query($args);
if( $the_query->have_posts() ):
?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<article>
<?php
$post_id = get_the_ID();
?>
<h2><?php the_title(); ?></h2>
<button class="popupBtn" data-modal-link="link-<?php the_ID(); ?>">ボタン</button>
</article>
<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>
</main>
<!--popupコンテンツ-->
<?php
$paged = get_query_var('paged') ? get_query_var('paged'): 1;
$args = array(
'post_type' => 'post_type',
'paged' => $paged,
'posts_per_page' => -1,
'post_date' => 'DESC',
'post_status' => 'publish',
);
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<?php $post_id = get_the_ID(); ?>
<div class="popupBox link-<?php the_ID(); ?>">
<div class="popupBox__close">閉じる</div>
<div class="popupBox__inner">
<!-- popupの中身 -->
</div>
</div>ポイントは18,21行目。クリックした記事の内容とポップアップしてくる内容を連動させるために記事IDを取得し、data-modal-linkに入れておきます。
そしてmainの外でもう一度ループを回して全てのポップアップを出しておきます。
そして、class名にdata-modal-linkと同じになるように記事IDを含めた文字列を入れて準備完了です。
$(function() {
$('.popupBtn').on('click', function() {
// ボタンをクリックしたら、クリックしたい要素のdata属性を取得
let modalTarget = $(this).data('modal-link');
// 上記で取得した要素と同じclass名を持つ要素を取得
let modal = document.querySelector('.' + modalTarget);
$(modal).toggleClass('is-show');
$(modal).removeClass("close-anime");
});
});
$(function() {
$(".popupBox__close").click(function() {
$(this).parent().addClass("close-anime");
setTimeout(function () {
$(".popupBox").removeClass("is-show");
}, 350);
});
});jsのポイントはこんなところ。
is-showとclose-animeは開く時と閉じる時のアニメーションが発火するようにしています。
modalを使っても記事IDを利用すればできそうですね。
