Wordpress 博客页面,其博客内容以 Bootstrap 模式出现,而不是新页面

问题描述 投票:0回答:1

我希望我的 WordPress 博客内容使用 BootStrap 以模式显示,而不是打开新页面。

php wordpress twitter-bootstrap bootstrap-4
1个回答
0
投票

这是工作代码

<?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>&times;</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(); ?>"

模态框可以在自己的循环中(例如在页脚中),并且可以根据需要循环打开链接

© www.soinside.com 2019 - 2024. All rights reserved.