从头开始创建 Wordpress 模板 - 侧边栏放置答案

【问题标题】：Creating a Wordpress Template From Scratch - Sidebar Placement从头开始创建 Wordpress 模板 - 侧边栏放置
【发布时间】：2018-04-15 21:12:54
【问题描述】：

我正在从头开始创建一个 Wordpress 模板，并且我已经在添加侧边栏的过程中。但我在侧边栏定位/放置方面遇到了一些问题。

What I want 与 What I have

我不确定我是否对 sidebar.php 或容器块做错了。

但这是我的 css 代码：

/* Sidebar modules for boxing content */
.sdbrcont {
float: left;
background-color: black;
}

我的 sidebar.php 代码：

<div class="sdbrcont">
<?php if ( is_active_sidebar( 'left_sdbr' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
    <?php dynamic_sidebar( 'left_sdbr' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>
</div>

如果问题出在我的 index.php 上，代码如下：

<div class="row">
<?php get_sidebar( 'left-sdbr' ); ?>
    <div id="contentcont">
    <div class="blog-main">
    <div class="blogtitle">
        <p>PAKU SQUAD
        <span class="subheader1">
        BLOG
        </span>
        </p>
        <hr>
        </div>
        <?php 
        if ( have_posts() ) : while ( have_posts() ) : the_post();

            get_template_part( 'content', get_post_format() );

        endwhile;?> 
        <nav>
            <ul class="pager">
            <li> <?php next_posts_link( 'Older Posts >>>' ); ?> </li>
            <li> <?php previous_posts_link( '<<< Newer Posts' ); ?></li>
            </ul>
            </nav> 
        <?php
        endif; 
        ?>
    </div> <!-- /.blog-main -->
    </div>
</div> <!-- /.row -->

这是我第一次创建 wordpress 模板，我非常感谢我能得到的所有帮助。提前谢谢你。

【问题讨论】：

我看到的主题建筑还在苦苦挣扎。最好的办法就是利用 WordPress 附带的演示主题，查看它们在做什么并复制/修改它们。
我假设您正在使用引导程序？
@AwaisUmar 是的，我正在使用引导程序。
Bootstrap 的容器类 col-md-* 类在哪里？你做错了。首先，您需要构建空网格骨架。然后只需将侧边栏放在左侧网格单元格中，将主要内容放在右侧单元格中。 getbootstrap.com/docs/3.3/css/#grid
@Elvin85 这就是我要指出的 :) 这就是为什么我问 OP 他是否使用引导程序，因为他没有创建网格布局。他得到了什么是意料之中的。

标签： wordpress wordpress-theming bootstrap-4

【解决方案1】：

bootstrap中需要注意Layout网格系统：http://getbootstrap.com/docs/4.0/layout/overview/
因为需要确定容器的宽度，否则就是全部的body。

<div class="container">
  <div class="row">
    <div class="col">
      Sidebar
    <div>
    <div class="col">
      Content
    <div>
  </div>
</div>

【讨论】：