Шапка для сайта — это и есть файл header.php. В большинстве шаблонов состав этого файла мало чем отличается друг от друга. 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">
Первая строчка — указываем тип документа, далее намного интересней:
- <html <?php language_attributes(); ?>> — содержит вызов функции. Если заменить её на <html lang=»ru-RU»>, то мы уменьшим количество запросов к базе данных на единицу, тем самым улучшив и ускорив работу сайта.
- <head> — этот тег служит для хранения других элементов помогающих браузеру в работе с данными. Именно внутри него содержатся мета-тэги.
- Остальные строки, содержащие обращения к базе данных можно также заменить.
Ускорение работы блога можно получить, заменив функции вызова на голый 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, нужно выполнить несколько простых действий:
- Создать новый файл в папке с шаблоном сайта, который нужно назвать по своим правилам: на первом месте обязательно должно быть слово «header», затем через дефис пишем уникальное название. Допустим, можно назвать так: header-flat.php.
- Открываем вновь созданный файл и заполняем нужными тегами, вставляем нужную картинку, сохраняем.
- Теперь, в функцию вызова шапки сайта 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 ).
И еще, такой момент, если несколько разных header, то приходится их целиком конструкциями перечислять, т.е. делать целиком вставки с id страниц. Нельзя как-то перечислением, чтобы одним инклюдом обойтись?
Добрый день! Буду благодарен, что бы Вы разъяснили как поменять заголовок сайта и его описание. Дело в том, что по общей схеме в ВордПресс этого у меня не получается. Спасибо!