将动态边栏添加到现有WordPress主题

时间:2011-03-19 作者:itsdaniel0

我使用的是SoulVision WordPress主题,我试图在已经存在的顶部、左侧和右侧边栏中添加一个底部边栏,但是,我无法让它成功工作。任何帮助都将不胜感激。我的编码如下。

style.css

/*-- Sidebar settings --*/
#sidebar {
    float:right;
    width:400px;
    color:#DEDABF;
    margin-top:0px;
    position:relative;
    font-size:11px;
}
#sidebar a:hover {
    color: #C58556;
    text-decoration: none;
}
#sidebar h2 {
    font-size:14px;
    font-weight:bold;
    border:1px solid #8E6140;
    margin:0;
    padding:3px 0 6px 8px;
    background: url(images/h2-bg.jpg) repeat-x left top;
}
#sidebar ul li strong {
    color:#FC0;
}
#sidebar-top {
    width:390px;
    padding:5px;
}
.sidebar-top-box {
    margin-bottom:10px;
    padding:0;
    border-top: none;
    border-right: 1px solid #8E6140;
    border-bottom: 1px solid #8E6140;
    border-left: 1px solid #8E6140;
}
.box-padding {
    padding:7px;
}
.sidebar-top-box p {
    margin-top:3px;
    margin-bottom:3px;
}
#sidebar-top h2 {
    margin-top:10px;
    color:#CFA97E;
}
#sidebar-top .textwidget {
    margin-bottom:10px;
    padding:7px;
    border-right: 1px solid #A1674F;
    border-bottom: 1px solid #A1674F;
    border-left: 1px solid #A1674F;
}
#sidebar-top ul ul {
    list-style-type:none;
    margin-bottom:10px;
    padding:10px 7px 7px 12px;
    border-right: 1px solid #8E6140;
    border-bottom: 1px solid #8E6140;
    border-left: 1px solid #8E6140;
}
#sidebar-top ul ul li {
    padding-left:10px;
    list-style-type:none;
    background-image:url(images/lidot.gif);
    background-repeat:no-repeat;
    background-position:left top;
    padding-bottom:3px;
}
#sidebar-top ul li a {
    text-decoration:none;
}

#sidebar-top .box-ads a{
    text-decoration:none;
}
#sidebar-left {
    float:left;
    width:215px;
    padding:0 10px 0 5px;
}
#sidebar #sidebar-left h2, #sidebar #sidebar-right h2 {
    margin:15px 0 10px;
    color: #CFA97E;
}
#sidebar-right {
    float:right;
    width:153px;
    padding:0 5px 0 10px;
}
#sidebar-left ul ul, #sidebar-right ul ul {
    padding-left:5px;
}
html, #sidebar ul, #sidebar-wrap ul, .rel-posts ul {
    margin:0;
    padding:0;
}
#sidebar-right li, #sidebar-left li {
    background:url(images/lidot.gif) no-repeat left top;
    list-style:none;
    margin:0;
    padding:0 0 5px 8px;
}
#sidebar-left  .children, #sidebar-right  .children {
    padding-top: 8px;
}
#sidebar-left  ul.children  li, #sidebar-right  ul.children  li {
    padding-bottom: 3px;
    padding-top: 0px;
}
#sidebar   h2  a.rsswidget {
    color: #CFA97E;
    text-decoration: none;
}
#sidebar .rsswidget img {
    float: left;
    margin-top: 2px;
    margin-right: 7px;
}
/*-- Bottom Sidebar --*/
#sidebar-bottom {
    width:390px;
    padding:5px;
}
.sidebar-bottom-box {
    margin-bottom:10px;
    padding:0;
    border-top: none;
    border-right: 1px solid #8E6140;
    border-bottom: 1px solid #8E6140;
    border-left: 1px solid #8E6140;
}
.box-padding {
    padding:7px;
}
.sidebar-bottom-box p {
    margin-top:3px;
    margin-bottom:3px;
}
#sidebar-bottom h2 {
    margin-top:10px;
    color:#CFA97E;
}
#sidebar-bottom .textwidget {
    margin-bottom:10px;
    padding:7px;
    border-right: 1px solid #A1674F;
    border-bottom: 1px solid #A1674F;
    border-left: 1px solid #A1674F;
}
#sidebar-bottom ul ul {
    list-style-type:none;
    margin-bottom:10px;
    padding:10px 7px 7px 12px;
    border-right: 1px solid #8E6140;
    border-bottom: 1px solid #8E6140;
    border-left: 1px solid #8E6140;
}
#sidebar-bottom ul ul li {
    padding-left:10px;
    list-style-type:none;
    background-image:url(images/lidot.gif);
    background-repeat:no-repeat;
    background-position:left top;
    padding-bottom:3px;
}
#sidebar-bottom ul li a {
    text-decoration:none;
}

#sidebar-bottom .box-ads a{
    text-decoration:none;
}

sidebar.php

<div id="sidebar">
  <div id="sidebar-top">
    <ul id="top-sidebarwidgets">
      <?php if ( function_exists(\'dynamic_sidebar\') && dynamic_sidebar(\'Sidebar_top\') ) : else : ?>
      <?php endif; ?>
    </ul>
  </div>
  <div style="clear:both;"></div>
  <div id="sidebar-left">
    <ul id="l_sidebarwidgets">
      <?php if ( function_exists(\'dynamic_sidebar\') && dynamic_sidebar(\'Sidebar_left\') ) : else : ?>
      <?php endif; ?>
    </ul>
  </div>
  <div id="sidebar-right">
    <ul id="r_sidebarwidgets">
      <?php if ( function_exists(\'dynamic_sidebar\') && dynamic_sidebar(\'Sidebar_right\') ) : else : ?>
      <?php endif; ?>
    </ul>
  </div>
  <div id="sidebar-bottom">
    <ul id="bottom-sidebarwidgets">
      <?php if ( function_exists(\'dynamic_sidebar\') && dynamic_sidebar(\'Sidebar_bottom\') ) : else : ?>
      <?php endif; ?>
    </ul>
  </div>
</div>
使用以下代码,我的侧栏显示如下-i.imgur。com/omMfa。巴布亚新几内亚

但如果我改变sidebar.php 此代码

<div id="sidebar">
      <div id="sidebar-top">
        <ul id="top-sidebarwidgets">
          <?php if ( function_exists(\'dynamic_sidebar\') && dynamic_sidebar(\'Sidebar_top\') ) : else : ?>
          <?php endif; ?>
        </ul>
      </div>
      <div style="clear:both;"></div>
      <div id="sidebar-bottom">
        <ul id="bottom-sidebarwidgets">
          <?php if ( function_exists(\'dynamic_sidebar\') && dynamic_sidebar(\'Sidebar_bottom\') ) : else : ?>
          <?php endif; ?>
        </ul>
      </div>
      <div id="sidebar-left">
        <ul id="l_sidebarwidgets">
          <?php if ( function_exists(\'dynamic_sidebar\') && dynamic_sidebar(\'Sidebar_left\') ) : else : ?>
          <?php endif; ?>
        </ul>
      </div>
      <div id="sidebar-right">
        <ul id="r_sidebarwidgets">
          <?php if ( function_exists(\'dynamic_sidebar\') && dynamic_sidebar(\'Sidebar_right\') ) : else : ?>
          <?php endif; ?>
        </ul>
      </div>
    </div>
然后边栏将显示如下-i.imgur。com/UATs6。巴布亚新几内亚

因此,在我看来,在现有的基础上添加它时存在一个问题。任何帮助都会很好。可以在以下位置实时预览网站http://www.itsdaniel0.com

Update

functions.php
// Widget Settings




if ( function_exists(\'register_sidebar\') )
    register_sidebar(array(
        \'name\' => \'Sidebar_top\',
        \'before_widget\' => \'\',
        \'after_widget\' => \'\', 
        \'before_title\' => \'<h2>\',
        \'after_title\' => \'</h2>\',
    ));

if ( function_exists(\'register_sidebar\') )
    register_sidebar(array(
        \'name\' => \'Sidebar_left\',
        \'before_widget\' => \'\', 
        \'after_widget\' => \'\', 
        \'before_title\' => \'<h2>\',
        \'after_title\' => \'</h2>\',
    ));

if ( function_exists(\'register_sidebar\') )
    register_sidebar(array(
        \'name\' => \'Sidebar_right\',
        \'before_widget\' => \'\',
        \'after_widget\' => \'\', 
        \'before_title\' => \'<h2>\',
        \'after_title\' => \'</h2>\',
    ));

if ( function_exists(\'register_sidebar\') )
    register_sidebar(array(
        \'name\' => \'Sidebar_bottom\',
        \'before_widget\' => \'\',
        \'after_widget\' => \'\', 
        \'before_title\' => \'<h2>\',
        \'after_title\' => \'</h2>\',
    ));

//GsL98DGtpo0W

add_theme_support( \'post-formats\', array( \'aside\', \'gallery\', \'video\' ) );

?>

1 个回复
最合适的回答,由SO网友:Bainternet 整理而成

对于将来遇到相同问题的提问者,解决方案是在新的侧边栏之前添加:

<div style="clear:both;"></div>
防止侧栏相互重叠。

结束

相关推荐

Adding goodies to themes

如何在主题更新时向Arjuna-X等主题添加内容而不丢失?儿童主题是一种很好的方式,还是有其他选择?如果新版本的主题对我添加的功能具有本机支持,该怎么办?