В этой статье мы поговорим о том, как поставить шапку на сайт и как поменять шапку на сайте работающем на WordPress.

Сначала давайте рассмотрим, как поставить шапку на сайт, созданный не на каком-то движке, а с помощью html-редактора, например, Dreamweaver, NVU и т.д. Для начала хочу сказать, что любая шапка для сайта – это прежде всего обычная картинка, сделанная в формате jpg или png. Поэтому поменять шапку на сайте, созданном вручную, очень просто: открываете страницу в редакторе html-страниц, идете в самый верх страницы, и далее просто вставляете изображение в данную страницу. В NVU это делается еще проще: нажимаете на пиктограммку «Изображение» и далее вставляете адрес картинки.

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

Как поставить шапку на сайт, который создан на популярном движке WordPress или как поменять шапку на сайте? Это не так сложно, как кажется на первый взгляд. Единственный момент, который я хочу упомянуть в самом начале – это авторские права на шаблон. Вы наверняка знаете, что если Вы покупаете или скачиваете бесплатно шаблоны для Вордпресс, то вы не можете просто так взять и поменять шапку на сайте – таким образом, вы нарушите авторское право. Свободно менять шапки можно лишь в том шаблоне, права на который принадлежат вам, то есть, вы создали его сами.

Тем не менее, часто многие авторы шаблонов идут навстречу креативным вебмастерам, и разрешают менять шапки, однако вам следует, все же, написать автору и спросить разрешения. Это будет не только являться признаком хорошего тона, но и убережет вас от разбирательств за нарушение авторского права.

Итк, как поменять шапку на сайте Вордпресс:

1. Откройте шаблон на вашем компьютере. Найдите и откройте папку images, в которой будут находится изображения вашего шаблона. Шапки сайта будет называться header. Я рекомендую Вам скопировать эту картинку куда-нибудь в другое место (например, на рабочий стол) – на случай, если в новой шапке вам что-то не понравится.

2. Берете новую шапку для сайта и открываете ее в фоторедакторе, в котором вы можете менять размер изображения. Если у вас нет фоторедактора, кликните правой кнопкой на файле header и выберите: «открыть с помощью» и далее из списка выбираете Paint. Это базовая программа для редактирования изображений, она есть на любом компьютере, работающем с Windows.

3. Смотрите размеры картинки в пикселах с помощью кнопки Resize (изменить размеры). Закрываете Paint.

4. Открываете новую шапку (также в Paint) и с помощью кнопки Resize ставите тот же самый размер изображения в пикселах, который был у предыдущей картинки. Если изображение получается нечетким или некрасивым, отмените действие с помощью кнопки Отмена. Попробуйте подредактировать новое изображение, обрезав его (Crop) или выберите новое изображение. Размер имеет принципиальное значение, иначе сайт у вас «поедет».

5. Когда у вас получилась нужная картинка, сохраните ее в папке Images вашего шаблона, под тем же именем header. Обратите внимание, что если оригинальная картинка создана в jpg, новая картинка также должна быть в этом формате. А если оригинальная картинка создана в png то и новую картинку делаете в png тоже.

Почему это важно? Дело в том, что Вордпресс работает на php, поэтому в одном из файлов вашего шаблона на языке php написано, что шаблон ссылается на картинку определенного формата. Если вы измените его формат (вместо jpg поставите png или gif), то шапка отображаться на будет.

6. Теперь залейте новый шаблон на хостинг (папка wp-content/themes).

Прежде чем приступить к изменению шапки сайта, сделанного на okis.ru, скачайте файлы для дальнейшей работы .

Итак, как поменять шапку сайта на okis.ru ? Для начала разархивируйте файл, который Вы скачали и найдите там шапку сайта, которая имеет название shapka.png . Нам нужно её загрузить на наш сайт. Как это сделать? Зайдите в пункт «Загрузка фото» в панели управления сайта.

Здесь Вы можете загружать изображения на сайт.

Прежде чем загружать шапку нашего коктейльного сайта, обязательно снимите галочку с «Уменьшить размер изображение до 500 х 500 px» , так как шапка шире чем 500 px. Галочку сняли, теперь жмем «Обзор», затем находим файл shapka.png и нажимаем «Открыть».

После того, как Вы загрузили изображение, ниже Вы увидите ссылку, где находится шапка нашего сайта.

Зайдите в редактор CSS -> Редактировать CSS . На этот раз мы воспользуемся вспомогательными кнопками. Нажмите на кнопку «Шапка сайта» и введите тот адрес ссылки на картинку с шапкой, который показан в админке Вашего сайта, после чего нажмите «Сохранить».

Нажмите «Обновить». Вы увидите, что в поле, где пишутся все стили, появился новый код:

div.art-header-jpeg {background: url(/ПУТЬ_К_ФАЙЛУ/ shapka.png );}

Это и есть стили для шапки сайта.

В моём случае путь к файлу такой: /img/cocktail60/shapka.png

Значит в моей админке написан следующий код:
div.art-header-jpeg {background: url(/img/cocktail60/shapka.png );}
У Вас же ПУТЬ_К_ФАЙЛУ к шапке другой , поэтому Вы копируете ту ссылку, которая показывается у Вас в админке.

Обновите главную страницу сайта, и Вы увидите, что шапка поменялась. Но есть небольшой недочёт, который мы сейчас исправим - если Вы приглядитесь, то увидите, что в верхних уголках немного вылезает контур шапки, который не вписывается в наш дизайн.

Дело в том, что во всех шаблонах сайта okis.ru, где есть закругленные углы , шапка состоит из двух частей: из основной картинки , которую мы загрузили и из контура шапки . Давайте поменяем контур шапки. Зайдите снова в пункт «Загрузка фото» в панели управления сайта и загрузите там файл shapka_kontur.png . Перед загрузкой контура шапки не забудьте снять галочку с «Уменьшить размер изображение до 500 х 500 px». В админке нет кнопки «Контур шапки», поэтому мы добавим стили вручную для данного элемента. В редакторе CSS с новой строчки нам нужно прописать следующий код:

div.art-header-png {background: url(ПУТЬ_К_ФАЙЛУ/ shapka_kontur.png );}

В моем случае путь к файлу контура шапки такой:
Поэтому я прописываю следующий код:
div.art-header-png {background: url(/img/cocktail60/shapka_kontur.png );}
Не забывайте о том, что Ваш путь к файлу отличается от моего.

Сохраните изменения.

Если Вы обновите наш сайт, то увидите, что синих уголков больше не наблюдается.

Теперь Вы знаете, как поменять шапку сайта в конструкторе сайтов ОКИС. В следующем уроке Вы узнаете, как поменять низ сайта на okis.ru .

Дополнительные уроки по созданию и ведению сайта на OKIS:
Урок№9. Как организовать общение на сайте, сделанном на okis.ru
Урок№10. Как активировать сайт на okis.ru с помощью WebMoney
Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы

Здравствуйте уважаемые друзья! Как правило, новички выбирают простой шаблон сайта, но рано или поздно возникает необходимость изменить шапку. Вопрос простой, но многие новички не знают, как изменить шапку сайта WordPress. Данная статья отвечает на этот вопрос.

Простой шаблон сайта, замена шапки сайта

В момент создания сайта (блога) знаний не было никаких. Поэтому был выбран очень простой шаблон сайта WordPress, включая и шапку сайта. Вместе с тем, в шапке было две картинки:

• верхняя картинка представляла собой простой прямоугольник, закрашенный под цвет общего шаблона;
• нижняя картинка шапки представляла изображение часов и также была закрашена под цвет общего шаблона, так называемое «Изображение заголовка».

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

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

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

Как изменить шапку сайта? Итак, по порядку. После удаления изображения заголовка, было решено наложить картинку в виде монет в шапку сайта и сделать надпись. Как это делается, отражать в этой статье не буду, это отдельная тема. Но для общего понимания процесса коротко опишу.

Перед началом замены шапки сайта, нам необходимо узнать адрес расположения картинки. Если Вы работаете в браузере Mozilla Firefox, необходимо навести на шапку (картинку) мышкой и нажать правую кнопку мыши, в диалоговом окне нажимаем «Открыть фоновое изображение».

В новом окне открывается изображение шапки сайта. В адресной строке браузера (вверху) прописан адрес нашей шапки сайта (картинки). Адрес моей шапки выглядит так: копируем и сохраняем этот адрес.

Теперь мы видим, где лежит наша картинка на хостинге: папка wp-content; папка themes; папка zeestyle; папка imagis и наконец, название картинки — header_bg.png. Это нам пригодится в будущем.

В браузере Google Chrome адрес узнается почти также. Наводим мышкой на шапку сайта, нажимаем правой кнопкой мыши, в диалоговом окне выбираем «Копировать URL картинки», также копируем и сохраняем ссылку. Бывают шаблоны, где картинки открываются более хитрым способом.

Далее открываем картинку в новом окне и можем с ней работать. Можно редактировать её в фотошопе или другом редакторе для изображений. Работа с моей шапкой сайта выполнялась в программе Pixlr (это онлайн фотошоп). Подробнее об этом читайте в статьях « » и « «.

После завершения работы над картинкой, её надо сохранить с тем же расширением и теми же геометрическими размерами, что и старая картинка. Для сохранения названия отредактированную картинку переименовываем (я делаю это в Total Commander) и присваиваем ей имя header_bg.png. Это имя взято из вышеприведенной ссылки (у каждого имя будет своё).

Замену картинки (шапки) сайта можно сделать либо через FTP, или напрямую на сервере, я делал напрямую. Для этого заходим на наш хостинг, открываем наш сайт, открываем папку public_html, папку wp-content, themes, zeestyle, images и находим нашу шапку (картинку) — header_bg.png.

Удаляем найденную картинку, а на её место закачиваем новую отредактированную картинку. Обновляем и идем на сайт, тоже его обновляем и видим, что наша отредактированная шапка (картинка) установлена. Все очень просто — замена шапки сайта выполнена.

Как уже говорилось в начале статьи, моя шапка установилась не только в верхней части страницы сайта, а и в футере.

Причина была найдена и устранена. Дело в том, что мой шаблон в шапке и в футере представлен прямоугольниками, которые просто закрашены темно-синим цветом, под цвет основного шаблона. Так вот оказывается, что источником шапки и футера являлась одна и та же картинка (смотрите ссылку выше), поэтому изменение картинки шапки меняет и изображение футера.

Для решения этой проблемы надо разделить ссылки, сделать отдельно картинку для шапки и отдельно для футера. Для этого возвращаемся в админпанель нашего сайта, заходим «Внешний вид», «Редактор» и выбираем «Стили», «Таблица стилей» (style.css).

Находим footer и видим там название нашей картинки в строке — background: url(images/header_bg.png) no-repeat #1d4c82; Предварительно код «Таблицы стилей» лучше сохранить. Если допустите ошибку, всегда сможете вернуться в исходное состояние.

Мы помним, что header_bg.png это название картинки нашей шапки. Теперь в коде вместо header пишем footer (смотрите скрин),

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

На всякий случай картинку футера я положил на сервер, возможно в будущем буду редактировать. Для этого была взята картинка шапки до переделки и переименована в Total Commander – вместо header_bg.png пишем footer_bg.png и закачиваем её на хостинг. Картинку закачиваем в папку images, туда же, где находится картинка нашей шапки.

Конечно, такая ситуация может возникнуть не на всех шаблонах, но шаблоны, имеющие в шапке и футере простую заливку (как у меня) будут иметь схожесть и этот метод можно будет применить. Если знаешь, то работу можно сделать за пару минут. Как видим шаблон сайта хоть и простой, но пришлось повозиться, прежде чем понять, как изменить шапку сайта.

С уважением, Иван Кунпан.

P.S. Для правильно создания блога, правильного его продвижения, нужно всё делать в строгой последовательности. Такая последовательность показана в моей интеллект карте, которую я разработал на собственном опыте. . Полезной будет и , Вы можете скачать также бесплатную книгу «Как написать статью для блога».

Получайте новые статьи блога прямо себе на почту. Заполните форму, нажмите кнопку "Подписаться"

Поскольку многие, кажется, постоянно спрашивают, как изменить некоторые части заголовка стиля prosilver, я решил написать эту статью. Если кто-то посчитате, что нужно что-либо добавить, пожалуйста, дайте мне знать.
Как всегда, не забывайте делать резервные копии ваших файлов до их редактирования.

Не забудьте обновить соответствующий компонент стиля после того, как вы сделали все изменения. Для этого зайдите в Админиcтраторский раздел => вкладка Стили => prosilver (шаблоны или темы) и нажмите Обновить.

Добавить собственное изображение в заголовок

1. Прежде всего загрузите ваше изображение в папку styles/prosilver/theme/images/
2. Откройте файл styles/prosilver/theme/common.css
   Найдите:
   .headerbar { background: #ebebeb none repeat-x 0 0; color: #FFFFFF; margin-bottom: 4px; padding: 0 5px;

   Добавьте после найденного:
   height: 100px;

3. Измените высоту в соответствии с вашим изображением.
   Откройте файл styles/prosilver/theme/colours.css
   Найдите:
   

   Измените имя файла bg_header.gif на имя файла вашего изображения.

4. 
   Найдите:
   
   
   Перед найденным, добавьте:
   

   Примечание: Высота должна быть указана на 10 пикселей меньше высоты вашего изображения!

   Найдите:
   {L_SEARCH_ADV} {S_SEARCH_HIDDEN_FIELDS}

   Перед найденным, добавьте:
   

5. Обновите тему и шаблоны.

Удалить логотип сайта

1. 
   Откройте файл styles/prosilver/template/overall_header.html
   Найдите и удалите код:
   {SITE_LOGO_IMG}
2. Обновите шаблоны.

Удалить Название и описание сайта

Откройте файл styles/prosilver/template/overall_header.html
Найдите и удалите код:

{SITENAME}

{SITE_DESCRIPTION}

Удалить окно поиска

1. 
   Откройте файл s tyles/prosilver/template/overall_header.html
   Найдите и удалите код:
   
   
   {L_SEARCH_ADV} {S_SEARCH_HIDDEN_FIELDS}
2. Обновите шаблоны.

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

Этот способ основан на следующей статье автора pentapenguin : Knowledge Base - Adding a Random Header Image
Он поможет отображать случайный фон в заголовке, а не логотип, как указано в упомянутой статье.

1. Создайте собственные изображение и назовите их следующим образом: header_random_1.EXT (где EXT - тип файла, gif, png, jpg и т.п., учтите, что все файлы должны быть одного типа.)
2. Загрузите ваши файлы в папку images styles/prosilver/theme/images/ .
3. Откройте файл includes/functions.php .
   Найдите:
   "T_STYLESHEET_NAME" => $user->theme["theme_name"],
   Добавьте после найденного:
   "RANDOM_HEADER" => mt_rand(1, NUMBER-OF-IMAGES),
   Замените NUMBER-OF-IMAGES на количество изображений, созданных вами.
4. Откройте файл style.php.
   Найдите:
   "{S_USER_LANG}" => $user["user_lang"]
   Замените найденное на:
   "{S_USER_LANG}" => $user["user_lang"], "{RANDOM_HEADER}" => mt_rand(1, NUMBER-OF-IMAGES)

   Перед заменой вместо: NUMBER-OF-IMAGES поставьте количество созданных вами изображений.

5. Откройте файл styles/prosilver/theme/colours.css .
   Найдите:
   .headerbar { background-color: #12A3EB; background-image: url("{T_THEME_PATH}/images/bg_header.gif"); color: #FFFFFF; }
   Замените найденное на:
   .headerbar { background-color: #12A3EB; background-image: url("{T_THEME_PATH}/images/header_random_{RANDOM_HEADER}.EXT"); color: #FFFFFF; }
   Смените EXT на используемый вами тип файлов изображений.
6. Обновите тему.

Заменить значок "Изменить размер шрифта" на окно поиска

1. 
   
   Найдите:
   
2. {L_CHANGE_FONT_SIZE}

Замените найденное на:

3. 
   {S_SEARCH_HIDDEN_FIELDS}
4. Откройте файл styles/prosilver/theme/common.css .
   Найдите:
   #search-box { color: #FFFFFF; position: relative; margin-top: 30px; margin-right: 5px; display: block; float: right; text-align: right; white-space: nowrap; /* For Opera */ }
   Замените найденное на: #search-box { color: #FFFFFF; position: relative; display: block; text-align: right; white-space: nowrap; /* For Opera */ line-height: 1em; }
5. Обновите тему и шаблоны.

Добавить пункт поиска в меню

1. 
   Откройте файл styles/prosilver/template/overall_header.html .
   Найдите:
   
2. {L_FAQ}

Добавьте после найденного:


3. {L_SEARCH}
4. Обновите шаблоны.

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

Изменить шапку Вашего сайта в «Нубексе» очень легко: для этого зайдите в админку, в меню управления (слева) выберите раздел «Оформление» , а в нем — пункт «Шапка страницы» .

Перед Вами появится список доступных шапок. Положитесь на свой художественный вкус и выбирайте: в Вашем распоряжении несколько десятков готовых шаблонов. Для выбора шапки просто кликните на понравившийся вариант: система автоматически сохранит изменения, и шапка на сайте отобразится в новом дизайне.

Также Вы можете выбрать пустую шапку (без фона) , если хотите сконцентрировать внимание пользователей на логотипе и текстовой информации.

Как сделать собственную шапку сайта

Если ни один из готовых шаблонов Вам не подошел, можно создать шапку самостоятельно. Для этого найдите в списке пункт «Собственная шапка» и нажмите кнопку «Редактировать» .

В первую очередь нужно загрузить на сайт изображение, которое Вы хотите использовать в качестве шапки. Для этого нажмите кнопку «Загрузить» , выберите на своем компьютере нужный файл и нажмите «Открыть» .

Обратите внимание: допустимые форматы файла для загрузки — jpeg, jpg, gif, png, ico ; максимальный размер — 10 Мб ; в высоту изображение должно иметь не меньше 90 пикселей . Верхней границы для высоты шапки нет, но не стоит грузить слишком большие изображения. Иначе шапка займет большую часть экрана, не оставив места для информации самих страниц. Как правило, высоты в 250-300 пикселей достаточно для размещения логотипа, слогана, адреса и контактных данных.

После загрузки изображения настройте выравнивание шапки : по центру, слева или справа. Особенно это важно, когда ширина загруженного изображения сильно превышает ширину колонки (940 пикселей) . В этом случае от выравнивания будет зависеть, какие части картинки отобразятся в шапке, а какие — нет.

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