在模式中的 wordpress post 中添加下一个和上一个按钮
Adding next and previous button in wordpress post inside a modal
我使用 bootstrap 框架创建了一个 wordpress 主题,当用户单击 post,而不是转到单个 post 页面时,模式弹出并显示post的内容。
我的问题是我需要添加一个 next/previous 按钮,这样当用户单击它时,模态框会关闭并弹出另一个显示下一个 post 内容的模态框。
这是我的代码:
content.php
<a href="#myModal-<?php the_ID(); ?>" data-toggle="modal" class="clickme readmore text-right">Read more</a>
<div id="myModal-<?php the_ID(); ?>" class="modal fade"><?php include 'popup-modal.php'; ?> </div>
popup-modal.php
<div class="modal-dialog">
<div class="modal-content">
POST CONTENT HERE.......
<div class="nav-links">
<div class="nav-previous">
<a href="#" rel="prev" data-dismiss="modal" data-toggle="modal"></a>
</div>
<div class="nav-next">
<a href="#" rel="next" data-dismiss="modal" data-toggle="modal"></a>
</div>
</div>
</div>
</div>
现在我不确定在导航链接的 href 上放什么,所以我可以调用下一个 posts 并将其显示在模式中。我希望有人能帮我解决这个问题。
尝试这样的事情
<div class="next-page"><?php next_posts_link( 'Next Page<i class=""></i>' ); ?></div>
我已经在自己的网站中使用了它,希望它能满足您的要求。您需要将其直接添加到您的模板中
这是我的解决方案:
<?php $next_post = get_adjacent_post(false,'',false);?>
<?php $previous_post = get_adjacent_post(false,'',true);?>
然后,导航输出:
<div class="navigation row">
<div class="col-md-6">
<?php if($next_post->ID != ''): ?>
<a href="#myModal-<?php echo $next_post->ID; ?>" data-toggle="modal" >
<button type="button" class="btn btn-default m-t-30">Previous</button>
</a>
<?php endif; ?>
</div>
<div class="col-md-6">
<?php if($previous_post->ID != ''): ?>
<a href="#myModal-<?php echo $previous_post->ID; ?>" data-toggle="modal" >
<button type="button" class="btn btn-default m-t-30">Next</button>
</a>
<?php endif; ?>
</div>
我使用 bootstrap 框架创建了一个 wordpress 主题,当用户单击 post,而不是转到单个 post 页面时,模式弹出并显示post的内容。
我的问题是我需要添加一个 next/previous 按钮,这样当用户单击它时,模态框会关闭并弹出另一个显示下一个 post 内容的模态框。
这是我的代码:
content.php
<a href="#myModal-<?php the_ID(); ?>" data-toggle="modal" class="clickme readmore text-right">Read more</a>
<div id="myModal-<?php the_ID(); ?>" class="modal fade"><?php include 'popup-modal.php'; ?> </div>
popup-modal.php
<div class="modal-dialog">
<div class="modal-content">
POST CONTENT HERE.......
<div class="nav-links">
<div class="nav-previous">
<a href="#" rel="prev" data-dismiss="modal" data-toggle="modal"></a>
</div>
<div class="nav-next">
<a href="#" rel="next" data-dismiss="modal" data-toggle="modal"></a>
</div>
</div>
</div>
</div>
现在我不确定在导航链接的 href 上放什么,所以我可以调用下一个 posts 并将其显示在模式中。我希望有人能帮我解决这个问题。
尝试这样的事情
<div class="next-page"><?php next_posts_link( 'Next Page<i class=""></i>' ); ?></div>
我已经在自己的网站中使用了它,希望它能满足您的要求。您需要将其直接添加到您的模板中
这是我的解决方案:
<?php $next_post = get_adjacent_post(false,'',false);?>
<?php $previous_post = get_adjacent_post(false,'',true);?>
然后,导航输出:
<div class="navigation row">
<div class="col-md-6">
<?php if($next_post->ID != ''): ?>
<a href="#myModal-<?php echo $next_post->ID; ?>" data-toggle="modal" >
<button type="button" class="btn btn-default m-t-30">Previous</button>
</a>
<?php endif; ?>
</div>
<div class="col-md-6">
<?php if($previous_post->ID != ''): ?>
<a href="#myModal-<?php echo $previous_post->ID; ?>" data-toggle="modal" >
<button type="button" class="btn btn-default m-t-30">Next</button>
</a>
<?php endif; ?>
</div>