Файл темы header.php — тонкости настройки

Опубликовано: 01.09.2018

видео Файл темы header.php — тонкости настройки

WordPress Theme Development Tutorial 11: Creating Header

В этом руководстве мы поговорим о header.php , обязательном файле для каждой WordPress темы. Я покажу вам хороший пример этого файла и дам советы по поводу, что в нем должно быть, а чего быть не должно.



Вы также можете ознакомиться с этой информацией, посмотрев наш видео урок:

Шаг 1. Введение

В этом файле у нас не только логотип и меню, есть еще также тег head и много других тегов, например: link , script , meta и title .

Я написал пример файла header.php . Я постарался создать максимально полный файл, но не стесняйтесь комментировать это руководство с советами по поводу содержимого.


Wordpress создание темы - Урок 3 подключение css, js. Работаем c header.php

Помните, что ваша "шапка" – это контент, который отображается на всех страницах вашего сайта. Например, логотип и меню показываются на всех страницах, так что они будут добавлены в header.php .

Если элемент отображается только на конкретной странице, вам нужно еще раз подумать, нужно ли добавлять этот элемент в файл вашей шапки.


WordPress Theme Development Tutorial 5: header.php and footer.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' );

Здесь мы создали функцию для добавления тегов link в 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 : Имя, которое вы можете выбрать, что-то вроде mystyle , mediaqueriesПараметр #2 : Путь к файлу, обратите внимание, что мы здесь используем константу THEME_DIR . Параметр #3 : Здесь вы пишете ваши зависимости, названия файлов стилей, которые нужно загрузить перед этим файлом. Параметр #4 : Версия. Параметр #5 : Медиа-атрибут для тега link .

Затем мы вызываем функцию 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 , dojo , и т.п. Параметр #2 : Путь к файлу, обратите внимание, что мы здесь используем константу THEME_DIR . Параметр #3 : Здесь вы пишете ваши зависимости, названия файлов скриптов, которые нужно загрузить перед этим файлом. Параметр #4 : Версия. Параметр #5 : Здесь вы говорите, будет этот скрипт добавлен в вызове функции wp_head() (обычно в header.php ) или wp_footer() (обычно в footer.php ). Если вы передадите false , он будет загружен в wp_head() . Если вы передадите true , будет загружен в wp_footer() .

Затем мы вызываем функцию wp_enqueue_script и передаем в качестве параметра имя нашего скрипта, который мы хотим добавить.

Чтобы добавить больше скриптов в ваш файл, просто скопируйте эти две строки и измените имена, директорию и другие параметры.

Шаг 4. header.php

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

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

Вы можете скачать эти библиотеки и изменить пути в вашем файле header.php .

Doctype

В этом шаблоне мы используем стандартный доктайп HTML5 :

<!doctype html>

Тег <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 и привязать его внутри области условий, мы будем говорить об этом на следующих шагах. Выбор за вами.

Теги <meta>

Мета-теги очень важны, т.к. они передают некоторую информацию браузеру, чтобы быть уверенными в том, что ваша тема будет правильно воспринята.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Эта строка подтверждает, что браузер не будет использовать Quirks Mode , это очень полезно, так как этот режим может поломать разметку.

<meta charset="<?php bloginfo( 'charset' ); ?>" />

Эта строка сообщает браузеру кодировку, чтобы избежать неизвестных символов.

<meta name="description" content="Keywords"> <meta name="author" content="Name">

Просто основные мета теги, которые могут улучшить SEO вашей темы. Вы можете добавить ключевые слова, которые описывают сайт и написать название вашего бизнеса.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Этот тег удаляет/сбрасывает любое увеличение мобильным устройством, по типу iPad и iPhone, очень удобно, если вы работаете с гибкой разметкой.

Теги <link>

<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'); ?>" />

Ссылка на RSS ленту вашего сайта.

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Ссылка на пингбек URL вашего сайта.

Тег <title>

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

Тег заголовка очень важен, поскольку он заменяет заголовок по умолчанию и улучшает ваши позиции в поисковых системах.

wp_head()

<?php wp_head(); ?>

Это очень важная функция, вы обязательно должны вызвать эту функцию! С помощью этой функции WordPress добавляет код из плагинов, JavaScript библиотек и т.д.

Источник: 
IRC (Internet Relay Chat)
rss