WordPressの個別記事をページ遷移ではなく、モーダル表示にする方法
※前提として、カスタム投稿を表示させる場合のコードになります。
①Remodalをダウンロード
http://vodkabears.github.io/remodal/
読み込むファイルは「remodal.min.js」「remodal.css」「remodal-default-theme.css」の３つ。
※パスは任意で変更してください。
<link rel="stylesheet" href="remodal.css">
<link rel="stylesheet" href="remodal-default-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="remodal.min.js"></script>
②投稿部分を作成
ポイントとしてはaタグのリンク先を記事のIDに設定すること。
モーダルのdata-remodal-idと揃えることで、紐付けが完了する。
※表示させたい内容は任意で変更してください。
<?php
$args = [
'post_type' => 'works', // カスタム投稿名が「works」の場合
'posts_per_page' => 5, // 表示させる数
];
$my_query = new WP_Query($args); ?>
<?php if ($my_query->have_posts()): ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<article class="">
<a href="#<?php the_ID(); ?>">
<figure class=""><img class="" src="" alt=""></figure>
<h3 class="mod-slide__title"></h3>
<p class=""><?php the_title(); ?></p>
</a>
</article>
<?php endwhile; ?>
<?php else: ?>
<?php endif; wp_reset_postdata(); ?>
③モーダル部分を作成
先程記載した通り、data-remodal-idに記事のIDを設定してください。
また、モーダルの親要素にclass="remodal"を付与してください。
こちらで完了です。
<?php
$args = [
'post_type' => 'works',
'posts_per_page' => 5,
];
$my_query = new WP_Query($args); ?>
<?php if ($my_query->have_posts()): ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<article class="remodal" data-remodal-id="<?php the_ID(); ?>">
<button data-remodal-action="close" class="remodal-close"></button>
<figure><img src="" alt=""></figure>
<h3 class=""></h3>
<p class=""></p>
</article>
<?php endwhile; ?>
<?php else: ?>
<?php endif; wp_reset_postdata(); ?>
Author And Source
この問題について(WordPressの個別記事をページ遷移ではなく、モーダル表示にする方法), 我々は、より多くの情報をここで見つけました https://qiita.com/SUKE_DESIGN/items/adfcd60caa45e72747f6著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .