Sidebar mit Inhalt

Question

Ich arbeite immer noch an meinem ersten responsiven WordPress Theme. Ich habe bei der Arbeit an index.php einige Probleme bekommen. Aus irgendeinem Grund wird die Seitenleiste unterhalb der Blogposts angezeigt. Auf der Seite mit den einzelnen Posts wird es korrekt angezeigt, aber ich kann nicht genau feststellen, wodurch die Seitenleiste nach unten gedrückt wird.

Hier ist die Seite index.php http://mockup.artxwpn.com/lifestyle und der Code, den ich für sie:

<?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

Das Problem mit Ihrem HTML ist:

Der richtige Code wie folgt sein sollte:

<?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

Sie haben divs nicht geschlossen. Versuchen Sie dies:

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

Und auch versuchen, Sie besser strukturieren Code.

Answer 3

Das Problem kann durch die Tatsache verursacht werden, dass sie <div class="row"> in While-Schleife nicht schließen. Vielleicht ist das eine Lösung. Und zur Information: Verwenden Sie nicht das gleiche ID-Attribut für mehr HTML-Tags (Sie verwenden mehrere id="content") - das ist illegal, weil ID-Attribut nur für ein Tag auf der Seite verwendet werden muss, verwenden mehrere Elemente Klassenattribut