Левый и Правый сайдбары.

[xxicenturies]

Шаблон под CMS WP

Задача: из шаблона с одним(правым) сайдбаром, сделать шаблон с двумя сайдбарами (левый и правый).

Ход действий:

1. Зарегистрировать еще один сайд бар в функшен.пхп

Исполнено таким образом:

<?php

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_left',

'before_widget' => '',

'after_widget' => '',

'before_title' => '<h2>',

'after_title' => '</h2>',

));

?>

2. В шаблоне добавить файл пхп для сайдбаров.

Исполнено таким образом:

Содержимое файла l_sidebar.php

<div id="sidebar-left">

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_left') ) : else : ?>

<ul>

<ul>

<?php get_archives('postbypost', 5); ?>

</ul>

<?php endif; ?>

</ul>

<div style="clear:both;"></div>

</div>

Содержимое файла r_sidebar.php

<div id="sidebar-right">

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_right') ) : else : ?>

<ul>

<ul>

<?php get_archives('postbypost', 5); ?>

</ul>

<?php endif; ?>

</ul>

<div style="clear:both;"></div>

</div>

3. Вызов сайдбаров в шаблоне.

Исполнено таким образом:

<?php include(TEMPLATEPATH."/l_sidebar.php");?>

<?php include(TEMPLATEPATH."/r_sidebar.php");?>

4. Оформить через css

Исполнено таким образом:

#sidebar-left {

width:160px;

color:#55554A;

margin-top:-10px;

position:relative;

right: 0px;

font: 11px Verdana, Arial, Helvetica, sans-serif;

margin-bottom: 15px;

overflow: hidden;

}

#sidebar-left h2 {

font-size: 12px;

color: #000000;

letter-spacing: -1px;

}

#sidebar-left ul li {

margin-left: 3px;

list-style: none;

background: url(images/lidot.gif) no-repeat left 6px;

padding-left: 8px;

padding-bottom: 2px;

border-bottom: 1px dotted #CCCCC6;

padding-top: 3px;

line-height: 16px;

}

#sidebar-left ul a {

color: #55554A;

font-weight: normal;

}

#sidebar-left ul a:hover {

color: #fff;

text-decoration: underline;

font-weight: normal;

}

#sidebar-left ul.children li {

border-bottom-style: none;

background: url(images/subcat.gif) no-repeat left top;

margin: 0px;

padding-top: 0px;

padding-bottom: 0px;

padding-left: 12px;

}

#sidebar-left h2 {

background: url(images/side-h2-bg.png) repeat-x left top;

color: #FFFFFF;

padding-top: 2px;

padding-bottom: 4px;

padding-left: 6px;

margin-bottom: 8px;

margin-top: 10px;

border: 1px solid #B8B8AE;

}

#sidebar-right {

width:160px;

color:#55554A;

margin-top:-10px;

position:relative;

right: 0px;

float: right;

font: 11px Verdana, Arial, Helvetica, sans-serif;

margin-bottom: 15px;

overflow: hidden;

}

#sidebar-right h2 {

font-size: 12px;

color: #000000;

letter-spacing: -1px;

}

#sidebar-right ul li {

margin-left: 3px;

list-style: none;

background: url(images/lidot.gif) no-repeat left 6px;

padding-left: 8px;

padding-bottom: 2px;

border-bottom: 1px dotted #CCCCC6;

padding-top: 3px;

line-height: 16px;

}

#sidebar-right ul a {

color: #55554A;

font-weight: normal;

}

#sidebar-right ul a:hover {

color: #fff;

text-decoration: underline;

font-weight: normal;

}

#sidebar-right ul.children li {

border-bottom-style: none;

background: url(images/subcat.gif) no-repeat left top;

margin: 0px;

padding-top: 0px;

padding-bottom: 0px;

padding-left: 12px;

}

#sidebar-right h2 {

background: url(images/side-h2-bg.png) repeat-x left top;

color: #FFFFFF;

padding-top: 2px;

padding-bottom: 4px;

padding-left: 6px;

margin-bottom: 8px;

margin-top: 10px;

border: 1px solid #B8B8AE;

}

Итог: Сайдбары выводятся, но пляшут по странице - то выше контента, то ниже, то под ним, то над ним (в зависимости от того на главной странице, или на странице записи, или на статической странице).

Вопрос, где я неправ(скорее всего в css), и как это подправить что бы сайдбары не плясали?

Заранее благодарен.

[hedgehog]

Есть где показать проблему онлайн?

И, кстати, что это за велосипед?

<?php include(TEMPLATEPATH."/l_sidebar.php");?>
<?php include(TEMPLATEPATH."/r_sidebar.php");?>

Ведь есть get_sidebar.

А этот хардкод зачем? Не правильнее ли реализовать это виджетом?

<?php get_archives('postbypost', 5); ?>

Почему ul выводится внутри ul?

<ul>
<ul>

Что за дурацкое условие? Как оно вообще должно выполняться?

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar_left') ) : else : ?>

И еще, ul открывается внутри IF, а закрывается - снаружи. Есть мнение, что ваш HTML развален полностью. Нужно видеть страницу, чтобы сказать наверняка где именно.

[xxicenturies]

Есть где показать проблему онлайн?

К сожалению нет, шаблон правлю на локалке.

И, кстати, что это за велосипед?

<?php include(TEMPLATEPATH."/l_sidebar.php");?>
<?php include(TEMPLATEPATH."/r_sidebar.php");?>

Ведь есть get_sidebar.

Уже заменил на:

<?php get_sidebar('left'); ?>
<?php get_sidebar('right'); ?>

А этот хардкод зачем? Не правильнее ли реализовать это виджетом?

<?php get_archives('postbypost', 5); ?>

Изначально был в шаблоне, уже его нет.

Возвращаясь к вопросу, то результат следующий: сайдбары удалось выравнять(правил CSS) теперь не пляшут, но теперь при малом количестве контента,(содержимое сайдбаров длиннее контента) футер заезджает под сайдбары.

Вот css

#sidebar-left {
width:154px;
color:#55554A;
margin-top:0px;
position:absolute;
left:2px;
float: left;
font: 11px Verdana, Arial, Helvetica, sans-serif;
margin-bottom:15px;
}
#sidebar-right {
width:154px;
color:#55554A;
margin-top:0px;
position:absolute;
right:0px;
float: right;
font: 11px Verdana, Arial, Helvetica, sans-serif;
margin-bottom:15px;
}
#sidebar-right h2,#sidebar-left h2 {
font-family:"Open Sans Condensed", sans-serif;
font-size:18px;
font-weight:400;
text-align:center;
color: #fff;
margin:0px 0 0 0px;
border-top: 1px solid #990000;
border-bottom: 1px solid #990000;
}

[danil-html]

Прижмите футер к низу страницы. Есть много приемов.

Например:

http://www.xiper.net/collect/html-and-css-tricks/karkas-verstki/podval-k-nizu.html

Edited November 1, 2013 by danil-html