Question

所以我试图用bootstrap创建一个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-md-4侧边栏，我真的不知道如何添加它。如果我在“main-column”div下的index.php中编写代码，则侧边栏显示在主内容下方的左侧。也许我没有在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>

如何在WordPress中添加col-md-4侧边栏？

1 个答案: