Файл теми header.php – тонкощі налаштування

26 квітня, 2012 | Відео уроки, Хакі

У цьому посібнику ми поговоримо про header.php, обов'язковому файлі для кожної теми WordPress. Я покажу вам гарний приклад цього файлу і дам поради щодо того, що в ньому має бути, а чого не повинно бути.

Ви також можете ознайомитися з цією інформацією, переглянувши наш відео урок:

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

Крок 1. Запровадження

У цьому файлі у нас не тільки логотип та меню, є ще також тег голова та багато інших тегів, наприклад: за посиланням, сценарій, мета и назву.

Я написав приклад файлу header.php. Я постарався створити максимально повний файл, але не соромтеся коментувати цей посібник з порадами щодо вмісту.

Пам'ятайте, що ваша "шапка" – це контент, який відображається на всіх сторінках вашого сайту. Наприклад, логотип та меню відображаються на всіх сторінках, так що вони будуть додані до header.php.

Якщо елемент відображається лише на конкретній сторінці, потрібно ще раз подумати, чи потрібно додавати цей елемент у файл вашої шапки.

Давайте ж почнемо працювати, я сподіваюся, вам сподобається!

Крок 2. Готовий Код

Тут ви можете отримати повний код для використання у вашій темі. Прочитайте інші кроки для того, щоб зрозуміти, що робить кожен рядок.

Для початку, вставте ці рядки вгору вашого файлу functions.php: (Пам'ятайте, що вам потрібно буде відредагувати шляхи до ваших файлів CSS и JavaScript)

define("THEME_DIR", get_template_directory_uri());
/*--- REMOVE GENERATOR META TAG ---*/
remove_action('wp_head', 'wp_generator');

// ENQUEUE STYLES
	
function enqueue_styles() {
	
	/** REGISTER css/screen.css **/
	wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
	wp_enqueue_style( 'screen-style' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
	
// ENQUEUE SCRIPTS
	
function enqueue_scripts() {
	
	/** REGISTER HTML5 Shim **/
	wp_register_script( 'html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'html5-shim' );
		
	/** REGISTER HTML5 OtherScript.js **/
	wp_register_script( 'custom-script', THEME_DIR . '/js_path/customscript.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'custom-script' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

Тепер у файл header.php додайте ці рядки: (Пам'ятайте, що вам потрібно буде відредагувати шляхи до ваших файлів CSS и JavaScript)

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>

	<!--=== META TAGS ===-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="description" content="Keywords">
	<meta name="author" content="Name">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<!--=== LINK TAGS ===-->
	<link rel="shortcut icon" href="<?php echo THEME_DIR; ?>/path/favicon.ico" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	<!--=== TITLE ===-->	
	<title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?></title>
	
	<!--=== WP_HEAD() ===-->
	<?php wp_head(); ?>
	 
</head>
<body <?php body_class(); ?>>

<!-- HERE GOES YOUR HEADER MARKUP, LIKE LOGO, MENU, SOCIAL ICONS AND MORE -->

<!-- DON'T FORGET TO CLOSE THE BODY TAG ON footer.php FILE -->

У шапці "мають" бути деякі речі. Цей шаблон, який я зробив, робить наступне: (у наступних кроках я поговорю про кожну конкретну)

доктайпи;
умови для IE8, 7, 6;
мета теги у тому, щоб тема правильно сприймалася;
фавіконка, RSS та пінгбек;
Заголовок;
дотримуючись офіційних правил WordPress, додавання скриптів та стилів за допомогою функцій wp_enqueue_script и wp_enqueue_style;
Оптимізований за допомогою констант код без тега Meta Generator (для безпеки);
чистий та прокоментований код.

Далі ми говоритимемо про код, який ми використали. Ви дізнаєтеся про те, навіщо його використовувати.

Крок 3. Файл functions.php

Давайте поговоримо про файл functions.php, ми додали наступні рядки у файл:

define("THEME_DIR", get_template_directory_uri());
/*--- REMOVE GENERATOR META TAG ---*/
remove_action('wp_head', 'wp_generator');

// ENQUEUE STYLES
	
function enqueue_styles() {
	
	/** REGISTER css/screen.cs **/
	wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
	wp_enqueue_style( 'screen-style' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
	
// ENQUEUE SCRIPTS
	
function enqueue_scripts() {
	
	/** REGISTER HTML5 Shim **/
	wp_register_script( 'html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'html5-shim' );
		
	/** REGISTER HTML5 OtherScript.js **/
	wp_register_script( 'custom-script', THEME_DIR . '/js_path/customscript.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'custom-script' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

Перший рядок створює константу THEME_DIR, яка зберігає каталог шаблону. Ми створюємо цю константу для того, щоби оптимізувати тему. Якщо ви подивіться у наш файл header.phpВи побачите, що нам потрібно використовувати директорію кілька разів, ми використовуємо її також у файлі functions.phpвивести шлях до теми. Якщо ми постійно викликаємо get_template_directory_uri()ми просто створюємо запити. Створюючи константу та використовуючи її, ми заощаджуємо ресурси процесора, оскільки ми викликаємо функцію лише один раз.

/*--- REMOVE GENERATOR META TAG ---*/
remove_action('wp_head', 'wp_generator');

Цей рядок видаляє тег Meta Generatorоскільки цей тег показує всім встановлену версію WordPress. Ця інформація може дозволити зловмиснику дізнатися про баги вашої версії і використовувати їх.

Додавання вашого CSS

// ENQUEUE STYLES
	
function enqueue_styles() {
	
	/** REGISTER css/screen.cs **/
	wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
	wp_enqueue_style( 'screen-style' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

Тут ми створили функцію для додавання тегів за посиланням в header.php. Офіційний посібник WordPress вказує, що найкращий спосіб додавання стилів (.CSS) та скриптів (.js) – це використання функцій wp_enqueue_script и wp_enqueue_style. Більше про це можна дізнатися у тут.

Спочатку ми створюємо функцію під назвою enqueue_styles і потім ми викликаємо функцію add_action. Цей рядок говорить WordPress, що він повинен викликати нашу функцію, коли відбувається подія 'wp_enqueue_scripts', що відбувається за нашого виклику wp_head() в header.php!

Усередині нашої функції ми маємо наступні рядки:

	/** REGISTER css/screen.cs **/
	wp_register_style( 'screen-style', THEME_DIR . '/css_path/screen.css', array(), '1', 'all' );
	wp_enqueue_style( 'screen-style' );

Спочатку ми зареєструємо нашу таблицю стилів і додамо її до черги WordPress.

Ми використовуємо функцію wp_register_style, щоб зареєструвати стиль. Ця функція потребує наступного:

Параметр #1: Ім'я, яке ви можете вибрати, щось на зразок мій стиль, mediaqueries...
Параметр #2: Шлях до файлу, зверніть увагу, що ми тут використовуємо константу THEME_DIR.
Параметр #3: Тут ви пишете ваші залежності, назви файлів стилів, які потрібно завантажити перед цим файлом
Параметр #4: Версія.
Параметр #5: Медіа-атрибут для тега. за посиланням.

Потім ми викликаємо функцію wp_enqueue_style і передаємо як параметр ім'я нашого стилю, який буде додано.

Щоб додати до файлу більше стилів, просто скопіюйте ці два рядки та змініть ім'я, директорію та інші параметри.

Додавання скриптів

Тепер ми розглянемо функцію, яка додає наші скрипти.

// ENQUEUE SCRIPTS
	
function enqueue_scripts() {
	
	/** REGISTER HTML5 Shim **/
	wp_register_script( 'html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'html5-shim' );
		
	/** REGISTER HTML5 OtherScript.js **/
	wp_register_script( 'custom-script', THEME_DIR . '/js_path/customscript.js', array( 'jquery' ), '1', false );
	wp_enqueue_script( 'custom-script' );
		
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

Тут процес той самий, різниця у тому, що ми використовуємо інші функції додавання скриптів.

Щоб додати скрипти, ми використовуємо функції wp_register_script и wp_enqueue_script. Функція wp_register_script вимагає наступних параметрів:

Параметр #1: Ім'я, яке ви можете вибрати, щось на зразок jquery, додзё, і т.п.
Параметр #2: Шлях до файлу, зверніть увагу, що ми тут використовуємо константу THEME_DIR.
Параметр #3: Тут ви пишете ваші залежності, назви файлів скриптів, які потрібно завантажити перед цим файлом
Параметр #4: Версія.
Параметр #5: Тут ви говорите, буде цей скрипт доданий у виклику функції wp_head() (зазвичай у header.php) Або wp_footer() (зазвичай у footer.php). Якщо ви передасте false, він буде завантажений у wp_head(). Якщо ви передасте правда, буде завантажений у wp_footer().

Потім ми викликаємо функцію wp_enqueue_script і передаємо як параметр ім'я нашого скрипта, який ми хочемо додати.

Щоб додати більше скриптів до файлу, просто скопіюйте ці два рядки та змініть імена, директорію та інші параметри.

Крок 4. header.php

Спочатку я перерахую посилання на бібліотеки, які ми можемо використовувати в цьому шаблоні, я вже використовую jQuery и HTML5 Shim у цьому шаблоні, але можна додати інші.

jQuery – бібліотека для додавання симпатичних ефектів у вашу тему, я думаю, ви неправильно знаєте цю бібліотеку, вона вже включена до WordPress за промовчанням.
Модернізр – ця бібліотека дозволяє знати точно можливості, які підтримує браузер користувача.
HTML5 Shim – ця бібліотека дозволяє браузерам, які не мають своєї вбудованої підтримки розмітки HTML5, підтримувати її.
Respond.js – дозволяє браузерам, які не мають вбудованої підтримки CSS3 медіа-запитів, почати їх підтримувати.

Ви можете завантажити ці бібліотеки та змінити шляхи у вашому файлі header.php.

Doctype

У цьому шаблоні ми використовуємо стандартний доктайп HTML5:

<!doctype html>

Тег

<!--[if lt IE 7]> <html class="no-js ie6 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->

У цій частині, ми використали деякі умови для IE , які додають клас відповідно до версією IE, або не додає нічого, якщо браузер не IE 8 або нижче (Firefox, IE9, Chrome та інші).

Це дійсно зручно тому, що ви можете створити правило всередині CSS файлу, щоб воно подіяло на об'єкт, якщо браузер IE 7:

/* RUNS ON ALL BROWSERS */
#mymenu { 
	width: 400px;
}
/* RUNS ONLY ON IE7 */
.ie7 #mymenu {
	width: 200px;
}

Але ви також можете створити окремий файл CSS і прив'язати його в області умов, ми будемо говорити про це на наступних кроках. Вибір за вами.

Тег

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

Тег заголовка дуже важливий, оскільки він замінює заголовок за замовчуванням та покращує ваші позиції в пошукових системах.

wp_head()

<?php wp_head(); ?>

Це дуже важлива функція, ви обов'язково маєте викликати цю функцію! За допомогою цієї функції WordPress додає код із плагінів, JavaScript бібліотек і т.д.

Джерело: WP.tutsplus.com

Дивіться також:

WordPress 3.6: вивчаємо вбудований аудіо- та відеоплеєр

10 плагінів WordPress для проведення конкурсів на вашому сайті, щоб збільшити трафік та продаж

Як додати кнопку на адмін панель для швидкого виправлення коду WordPress теми

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 31

ligazakona:

27.04.2012 в 10: 01

Дуже докладна та гарна інструкція. Велике спасибі!