Как создать новый блок в CMS

Опубликовал Джо Саратино 14 Декабрь 2009 в рубрике Создание сайтов. Комментарии: 1

Привет всем читателям, с вами вновь мистер Саратино и блог Paymentnet.ru, вы в разделе «Создание сайтов», и сегодня мы поговорим о том, как создать новый блок в автоматической CMS типа WordPress, Joomla, Zebrum Lite и так далее. Пост ориентирован на средние знания CSS и HTML, начальные знания систем управления контентом (CMS).

Необходимость в создании дополнительных блоков возникает довольно часто, в основном для того, чтобы разместить рекламные материалы и еще какие-то информеры, дополнительные разделы меню и так далее. Блок нужно либо завязать на координатах всей структуры дизайна (в этом случае надо вносить приличное количество изменений в темплейт), либо осуществить его привязку к одному из элементов структуры, что гораздо проще. Для размещения рекламы и информеров достаточно сделать именно такую привязку, а как это осуществить, мы сейчас и разберем.

Создаем div

Итак, нам требуется создать дополнительный блок заданного размера. Допустим, что его высота 60 пикселей, а ширина – 468 пикселей (под баннер). Сначала нам нужно определить место позиционирования блока. Структура дизайна разбита на несколько частей: header (верх сайта, «шапка»), footer (низ сайта, «подвал», content area, (место для контента), sidebar (menu, main – место, где обычно располагается меню навигации, при этом сайдбаров может быть и два: левый и правый). Бывают и другие элементы, но эти – основные, и, хотя структура может быть разбита и по-другому, по этим названиям можно определить данные элементы.

Допустим, что мы хотим разместить блок в хидере сайта. Для этого нужно осуществить несколько действий. Первое – надо открыть папку шаблона вашей CMS и найти там нужный файл header.php (или template.php). Там мы выясняем, где расположить блок (если плохо знаете HTML, просто поместите код блока в файл, потом разберетесь на месте). Теперь надо создать код, который формирует блоки. Пишем в файл шаблона: <div id=»block»>проверка</div>

«block» – это условный идентификатор вашего div, придумайте вместо него свое название. Теперь нам нужно привязать к нашему div правила CSS, а поскольку в файле CSS их еще нет, то надо их написать. Открываем Style.CSS, находим там header и пишем:

#block {
height: 468px;
width: 60px;
position: absolute;
left: 100px;
top: 100px;
border:1px solid #FFFFFF;
text-align: center;
}

Как вы поняли, мы задали ширину 468 и высоту 60 пикселей, левый отступ 100 пикселей, и верхний отступ – тоже 100 пикселей. Баннер окружает белая рамка шириной 1 пиксель (если рамка не нужна, потом правило для border надо снести, но пока оставим, так как нам будет иначе не видно, где находится наш div. Мы узнаем его по надписи «проверка», конечно, но границы будут не видны, поэтому рамку оставим. Файлы сохраняем. Если сайт у вас белого цвета, поставьте вместо #FFFFFF другое значение, например #000000. Можно и #FFF и #000, но не все движки и сборки понимают так.

Позиционирование div

Возьмем за правило – вертикальное позиционирование div лучше делать сверху, снизу это нужно лишь в очень редких случаях. Поэтому открываем сайт и смотрим, на какой высоте должен быть наш div-блок (если шаблон накрылся медным тазом, уберите из темплейта свой <div id=»block»>Проверка</div> и переставьте его на другое место в файле темплейта). Я обычно пишу такой код в самый низ файла темплейта, после последнего тега </div>. Например:

Тут код теплейта, бла-бла-бла…

………………..

</div>

<div id=»block»>Проверка</div>

Теперь смотрим вот на этот цветной вариант правил для созданного вами блока и начинаем позиционирование div:

#block {
height: 468px;
width: 60px;
position: absolute;
left: 100px;
top: 100px;
border:1px solid #FFFFFF;
text-align: center;
}

Если наш div слишком высоко, прибавляем значение, выделенное красным. Если низко, убавляем его. Если наш div слишком близко к левому краю страницы сайта, прибавляем синее значение. Если слишком далеко, убавляем его.

Теперь все сохраняем, смотрим, исправляем. Горизонтальное и вертикальное позиционирование div блока завершено. Если вам не нужна рамка, правило border (выделено белым) просто сносим. Вместо слова «Проверка» вставляем нужную вам картинку, код Adsense или еще чего-нибудь там, что вы хотели поместить в ваш новый блок. Готово !

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

« ЧПУ-ссылка: где правда ?

Двойной удар ! »