Настраиваем шапку в Twenty Ten, Twenty Eleven

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

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

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

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

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

настройка темы wordpress twentyten

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

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

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

ковыряемся в теме twenty ten

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

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

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

изменяем размер шапки в twentyten

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

 

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,

 

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

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

меняем цвет пунктов меню в теме twenty ten

Для этого все в том же файле 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 до изменений ширины меню

После:
twenty ten после изменений ширины меню

В теме Twenty Ten:

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

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

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

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

настраиваем twenty ten

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

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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Настраиваем шапку в Twenty Ten, Twenty Eleven: 16 комментариев

  1. Вячеслав

    Добрый день. Очень полезная информация !!!
    У меня вопрос с подсветкой меню при нахождении на странице соответствующей выбраной рубрике.
    Когда перехожу с Главной на Интересное о камбоджа – выбраная рубрика подсвечивается.
    Когда иду дальше, например с Интересное о камбоджа на Железные дороги – рубрика меню Интересное о камбоджа НЕ подсвечивается.

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

    С уважением,
    Слава.

  2. Татьяна

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

  3. Jurij

    Отлично! Цвет менюшки поменял легко. В стилях нашел без проблем.
    Надо поменять название меню “Главная” на другое. Маюсь уже второй день. Все файлы в редакторе перерыл, ничего похожего не нашел.
    Помогите!!!

  4. Константин

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

    Спасибо!

Добавить комментарий для Сергей Отменить ответ