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

Скачать исходники для статьи можно ниже

1. Меняем размер шапки

Рассмотрим на примере темы Twenty Ten.

Входим в панель управления сайтом на движке wordpress, в пункт “Внешний вид” (Appearence) и его подпункт “Шапка” (Header) и видим следующее:

Как видите размер шапки определен в теме размерами: 940 × 198 и изменить эти параметры мы никак не можем, аналогично с темой Twenty Eleven.

Чтобы изменить эти параметры, нам необходимо войти в файл functions.php темы – для этого заходим в пункт “Внешний вид” – “Редактор” и справа в списке шаблонов темы выбираем файл functions.php.

Теперь для поиска данных цифр 198 или 940 легче всего воспользоваться функцией поиска браузера, например для Firefox, в верхнем меню браузера нужно выбрать пункт “Правка” и его подпункт “Поиск”, далее вбиваем туда цифру 198 и ищем ее в коде файла functions.php.

И меняем данную величину на нужную нам, например на 300 и незабываем нажать на кнопку “Сохранить изменения” (Update File).

Как видите рядышком прописана и ширина шапки в 940 px, можете ее также поменять, если нужно.

Теперь если мы войдем в пункт “Внешний вид” – “Шапка”, то увидим, что нам уже предлагают загрузить изображение 940*300.

Все работает!

2. Меняем цвет менюшки.

Например нам хочется поменять цвет меню с черного на зеленый.

За меню в теме Twenty Ten (аналогично и для темы Twenty Eleven) отвечает блок “access” в файле темы style.css.

Чтобы открыть файл style.css – выбираем в панели управления пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл style.css.

Далее опять с помощью функции поиска браузера находим в коде блок access.

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}
#access .menu-header,

 
За цвет отвечает строчка background: #000 – изначально стоит черный (000), меняем его на зеленый (#005600) и получаем следующий код:
 

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #005600;
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}
#access .menu-header,

И тогда наш сайт будет выглядет следующим образом:

 

Пойдем дальше и изменим цвет выделения пунктов меню с серого на какой-нибудь светло-зеленый (029802).

Для этого все в том же файле style.css находим:

#access li:hover > a,
#access ul ul :hover > a {
	background: #333;
	color: #fff;
}

И меняем в нем цвет с “333” на “029802” и получаем следующее:

#access li:hover > a,
#access ul ul :hover > a {
	background: #029802;
	color: #fff;
}

Здесь же, если поменять параметр color: #fff, например на color: #fef78c , то цвет ссылки при наведении на пункты меню измениться с белого (fff) на желтый (fef78c).

 
3. Устанавливаем слайдер в шапке.
Для этого лучше воспользоваться плагином Header Image Slider, как его установить и настроить, я писал в одной из моих предыдущих статей, жмите на ссылку и читайте.

PS:
Вопрос: “А можно ли вставить маленькую картинку-логотип в левом верхнем углу заголовка, перед названием?”

Ответ: Вставить картинку перед заголовком можно следующим образом в любой стандартной теме wordpress:
1. Заходим в панель управления wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, после чего справа в списке шаблонов выбираем файл header.php и в нем ищем следующий код (который выводит название сайта):

<?php bloginfo( 'name' ); ?>

2. Вот перед ним вам и нужно поставить картинку с помощью тега img:

<img src="https://mnogoblog.ru/wp-content/uploads/2014/07/flashandroid3-100x100.gif" alt="" width="50" height="50" class="" />

 
 
PS:
Вопрос: А как растянуть верхнее меню по ширине сайта?

Ответ:

До:

После:

В теме Twenty Ten:

1. Нужно открыть файл стилей style.css – для этого зайдите в панель управления (админка) wordpress, в левом меню выберите “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов найдите файл style.css.

2. Найдите в файле стилей (style.css) следующий код:

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}

При поиске кода советую воспользоваться функцией поиска, встроенной в ваш браузер:

И замените его на следующий:

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 0 0 -20px;
	width: 980px;
}