Индивидуальный шаблон: каждой страничке своя шапка

Рассмотрим как можно поменять шапку для конкретных страниц вашего сайта через индивидуальный шаблон.

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

В качестве примера буду рассматривать свой сайт, как вы можете увидеть на закладке «Об авторе» в шапке появился большой карандашик — для этой страничке я изменил картинку шапки.

Приступим к созданию новой шапки.

Допустим, что вы уже создали индивидуальный шаблон для конкретной страницы, если нет, то причитайте мою статью:

Индивидуальный шаблон страниц в 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/

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


knopkisoc

Индивидуальный шаблон: каждой страничке своя шапка: 20 комментариев

  1. Юля

    Помогите пожалуйста. У меня был шаблон без сайдбара, надо теперь шапку убрать, что бы не высвечивалась «главная» и др.страницы, а ак же название страницы.Тема:Twenty Twelve
    Заранее спасибо!

  2. Константин Автор записи

    Юля, ответ на ваш вопрос написал в конце данной статьи в PS.

  3. Юля

    Константин, большущее спасибо! Все получилось. А вы знаете еще, как сделать так, что бы такие страницы на главной не высвечивались,где список всех страниц?

  4. Константин Автор записи

    Юля, если вы про виджет в сайдбаре (Pages), то в нем есть строчка — Exclude (исключить) — укажите в ней ID страниц, которые не хотите видеть (id можно посмотреть в редакторе, в адресной строке браузера, например, если у странички следующий url в редакторе: http://mnogoblog6.p.ht/wp-admin/post.php?post=48&action=edit&message=6 — то ее id=48).

  5. Оксана

    Запуталась окончательно, а счастье было так близко :( Попробую, все таки, добить, если поможете объяснениями.
    Индивидуальный шаблон я создала, пока там тоже не все гладко. Но сейчас с шапкой хочу разобраться. «Для этого копируем файл header.php с текущей темы вашего сайта» Скопировала, поменяла как было написано, а дальше этот файл тоже нужно закачать на сервер?
    Понимаю, вопросы чайника, но я и так чайник. Не имею отношения ни к сайтостроению ни к программированию.

  6. Константин Автор записи

    Оксана, да файл шапки (в данном примере moiheader.php) тоже нужно закачать в папку с текущей темой сайта.

  7. Оксана

    Спасибо, файл закачала. Можно дальше вопросы? Все таки хочется дойти до конца, это как раз то, что давно хотелось.
    «Далее я скопировал его и вставил в самый конец и переименовал…»
    В самый конец кода #header { или в самый конец файла styles.css?

  8. Оксана

    Скажите круглосуточному чайнику, вот у меня конец файла
    #hmenu ul {
    float:none;
    }

    */
    Вставлять код между скобкой и */ или вообще после */

  9. Оксана

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

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

    Оксана, благодаря вам, нашел небольшую ошибочку в статье:
    - в шаг 3 нужно вставлять стили для блока с id headernew, а не headermoi, скоро исправлю.

  11. Константин Автор записи

    Оксана, изменил для вас тему F2 — добавил файлы — moishablon, moiheader, а также добавил в самом конце файла style.css стиль для новой шапки.

    Скачайте доработанную тему по следующему url:
    http://mnogoblog.ru/wp-content/uploads/2013/09/f2.zip

    Далее выберите шаблон — moishablon в редакторе нужной страницы (левое меню — пункт «Страницы» — выбираем шаблон moishablon).

    Демо пример можете, временно, посмотреть на тестовом сайте — «mnogoblog4.p.ht/sample-page/»

  12. Оксана

    Есть!!! Получилось! Я даже не меняла на Ваши данные шаблона, просто увидела, что у Вас background:url(…) без кавычек, а у меня было с кавычками. Удалила их и вот оно-счастье!!! :) Все таки как сложно, когда не понимаешь элементарного, как надо написать чтобы было правильно. Везде бэкграунд пишут в скобках, ну я и тоже их влепила, а не нужно было. Или, может быть, только моя любимая Т2 так не понимает.
    Осталось разобраться с сайдбаром, Он-то удалился, но место от него осталось и на описанные действия не реагирует. У него есть файл sidebar.php, наверное, нужно делать отдельный файл и там удалять код, который отвечает за вывод левого сайдбара. У меня левый т.к. правый отключен, не нужен он мне. Сейчас это выглядит так: «http://sam.greens-avenue.ru/?page_id=196&preview=true» Это поддомен, полигон для испытаний. Если все получится, тогда перенесу на основной. Я Вам благодарна. Оказывается, и от собственного незнания бывает польза. :)

  13. Александр

    Здравствуйте, Константин! Я хочу сменить для определённой страницы не всю шапку, а только её часть (шапка состоит из трёх картинок, а я хочу сменить только одну из них). Не подскажете, как это можно сделать?
    С уважением, Александр.

  14. Уведомление: Каждой страничке/записи своя шапка (плагин) | MnogoBlog

  15. АЛЕКСАНДР

    Здравствуйте.
    А вот нет в стилях прописанного пути для картинки!
    Берется для замены из админ панели ВордПресса (настроить)
    А нужно очень на отдельную страницу вставить ИНДИВИДУАЛЬНУЮ
    шапку — картинку.
    В header.php кроме кода
    ничего не нашел, а он — как я думаю общий для вывода единого заголовка!
    Так зачем я создаю отдельный файл header_(название) если я не могу прописать в нем картинку заголовка? И как это сделать? Спасибо.

  16. Евгений

    Пытаюсь сделать на своем сайте отдельную шапку (изображение) для страницы «СТО», так как сайт о пассажирских перевозках, а лентяи не смотрят на размещенные контакты по странице СТО, и звонят на телефоны с шапки. У вас все доступно описано, но проблема в том, что я заходя через «Fz» на хостинг, не вижу там в public_html папку content/themes… В папке content/ папки themes нет…???
    У меня на хостинге пять сайтов (доменов), первый я делал 3,5 года назад, там все есть как вы и описываете, на остальных (свежих) нет доступа через FTP к этим папкам. Это связано с разделом размещения на хостинге, правами доступа, или новыми (последними) версиями WP.? Не могу разобраться…
    Помогите пожалуйста.

  17. Евгений

    Читал вашу статью «Индивидуальный шаблон страниц в WordPress: понятие, использование, создание, редактирование», ничего не выходит… нет у меня в FTP public_html/content/themes … нет именно — /themes
    В предыдущем комменте вставилась ссылка как то в слово «сайт».
    Я чайник, прошу прощения )

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

    Евгений, нажимаете ctrl+u и смотрите код странички, на вашем сайте css стили лежат тут:
    …/iz-content/themes/twentytwelve/style.css
    Следовательно, вместо папки wp-content у вас используется папка iz-content, в которой и есть папка themes, в которой активная тема twentytwelve

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>