Продовжимо розбір будови шаблона WordPress. Коли ми розглядали файл виведення головної сторінки WordPress, я згадував, що на самому початку потрібно підключити додатковий файл із описом шапки сайту. Саме зараз ми його й розглянемо.

Отже, перший рядок буде містити запис про DOCTYPE – що це таке, читай нижче:

Елемент DOCTYPE призначений для вказівки типу поточного документа – DTD (document type definition, опис типу документа). Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, оскільки HTML існує в декількох версіях, крім того, є XHTML (EXtensible HyperText Markup Language, розширена мова розмітки гіпертексту), який схожий на HTML, але відрізняється від нього по синтаксису. Саме для того, щоб браузер "не плутався" і розумів, згідно якого стандарту відображати веб-сторінку, і необхідно в першому рядку коду задавати DOCTYPE.

Запис будемо робити згідно стандарту HTML5 – коротко і ясно. Колись цей запис містив багато інформації, але з новим HTML5 вистачає отакого короткого запису:

<!doctype html>

Далі йде стандартна html-шапка:

<html>
<head>
	<meta charset=<?php bloginfo('charset'); ?>>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title><?php wp_get_document_title(); ?></title>
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<?php wp_head(); ?>
</head>

Розглянемо трішки детальніше. Атрибут charset повідомляє браузеру кодування сайту, в даному випадку кодування береться із налаштувань самого WordPress.

Метатег viewport призначений для коректного відображення сайту на мобільних пристроях. Оскільки мій дизайн адаптивний, то я вказав, що ширина сайту повинна підлаштовуватися під ширину мобільного дисплея (width=device-width), а початковий масштаб буде незмінним (initial-scale=1). Звичайно, якщо комусь буде такий масштаб замалим, він зможе в будь-який момент збільшити його, просто потягнувши двома пальцями по екрану в різні сторони (це я про сенсорні пристрої, на стаціонарному ЕЛТ-моніторі такого не зробиш 🙂 ). Можна також повністю заборонити масштабування, додавши значення user-scalable=no, але я б не радив цього робити – не можна забирати в людини можливість підлаштувати перегляд під себе.

Далі. Функція wp_get_document_title(); Виводить заголовок сторінки в html-тег title.

rel="pingback" вказує адресу "pingback" сервера.

Система pingback – це можливість блогу автоматично отримати повідомлення, що на нього хтось послався. Це надає можливість зібрати всі коментарі до статті в одному місці. Деякі системи блогів, зокрема WordPress, включають цей механізм у себе за замовчуванням.

wp_head(); запускає хук-дію wp_head. Обов'язково мусить бути між тегами head, інакше будуть проблеми із роботою системи.

Далі нам потрібно вивести тег body. У WordPress це робиться наступним чином:

<body <?php body_class(); ?>>

Даний вивід зручний тим, що WordPress автоматично додасть до тега body відповідні Вашому розташуванню на сайті класи (тобто вони будуть відрізнятися на сторінках категорій, окремих статей та сторінок, головній сторінці тощо), що дуже зручно при наступному оформленні сайту за допомогою CSS.

Приступаємо до виведення основних блоків сайту. Почнемо із загального блоку, Наприклад, отак:

<div id="page">

І за основним блоком відразу виведемо шапку сайту:

<header class="site-header">
	<nav id="topmenu" role="navigation">
		<?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'menu_class' => 'top-menu' ) ); ?>
	</nav>
	<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img alt="" src="<?php bloginfo('template_url'); ?>/images/logo.png"></a></h1>
	<div id="search-container">
		<div class="search-box">
			<?php get_search_form(); ?>
		</div>
	</div>
</header>

Розкладемо по поличках викладене вище. Функція wp_nav_menu виводить меню сайту, правда, його попередньо ще треба прописати у файлі functions.php. Про це пізніше.

Тег H1 і все, що за ним до кінця рядка – виведення логотипу сайту, який одночасно служитиме посиланням на головну сторінку. Зверни увагу, що для правильної роботи цього запису у папці з твоїм шаблоном має бути вкладена папка images, а в ній лежати графічний файл із логотипом під назвою logo.png. Це не обов'язково, назва може бути будь-яка, але вона повинна співпадати із записом. Також можна зробити простіше – просто вивести назву сайту замість логотипу, але так мені більше подобається.

Після цього я вивів форму пошуку на сайті. Це робиться за допомогою функції get_search_form();. Цю функцію також треба окремо описати, знову ж таки зробимо це пізніше.

Повністю файл header.php виглядатиме приблизно отак (можеш скопіювати і спробувати):

<!doctype html>
<html>
<head>
	<meta charset=<?php bloginfo('charset'); ?>>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title><?php wp_get_document_title(); ?></title>
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page">
	<!-- Шапка -->
	<header class="site-header">
		<nav id="topmenu" role="navigation">
			<?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'menu_class' => 'top-menu' ) ); ?>
		</nav>
		<!-- Назва сайту -->
		<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img alt="" src="<?php bloginfo('template_url'); ?>/images/logo.png"></a></h1>
		<div id="search-container">
			<div class="search-box">
				<?php get_search_form(); ?>
			</div>
		</div>
	</header>

Що ж, на цьому все, у наступній статті розглядатимемо вивід категорій WordPress. Удачі тобі!