2015-09-15 23 views
0

我想在wordpress中的twentyten主題中使用seconday邊欄。我已經將代碼添加到了functions.php和sidebar.php中,並且出現了側邊欄。現在的問題是側邊欄在彼此之下,我希望他們彼此相鄰,我怎麼能做到這一點?Wordpress twentyten Seconday Sidebar

實施例圖像:

enter image description here

的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 */ 
} 

回答

0

請儘量實現下面的代碼。

我在主類中添加了一些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; 
}