Файл header.php для базовой темы WordPress

Начинаем создавать файлы для своей темы WordPress mytheme, для которой ранее наметили Структуру шаблона страницы. Создаем файл header.php и добавляем в файл functions.php функции подключения файла с переводом и добавления номера страницы.

В этой статье:

1 Первые строки header.php
2 Раздел <head>
- 2.1 Добавление функций в файл functions.php
- 2.2 Тег <head> в файле header.php
3 Раздел заголовка сайта header
- 3.1 Меню и ссылка для скринридера (screen reader)

Первые строки header.php

В начало файла header.php помещаем строки с информацией об использовании XHTML и о языке и направлении текста на странице:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

Или вместо вызова language_attributes() для сайта на русском языке просто

<html dir="ltr" lang="ru-RU">

dir="ltr" - направление текста слева направо

Раздел <head>

Раздел <head> содержит заголовок страницы (<title>), метатеги (<meta>) и ссылки на подключаемые файлы скриптов, стилей и RSS-потоки.

Добавление функций в файл functions.php

Следующая функция подключает файл с переводом из папки /languages. Она нужна, чтобы тема была доступна для перевода на разные языки.

<?php

// Делаем тему переводимой на разные языки.
// Файлы с переводом находятся в папке /languages/
load_theme_textdomain( 'mytheme', TEMPLATEPATH . '/languages' );
$locale = get_locale();
$locale_file = TEMPLATEPATH . "/languages/$locale.php";
if ( is_readable($locale_file) )
    require_once($locale_file);

А эта функция получает номер страницы (если это страница, на которую перешли по ссылке "Предыдущие записи") и добавляет этот номер к заголовку:

// Получение номера страницы
function get_page_number() {
    if ( get_query_var('paged') ) {
        print ' | ' . __( 'Page ' , 'mytheme') . get_query_var('paged');
    }
} // end get_page_number

Чтобы текст был доступен для перевода, его вставляют в тему как аргумент функции __() (это два подчеркивания - псевдоним функции translate()). Есть и другие способы, например, _e() - одно подчеркивание перед e - выводит строку, переведенную функцией translate(), с помощью echo.

__( 'Page ' , 'mytheme')

Вместо слова 'Page ' на сайте появится его перевод - слово 'Страница'. Второй аргумент функции __() - имя папки темы, в данном случае это “mytheme”. Для русской темы:

// Получение номера страницы
function get_page_number() {
    if ( get_query_var('paged') ) {
        print ' | Страница ' . get_query_var('paged');
    }
} // end get_page_number

Тег `<head>` в файле `header.php`

Записываем содержимое тега <head></head> с оптимизацией заголовка (title) для поисковых машин, например, заголовок для отдельных записей (post) и постоянных страниц (page) содержит только post title, а для дополнительных страниц со списком предыдущих записей title включает номер страницы:

<head profile="http://gmpg.org/xfn/11">
    <title><?php
        if ( is_single() ) { single_post_title(); }
        elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
        elseif ( is_page() ) { single_post_title(''); }
        elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
        elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
        else { bloginfo('name'); wp_title('|'); get_page_number(); }
    ?></title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <?php wp_head(); ?>
    <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'mytheme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
    <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'mytheme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>

'Search results for ' - 'Результаты поиска для '
'Not Found' - 'Не найдено'

Если по каким-то причинам используется другая кодировка символов, вместо

<meta charset="UTF-8" />

получаем кодировку из bloginfo:

<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

Подключение скрипта для поддержки древовидных комментариев (threaded comments):

<?php if( is_singular() ) wp_enqueue_script('comment-reply'); ?>

Хук wp_head() добавляется перед закрывающим тегом, чтобы плагины могли вставлять сюда стили, скрипты и метатеги. Кроме того, добавлены ссылки на RSS-потоки и пинги (pingbacks).

Раздел заголовка сайта header

Заголовок или шапка сайта обычно содержит ссылку на главную страницу и описание сайта (в файле header.php это содержимое тега div #branding), а также меню. Многие темы WordPress помещают заголовок сайта в тег h1 как самую важную информацию конкретной веб-страницы в глазах поисковиков. Но согласитесь, на веб-странице конкретной записи сайта самым важным должен быть заголовок записи, т.к. именно он говорит о содержимом конкретной веб-страницы. Описание сайта необходимо на главной странице сайта.

 <div id="branding">
   <div id="blog-title"><span><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></span></div>
<?php if ( is_home() || is_front_page() ) { ?>
   <h1 id="blog-description"><?php bloginfo( 'description' ) ?></h1>
<?php } else { ?>
   <div id="blog-description"><?php bloginfo( 'description' ) ?></div>
<?php } ?>
  </div><!-- #branding -->

Итак, заголовок сайта, например, на страницах одиночных записей помещен в простой тег div и только на домашней (home page) или главной странице (front page) в тег h1. ( bloginfo() позволяет выводить более 20 элементов данных о сайте)

Меню и ссылка для скринридера (screen reader)

В div #access помещаем ссылку для перехода к основному содержимому веб-страницы, чтобы посетители сайта, использующие программу чтения с экрана - "говорилку" (screen reader), могли пропустить меню, которое выводит функция wp_page_menu().

<div id="access">
    <div class="skip-link"><a href="#content" title="<?php _e( 'Skip to content', 'mytheme' ) ?>"><?php _e( 'Skip to content', 'mytheme' ) ?></a></div>
    <?php wp_page_menu( 'sort_column=menu_order' ); ?>
</div><!-- #access -->

Для русской темы вместо <?php _e( 'Skip to content', 'mytheme' ) ?> можно написать русский текст - 'Перейти к содержимому'.

Это основное содержимое файла header.php для шапки сайта WordPress.

На английском: The Header Template