Header.php - Что нужно для этого, а что нет

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

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

Первое, что вам нужно знать о файле header.php, это ваша функция.

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

Я написал пример файла 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();
<!—[if IE 7]> <html class=»no-js ie7 oldie» <?php language_attributes();
<!—[if IE 8]> <html class=»no-js ie8 oldie» <?php language_attributes();
<!—[if gt IE 8]><!—> <html <?php language_attributes();
<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();
     
    <!—=== 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 —>

Заголовок «должен» иметь некоторые вещи, этот шаблон, который я сделал, делает следующее (на следующих шагах я расскажу о каждом):

DOCTYPEs
Условные к IE8, 7, 6
Мета-теги, чтобы убедиться, что ваша тема отображается правильно
Фавикон, RSS и Pingback
заглавие
Следуя официальным рекомендациям WordPress, добавление скриптов и стилей с wp_enqueue_style функций wp_enqueue_script и wp_enqueue_style
Оптимизирован с использованием констант и удалением мета-генератора, чтобы помочь с безопасностью
Чистый и закомментированный код

Шаги ниже расскажут об используемом коде и вы узнаете, почему его использовать.

Шаг 2: Файл 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’);

Эта строка удаляет мета-тег генератора, потому что этот тег показывает всем, кто установил версию 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_script и wp_enqueue_style . Вы можете узнать больше об этом в нашей статье, Как включить JavaScript и CSS в ваши темы и плагины WordPress .

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

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

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

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

Шаг 3: header.php

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

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

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

Doctype

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

<!doctype html>

`<html>`

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

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

<meta charset=»<?php bloginfo( ‘charset’ ); ?>» />

Эта строка сообщает 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’); ?>» />

Ссылка для Pingback URL вашего сайта.

`<title>`

<title><?php wp_title();

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

`wp_head()`

<?php wp_head();

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

Вывод

И это сделано! Я действительно надеюсь, что вам понравилась эта статья, и, пожалуйста, не стесняйтесь комментировать шаблон и дать свой фрагмент кода, чтобы улучшить его!

Header.php — Что нужно для этого, а что нет

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

Шаг 2: Окончательный код

Шаг 2: Файл functions.php

Добавление вашего CSS

Добавление сценариев

Шаг 3: header.php

Doctype

`<html>`

Теги `<meta>`

Теги `<link>`

`<title>`

`wp_head()`

Вывод

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC

Header.php — Что нужно для этого, а что нет

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

Шаг 2: Окончательный код

Шаг 2: Файл functions.php

Добавление вашего CSS

Добавление сценариев

Шаг 3: header.php

Doctype

<html>

Теги <meta>

Теги <link>

<title>

wp_head()

Вывод

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC

`<html>`

Теги `<meta>`

Теги `<link>`

`<title>`

`wp_head()`