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;
}
我想在 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;
}