WordPress 20 次级侧边栏

Wordpress twentyten Seconday Sidebar

我想在 wordpress 的二十个主题中添加第二个侧边栏。我已将下面的代码添加到 functions.php 和 sidebar.php 并出现边栏。现在的问题是侧边栏在彼此下面,我希望它们彼此相邻,我该怎么做?

示例图片:

FUNCTIONS.PHP

function add_my_sidebars(){
register_sidebar( array(
'name' => 'My sidebar',
'id' => 'my-sidebar',
'description' => 'Just a little description',
'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
} add_action('widgets_init', 'add_my_sidebars');

SIDEBAR.PHP

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<div id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php dynamic_sidebar('my-sidebar'); ?>

</div><!-- #secondary -->

<?php endif; ?>

CSS 来自 styles.css

的边栏
/* Sidebar */
.widget-area .widget {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    margin-bottom: 48px;
    margin-bottom: 3.428571429rem;
    word-wrap: break-word;
}
.widget-area .widget h3 {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
}
.widget-area .widget p {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}
.widget-area .textwidget ul {
    list-style: disc outside;
    margin: 0 0 24px;
    margin: 0 0 1.714285714rem;
}
.widget-area .textwidget li {
    margin-left: 36px;
    margin-left: 2.571428571rem;
}
.widget-area .widget a {
    color: #757575;
}
.widget-area .widget a:hover {
    color: #21759b;
}
.widget-area .widget a:visited {
    color: #9f9f9f;
}
.widget-area #s {
    width: 53.66666666666%; /* define a width to avoid dropping a wider submit button */
}

请尝试实现以下代码。

我在主class中添加了一些CSS所以请添加这个CSS并检查布局是否与您想要的相同。

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
    margin: 0 auto;
    width: 965px !important;
}

#container {
    float: left;
    margin: 0;
    width: 60%;
}

#primary, #secondary {
    float: left;
    width: 190px;
}