Украшаем сайдбар: два фоновых изображения по бокам

За отображения сайдбара (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('http://mnogoblog.ru/wp-content/uploads/2013/05/1.gif') repeat-y,
#F9F9F9
url('http://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%;
}

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

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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий