Каждой странице — своя шапка

Думаете меняющаяся шапка сайта — это сложно? В данном видео мы узнаем, как сделать разные шапки отдельно для каждой страницы на блоге и как поменять шапки категорий WordPress.

Наверняка Вы видели на каких-либо сайтах, как в разных тематических разделах по-разному оформлена шапка сайта — это или другой цвет, или меняется фоновая картинка и т.д. Так вот, мы тоже реализуем эту функцию — представляю Вашему вниманию плагин Dynamic Headers, который поможет разнообразить наш сайт. Он позволяет назначить для любой страницы собственное изображение в том месте, куда Вы пропишете код плагина. После его установки внизу страницы добавления записи появится специальная панель, где вы можете выбрать, какая картинка должна на этой странице отображаться из списка загруженных.
Меняющаяся динамическая шапка сайта придаст ему индивидуальность и неповторимый колорит!

Динамическая меняющаяся шапка сайта

Для того, чтобы не быть голословным, предлагаю посмотреть сайт о подмосковных усадьбах nataturka.ru. Каждая статическая страница на нем имеет свое оформления хедера. Это и стильно, и красиво. Например, если на вашем блоге несколько разделов по разным темам, например, Компьютеры, Ноутбуки, Телефоны — логично сделать разные шапки для всех этих рубрик с изображением компа, ноута или мобильника. Убедил? Если да, то смотрим видео.

Код для вставки динамической шапки в шаблон:

<?php if(function_exists('show_media_header')){ show_media_header(); } ?>

Меняющаяся шапка сайта без плагина

Если вы небезосновательно считаете, что плагины тормозят систему и лучше обходиться без них, то предлагаю организовать подобный функционал самостоятельно, добавив некоторый код в файлы вашего сайта.
Итак, открываем functions.php и добавляем:

<?php
if ( !function_exists('customisetheme_setup') ):
function customisetheme_setup() {
//Расположение картинки по умолчанию
define( 'HEADER_IMAGE', '%s/header/default.jpg' );
//Ширина и высота картинки
define( 'HEADER_IMAGE_WIDTH', apply_filters(
'customisetheme_header_image_width', 960 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters(
'customisetheme_header_image_height', 220 ) );
//Вкл/Выкл текста на картинке
define( 'NO_HEADER_TEXT', true );
add_custom_image_header( '', 'customisetheme_admin_header_style' );
//Устанавливаем несколько предустановленных изображений
//%s - это папка темы оформления
$customHeaders = array (
//Image 1
'perfectbeach' => array (
'url' => '%s/header/default.jpg',
'thumbnail_url' => '%s/header/thumbnails/pb-thumbnail.jpg',
'description' => __( 'Perfect Beach', 'customisetheme' )),
//Image 2
'tiger' => array (
'url' => '%s/header/tiger.jpg',
'thumbnail_url' => '%s/header/thumbnails/tiger-thumbnail.jpg',
'description' => __( 'Tiger', 'customisetheme' )),
'lunar' => array (
'url' => '%s/header/lunar.jpg',
'thumbnail_url' => '%s/header/thumbnails/lunar-thumbnail.jpg',
'description' => __( 'Lunar', 'customisetheme' )));
register_default_headers($customHeaders);
}
endif;
if ( ! function_exists( 'customisetheme_admin_header_style' ) ) :
function customisetheme_admin_header_style() {
?>
<style type="text/css">
#wpbody-content #headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
border: 1px solid #333;
}
</style>
<?php
}
endif;
add_action( 'after_setup_theme', 'customisetheme_setup' );
?>





В данном примере Default.jpg — изображение в шапке по умолчанию, 960 — его ширина, а 220 — высота.
Папка header — директория внутри папки темы оформления, в которой будут содержаться наши картинки для шапки.
И после этого в то место шаблона, где вы хотите показывать меняющуюся шапку сайта, вставляем строки:

<div id="header">
<img id="headerimg" src="<?php header_image(); ?>"
width="<?php echo HEADER_IMAGE_WIDTH; ?>"
height="<?php echo HEADER_IMAGE_HEIGHT; ?>"
alt="Header image alt text" />
</div>

После чего в редакторе заметки появляется новая строка с заголовком «Header» и формой для выбора/загрузки изображения.
Да, чуть не забыл — изображения для шапки необходимо предварительно правильно подготовить — про оптимизацию графики есть отдельная статья на моем блоге.

Как поменять шапку сайта в разных категориях или записях wordpress?

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

1. При обращении к какой-то рубрике скрипт системы сначала ищет шаблон для вывода постов из этой рубрики. То есть открывая страницу с постами из категории с ID 1, ищется файл category-1.php. Если его нет, то записи выводит файл category.php, если нет и его — archive.php или index.php. Соответственно, если хотите для страниц вывода новостей из определенной рубрики задать свою шапку или вообще свой уникальный шаблон, создаете файл category-x.php, где «x» это ID рубрики, и оформляете его соответственно своей задумке.

2. Прописать условие для каждой рубрике в основной файл шаблона — category.php или index.php.

<?php if (is_category(x)): ?>
тут код оформления
<?php endif; ?>

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

if(in_category(1) ){
код шаблона записей из категории с ID=1
}
elseif(in_category(3)){
код шаблона записей из категории с ID=3
}
else{
код шаблона для остальных записей
}

А теперь для разных статических страниц разные шапки.

<?php if (is_page('2')) { ?>
    код шаблона для страницы с ID=2
<?php } elseif (is_page('7')) { ?>
    код шаблона для страницы с ID=7
<?php } else { ?>
    код шаблона для остальных страниц
<?php } ?>

Чтобы не загромождать один файл громоздким кодом, можно код оформления вынести в отдельный файл, а здесь лишь его присоединить примерно таким образом:

if (in_category('1')) {
      include(TEMPLATEPATH.'/single1.php');
  } elseif (in_category('2')) {
      include(TEMPLATEPATH.'/single2.php');
  } else {
      include(TEMPLATEPATH.'/single_default.php');
  }

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

  • Dynamic Headers у меня работать не захотел. Установился, сказал в какую папку кидать картинки, спросил, какую картинку вставлять в шапку и…. И ничего не изменилось. Буду разбираться, возможно это из-за того, что тема была сделана в Artisteer.

      • Я Буратино! Деревянный по самые уши 🙁 Теперь всё заработало, огромное спасибо! Говорить, где накосячил не буду, стыдно.

  • Александр здравствуйте. Я может не много не по теме но у меня проблема вот в чем. Решил изменить шапку сайта сделал, установил, но шапка получилась статической и при сворачивании окна она отделено сдвигается от самого сайта, то есть как бы не привязана к телу. Подскажите где искать и как можно исправить эту проблему? Спасибо.

    • Скорее всего блок шапки позиционируется не относительно блока с основным содержанием или наоборот (за это отвечает атрибут «position» в css) либо в самом теле html документа у шапки и основной части по разному заданы выравнивания на странице, например у шапки стоит align=»center», а у основной части align=»left»).

  • А можно ли сделать эту шапку фиксированной и как?! очень надо помогите!

    • В каком смысле? Задаете для каждой страницы свою шапку и все. Либо просто делаете одну шапку на весь сайт в шаблоне без плагина

      • Имею ввиду чтобы шапка при прокрутке странице оставалась сверху. не могу понять где прописать position: fixed;

        • Ну так то я как вам скажу, надо код видеть. Где-то в style.css в стиле, который отвечает за блок, в котором шапка находится

    • Экспериментируйте! Кстати, это все можно и без плагина сделать, просто так удобнее их менять

  • загрузила плагин и не получилось
    Подскажите, пожалуйста,
    "Конечно, после активации плагина нужно вставить в шаблон код
    if(function_exists('show_media_header')){ show_media_header(); }"
    Можно подробнее, если несложно

    • в то место шаблона, где хотите выводить результат работы плагина, надо вставить этот код. В header.php по идее

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