Question

我还在努力制作我的第一个响应式WordPress主题。在处理index.php时遇到了一些麻烦。出于某种原因，侧边栏显示在博客文章下方。在单个帖子页面上它显示正确，但我似乎无法确定是什么使得侧边栏被推下来。

这是index.php页面http://mockup.artxwpn.com/lifestyle以及我的代码：

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="row">
<div class="eight columns" id="content">

<div class="post-title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(''); ?></a></div>
<div class="meta">
<div style="float: left;">Written by: <?php the_author() ?> &#8226; 
<?php the_time(get_option('date_format')); ?></div>

<div style="float: right;">
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Share this on Facebook!"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="Share this on Facebook!" style="padding-right: 20px; width: 16px; height: 16px;" /></a>

<a href="http://twitter.com/home/?status=<?php the_title(); ?> - <?php the_permalink(); ?>" title="Tweet this!"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="Tweet this!" style="padding-right: 20px; width: 16px; height: 16px;" /></a>

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo $url; ?>"><img src="<?php bloginfo('template_directory'); ?>/images/pinterest.png" alt="Pin this!" style="padding-right: 20px; width: 16px; height: 16px;" /></a>


<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
  '',     'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="<?php bloginfo('template_directory'); ?>/images/google_plus.png" alt="Share this on Google Plus!" style="width: 16px; height: 16px;" /></div></a>
</div>


 <?php if ( has_post_thumbnail()) : ?>
   <center><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail(); ?>
   </a></center>
 <?php endif; ?>

<br />

<?php the_excerpt(); ?>

</div>

<?php endwhile; ?>

<div class="eight columns" id="content">

<center>

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } 

else { ?>

<div class="right"><?php next_posts_link('Next Page &raquo;') ?></div>

<div class="left"><?php previous_posts_link('&laquo; Previous Page') ?></div>

<?php } ?>

</center>

</div>

<?php else : ?>


<div class="post-title">Not Found</div>

This page doesn't exist.

<?php endif; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Answer 1

问题在于您的HTML：

正确的代码应该是这样的：

＆＃13;

<?php get_header(); ?>
<div class="row">
  <main class="eight columns" id="content">

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    //* code of your posts
    <?php endwhile; ?>

    <div>
      <center>
        <?php if(function_exists( 'wp_pagenavi')) { wp_pagenavi(); } else { ?>
        <div class="right">
          <?php next_posts_link( 'Next Page &raquo;') ?>
        </div>
        <div class="left">
          <?php previous_posts_link( '&laquo; Previous Page') ?>
        </div>
        <?php } ?>
      </center>
    </div>
    
    <?php else : ?>

    <div class="post-title">Not Found</div>
    This page doesn't exist.
    
    <?php endif; ?>
    
  </main>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

＆＃13;

Answer 2

你有未公开的div。试试这个：

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div class="row">
        <div class="eight columns" id="content">

            <div class="post-title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(''); ?></a></div>
            <div class="meta">
                <div style="float: left;">Written by: <?php the_author() ?> &#8226; <?php the_time(get_option('date_format')); ?></div>

                <div style="float: right;">
                    <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Share this on Facebook!"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="Share this on Facebook!" style="padding-right: 20px; width: 16px; height: 16px;" /></a>

                    <a href="http://twitter.com/home/?status=<?php the_title(); ?> - <?php the_permalink(); ?>" title="Tweet this!"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="Tweet this!" style="padding-right: 20px; width: 16px; height: 16px;" /></a>

                    <a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo $url; ?>"><img src="<?php bloginfo('template_directory'); ?>/images/pinterest.png" alt="Pin this!" style="padding-right: 20px; width: 16px; height: 16px;" /></a>


                    <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,'','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="<?php bloginfo('template_directory'); ?>/images/google_plus.png" alt="Share this on Google Plus!" style="width: 16px; height: 16px;" /></a>
                </div>
            </div>


            <?php if ( has_post_thumbnail()) : ?>
                <center><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                <?php the_post_thumbnail(); ?>
                </a></center>
            <?php endif; ?>

            <br />

            <?php the_excerpt(); ?>

        </div>

        <?php endwhile; ?>

        <div class="eight columns" id="content">

            <center>

            <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } 

            else { ?>

            <div class="right"><?php next_posts_link('Next Page &raquo;') ?></div>

            <div class="left"><?php previous_posts_link('&laquo; Previous Page') ?></div>

            <?php } ?>

            </center>

        </div>

        <?php else : ?>


        <div class="post-title">Not Found</div>

        This page doesn't exist.
    </div>

<?php endif; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

并尝试更好地构建代码。

Answer 3

问题可能是因为他们没有在while循环中关闭<div class="row">。也许这是解决方案。并且有关信息：不要对更多HTML标记使用相同的id属性（使用多个id="content"） - 这是非法的，因为id属性必须仅用于页面上的一个标记，因为多个元素使用类属性

边栏显示以下内容

3 个答案: