Здравствуйте, давайте украсим немного свои сайты, а именно добавим декоративные изображения по бокам сайта.
Скачать исходники для статьи можно ниже
Для примера возьмем стандартную тему сайта – Twenty Twelve.
Вот, что мы будем делать:
То есть добавим немного растительности по бокам сайта (слева и справа).
С помощью данного метода думаю ваш сайт станет еще красивее.
Давайте же приступим:
1. Редактируем файл header.php.
Заходим в файл header.php стандартной темы Twenty Twelve – панель управления – в левом меню – пункт “Внешний вид” – его подпункт “Редактор” – справа в списке шаблонов ищем файл header.php.
Ищем в коде файла header.php тег body:
<body <?php body_class(); ?>>
И вставляем сразу после него следующий код:
<div id="maindecor"> <div id="decor1"> </div> <div id="decor2"> </div>
То есть мы создали 3 блока div:
decor1 – этот блок у нас будет отвечать за вывод изображения слева от сайта.
decor2 – этот блок у нас будет отвечать за вывод изображения справа от сайта.
maindecor – этот блок у нас будет включать в себя сам сайт (блок page) и еще два созданных нами блока decor1 и decor2. Сделано это для того, чтобы блоки не разъезжались при просмотре сайта в разном разрешении, а были как одно целое.
Как видите блок maindecor мы не закрыли, так как он должен включать в себя весь сайт, поэтому закрывающий тег div мы должны поставить после закрывающего тега div у блока page.
2. Закрываем блок maindecor в файле footer.php
Для этого в панели управления – в левом меню – опять выбираем пункт “Внешний вид” – его подпункт “Редактор” – и справа в списке шаблонов ищем файл footer.php.
Ищем в коде файла header.php закрывающий тег блока page:
</div><!-- #page -->
И сразу после него ставим закрывающий тег div, который закроет у нас блок maindecor:
</div><!-- #page --> </div>
3. Добавляем стили оформления для созданных нами блоков (decor1, decor2, maindecor)
Для этого в панели управления – в левом меню – опять выбираем пункт “Внешний вид” – его подпункт “Редактор” – и справа в списке шаблонов ищем файл style.css.
Спускаемся в коде файла style.css в самый низ и вставляем следующий код:
#maindecor {
margin: 0px auto;
width: 960px;
}
#decor1 {
float: left;
background: url(https://mnogoblog.ru/wp-content/uploads/2013/06/decor1.png) no-repeat;
height: 700px;
width: 100px;
}
#decor2 {
float: right;
background: url(https://mnogoblog.ru/wp-content/uploads/2013/06/decor2.png) no-repeat;
height: 700px;
width: 100px;
}
Давайте разберемся здесь что к чему.
Блок maindecor:
margin – задает выравнивание по центру.
width – задает ширину блока равную 960px. Вы наверное спросите почему 960px – связано с тем, что боковым блокам мы задаем ширину 100 px (размеры рисунков), а по середине у нас идет блок самого сайта (page) с размером в 760px, что в сумме дает 960 px.
Блок decor1:
float: left – задает выравнивание блока по левому краю.
background – прописывается путь до картинки, здесь no-repeat – говорит, что изображения не надо повторять, если вы хотите повторять его по вертикали, то поставьте repeat-y.
height – задает высоту блока в 700px (связано с высотой рисунка).
width – задает ширину блока в 100px (связано с высотой рисунка).
Блок decor2 аналогично блоку decor1.
Вот и все!
PS: Если вы хотите добавить отступ декоративных изображений сверху, то используйте следующей код в файле стилей:
margin-top: 50px;
Очень интересное руководство!
Но было бы здорово иметь хоть какие-нибудь, самые общие требования к файлам изображений, которые используются для украшения подобным образом.
Спасибо за интересный подход!
Хорошо написано про позиционирование блоков на сайте – “dreamhelg.ru/2011/02/css-position-in-10-steps/”
какой к черту header.php где его взять? у меня просто на самом сайте есть функция в админке “создать новый файловый блок” нажимаю на него и открывается страница где сайт просит ввести описание блока т.е. коды. вот вы лучше скажите какие коды туда вводить?