サイドバーの下にコンテンツが表示されます

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である：

正しいコードは次のようにする必要があります：

<?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(); ?>

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">を閉じないという問題によって、この問題が発生することがあります。多分これは解決策です。また、複数の要素がクラス属性を使用するため、id属性はページ上の1つのタグにのみ使用する必要があるため、複数のHTMLタグに同じid属性を使用しないでください（id="content"を複数使用します）。