Как добавить боковую панель col-md-4 в WordPress?

Question

Так что я пытаюсь сделать тему Wordpress с бутстрапом, и я все еще новичок в этом. Это мой index.php страница:

<?php get_header(); ?> 

<div class="main-column"> 

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

    get_template_part('content'); 

    endwhile; 

    else : 
     echo '<p>No content found</p>'; 

    endif; ?> 

</div> 

<?php get_footer(); ?> 

и это моя content.php страница:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-8"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
        <div class="page-header"> 
         <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
         <p class="post-info"><span style="color:gray"><span class="glyphicon glyphicon-time" aria-hidden="true"></span> <?php the_time('F jS, Y g:i a'); ?> | <span style="color:gray"><span style="color:gray"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> scris de <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a> | Postat în 

         <?php 
         $categories = get_the_category(); 
         $separator = ", "; 
         $output = ''; 

         if ($categories) { 
         foreach ($categories as $category) { 
         $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator; 
         } 
         echo trim($output, $separator); 
         } 
         ?> 
         </p> 
        </div> 
        <div class="post-content"> 
         <p> 
          <div class="img-responsive img-thumbnail"><?php the_post_thumbnail('small-thumbnail'); ?></div><?php echo get_the_excerpt(); ?> 
          <a href="<?php the_permalink(); ?>">Citeste articolul &raquo;</a> 
         </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

что я хочу, чтобы иметь Col-мкр-4 врезке в правом и я не действительно знаю, как добавить его. Если я напишу код в index.php в разделе div «main-column», боковая панель появится с левой стороны под основным содержимым. Возможно, я плохо написал код в content.php. Как я уже сказал, я все еще новичок, и я пытаюсь учиться. Не могли бы вы мне помочь?

Answer 1

Самый простой способ - переместить свою загрузочную сетку на index.php. Таким образом, ваш index.php выглядит следующим образом:

<?php get_header(); ?> 

<div class="main-column"> 
    <div class="container">   
     <div class="row"> 

      <div class="col-md-8"> 

       <?php if (have_posts()) : 
        while (have_posts()) : the_post(); 
         get_template_part('content'); 
        endwhile; 
       else : 
        echo '<p>No content found</p>'; 
       endif; ?> 

      </div><!-- .col-md-8 --> 

      <div class="col-md-4 sidebar"> 

       <?php // insert your sidebar here ?> 

      </div><!-- .col-md-4 --> 

     </div><!-- .row -->   
    </div><!-- .container -->   
</div><!-- .main-column --> 

<?php get_footer(); ?> 

И ваш content.php будет выглядеть следующим образом:

<div class="panel panel-default"> 
    <div class="panel-body"> 
     <div class="page-header"> 
      <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
      <p class="post-info"><span style="color:gray"><span class="glyphicon glyphicon-time" aria-hidden="true"></span> <?php the_time('F jS, Y g:i a'); ?> | <span style="color:gray"><span style="color:gray"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> scris de <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a> | Postat în 
       <?php 
       $categories = get_the_category(); 
       $separator = ", "; 
       $output = ''; 

       if ($categories) { 
        foreach ($categories as $category) { 
         $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator; 
        } 
        echo trim($output, $separator); 
       } 
       ?> 
      </p> 
     </div> 
     <div class="post-content"> 
      <p> 
       <div class="img-responsive img-thumbnail"><?php the_post_thumbnail('small-thumbnail'); ?></div><?php echo get_the_excerpt(); ?> 
       <a href="<?php the_permalink(); ?>">Citeste articolul &raquo;</a> 
      </p> 
     </div> 
    </div> 
</div>