Как изменить картинку в шапке wordpress блога.

  • 17 Февраль 2011
  • Артем
  • 49 комментариев


Итак, у вас прекрасный wordpress шаблон и вы хотите придать ему немного индивидуальности. Можно поменять цвет и размер шрифта, подредактировать сайдбар и т.д. Но, если вы хотите сделать ваш блог ярким и запоминающимся, то стоит подумать о более существенных изменениях в Вашем wordpress шаблоне. Например изменить изображение в шапке вашего блога.Для того чтобы изменить изображение в шапке Вашего wordpress шаблона нужно проделать несколько очень простых шагов.

1) Сначала нужно поработать с текущим изображением, находящимся в шапке вашего блога. Для этого откроем папку, в которой хранятся все темы вашего блога и найдем тему в которой нужно изменить изображение в шапке. По умолчанию изображения находятся по адресу…..wp-content\themes\ВАША ТЕМА\images. Картинку, находящуюся в шапке блога мы обнаружили. Теперь необходимо заняться найденным нами изображением. Наведем на него курсор мышки и увидим такие данные как размеры в пикселях, размеры в килобайтах и тип изображения. Из этого нам необходимы только размеры в пикселях.

2)Размер мы обнаружили. Теперь необходимо поработать с изображением, которое нужно вставить в шапку вашего шаблона. Нам понадобится редактор изображений. Я предлагаю photoshop (в данном случае подойдет даже мини версия, которая весит всего лишь 25 мб).

3) Открываем наше изображение в photoshop и проделываем следующие манимуляции.  Нажимаем кнопку изображение, размер изображения, убираем галочку сохранить пропорции и прописываем в блоке размерность, в полях длина и ширина прописываем размерности, которые мы определили в пункте 1. Нажимаем подтвердить (“да) и получаем полностью подготовленное для вставки в шапку нашего блога изображение.

 

4) Теперь нам осталось лишь поменять старое изображение на новое, которое мы только что подготовили. Меняем (или просто добавляем) в папку с изображениями наше изображение. Заходим в файл стилей (style.css), находим в этом файле наше старое изображение, например top1.jpg и заменяем на имя нашего нового изображения. У вас получится строка вида background:#fff url(images/top5.jpg);

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

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

С помощью таких нехитрых действий вы сделаете свой блог уникальным и запоминающимся для посетителей.

Спасибо за добавление этой статьи в:

Комментариев: 49

    • Ольга Ladyemansipe
    • Февраль 17 2011 в 18:14

    Я догадывалась что там так все устроенно, но ты изложил все просто великолепно! Еще остается добавить что для шапки лучше использовать вектор в исходнике eps чтобы картинка получилась качественной.

    Ответить

    • Ольга Шергина
    • Март 6 2011 в 19:00

    Спасибо большое, благодаря Вашей статье у меня все получилось!

    Ответить

    Tramp
    Март 7 2011 в 12:49

    Пожалуйста, Ольга. Вообще, если немного разобраться, то wordpress интуитивно прост в использовании.

    Ответить

    Ольга Шергина
    Март 8 2011 в 20:34

    Я тоже думаю, что wordpress не так сложно изучить! Но один знакомый программист уговаривает отказаться и самой код прописывать…

    Ответить

    Tramp
    Март 9 2011 в 13:15

    Если вы имеете в виду делать свою систему управления контентом, то это довольно сложно и требует знаний в php программировании.

    Ответить

    Ольга Шергина
    Март 9 2011 в 13:55

    Да, для меня это пока сложно, так что пользуюсь всеми возможностями wordpress!

    Ответить

    Юлия
    Апрель 3 2016 в 1:17

    Вордпресс – отличная система управления сайтом, гибкая. Выбрала ее еще в 2009 году, и не жалею.

    Ответить

    • liza
    • Апрель 6 2011 в 9:56

    Здравствуйте.
    Сделала всё так, как вы и описывали. Но, что самое потрясающее – не получилось! Я нашла имя файла, заменила его именем своего файла, поменяла в папке темы.. Собственно только в php не полезла – не разбираюсь. С css неплохо знакома, так что понимаю что к чему.

    … и всё же… результата ноль. Может быть подскажете, где я могла ошибиться?)

    Ответить

    Tramp
    Апрель 6 2011 в 14:17

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

    Ответить

    • Вера
    • Май 23 2011 в 11:17

    ” Меняем (или просто добавляем) в папку с изображениями наше изображение.”

    Что-то не могу понять, в какую папку с изображениями?? В медиафпйлы?

    Ответить

    Tramp
    Май 23 2011 в 11:26

    Вам нужно зайти в папку темы Вашего блога и добавить туда нужное изображение.
    Путь до этой папки выглядит так:
    /steepbend.ru/wp-content/themes/Ваша тема/images

    Ответить

    Вера
    Май 23 2011 в 11:50

    Но как там вставить или поменять картинку? У меня там даже никаких кнопок для управления нет… “Добавить” или “Удалить”… Ничего…

    Ответить

    Tramp
    Май 23 2011 в 11:58

    Загрузите папку темы себе на компьютер, выполните необходимые действия и загрузите обратно на хостинг.

    Ответить

    • Вера
    • Май 23 2011 в 12:18

    Спасибо!!!-)))

    Ответить

    • Tramp
    • Май 23 2011 в 13:35

    Пожалуйста)

    Ответить

    • Мария [WiseMary]
    • Август 22 2011 в 5:52

    У меня все получилось! Правда, пришлось покопаться в файле стилей и шапка у меня состояла из двух частей.
    Спасибо Вам огромное!

    Ответить

    Tramp
    Август 22 2011 в 7:27

    Пожалуйста) Если что, обращайтесь.

    Ответить

    • Александр
    • Ноябрь 18 2011 в 13:40

    Спасибо огромное, у меня все получилось, а до этого долго не мог разобраться, а теперь все отлично!!!

    Ответить

    • Николай
    • Декабрь 24 2011 в 11:08

    Автору спасибо за труд, но хотя я и все делал по инструкции, смены картинки не произошло. Фоновая картинка загружена в соответствующую папку, в style.css прописано новое имя.

    Ответить

    • Яна
    • Январь 31 2012 в 21:05

    Спасибо…Успехов…

    Ответить

    • Татьяна
    • Апрель 1 2012 в 19:03

    Скажите пожалуйста, а если там нет картинки, а только фон. Как можно поверх фона или вместо него вставить картинку? Вот на этом сайте http://merisabell.ru я хочу вместо красного фона в шапке вставить картинку. Подскажите пожалуйста, что нужно изменить в коде.

    Ответить

    Tramp
    Апрель 2 2012 в 11:51

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

    Ответить

    • Роман
    • Ноябрь 13 2012 в 18:39

    Всё сделал, как Вы написали. И тема даже установилась. Но…. Вместо моей картинки в шапке откуда-то взялась старая, которая и была. Только откуда она, если я ее удалил. Что посоветуете? Заранее, спасибо.

    Ответить

    Tramp
    Ноябрь 14 2012 в 14:50

    Перезапустите браузер и у Вас появится новая картинка. (Если не появилась полностью очистите кеш и опять перезапустите).

    Ответить

    Роман
    Ноябрь 15 2012 в 11:39

    Спасибо. Так и сделал. И всё заработало. )))

    Ответить

    Tramp
    Ноябрь 15 2012 в 12:19

    Пожалуйста.

    Ответить

    • Лёля
    • Июль 20 2014 в 15:23

    Можно изображение прямо из папки блога скинуть, открыть в фотошое и отредактировать, а потом загрузить обратно? Оно же как раз в нужном размере должно открыться

    Ответить

    Артем
    Июль 20 2014 в 18:02

    Естественно можно.

    Ответить

    • Лёля
    • Июль 20 2014 в 15:30

    Не могу найти картинку шапки в изображениях в этой папке

    Ответить

    Артем
    Июль 20 2014 в 18:05

    Лёля, если вы говорите про блог в подписи, то ваши картинки в шапке – это lt-flurl.png и rt-flurl.png, соответственно вместо них и нужно поставить другие. Или вы их уже сами вставили?

    Ответить

    Лёля
    Июль 21 2014 в 8:19

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

    Ответить

    • Лёля
    • Июль 21 2014 в 8:22

    Где находится файл style.css ?

    Ответить

    • Лёля
    • Июль 21 2014 в 9:32

    Во всем разобралась, но шапка у меня вставилась 2 раза. Видимо потому что документа два lt-flurl.png и rt-flurl.png, Какой из них можно удалить?

    Ответить

    Артем
    Июль 23 2014 в 8:59

    Не важно какой – один нужно оставить – это и будет ваша шапка.

    Ответить

    Артем
    Июль 23 2014 в 9:00

    Как вижу вы уже один удалили и шапка у вас стоит:) Если будут вопросы, обращайтесь.

    Ответить

    Лёля
    Июль 28 2014 в 8:49

    спасибо)))

    Ответить

    • елена
    • Сентябрь 15 2014 в 10:20

    Спасибо за статью! У меня такой вопрос.Я хочу убрать код вывода названия блога и описания в шапке блога, т.к. хочу разместить вместо шаблонного хэдера свою картинку с текстом, поэтому надо убрать название и описание. Может быть, вы знаете какой именно убрать? заранее спасибо!

    Ответить

    Артем
    Сентябрь 15 2014 в 12:01

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

    Конечно, при желании вы можете сделать это сами, немного подучите php и кодекс wordpress (или посмотрите в интернете, по вашей ситуации написано множество статей).

    Ответить

    • Екатерина
    • Март 10 2015 в 20:08

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

    Ответить

    Артем
    Март 14 2015 в 16:45

    Екатерина, объясните подробнее, что у вас не получилось?

    Ответить

    Екатерина
    Март 14 2015 в 18:26

    помогите поменять надпись. там стоит МКДОУ, а надо теперь поменять на МБДОУ. И картинку с детьми поменять на собственную( фото садика). помогите пожалуйста. не могу справится с этим шаблоном.

    Ответить

    Артем
    Март 15 2015 в 11:15

    Судя по вашей теме Wooden Fence Kids, там в меню wordpress, вкладка настройки -> Общие -> Заголовок Сайта можно изменить название. Что касается картинки, в фотошопе картинку с фото садика вставьте на место картинки с детьми (или попросите кого – нибудь).

    Ответить

    • Руслан
    • Март 12 2015 в 15:10

    Здравствуйте. Не могу понять куда прописать адрес картинки.. знаю что в бэкграунд, но в хэдер нет этого (тема конструктор)

    /**
    * 4.0 Header
    * —————————————————————————-
    */

    /**
    * 4.1 Site Header
    * —————————————————————————-
    */

    .site-header {
    position: relative;
    }

    .site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
    }

    .site-header .site-title:hover {
    text-decoration: underline;
    }

    .site-title {
    font-size: 60px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
    padding: 58px 0 10px;
    }

    .site-description {
    font: 300 italic 24px “Source Sans Pro”, Helvetica, sans-serif;
    margin: 0;
    }

    Ответить

    Артем
    Март 12 2015 в 16:32

    Здравствуйте, Руслан. Вам придется дописывать расположение картинки отдельно как в шапке, так и в самом файле css (вот хороший учебник, вдруг понадобится wisdomweb.ru/CSS/css-first.php), если не знаете, как конкретно это сделать потренируйтесь на простых темах типа twentyeleven и т.д.

    Ответить

    • Надежда
    • Июнь 1 2015 в 19:14

    Здравствуйте. Все сделала как написано в статье, но картинка не появилась. У меня в шаблоне раньше была картинка, я ее удалила совсем и какое-то время ничего не меняла. Теперь хочу вставить авторскую картинку, но ничего не получается. Помогите мне, пожалуйста. вот адрес сайта http://rusichka.ru/

    Ответить

    Артем
    Июнь 2 2015 в 16:59

    Надежда, у вас сохранился старый вариант шаблона, где все еще было нормально? Если да, то нужно определить адрес изображения в шапке сайта. Для этого ставьте старую тему (где все еще было нормально). Далее нужно в браузере Google Chrome нажать правой кнопкой по картинке, выбрать пункт “Просмотр кода элемента” и в открывшейся странице найти адрес изображения. Там будет что – то типа:

    сайт.ru/wp-content/themes/ВАШАТЕМА/images/НАЗВАНИЕ КАРТИНКИ В ШАПКЕ

    Вместо названия картинки в шапке нужно вставить вашу картинку.

    Если старый вариант шаблона не сохранился, то тоже можно исправить, но придется код восстанавливать. Описанным выше способом сделать намного проще.

    Ответить

    Надежда
    Июнь 2 2015 в 17:39

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

    Ответить

    Артем
    Июнь 2 2015 в 18:00

    Спросите у прошлого владельца, где был взят шаблон. Если он был куплен (а он у вас платный и продается на просторах интернета) и на него есть официальная лицензия, то просто попросите продавца выдать такой – же шаблон (так как он был куплен ранее). При условии, что шаблон был скачан бесплатно, тут либо азы html и css изучать, либо фрилансера просить, чтобы вставил. Также если ваш хостинг – провайдер хранит бэкапы продолжительное время и вы недавно убрали шапку, можно попытаться восстановить бэкап с прошлой шапкой в панели спринтхоста (у вашего хостинга есть в функциях резервное копирование, посмотрите). Можете также написать в тех.поддержку хостинга и спросить про ту дату, когда на блоге была установлена прошлая шапка и вы правок не делали.

    Ответить

    • Антон
    • Январь 17 2016 в 11:27

    Всё получилось, спасибо. Таким же образом ещё что-нибудь подправлю в шапке.

    Ответить

Написать комментарий

  • rss
  • rss
  • rss
  • rss