Рассмотрим как можно поменять шапку для конкретных страниц вашего сайта через индивидуальный шаблон.
Скачать исходники для статьи можно ниже
В качестве примера буду рассматривать свой сайт, как вы можете увидеть на закладке “Об авторе” в шапке появился большой карандашик – для этой страничке я изменил картинку шапки.
Приступим к созданию новой шапки.
Допустим, что вы уже создали индивидуальный шаблон для конкретной страницы, если нет, то причитайте мою статью:
Индивидуальный шаблон страниц в WordPress: понятие, использование, создание, редактирование
В вышеуказанной статье я рассказывал как создать шаблон с именем moishablon.php. Вот с ним и продолжим работать.
Данная инструкция состоит из 5 шагов.
Шаг 1. Подключаем в индивидуальном шаблоне moishablon.php другой файл шапки.
Открываем его в редакторе кода, для этого заходим в панель управления вашим сайтом, в левом меню выбираем пункт Внешний вид, и далее подпункт Редактор, справа в списке шаблонов ищем наш индивидуальный шаблон moishablon.php и выбираем его.
В коде находим следующую строчку
<?php get_header(); ?>
и меняем ее на:
<?php include 'moiheader.php'; ?>
Данной заменой мы подключаем не header.php, а свой отдельный шаблон для шапки с именем moiheader.php. Соответственно нам нужно его создать.
Шаг 2. Создаем шаблон moiheader.php.
Для этого копируем файл header.php с текущей темы вашего сайта, находим в его коде следующую строчку:
<div id="header">
и меняем ее на:
<div id="headernew">
Данной строчкой мы поменяли блок header на блок headernew.
Так как путь к фоновому изображение в моей теме прописывается в файле стилей style.css в блоке header.
То есть, чтобы сменить изображение шапки, мы просто создадим новый стиль отображения для нашего нового блока headernew.
Шаг 3. Создаем стиль оформления для нового блока headernew.
Открываем в панели управления Редактор кода, для этого в левом меню выбираем пункт Внешний вид, далее подпункт Редактор, выбираем в нем справа в списке шаблонов файл style.css (Список стилей).
В нем ищем стиль оформления для блока header и копируем его, далее вставляем его в конце файла style.css, меняем его название с header на headernew.
В моей теме в файле style.css стиль оформления блока header выглядел так:
#header {
background: #0FACEA url(images/header-bg1.jpg) no-repeat;
height: 170px;
border-bottom: 3px solid #59780a;
position: relative;
}
Далее я скопировал его и вставил в самый конец и переименовал, вот так у меня получилось:
#headernew {
background: #0FACEA url(images/header-bg.jpg) no-repeat;
height: 170px;
border-bottom: 3px solid #59780a;
position: relative;
}
Как видите я поменял также название самой картинки шапки, об этом в шаге 4.
Шаг 4. Создаем новую картинку для нашей шапки.
Скачиваем картинку вашей шапки и редактируем ее или же создаем новую, но с тем же разрешение.
Путь к картинке нам известен – он прописывается в файле style.css для блока header.
После того как вы изменили или создали новое изображение в графическом редакторе (ну например Adobe Photoshop) сохраните его под новым именем (старое имя картинки шапки у меня было header-bg1.jpg, а новое стало header-bg.jpg), закачайте в текущую тему вашего сайта и укажите путь до него в файле style.css для блока headernew.
Шаг 5. Подключаем наш индивидуальный шаблон к нужной страничке.
Для этого в панели управления в левом меню заходите в пункт Страницы, выбираете нужную вам страницу, справа в блоке Атрибуты страницы выбираете шаблон moishablon.
Вот и все, шапка для конкретной странички изменена, а на других страницах осталась прежней.
По аналогии можно сменить картинку в подвале (footer) или фоновое изображение в сайдбаре (sidebar).
PS: Иногда в коде стилей (файл style.php) вместо фонового изображения стоит просто цвет:
#header {
color: #fff;
margin-bottom: 38px;
min-width: 1042px;
}
Тогда вам нужно убрать параметр color и поставить вместо него background.
Данный метод также не подойдет для сложных тем, таких как Twenty Eleven, которые оснащены выбором картинки для шапки через панель управления.
В некоторых темах, путь к изображения может прописываться не через стили (файл style.css), а непосредственно в шаблоне, для этого вам достаточно скопировать данный шаблон, переименовать его, поменять в нем путь к изображению и подключить его к индивидуальному шаблону нужной странички.
Как видите нюансов очень много и зависит все от структуры темы, но в большинстве тем данный метод срабатывает.
PS:
Ответ на вопрос Юлии:
Юля,
1. создайте шаблон для шапки (для примера назову его 111.php – название связанно с последней моей статьей) на основе файла header.php и удалите в нем вывод всего, что не нужно, вот например так:
<?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * * @package WordPress * @subpackage Twenty_Twelve * @since Twenty Twelve 1.0 */ ?><!DOCTYPE html> <!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" /> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> </header><!-- #masthead --> <div id="main" class="wrapper">
2. Я так понимаю, вы используете шаблон без сайдбара, который уже есть в теме Twenty Twelve, давайте же тогда его немного подкорректируем (уберем в нем вывод стандартной шапки и заменим на вывод нашей шапки – файл 111.php)
Для этого входим в панели управления, в левом меню, в пункт “Внешний вид” – “Редактор” и справа в списке шаблонов выбираем шаблон “page-templates/full-width.php”, открываем его и заменяем строчку:
get_header(); ?>
На следующее, то есть на созданный нами индивидуальный шаблон шапки – 111.php (в примере ниже указан путь до файла 111.php, который я создал на тестовом сайте http://mnogoblog6.p.ht/, у вас он должен быть свой(путь)):
include '/home/u406435868/public_html/wp-content/themes/twentytwelve/111.php'; ?>
Вот и все, результат временно можете посмотреть на сайте http://mnogoblog6.p.ht/sample-page/
Помогите пожалуйста. У меня был шаблон без сайдбара, надо теперь шапку убрать, что бы не высвечивалась “главная” и др.страницы, а ак же название страницы.Тема:Twenty Twelve
Заранее спасибо!
Юля, ответ на ваш вопрос написал в конце данной статьи в PS.
Константин, большущее спасибо! Все получилось. А вы знаете еще, как сделать так, что бы такие страницы на главной не высвечивались,где список всех страниц?
Юля, если вы про виджет в сайдбаре (Pages), то в нем есть строчка – Exclude (исключить) – укажите в ней ID страниц, которые не хотите видеть (id можно посмотреть в редакторе, в адресной строке браузера, например, если у странички следующий url в редакторе: http://mnogoblog6.p.ht/wp-admin/post.php?post=48&action=edit&message=6 – то ее id=48).
Запуталась окончательно, а счастье было так близко :( Попробую, все таки, добить, если поможете объяснениями.
Индивидуальный шаблон я создала, пока там тоже не все гладко. Но сейчас с шапкой хочу разобраться. “Для этого копируем файл header.php с текущей темы вашего сайта” Скопировала, поменяла как было написано, а дальше этот файл тоже нужно закачать на сервер?
Понимаю, вопросы чайника, но я и так чайник. Не имею отношения ни к сайтостроению ни к программированию.
Оксана, да файл шапки (в данном примере moiheader.php) тоже нужно закачать в папку с текущей темой сайта.
Спасибо, файл закачала. Можно дальше вопросы? Все таки хочется дойти до конца, это как раз то, что давно хотелось.
“Далее я скопировал его и вставил в самый конец и переименовал…”
В самый конец кода #header { или в самый конец файла styles.css?
Оксана, в самый конец файла style.css.
Скажите круглосуточному чайнику, вот у меня конец файла
#hmenu ul {
float:none;
}
*/
Вставлять код между скобкой и */ или вообще после */
Оксана, после */
Все получилось, все работает, но шапки теперь вообще никакой нет. У меня тема F2 и шапка в ней грузится прямо из админ-панели. Но как загрузить сразу две шапки, да еще чтобы они отображались в разных шаблонах, я совсем пока не соображаю. Загрузила картинку и на сервер и в медиафайлы, прописывала оба пути, но реакции ноль. В этой теме такой фокус не срабатывает.
Оксана, благодаря вам, нашел небольшую ошибочку в статье:
– в шаг 3 нужно вставлять стили для блока с id headernew, а не headermoi, скоро исправлю.
Оксана, изменил для вас тему F2 – добавил файлы – moishablon, moiheader, а также добавил в самом конце файла style.css стиль для новой шапки.
Скачайте доработанную тему по следующему url:
https://mnogoblog.ru/wp-content/uploads/2013/09/f2.zip
Далее выберите шаблон – moishablon в редакторе нужной страницы (левое меню – пункт “Страницы” – выбираем шаблон moishablon).
Демо пример можете, временно, посмотреть на тестовом сайте – “mnogoblog4.p.ht/sample-page/”
Есть!!! Получилось! Я даже не меняла на Ваши данные шаблона, просто увидела, что у Вас background:url(…) без кавычек, а у меня было с кавычками. Удалила их и вот оно-счастье!!! :) Все таки как сложно, когда не понимаешь элементарного, как надо написать чтобы было правильно. Везде бэкграунд пишут в скобках, ну я и тоже их влепила, а не нужно было. Или, может быть, только моя любимая Т2 так не понимает.
Осталось разобраться с сайдбаром, Он-то удалился, но место от него осталось и на описанные действия не реагирует. У него есть файл sidebar.php, наверное, нужно делать отдельный файл и там удалять код, который отвечает за вывод левого сайдбара. У меня левый т.к. правый отключен, не нужен он мне. Сейчас это выглядит так: “http://sam.greens-avenue.ru/?page_id=196&preview=true” Это поддомен, полигон для испытаний. Если все получится, тогда перенесу на основной. Я Вам благодарна. Оказывается, и от собственного незнания бывает польза. :)
Здравствуйте, Константин! Я хочу сменить для определённой страницы не всю шапку, а только её часть (шапка состоит из трёх картинок, а я хочу сменить только одну из них). Не подскажете, как это можно сделать?
С уважением, Александр.
Здравствуйте.
А вот нет в стилях прописанного пути для картинки!
Берется для замены из админ панели ВордПресса (настроить)
А нужно очень на отдельную страницу вставить ИНДИВИДУАЛЬНУЮ
шапку – картинку.
В header.php кроме кода
ничего не нашел, а он – как я думаю общий для вывода единого заголовка!
Так зачем я создаю отдельный файл header_(название) если я не могу прописать в нем картинку заголовка? И как это сделать? Спасибо.
Пытаюсь сделать на своем сайте отдельную шапку (изображение) для страницы “СТО”, так как сайт о пассажирских перевозках, а лентяи не смотрят на размещенные контакты по странице СТО, и звонят на телефоны с шапки. У вас все доступно описано, но проблема в том, что я заходя через “Fz” на хостинг, не вижу там в public_html папку content/themes… В папке content/ папки themes нет…???
У меня на хостинге пять сайтов (доменов), первый я делал 3,5 года назад, там все есть как вы и описываете, на остальных (свежих) нет доступа через FTP к этим папкам. Это связано с разделом размещения на хостинге, правами доступа, или новыми (последними) версиями WP.? Не могу разобраться…
Помогите пожалуйста.
Читал вашу статью “Индивидуальный шаблон страниц в WordPress: понятие, использование, создание, редактирование”, ничего не выходит… нет у меня в FTP public_html/content/themes … нет именно – /themes
В предыдущем комменте вставилась ссылка как то в слово “сайт”.
Я чайник, прошу прощения )
Евгений, нажимаете ctrl+u и смотрите код странички, на вашем сайте css стили лежат тут:
…/iz-content/themes/twentytwelve/style.css
Следовательно, вместо папки wp-content у вас используется папка iz-content, в которой и есть папка themes, в которой активная тема twentytwelve