Здравствуйте, сегодня хочу рассказать вам о том, как создать объемный (3d) сайдбар (аналогично с шапкой, футером, контентом) на своем сайте.

Скачать исходники для статьи можно ниже

Для примера буду рассматривать стандартную тему wordpress – Twenty Eleven.

Изначально, сайдбар выглядел так:

А после того как вы прочтете данную статью, то сможете сделать что-то наподобие следующего:

Давайте же преступим!

 
Для того, чтобы осуществить данное преобразования, необходимо следующее:

1.1. Заходим в файл sidebar.php.

За отображения сайдбара (sidebar, боковая колонка) в движке wordpress отвечает файл sidebar.php – его код и будем изменять.

Входим в панель управления сайтом, далее в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор” и справа в списке шаблонов выбираем файл sidebar.php.

Ищем в нем блок, отвечающий за вывод сайдбара (в основном там только один блок – начинается с тега div).

Здесь можно воспользоваться программой Firebug для браузера Firefox, а именно его инструментом “анализ выделенной области”, кнопочка на которую нужно нажать для активизации данного инструмента показана на скриншоте ниже:

Далее наводим курсор на сайдбар и смотрим какой же блок отвечает за его отображение:

Как видим блок называется “secondary” (например, в теме моего сайт – mnogoblog.ru – блок сайдбара называется – “sidebar”).

Возвращаемся к файлу sidebar.php и ищем в нем блок с названием secondary, вот так он выглядит в данной теме (Twenty Eleven):

...
<div id="secondary" class="widget-area" role="complementary">
...

 
Теперь сразу после него добавляем еще один блок, например с названием “block”:

...
<div id="secondary" class="widget-area" role="complementary">
<div class="block">
...

И не забываем закрыть данный блок закрывающим тегом </div>
 
Для этого спускаемся вниз кода и ищем там тег </div> и дублируем его:
 

<?php endif; // end sidebar widget area ?>
		</div></div><!-- #secondary .widget-area -->
<?php endif; ?>

 
1.2. Далее зайдем в файл style.css и добавим к нашему новому блоку “block” стили оформления.
 
Для этого опять открываем “Редактор” (панель управления – “внешний вид” – “Редактор”) и справа в списке шаблонов выбираем файл style.css.
Спускаемся в его коде в самый низ и добавляем следующий код:
 

.block {
background: 
url('https://mnogoblog.ru/wp-content/uploads/2012/12/3dsidebar1.gif') no-repeat,
url('https://mnogoblog.ru/wp-content/uploads/2012/12/3dsidebar2.gif') repeat-y,
#FCF8BC
100% 0; 
padding: 50px 0 0 40px; /* Поля вокруг текста */
margin: 0 -7% 0 -46.4%;
}

Здесь используется принцип многофоновости для блока, которая реализуется благодаря CSS3.
Здесь соответственно:
“https://mnogoblog.ru/wp-content/uploads/2012/12/3dsidebar1.gif” – путь до картинки, которая будет располагаться сверху в сайдбаре,

“http://mnogoblogru.hostenko.com/wp-content/uploads/faq_bg8_2.gif” – путь до картинки, которая слева.

Параметр #FCF8BC (желтый) – отвечает за цвет фона сайдбара, здесь можно также использовать и изображение, например для создания градиента.

Параметры “padding” и “margin” – регулируют отступы.

Вот в принципе и все!