我希望我的 WordPress 博客内容使用 BootStrap 以模式显示,而不是打开新页面。
这是工作代码
<?php get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!--The modal opener as a title-->
<a href="" data-toggle="modal" data-target="#<?php the_ID(); ?>"><?php the_title(); ?></a>
<?php $myExcerpt = wp_trim_words( get_the_content(), 60, '' ) ;
echo $myExcerpt ; ?>
<!--The modal opener as an arrow (using Fontawesome)-->
<a href="" data-toggle="modal" data-target="#<?php the_ID(); ?>"><i class="fas fa-arrow-right"></i></a>
<!--The modal-->
<div class="modal fade blog_modal" role="dialog" id="<?php the_ID(); ?>">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">
<h3>×</h3>
</button>
<div class="modal-body">
<?php get_template_part( the_content() ); ?>
</div>
</div>
</div>
</div>
<?php endwhile; else: ?>
<p>There no posts to show</p>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
使用
data-target="#<?php the_ID(); ?>"
允许模态具有 id="<?php the_ID(); ?>"
模态框可以在自己的循环中(例如在页脚中),并且可以根据需要循环打开链接