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

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

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

Вот так выглядит ее сайдбар:

Давайте преобразим его до:

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

1. Редактируем файл sidebar.php.

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

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

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

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

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

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

...
<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; ?>

2. Редактируем файл style.css

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

.block {
background:
url('https://mnogoblog.ru/wp-content/uploads/2013/05/1.gif') repeat-y,
#F9F9F9
url('https://mnogoblog.ru/wp-content/uploads/2013/05/2.gif') repeat-y 100% 0;
padding: 10px 0 0 20px;
margin: 0 -26.4% 0 -26.4%;
}

Здесь соответственно “https://mnogoblog.ru/wp-content/uploads/2013/05/1.gif” – путь до картинки, которая будет располагаться слева от сайдбара, а “https://mnogoblog.ru/wp-content/uploads/2013/05/2.gif” – путь до картинки, которая справа.

Параметры “padding” и “margin” – регулируют отступы.
Параметр #F9F9F9 – отвечает за цвет фона сайдбара.