Индивидуальный шаблон: каждой страничке своя шапка
Опубликовано: 01.09.2018
Рассмотрим как можно поменять шапку для конкретных страниц вашего сайта через индивидуальный шаблон.
Натяжка шаблона на WordPress | #2
Скачать исходники для статьи можно ниже
В качестве примера буду рассматривать свой сайт, как вы можете увидеть на закладке «Об авторе» в шапке появился большой карандашик — для этой страничке я изменил картинку шапки.
Приступим к созданию новой шапки.
Camino de Mesa con Santa Claus
Допустим, что вы уже создали индивидуальный шаблон для конкретной страницы, если нет, то причитайте мою статью:
Индивидуальный шаблон страниц в 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/