16 марта 2015 
Здравствуйте!
Сегодняшняя статья публикуется в рамках предложения от моего блога: WordPress помощь.
Ко мне обратился читатель блога Михаил и попросил помочь ему с шаблоном Twenty Twelve. Возникшие вопросы: как изменить цвет пунктов меню, фона меню, фона хедера, фона футера. Как добавить меню в футер. Собственно, ответы на эти вопросы будут изложены в данном посте.
Итак, на локальном компьютере я активировал себе шаблон Twenty Twelve.
Меню изначально выглядит вот так:
Все изменения стилей будут делаться в файле /wp-content/themes/twentytwelve/style.css
Удобней всего открывать его локально с помощью вашего любимого редактора (использую сейчас PhpStorm).
Можно открыть файл и через админку WordPress: Внешний вид – Редактор – в правой колонке внизу Стили – Таблица стилей (style.css).
Также можно вносить изменения в файл непосредственно на сервере, используя программу WinSCP.
Как изменить цвет фона меню
В файле style.css найдите описание следующего стиля. Можно искать по ключу “Navigation Menu”. (у меня начиналось в строке 578)
|
1 2 3 4 5 6 7 8 9 |
/* Navigation Menu */ .main-navigation { margin-top: 24px; margin-top: 1.714285714rem; text-align: center; background-color: yellow; } |
Добавьте в стиль свойство backround-color и задайте ему нужный вам цвет фона меню.
Как изменить цвет активного пункта меню
Если вы находитесь на какой-то странице, например Поддержать блог, то пункт меню, ссылающийся на данную страницу, считается активным. Для него прописан отдельный стиль, и значит этому пункту меню можно задать какой-то другой цвет.
Найдите следующий блок стилей по ключу “current_page_item”.
|
1 2 3 4 5 6 7 8 9 |
.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”
|
1 2 3 4 5 6 7 8 9 |
.main-navigation li a { border-bottom: 0; color: limegreen; line-height: 3.692307692; text-transform: uppercase; white-space: nowrap; } |
Задайте нужное значение свойству color. Я присвоил цвет limegreen.
Как изменить цвет отдельного пункта меню я уже писал ранее. В Twenty Twelve можно действовать аналогично.
Как изменить цвет пункта меню при наведении на него указателя мыши
В предыдущем пункте вы нашли фрагмент кода и сразу за ним идет стиль, задающий цвет пункта меню при наведении на него мыши или фокуса (если “ходить” по пунктам меню с помощью клавиши Tab)
|
1 2 3 4 5 6 |
.main-navigation li a:hover, .main-navigation li a:focus { color: orange; } |
Как изменить цвет фона хедера
|
1 2 3 4 5 6 7 8 |
/* Header */ .site-header { padding: 24px 0; padding: 1.714285714rem 0; background-color: yellow; } |
Добавьте свойство background-color и задайте ему значение.
Как изменить цвет фона футера
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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
|
1 2 3 4 5 6 7 |
/* Minimum width of 960 pixels. */ @media screen and (min-width: 960px) { body { background-color: #fff; } |
Изменить цвет белого “листа” шаблона Twenty Twelve.
|
1 2 3 4 5 6 7 8 |
/* 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, практически в самом низу, найдите фрагмент кода:
|
1 2 3 4 5 6 7 |
<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 –> |
Скопируйте его (Ctrl+C) и вставьте его в файл footer.php
после <footer id=”colophon” role=”contentinfo”
перед <div class=”site-info”>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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 --> |
Указанный выше способ, подойдет в случае, если вы хотите, чтобы меню в хедере и в футере отличалось. Тогда в футере, можно изменить class=”main-navigation”, например, на class=”footer-navigation”. И добавить (продублировать) нужные стили в style.css уже для класса footer-navigation. Таким образом, вы сможете задать различные цвета для пунктов меню в хедере и футере.
Если же вам нужно абсолютно идентичное меню и в хедере и в футере, то во избежание дублирования кода, лчуше вынести код меню в отдельный файл и подключать этот файл в футере и хедере.
Создайте в папке шаблона файл menu.php. Вставьте в него код меню (фрагмент кода, который вы копировали в футер).
В header.php и footer.php вместо кода меню вставьте
|
1 2 3 |
<?php require( get_template_directory() . '/menu.php' ); ?> |
Например, вот так будет выглядеть ваш footer.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?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> |
Теперь любое изменение в menu.php будет отражаться сразу и на футер и на хедер.
Надеюсь, все понятно изложил.
Задавайте вопросы по этой теме и присылайте мне любые другие, которые у вас возникли. Постараюсь помочь их решить и подробно объяснить, как в этом посте.
Опубликовано в рубрике 
Метки: 
Дед Мороз: 
Спасибо огромное! В вашей статье нашёл ответы на все интересующие меня вопросы.
Статья очень поможет всем, кто создаёт сайт с темой оформления Twenty Twelwe. Очень долго пытался изменять внешний вид сайта самостоятельно, но ничего не получалось, нашёл ответы на все свои вопросы в этой продуктивной статье. Настроить внешний вид оказывается очень просто, спасибо ещё раз за статью! Было приятно с вами иметь дело
Михаил, успехов в изучении WordPress!
За первый комментарий к статье получаешь 15 WMR. Делай репост статьи в любую из соцсетей и присылай мне номер R-кошелька куда перечислять приз.
Здравствуйте, спасибо за подробное и главное понятное описание действий, еще такой вопрос интересует – как вообще цвет фона самой темы изменить, мне нужно сделать чтобы белый цвет страницы и фон сайта совпадали
буду очень рада подсказке, спасибо.
Здравствуйте, Елена!
Изменить цвет фона темы:
Спасибо за отклик и вопрос! Дополнил статью.
Здравствуйте , Алексей !
Очень полезная для меня информация . Удачно зашел .
Не подскажите как сделать меню во всю страницу (по длине)?
И может подскажите как установить готовый фон (картинку) всей страницы ? Как правильно это все прописать и куда ?
Заранее спасибо , Михаил .
Подскажите как сделать в этом шаблоне меню рядом с логотипом, что бы они были на одной строке
как сделать меню рядом с логотипом (с права) в одной строке
Помогите, как изменить цвет ссылок (текст и подчеркивание) в этой теме???
Здравствуйте! помогите как изменить цвет меню, уже измучилась вся, т.к я залила шапку в черный цвет у меня и меню слилось.
Алексей! Меняю в файле body background f1f1f1 на 444.Получаю черный цвет. Подскажите, пожалуйста, где ошибка, и как ее можно исправить. Черный цвет мне как-то не нужен.Спасибо.
Ирина, о каком сайте или шаблоне идет речь? Нужно смотреть конкретный пример.
Ирина, все верно у Вас меняется. 444 – это не черный, а темно-серый цвет и он близок к черному. Задайте 888 – серый посветлее или подберите другой нужный Вам цвет фона.
Здравствуйте, Алексей! Следуя Вашему уроку, не могу при наведении указателя мыши на названия статей изменить цвет с красного на светло-синий, а цвет меню “контакты” с черного на темно-синий. Буду признательна за помощь.
Здравствуйте, Ирина!
Попробуйте так:
1. Цвет ссылки на статью при наведении указателя мыши:
2. Цвет фона меню “Контакты” при наведении указателя мыши:
Эту нужно добавить(исправить) в файле *.css вашего шаблона. Вместо blue указывайте нужный цвет.
Алексей, доброе время суток! Я нисколько не сомневаюсь в Вашей компетентности, но вот изменить цвет пункта меню,в частности, и цвет всего меню в целом при наведении курсора мыши не смогла.Подскажите, пожалуйста, в чем моя ошибка. Спасибо большое.
Здравствуйте, Ирина!
Заочно не всегда удается дать сразу верный ответ, нужно проверять результат. Если хотите, то можете написать мне на почту доступы и что конкретно нужно сделать. Я внесу необходимые изменения у Вас на сайте и напишу где их выполнил, а нужные цвета Вы подберете самостоятельно.
1. Фон пункта меню при наведении курсора меняется здесь:
2. Фон активного пункта меню. Добавил в этот код свойство background:
Гениально, Алексей! Спасибо большое!Оперативно, профессионально,КЛАССНО!Блог преобразился, несмотря на то, что еще восстанавливать и восстанавливать…Хочу к Вам в ученики!
Здравствуйте, Алексей! Можете подсказать как разместить в футере (тема твенти твелв) несклько записей ,например, логотип, контакты и т.д. У меня поучилось разместить в центре логотип ,а по сторонам контакты и другую инфу, но в этом случае все съезжает в разные стороны ( что-то вниз,а что-то вврех) никак не получается чтобы все на одном уровне было. Такая же проблема и в шапке сайта,т.е логотип я разметил слева . Он отлично там встал, но сейчас мне потребовалось разместить там некоторые данные , и когда я туда добавляю тескт, то все опять поехало. Помогите, пожалуйста!!!
Алексей, добрый день!
Мне нужен footer, как у Вас в блоге. Подскажите или дайте ссылку как сделать…
У меня тема twenty sixteen.
Заранее благодарю.