Создание header.php в теме WordPress – часть 3

В прошлой статье мы узнали, что файл index.php в темах WordPress выступает в роли ствола в дереве, который держит на себе header.php, footer.php и другие файлы. Рассмотрим header.php – файл шапки нашей темы Lightweight. У Вас может быть свой файл шапки, но есть общие функции, которые совпадут. Код шапки нашей темы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
	<div class="all">
		<a href="<?php echo get_option('home'); ?>/"><h1><?php bloginfo('name'); ?></h1></a>
		<h2><?php bloginfo('description'); ?></h2>
		<hr class="firsthr">
		<?php 
			wp_nav_menu( array(
			'menu_class'=>'menu',
			'theme_location'=>'top',
			'container'=>''
			) );
		?>
		<?php get_search_form(); ?>
		<hr class="secondhr">

Пройдёмся последовательно по всем строкам.

Строка ниже отображает название сайта в браузере (тайтл) и состоит из функций:

<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

bloginfo – выводит разную информацию о сайте, например, bloginfo(‘name’) – отобразит название сайта;

wp_title – выводит заголовок страницы. В приведённом примере wp_title() дописывает по умолчанию знак » перед заголовком страницы.

В итоге получается:
Название сайта » Название страницы

Можем переписать тайтл в таком виде:

<title><?php wp_title("", true); ?> | <?php bloginfo('name'); ?></title>

Получим результат: Название страницы | Название сайта

Пустые кавычки “” означают, что знак » не будет отображаться.
Для указания браузеру формата документа и кодировки сайта применяем:

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

В результате получим:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

bloginfo(‘html_type’) – выводит Content-Type нашей HTML-страницы (в данном случае text/html);

bloginfo(‘charset’) – кодировка сайта (в данном случае UTF-8)

Строка

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

служит для подключения файла стилей CSS:

bloginfo(‘stylesheet_url’) – выводит URL нашей темы, в корне которой и находится файл style.css

Следующие строки (с 7 по 9) содержат функции bloginfo(‘rss2_url’), bloginfo(‘atom_url’), bloginfo(‘pingback_url’) и отвечают за ссылки на RSS 2.0 фиды (/feed), Atom фиды (/feed/atom) и уведомления на XML-RPC файл (xmlrpc.php), соответственно.

Последняя строка перед закрывающим тегом </head>

<?php wp_head(); ?>

содержит функцию wp_head(), которая означает тег шапки шаблона. Добавляется в файлы темы header.php, index.php и стоит перед </head>

Всё, что до тега <body> практически всегда совпадает (является типовым). Теперь перейдём к телу сайта, с которого и начинается дизайн нашей темы.
Строка

<a href="<?php echo get_option('home'); ?>/"><h1><?php bloginfo('name'); ?></h1></a>

является ссылкой на название сайта, обрамлённого в тег h1. Содержит функции:

get_option(‘home’) – выведет URL домашней страницы сайта;

bloginfo(‘name’) – рассматривалось выше (в данном случае вывод названия сайта)

Строка

<h2><?php bloginfo('description'); ?></h2>

выводит краткое описание сайта, обрамлённое в тег h2. Название сайта и краткое описание задаются в админке WordPress.

Следующий код относится к произвольному меню и будет рассмотрен в отдельной статье – сейчас пропускаем его:

<?php 
			wp_nav_menu( array(
			'menu_class'=>'menu',
			'theme_location'=>'top',
			'container'=>''
			) );
		?>

Последняя функция, с которой знакомимся сегодня, подключает форму поиска, находящуюся в файле темы – searchform.php:

get_search_form();

Форму поиска и содержимое файла searchform.php изучим отдельно в одной из заметок.

Содержание статей о создании темы WordPress находится здесь: https://softsprint.net/wiki/

SOFTSPRINT

Создание header.php в теме WordPress – часть 3

SOFT
SPRINT