header php

Шапка для сайта — это и есть файл header.php. В большинстве шаблонов состав этого файла мало чем отличается друг от друга. Header обычно содержит наборы мета-тэгов, строки с подключаемыми скриптами и стилями.

Шапка сайта header

В Вордпресс этот файл находится в разделе «Внешний вид» — «Редактор» — «Заголовок» (header.php). Рассмотрим приёмы и методы работы с этим файлом, примеры улучшений и оптимизации, а также — создания файла заголовка с нуля.

Содержание headera

Рассмотрим содержимое заголовка для этого сайта:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv=Content-Type content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<?php wp_head(); ?>
<link rel="icon" type="image/ico" href="https://saitoseoteka.ru/wp-content/uploads/2014/03/your-faviconvFTyUyHmGi.ico"/><link rel="shortcut icon" type="image/x-icon" href="https://saitoseoteka.ru/wp-content/uploads/2014/03/your-faviconvFTyUyHmGi.ico"/>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>
<?php if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>

	</header>
	<div id="main" class="wrapper">

Первая строчка — указываем тип документа, далее намного интересней:

  1. <html <?php language_attributes(); ?>> — содержит вызов функции. Если заменить её на <html lang=»ru-RU»>, то мы уменьшим количество запросов к базе данных на единицу, тем самым улучшив и ускорив работу сайта.
  2. <head> — этот тег служит для хранения других элементов помогающих браузеру в работе с данными. Именно внутри него содержатся мета-тэги.
  3. Остальные строки, содержащие обращения к базе данных можно также заменить.

Ускорение работы блога можно получить, заменив функции вызова на голый html код. Рекомендуется оставить только <title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>, чтобы заголовок менялся динамически. Для всего остального можно сделать так:

  • Открыть свой сайт
  • Нажать правой кнопкой мышки и выбрать «Просмотреть исходный код страницы»
  • Скопировать код с самого начала и до закрывающего тега </head>
  • Вставить скопированный код в файл header.php и сохранить изменения
  • Не забыть оставить содержимое <title>

То есть, в итоге должен получиться примерно такой код файла заголовка:

<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta http-equiv=Content-Type content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<script src="https://адрес скрипта 1" type="text/javascript"></script>
<link rel="alternate" type="application/rss+xml" title="Заголовок ленты" href="http://адрес ленты" />
<link rel='stylesheet' подключение файлов стилей type='text/css' media='all' />
<script type='text/javascript' src='https://адрес скрипта 2'></script>
<script type='text/javascript' src='https://адрес скрипта 3'></script>
<meta name="generator" content="WordPress 3.9.2" />
<link rel='shortlink' href='http://адрес сайта/' />
	</header>

Разный заголовок для разных страниц

Это самое интересное. Для создания landing page, или просто для придания уникальности своему сайту, можно сделать для некоторых записей и страниц свой отдельный файл заголовка header.php, то есть сделать уникальную шапку — от кода  до дизайна.

Ярким примером такой замены может быть предыдущая запись о эффекте parallax на сайтах. Чтобы для некоторой записи сделать свой header, нужно выполнить несколько простых действий:

  1. Создать новый файл в папке с шаблоном сайта, который нужно назвать по своим правилам: на первом месте обязательно должно быть слово «header», затем через дефис пишем уникальное название. Допустим, можно назвать так: header-flat.php.
  2. Открываем вновь созданный файл и заполняем нужными тегами, вставляем нужную картинку, сохраняем.
  3. Теперь, в функцию вызова шапки сайта get_header(), в скобки вписываем название flat, то есть вызов будет выглядеть так: get_header( flat ).

Для записи: нужно получить уникальный ID записи, затем создать там же, где создавали новый файл шапки, файл с включением в название этого ID. Допустим ID записи — 2344, тогда файл нужно назвать single-2344.php (single.php — файл одиночной записи сайта на Вордпресс).

Для страницы — аналогично предыдущему пункту, только название будет page-2345.php.

Подключение новой шапки для записи:

  • в файл «Одна запись (single.php)» в самом начале вписываем <?php if(is_single(2344)) { include ‘single-2346.php’; } else { ?>, а в конце <?php } ?>.
  • в файле single-2346.php вместо get_header() вписываем get_header( flat ).
  • Готово!

Подключение новой шапки для страницы:

здесь нужно просто открыть файл page-2345.php, вставить в него весь код из файла page.php. Остаётся только заменить get_header() на get_header( flat ).

2 комментария

  1. И еще, такой момент, если несколько разных header, то приходится их целиком конструкциями перечислять, т.е. делать целиком вставки с id страниц. Нельзя как-то перечислением, чтобы одним инклюдом обойтись?

  2. Добрый день! Буду благодарен, что бы Вы разъяснили как поменять заголовок сайта и его описание. Дело в том, что по общей схеме в ВордПресс этого у меня не получается. Спасибо!

Оставить комментарий

Your email address will not be published. Required fields are marked *