• Главная
  • Карта сайта
Не найдено

Главная Новости

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

Опубликовано: 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/

Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss