Шаблон Twenty Twelve. Изменить цвет меню, цвет хедера, футера.

16 марта 2015

Алексей Ершов Просмотров: 5 724

Twenty Twelve изменить цвет меню, хедера, футера

Здравствуйте!

Сегодняшняя статья публикуется в рамках предложения от моего блога: WordPress помощь.

Ко мне обратился читатель блога Михаил и попросил помочь ему с шаблоном Twenty Twelve. Возникшие вопросы: как изменить цвет пунктов меню, фона меню, фона хедера, фона футера. Как добавить меню в футер. Собственно, ответы на эти вопросы будут изложены в данном посте.

Итак, на локальном компьютере я активировал себе шаблон Twenty Twelve.

Меню изначально выглядит вот так:

Все изменения стилей будут делаться в файле /wp-content/themes/twentytwelve/style.css

Удобней всего открывать его локально с помощью вашего любимого редактора (использую сейчас PhpStorm).

Можно открыть файл и через админку WordPress: Внешний вид – Редактор – в правой колонке внизу Стили – Таблица стилей (style.css).

Также можно вносить изменения в файл непосредственно на сервере, используя программу WinSCP.

Как изменить цвет фона меню

В файле style.css найдите описание следующего стиля. Можно искать по ключу “Navigation Menu”. (у меня начиналось в строке 578)


/* Navigation Menu */ 
.main-navigation { 
    margin-top: 24px; 
    margin-top: 1.714285714rem; 
    text-align: center; 
    background-color: yellow; 
}

/* Navigation Menu */

.main-navigation {

margin-top: 24px;

margin-top: 1.714285714rem;

text-align: center;

background-color: yellow;

}

Добавьте в стиль свойство backround-color и задайте ему нужный вам цвет фона меню.

Как изменить цвет активного пункта меню

Если вы находитесь на какой-то странице, например Поддержать блог, то пункт меню, ссылающийся на данную страницу, считается активным. Для него прописан отдельный стиль, и значит этому пункту меню можно задать какой-то другой цвет.

Найдите следующий блок стилей по ключу “current_page_item”.


.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
    color: red;
    font-weight: bold;
}

.main-navigation .current-menu-item > a,

.main-navigation .current-menu-ancestor > a,

.main-navigation .current_page_item > a,

.main-navigation .current_page_ancestor > a {

color: red;

font-weight: bold;

}

Измените значение свойства color на нужное.

Как изменить цвет всех пунктов меню

Найдите следующий код по ключу “.main-navigation li a”


.main-navigation li a {
    border-bottom: 0;
    color: limegreen;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-navigation li a {

border-bottom: 0;

color: limegreen;

line-height: 3.692307692;

text-transform: uppercase;

white-space: nowrap;

}

Задайте нужное значение свойству color. Я присвоил цвет limegreen.

Как изменить цвет отдельного пункта меню я уже писал ранее. В Twenty Twelve можно действовать аналогично.

Как изменить цвет пункта меню при наведении на него указателя мыши

В предыдущем пункте вы нашли фрагмент кода и сразу за ним идет стиль, задающий цвет пункта меню при наведении на него мыши или фокуса (если “ходить” по пунктам меню с помощью клавиши Tab)


.main-navigation li a:hover,
.main-navigation li a:focus {
    color: orange;
}

.main-navigation li a:hover,

.main-navigation li a:focus {

color: orange;

}

Как изменить цвет фона хедера


/* Header */
.site-header {
    padding: 24px 0;
    padding: 1.714285714rem 0;
    background-color: yellow;
}

/* Header */

.site-header {

padding: 24px 0;

padding: 1.714285714rem 0;

background-color: yellow;

}

Добавьте свойство background-color и задайте ему значение.

Как изменить цвет фона футера


footer[role="contentinfo"] {
    border-top: 1px solid #ededed;
    clear: both;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 2;
    max-width: 960px;
    max-width: 68.571428571rem;
    margin-top: 24px;
    margin-top: 1.714285714rem;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 0;
    padding: 1.714285714rem 0;
    background-color: yellow;
}

footer[role="contentinfo"] {

border-top: 1px solid #ededed;

clear: both;

font-size: 12px;

font-size: 0.857142857rem;

line-height: 2;

max-width: 960px;

max-width: 68.571428571rem;

margin-top: 24px;

margin-top: 1.714285714rem;

margin-left: auto;

margin-right: auto;

padding: 24px 0;

padding: 1.714285714rem 0;

background-color: yellow;

}

Добавьте свойство background-color и задайте ему значение.

Изменить фон всей страницы

Найдите в style.css (ближе к концу файла) вот этот стиль и задайте нужный background-color


/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
body {
    background-color: #fff;
}

/* Minimum width of 960 pixels. */

@media screen and (min-width: 960px) {

body {

background-color: #fff;

}

Изменить цвет белого “листа” шаблона Twenty Twelve.


/* Page structure */
.site {
    padding: 0 24px;
    padding: 0 1.714285714rem;
    background-color: #fff;
}

/* Page structure */

.site {

padding: 0 24px;

padding: 0 1.714285714rem;

background-color: #fff;

}

Как разместить меню в футере

Если вы хотите сделать в футере шаблона Twenty Twelve разместить такое же меню, как и в хедере, то нужно из файла шаблона header.php скопировать код вывода меню и добавить его в footer.php.

Оба файла расположены в папке шаблона: /wp-content/themes/twentytwelve/

Итак, в файле header.php, практически в самом низу, найдите фрагмент кода:


<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation –>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

</nav><!-- #site-navigation –>

Скопируйте его (Ctrl+C) и вставьте его в файл footer.php

после <footer id=”colophon” role=”contentinfo”

перед <div class=”site-info”>


<footer id="colophon" role="contentinfo">
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<div class="site-info">
<?php do_action( 'twentytwelve_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->
</footer><!-- #colophon -->

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

</nav>

<?php do_action( 'twentytwelve_credits' ); ?>

<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>

</div>

</footer>

Указанный выше способ, подойдет в случае, если вы хотите, чтобы меню в хедере и в футере отличалось. Тогда в футере, можно изменить class=”main-navigation”, например, на class=”footer-navigation”. И добавить (продублировать) нужные стили в style.css уже для класса footer-navigation. Таким образом, вы сможете задать различные цвета для пунктов меню в хедере и футере.

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

Создайте в папке шаблона файл menu.php. Вставьте в него код меню (фрагмент кода, который вы копировали в футер).

В header.php и footer.php вместо кода меню вставьте


<?php require( get_template_directory() . '/menu.php' ); ?>

<?php require( get_template_directory() . '/menu.php' ); ?>

Например, вот так будет выглядеть ваш footer.php


<?php
/**
* The template for displaying the footer
*
* Contains footer content and the closing of the #main and #page div elements.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?>
</div><!-- #main .wrapper -->
<footer id="colophon" role="contentinfo">
<?php require( get_template_directory() . '/menu.php' ); ?>
</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
</body>
</html>

<?php

/**

* The template for displaying the footer

* Contains footer content and the closing of the #main and #page div elements.

* @package WordPress

* @subpackage Twenty_Twelve

* @since Twenty Twelve 1.0

</div>

<?php require( get_template_directory() . '/menu.php' ); ?>

</footer>

</div>

<?php wp_footer(); ?>

</body>

</html>

Теперь любое изменение в menu.php будет отражаться сразу и на футер и на хедер.

Надеюсь, все понятно изложил.

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

Опубликовано в рубрике Сайтостроение

Метки: css, wordpress помощь

Понравилась статья? Не забудьте поделиться с друзьями и коллегами:

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

20 комментариев к записи “Шаблон Twenty Twelve. Изменить цвет меню, цвет хедера, футера.”

Михаил 16 марта 2015 в 22:04

Спасибо огромное! В вашей статье нашёл ответы на все интересующие меня вопросы.
Статья очень поможет всем, кто создаёт сайт с темой оформления Twenty Twelwe. Очень долго пытался изменять внешний вид сайта самостоятельно, но ничего не получалось, нашёл ответы на все свои вопросы в этой продуктивной статье. Настроить внешний вид оказывается очень просто, спасибо ещё раз за статью! Было приятно с вами иметь дело

Ответить
- Алексей Ершов 16 марта 2015 в 22:33
  
  Михаил, успехов в изучении WordPress!
  За первый комментарий к статье получаешь 15 WMR. Делай репост статьи в любую из соцсетей и присылай мне номер R-кошелька куда перечислять приз.
  
  Ответить
Елена 20 марта 2015 в 11:31

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

Ответить
- Алексей Ершов 20 марта 2015 в 13:12
  
  Здравствуйте, Елена!
  Изменить цвет фона темы:
  
  body { background-color: #fff; }
  
  1
  2
  3
  4
  5
  
  body {
  background-color: #fff;
  }
  
  Спасибо за отклик и вопрос! Дополнил статью.
  
  Ответить
Михаил 14 мая 2015 в 17:10

Здравствуйте , Алексей !
Очень полезная для меня информация . Удачно зашел .
Не подскажите как сделать меню во всю страницу (по длине)?
И может подскажите как установить готовый фон (картинку) всей страницы ? Как правильно это все прописать и куда ?
Заранее спасибо , Михаил .

Ответить @
Вячеслав 22 июня 2015 в 18:09

Подскажите как сделать в этом шаблоне меню рядом с логотипом, что бы они были на одной строке

Ответить @
Вячеслав 22 июня 2015 в 18:11

как сделать меню рядом с логотипом (с права) в одной строке

Ответить @
alezgo 29 июня 2015 в 23:46

Помогите, как изменить цвет ссылок (текст и подчеркивание) в этой теме???

Ответить
Анастасия 21 июля 2015 в 22:26

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

Ответить @
Ирина Иванькина 22 ноября 2015 в 01:47

Алексей! Меняю в файле body background f1f1f1 на 444.Получаю черный цвет. Подскажите, пожалуйста, где ошибка, и как ее можно исправить. Черный цвет мне как-то не нужен.Спасибо.

Ответить @
- Алексей Ершов 22 ноября 2015 в 02:00
  
  Ирина, о каком сайте или шаблоне идет речь? Нужно смотреть конкретный пример.
  
  Ответить
- Алексей Ершов 22 ноября 2015 в 12:18
  
  Ирина, все верно у Вас меняется. 444 – это не черный, а темно-серый цвет и он близок к черному. Задайте 888 – серый посветлее или подберите другой нужный Вам цвет фона.
  
  Ответить
Ирина Иванькина 26 ноября 2015 в 14:11

Здравствуйте, Алексей! Следуя Вашему уроку, не могу при наведении указателя мыши на названия статей изменить цвет с красного на светло-синий, а цвет меню “контакты” с черного на темно-синий. Буду признательна за помощь.

Ответить @
- Алексей Ершов 26 ноября 2015 в 18:27
  
  Здравствуйте, Ирина!
  Попробуйте так:
  1. Цвет ссылки на статью при наведении указателя мыши:
  
  #content .entry-title a:hover { color:blue; }
  
  1
  2
  3
  4
  5
  
  #content .entry-title a:hover {
  color:blue;
  }
  
  2. Цвет фона меню “Контакты” при наведении указателя мыши:
  
  .menu li.page-item-2:hover { background-color: blue; }
  
  1
  2
  3
  4
  5
  
  .menu li.page-item-2:hover {
  background-color: blue;
  }
  
  Эту нужно добавить(исправить) в файле *.css вашего шаблона. Вместо blue указывайте нужный цвет.
  
  Ответить

Ирина Иванькина 29 ноября 2015 в 03:10

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

Ответить @

Алексей Ершов 29 ноября 2015 в 12:44

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

Ответить
Алексей Ершов 29 ноября 2015 в 15:46

1. Фон пункта меню при наведении курсора меняется здесь:

#access li:hover > a, #access ul ul :hover > a { background: #395ВВ6; color: #fff; }

1
2
3
4
5
6
7

#access li:hover > a,
#access ul ul :hover > a {
background: #395ВВ6;
color: #fff;
}

Ответить

Алексей Ершов 29 ноября 2015 в 16:13

2. Фон активного пункта меню. Добавил в этот код свойство background:


#access ul li.current_page_item > a,
#access ul li.current_page_ancestor > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #FFF;
	background: #395BB6;
}

#access ul li.current_page_item > a,

#access ul li.current_page_ancestor > a,

#access ul li.current-menu-ancestor > a,

#access ul li.current-menu-item > a,

#access ul li.current-menu-parent > a {

color: #FFF;

background: #395BB6;

}

Ответить

Ирина Иванькина 29 ноября 2015 в 17:43

Гениально, Алексей! Спасибо большое!Оперативно, профессионально,КЛАССНО!Блог преобразился, несмотря на то, что еще восстанавливать и восстанавливать…Хочу к Вам в ученики!

Ответить @
Влад 7 февраля 2016 в 14:50

Здравствуйте, Алексей! Можете подсказать как разместить в футере (тема твенти твелв) несклько записей ,например, логотип, контакты и т.д. У меня поучилось разместить в центре логотип ,а по сторонам контакты и другую инфу, но в этом случае все съезжает в разные стороны ( что-то вниз,а что-то вврех) никак не получается чтобы все на одном уровне было. Такая же проблема и в шапке сайта,т.е логотип я разметил слева . Он отлично там встал, но сейчас мне потребовалось разместить там некоторые данные , и когда я туда добавляю тескт, то все опять поехало. Помогите, пожалуйста!!!

Ответить @

Оставить комментарий

Для размещения кода в комментарии используйте теги <pre> </pre>, например:

<pre><b>Создать сайт на WordPress</b><?php echo 'Настройка WordPress'; ?></pre>

<pre><b>Создать сайт на WordPress</b><?php echo 'Настройка WordPress'; ?></pre>

Анатолий(39)	Павлуха(24)	Николай(22)
Игорь(11)	Елена(7)	Алексей(7)
Лара(7)	OlannMK(6)	OlannMK(5)

Шаблон Twenty Twelve. Изменить цвет меню, цвет хедера, футера.

Как изменить цвет фона меню

Как изменить цвет активного пункта меню

Как изменить цвет всех пунктов меню

Как изменить цвет пункта меню при наведении на него указателя мыши

Как изменить цвет фона хедера

Как изменить цвет фона футера

Изменить фон всей страницы

Как разместить меню в футере

Рекомендую почитать:

20 комментариев к записи “Шаблон Twenty Twelve. Изменить цвет меню, цвет хедера, футера.”

Оставить комментарий