Wordpress картинка в шапке

автор: moisvet | категория: web-Сайты | Просмотров: 21244

Wordpress картинка в шапке

Как быстро сменить картинку в шапке (header) сайта.


Данная Статья по Wordpress рассчитана на чайников, поэтому опишу все быстро и просто, в картинках (скриншотах) с пояснениями.
Замена картинки в шапке займет у вас не больше 5 минут. Поехали..!


Я надеюсь, Вы уже скачали Движок и распаковали файлы.
Заходим в директорию Темы движка Wordpress, адрес директории на картинке ниже!

Wordpress картинка в шапке


Открываем файл файл style.css, увидите что-то похожее на это:


Wordpress картинка в шапке



Нажимаем Ctrl + F и вводим в поиск слово: header – этот стиль отвечает за шапку движка.

Wordpress картинка в шапке



Видим следующее:

Wordpress картинка в шапке


1. background: #fff;

И т.д. Нам важно именно эта строчка. Может быть так же:

2. background: url(image.jpg); В моем варианте nin.gif

Вообщем:

Если у вас 1-й вариант, то заменяем его на 2-й) Если 2-й – хорошо!

А если что-то другое – пишите комментарий – помогу!

Так ладно! Теперь копируем картинку в папку, где лежал style.css, после этого
В том же style.css, заменяем background: url(Название вашей картинки); Например pic.jpg.
Все готово! Обновляем страничку в браузере.

Надеюсь, как пользоваться Фотошопом, если картинка слишком большая, маленькая, кривая и прочее пояснять не надо.
Все – удачи.

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

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
Комментариев: 0
Публикаций: 0
Имя:

#1 Андрей

Гости | 1 апреля 2012 02:41 | Регистрация: --
Цитировать
спасибо за статью, а можно узнать как поменять картинку в самом шаблоне поподробнее а то я вообще чайник в этих делах :)
Комментариев: 227
Публикаций: 336
Имя: Александр

#2 moisvet

Администраторы | 1 апреля 2012 18:10 | Регистрация: 7.09.2010
Цитировать
Андрей, наиболее простой вариант, который мне приходит в голову: щелкнуть правой по картинке, которую надо заменить и выбрать - сохранить изображение. Так мы узнаем название нашей картинки.
Далее поиском по имени находим эту картинку в папке шаблона. Создаем новую картинку с таким же именем - заменяем.
Если у вас есть ICQ или скайп - пишите, помогу.
Комментариев: 0
Публикаций: 0
Имя:

#3 offefauro

Гости | 29 апреля 2012 02:21 | Регистрация: --
Цитировать
Ух ты, мне понравилось!
Комментариев: 0
Публикаций: 0
Имя:

#4 Дмитрий

Гости | 2 сентября 2012 15:27 | Регистрация: --
Цитировать
Здравствуйте. Прочитал статью - у меня не получилось. Вот такой вот исходный код.Помогите.

#header { height: 109px; }

#header h1 {
font-family: Arial,Helvetica,Sans-serif;
font-size: 40px;
font-weight: bold;
letter-spacing: -1px;
margin-bottom: 0 !important;
padding: 0 10px;
text-shadow: 0 1px 0 #333333; }

#header h1 a, #header h1 a:visited {
color: #FFFFFF;
text-decoration: none; }

#header h2 {
color: #FFFFFF;
font-family: Arial,Helvetica,Sans-serif;
font-size: 12px;
padding-left: 10px;
text-shadow: 0 1px 0 #333333; }
Комментариев: 227
Публикаций: 336
Имя: Александр

#5 moisvet

Администраторы | 6 сентября 2012 00:45 | Регистрация: 7.09.2010
Цитировать
Дмитрий, адрес вашего сайта скиньте мне в личку. Погляжу на верстку, потом подскажу что да как.
Комментариев: 0
Публикаций: 0
Имя:

#6 Елена

Гости | 5 октября 2012 21:45 | Регистрация: --
Цитировать
Подскажите, как сделать в резиновом шаблоне Admired 1.2 шапку, чтобы рисунок был посередине
Комментариев: 0
Публикаций: 0
Имя:

#7 Ольга

Гости | 18 октября 2012 23:41 | Регистрация: --
Цитировать
а если нет header в стилях? как ее поменять? шапку-то)
Комментариев: 0
Публикаций: 0
Имя:

#8 Александр

Гости | 21 января 2013 15:44 | Регистрация: --
Цитировать
у меня нету такого кода, как у вас в скриншоте.. а как сделать анимированную шапку?
Комментариев: 0
Публикаций: 0
Имя:

#9 Сергей

Гости | 1 февраля 2013 14:00 | Регистрация: --
Цитировать
Кому несложно, помогите мне сменить рисунок, в шапке сайта. ICQ 275163260
Комментариев: 227
Публикаций: 336
Имя: Александр

#10 moisvet

Администраторы | 3 февраля 2013 13:37 | Регистрация: 7.09.2010
Цитировать
Вполне возможно, что с 2010-г года что-то могло измениться в кодах, но смысл чаще всего остался тем же. Сейчас уже сам браузер может показать вам какой именно код нужно править, достаточно нажать правой по элементу на вэб-страничке и выбрать пункт "проинспектировать элемент " в опере или же "просмотр кода элемента" в Хроме. Там же можно редактировать каждый параметр и смотреть, что изменилось.
Для того, чтобы работать с шапками, у которых другой код - нужно непосредственно смотреть сам сайт, а так на вскидку я не скажу чего и где там править)

Насчет анимации в шапке, просто вставляете не jpg, а gif png или другую картинку в формате, который поддерживает анимацию. Чаще всего это gif, т.к. он самый легкий либо же флэш.
Комментариев: 0
Публикаций: 0
Имя:

#11 Валентина

Гости | 2 марта 2013 14:17 | Регистрация: --
Цитировать
Помогите, добрые люди!
Залила на хостинг в нужную папку лого, воспользовалась настройками самой темы (сменить логотип) и в результате мучений -текстовая надпись. Что я делаю не так?
Комментариев: 0
Публикаций: 0
Имя:

#12 RacetadwzVD

Гости | 25 марта 2014 08:18 | Регистрация: --
Цитировать
Здравствуйте очень понравился ваш сайт moisvet.net и хочу разместить
на месяц рекламу. Готов платить 1500$, половину сразу, половину
спустя месяц. Как вы на это смотрите? Вот ссылка на мою группу:vk.com/shkafi_kupe_kiev_na_zakaz
Жду ответ на почту
Комментариев: 0
Публикаций: 0
Имя:

#13 Владислав

Гости | 31 марта 2014 18:36 | Регистрация: --
Цитировать
Здравствуйте!
У меня в файле стили.ксс вот такой код:

/* #Header */


#header {clear: both;margin: 0 auto;padding: 0;border-bottom: none!important;position: relative;z-index: 1;}
#head-content {margin: 0 auto;padding:20px 0;position: relative; position:relative;min-height:90px;z-index:98;}
.head-strip{border-top:5px solid #B6B4B0;}
#logo {margin: 20px 10px 10px 5px;text-align:left;color:#555;float: left;}
#logo h1, #logo h2 {font-size: 32px;margin: 0 !important;line-height: 35px !important;}
#logo a {font-weight: 700;color: #333;padding: 0px;margin: 0px;text-decoration: none;}
#header-banner468{float: right;
border: 1px solid #F3F3F3;
position: relative;}

Помогите пожалуйста, все перепробовал) Как поставить картинку в шапку?
Комментариев: 0
Публикаций: 0
Имя:

#14 надежда 234

Гости | 3 декабря 2014 15:45 | Регистрация: --
Цитировать
Здравствуйте. А у меня файл где должны быть стили совсем пустой. Такое может быть? И что делать?
Комментариев: 0
Публикаций: 0
Имя:

#15 MichaelTody

Гости | 30 января 2015 07:53 | Регистрация: --
Цитировать
Для дам детство завершается тогда, когда зовут не есть, а готовить...
Комментариев: 0
Публикаций: 0
Имя:

#16 alexoaJor

Гости | 26 апреля 2015 20:58 | Регистрация: --
Цитировать
Скачать cs source
Комментариев: 0
Публикаций: 0
Имя:

#17 Tiscep

Гости | 20 июня 2015 12:30 | Регистрация: --
Цитировать
Я извиняюсь, но, по-моему, Вы не правы. Пишите мне в PM.
Комментариев: 0
Публикаций: 0
Имя:

#18 legorFelp

Гости | 18 мая 2017 16:51 | Регистрация: --
Цитировать
, .

:

- .
- . .
- .

5500 . .

>> www.obrabotka-zakazov.tk <<
Комментариев: 0
Публикаций: 0
Имя:

#19 regorFelp

Гости | 30 мая 2017 13:52 | Регистрация: --
Цитировать
, !

! ;
- !
: !
: !
: - !

. > www.realno-money.tk < .
Комментариев: 0
Публикаций: 0
Имя:

#20 qElenaFelp

Гости | 1 июня 2017 00:38 | Регистрация: --
Цитировать
, .

, , .

, 45 1 ,

. > www.oplata-vklike.tk <

.
Комментариев: 0
Публикаций: 0
Имя:

#21 rElenaFelp

Гости | 1 июня 2017 19:17 | Регистрация: --
Цитировать
, .

, , .

, 45 1 ,

. > www.oplata-vklike.tk <

.
Комментариев: 0
Публикаций: 0
Имя:

#22 qegorFelp

Гости | 2 июня 2017 05:50 | Регистрация: --
Цитировать
Airline-online

/

, 11 000 .

:

-
- , , , .
- . . .
- .
- .

. > airline.zarplatt()ru <

, !
Комментариев: 0
Публикаций: 0
Имя:

#23 tegorFelp

Гости | 9 июня 2017 16:32 | Регистрация: --
Цитировать
Airline

/

, 11 000 .

:

-
- , , , .
- . . .
- .
- .

. > www.airline-rabota.tk <

, !
Комментариев: 0
Публикаций: 0
Имя:

#24 mElenaFelp

Гости | 13 июня 2017 19:03 | Регистрация: --
Цитировать
, .

, , .

, 45 1 ,

. > www.oplata-vklike.tk <

.
Добавление комментария
Ваше Имя:
Ваш E-Mail:
Код: Кликните на изображение чтобы обновить код, если он неразборчив
Введите код:

Полезные статьи

Вопрос

Как сделать сайт более интересным?

Статистика