기존의 WordPress 테마에 동적 사이드 바 추가

Question

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.png

그러나 경우 sidebar.php 코드를 this로 변경합니다.

<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.png

그래서 기존 기사 아래에 추가 할 때 문제가있는 것으로 보입니다. 어떤 도움이라도 훌륭합니다. 사이트는 실시간으로 미리 볼 수 있습니다 http://www.itsdaniel0.com

Answer 1

레이아웃 문제가 발생할 수있는 div 태그와 ul 태그에 문제가 있습니다. [Invalid]Markup Validation of itsdaniel0.com - W3C Markup Validator을 참조하십시오. 유효성 검사 보고서를 아래로 스크롤하여 줄 번호와 소스 코드를 봅니다.