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

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

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

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

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

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

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

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

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

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

  4. Оксана

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

  5. Оксана

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

  6. Оксана

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

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

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

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

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

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

  8. Оксана

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

  9. Александр

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

  10. АЛЕКСАНДР

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

  11. Евгений

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

  12. Евгений

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

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

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

Добавить комментарий