Артём Санников

Файл header.php является основным файлом темы, поскольку именно в нём подключаются стили, скрипты и встроенные функции WordPress.

Для того, чтобы начать интеграцию открываем header.php и следуем инструкциям.

Кодировка

Первым делом находим строку в которой мы указали кодировку для сайта.

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

И заменяем ее на аналогичную строку, которая будет отдавать тот же самый результат. Кодировка будет выводиться автоматически, основываясь на настройках wordPress.

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

Заголовок страницы

Выделяем тег <title>, который отвечает за формирование заголовка для страницы.

<title>Главная страница</title>

И заменяем на следующую функцию wp_title().

<title><?php wp_title(); ?></title>

Работа с иконками

Выделяем код который отвечает за формирование иконки для сайта.

	<link rel="shortcut icon" href="favicon/favicon.png" type="image/png">
	<link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon">
	<link rel="apple-touch-icon" sizes="60x60" href="favicon/favicon_apple_60.png">
	<link rel="apple-touch-icon" sizes="76x76" href="favicon/favicon_apple_76.png">
	<link rel="apple-touch-icon" sizes="120x120" href="favicon/favicon_apple_120.png">
	<link rel="apple-touch-icon" sizes="152x152" href="favicon/favicon_apple_152.png">

В атрибуте href перед /favicon вставляем функцию esc_url(get_template_directory_uri()), которая будет выводить путь до директории сайт.ру/wp-content/themes/FirstTheme, это место хранения файлов темы.

Результатом выполнения будет полный адрес по которому будет доступна иконка сайт.ру/wp-content/themes/FirstTheme/favicon/favicon.png.

	<link rel="shortcut icon" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon/favicon.png" type="image/png">
	<link rel="shortcut icon" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon/favicon.ico" type="image/x-icon">
	<link rel="apple-touch-icon" sizes="60x60" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon/favicon_apple_60.png">
	<link rel="apple-touch-icon" sizes="76x76" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon/favicon_apple_76.png">
	<link rel="apple-touch-icon" sizes="120x120" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon/favicon_apple_120.png">
	<link rel="apple-touch-icon" sizes="152x152" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon/favicon_apple_152.png">

Стили CSS

Находим два тега которые отвечают за подключение стилей css в нашу тему.

	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="style.css">

В атрибут href вставляем уже знакомую нам функцию esc_url(get_template_directory_uri()).

	<link rel="stylesheet" href="<?php echo esc_url(get_template_directory_uri()); ?>/reset.css">
	<link rel="stylesheet" href="<?php echo esc_url(get_template_directory_uri()); ?>/style.css">

Событие wp_head

Событие wp_head() является важным событием, так как в момент выполнения этого события подключаются файлы стилей, скрипты и разные мета-теги страницы.

Важный момент: событие wp_head() используется не только плагинами, но и самим WordPress, так что пренебрегать подключением этого события не нужно.

Вставляем функцию wp_head() перед закрывающим тегом </head>.

<?php wp_head(); ?>

Название и описание сайта

Перемещаемся в блок div с классом bloginfo и произведём модификацию кода. Ниже предоставлен участок кода, который будет изменён.

		<div class="bloginfo">
			<h1><a href="">Блог Артёма Санникова</a></h1>
			<p>Подробные пошаговые обучающие уроки по сайтостроению и продвижению.</p>
		</div>

Вставляем три простых функции, которые будут выводить нужную нам информацию.

• bloginfo('url') — выводит ссылку на главную страницу сайта;
• bloginfo('name') — выводит название сайта, задаётся в настройках WordPress;
• bloginfo('description') — краткое описание сайта, задаётся в настройках WordPress.

		<div class="bloginfo">
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
			<p><?php bloginfo('description'); ?></p>
		</div>

Навигация

Выделяем содержимое блока div с классом nav и удаляем. Сам блок nav, не удаляем.

Ниже предоставлен код, который будет изменён.

		<div class="nav">
			<ul>
				<li class="current_page_item"><a href="">Главная</a></li>
				<li><a href="">Об авторе</a></li>
				<li><a href="">Контакты</a></li>
				<li><a href="">Карта сайта</a></li>
			</ul>
		</div>

На место удалённого кода вставляем функцию, которая будет выводить навигационное меню. Суть заключается в том, что мы указываем место для вывода конкретного навигационного меню (навигационное меню формируется в разделе — произвольное меню).

		<div class="nav">
			<?php wp_nav_menu('theme_location=top-navigation'); ?>
		</div>

Открываем файл functions.php и сразу после открывающего тега <?php вставляем код, который произведёт регистрацию произвольного меню для нашей темы.

/**
* Регистрация навигационного меню
**/
register_nav_menus(array(
	'top-navigation'=>'Top navigation menu',//меню в шапке (месторасположение в шаблоне)
));

Интеграция завершена

Окончательный вариант шаблона header.php представлен ниже.

<!DOCTYPE html>
<html>
<head>
	<!-- Charset -->
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<!-- Page info -->
	<title><?php wp_title(); ?></title>
	<meta name="language" content="ru">
	<!-- Favicon -->
	<link rel="shortcut icon" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon/favicon.png" type="image/png">
	<link rel="shortcut icon" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon/favicon.ico" type="image/x-icon">
	<link rel="apple-touch-icon" sizes="60x60" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon/favicon_apple_60.png">
	<link rel="apple-touch-icon" sizes="76x76" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon/favicon_apple_76.png">
	<link rel="apple-touch-icon" sizes="120x120" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon/favicon_apple_120.png">
	<link rel="apple-touch-icon" sizes="152x152" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon/favicon_apple_152.png">
	<!-- Style CSS-->
	<link rel="stylesheet" href="<?php echo esc_url(get_template_directory_uri()); ?>/reset.css">
	<link rel="stylesheet" href="<?php echo esc_url(get_template_directory_uri()); ?>/style.css">
	<!-- JQuery Library -->
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	<?php wp_head(); ?>
</head>
<body>

<!-- Обёртка -->
<div id="wrapper">

	<!-- Шапка -->
	<div class="header">
		<!-- Название блога и описание -->
		<div class="bloginfo">
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
			<p><?php bloginfo('description'); ?></p>
		</div>
		<!-- Навигация -->
		<div class="nav">
			<?php wp_nav_menu('theme_location=top-navigation'); ?>
		</div>
	</div>

Если у вас остались какие-то вопросы или вы нашли непонятный момент в описании, пишите в комментариях ниже и я вам обязательно отвечу.

С уважением, Артём Санников

Сайт: ArtemSannikov.ru

Метки: Wordpress, Создание темы.