我正在尝试构建一个wordpress搜索页面,以便在具有引导css中的"row"类的容器中包含侧边栏。我的目标是让帖子显示在容器的左侧,而我想在右侧显示侧边栏。目前,如果行容器在循环中,我得到的侧边栏数量与我的帖子相同。如果我将行容器移出循环,要么侧边栏在底部,每个帖子之间的<"hr">行被推到容器的右侧,要么如果我在侧边栏容器上使用 float,我根本没有任何<"hr">行。
任何见解都可以将<"hr">行与各自的帖子一起向左推,并将侧边栏保持在全屏尺寸。作为参考,侧边栏位于行容器底部的 include.php 文件中。
搜索页面代码:
<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><?php printf( __( 'Search Results for: %s' ), esc_html( get_search_query() ) ); ?></h1>
<ol class="breadcrumb">
<li><a href="#">Home</a>
</li>
<li class="active">Blog</li>
</ol>
</div>
</div>
<div class="row">
<?php
// Start the loop.
while ( have_posts() ) : the_post(); ?>
<div class="col-lg-8">
<h3>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<p>Posted on <?php the_time('F j, Y'); ?> by <?php the_author_posts_link(); ?>
</p>
<p><?php the_excerpt(); ?></p>
<a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
</div>
<hr>
<?php endwhile; ?>
<?php include 'include.php'; ?>
</div>
<div class="navigation"><p><?php posts_nav_link('','« Newer Posts','Older Posts »'); ?></p></div>
<?php else: ?>
<p><?php _e('Sorry, there are no posts.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
感谢您的任何帮助和见解:)
您需要
将<div class="col-lg-8">
移到while()
语句之外,以便只有一个网格列,而不是每个博客文章都位于其自己的网格列内。
这是假设您的侧边栏有类col-lg-4
。