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

                                                                                                                                                                                    

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

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

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

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

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

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

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

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

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

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

В новом окне открывается изображение  шапки сайта. В адресной строке браузера (вверху) прописан адрес нашей шапки сайта (картинки). Адрес моей шапки выглядит так:                                                                                                                https://biz-iskun.ru/wp-content/themes/zeestyle/images/header_bg.png      копируем и сохраняем этот адрес.

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

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

Далее открываем картинку в новом окне и можем с ней работать. Можно редактировать её в фотошопе или другом редакторе для изображений. Работа с моей шапкой сайта выполнялась в программе Pixlr (это онлайн фотошоп). Подробнее об этом читайте в статьях «Онлайн редактор 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. Для правильно создания блога, правильного его продвижения, нужно всё делать в строгой последовательности. Такая последовательность показана в моей интеллект карте, которую я разработал на собственном опыте. Скачать интеллект карту можно с блога. Полезной будет и интеллект карта по написанию статей, Вы можете скачать также бесплатную книгу «Как написать статью для блога».