Файл header php что это и где находится
Начинаем создавать файлы для своей темы WordPress mytheme, для которой ранее наметили Структуру шаблона страницы. Создаем файл header.php и добавляем в файл functions.php функции подключения файла с переводом и добавления номера страницы.
Первые строки header.php
Или вместо вызова language_attributes() для сайта на русском языке просто
dir="ltr" - направление текста слева направо
Раздел <head>
Раздел <head> содержит заголовок страницы (<title>), метатеги (<meta>) и ссылки на подключаемые файлы скриптов, стилей и RSS-потоки.
Добавление функций в файл functions.php
Следующая функция подключает файл с переводом из папки /languages. Она нужна, чтобы тема была доступна для перевода на разные языки.
А эта функция получает номер страницы (если это страница, на которую перешли по ссылке "Предыдущие записи") и добавляет этот номер к заголовку:
Чтобы текст был доступен для перевода, его вставляют в тему как аргумент функции __() (это два подчеркивания - псевдоним функции translate()). Есть и другие способы, например, _e() - одно подчеркивание перед e - выводит строку, переведенную функцией translate(), с помощью echo.
Тег <head> в файле header.php
Записываем содержимое тега <head></head> с оптимизацией заголовка (title) для поисковых машин, например, заголовок для отдельных записей (post) и постоянных страниц (page) содержит только post title, а для дополнительных страниц со списком предыдущих записей title включает номер страницы:
'Search results for ' - 'Результаты поиска для '
'Not Found' - 'Не найдено'
Если по каким-то причинам используется другая кодировка символов, вместо
получаем кодировку из bloginfo:
Подключение скрипта для поддержки древовидных комментариев (threaded comments):
Хук wp_head() добавляется перед закрывающим тегом, чтобы плагины могли вставлять сюда стили, скрипты и метатеги. Кроме того, добавлены ссылки на RSS-потоки и пинги (pingbacks).
Раздел заголовка сайта header
Итак, заголовок сайта, например, на страницах одиночных записей помещен в простой тег div и только на домашней (home page) или главной странице (front page) в тег h1. ( bloginfo() позволяет выводить более 20 элементов данных о сайте)
Меню и ссылка для скринридера (screen reader)
Для русской темы вместо <?php _e( 'Skip to content', 'mytheme' ) ?> можно написать русский текст - 'Перейти к содержимому'.
Это основное содержимое файла header.php для шапки сайта WordPress.
Файл header.php для базовой темы WordPress : 3 комментария
Было интересно прочесть.
Здравствуйте, есть ли какой-нибудь способ контролировать порядок вывода кода функцией wp_head(); т.е мне не нравится что у меня идет тайтл, потом идет куча кода выводимого wp_head, а потом где то внизу идет дескрипшн и кейвордц, так же выводимые функцией wp_head (у меня это делает плагин ALL in SEO pack)
Один из ключевых файлов темы WordPress, который отвечает за подключение стилей, встроенных функций и скриптов. Благодаря ему происходит передача всех необходимых данных для поочередного запуска модулей и структуры сайта браузеру. Не требует постоянной настройки.
Что такое хедер сайта?
Прямой перевод – «шапка». Находится в верхней части, может быть оформлена по общему стилю или индивидуально. Основные элементы:
- название;
- слоган;
- логотип компании;
- контактные данные;
- навигация
Используя правильную компоновку навигационных элементов, привлекательный дизайн и краткую информацию о деятельности сайта, можно значительно улучшить поведенческие факторы, включая первое впечатление посетителей. Header.php находится в корневой директории выбранного шаблона.
Содержимое header WordPress
Добавление метатегов в хедер осуществляется при помощи текстового редактора (рекомендуется Notepad++). В их список входят: head, title, meta, script, link. Как пример, рассмотрим наиболее полный файл без лишних элементов. Дальнейшее внедрение дополнительного функционала зависит от потребностей отдельного заказчика.
Кодовая часть
Необходимо добавить следующие строки в верхнюю часть functions.php:
/** REGISTER HTML5 Shim **/
/** REGISTER HTML5 OtherScript.js **/
В header.php следует прописать код:
Подробно рассмотрев пример, указанный выше, разделим его на несколько важных элементов, обязательных в файле:
- doctype; (Тип документа)
- языковые атрибуты (ранее использовались условия для браузеров старых версий, однако современный вариант упускает этот момент);
- список метатегов;
- фавикон, RSS, пингбек;
- заголовок;
- при необходимости функции «wp_enqueue_script» и «wp_enqueue_style».
Работа с function.php
Указанный ранее код уже помещен в функциональный файл. Некоторые элементы позволяют нам сократить затраты ресурсов сервера на обработку запросов путем создания константы THEME_DIR. Это изложено в первой строке, где сохраняется директория шаблона. Является важным элементом оптимизации темы. Некоторые вебмастера идут сложным путем, вызывая повторные запросы через «get_template_directory_uri()».
Следующая строка избавляет от генератора метатегов, который демонстрирует текущую версию шаблона пользователям (включая злоумышленников).
Добавление CSS
Теперь необходимо добавить тег link в header.php – для этого создается функция:
Используются «wp_enqueue_script» и «wp_enqueue_style» согласно рекомендациям руководства по WordPress. Очередность действий:
- Создание «enqueue_styles».
- Вызов «add_action», если происходит событие «wp_enqueue_scripts».
Содержит внутри строки:
Для регистрации таблицы стилей используется «wp_register_style», она требует список параметров:
- Выбор доступного имени.
- Указание пути к файлу (в данной ситуации используется константа THEME_DIR).
- Вписываются условия, необходимые файлы для предварительной загрузки, название стилей.
- используемая версия.
- Медиа-атрибут тега link.
Далее, вызывается «wp_enqueue_style» и передается имя стиля, который будет применен. Для добавления нескольких образцов в header WordPress можно повторно копировать строки, а также изменять имеющиеся параметры.
Добавление скриптов
Применяя данный код происходит добавление скриптов:
/** REGISTER HTML5 Shim **/
Процесс аналогичен подключению стилей, но используются другие функции («wp_register_script» и «wp_enqueue_script»). Для первой необходимы схожие параметры, как для «wp_register_style» – отличается лишь 5 пункт, в котором определяется, будет ли добавлен вызов через «wp_head» (значение fals) или «wp_footer» (значение true).
Через «wp_enqueue_script» указывается имя скрипта для интеграции. Для большего количества образцов необходимо повторно скопировать код, изменить параметры, имя и директорию.
Header WordPress
Стандартный файл содержит набор тегов и функций, используемых по умолчанию. Рассмотрим их особенности и функционал.
Устанавливаются языковые атрибуты или добавляются классы в соответствии с версией браузера (больше не применяется).
Добавление метатегов в хедер является важной операцией, поскольку браузеру передается важная информация для правильного отображения темы.
Строка отключающая использование браузером Quirks Mode – данный режим плохо сказывается на разметке:
Указание кодировки для правильного отображения шрифтов:
Параметры, улучшающие SEO-показатели ресурса (описание, ключевые слова):
Добавление favicon для сайта:
Высокая важность. Изменяет стандартный заголовок, улучшая SEO-параметры:
Список стандартных и наиболее применяемых функций:
- wp_head WordPress – используется для добавления кода из плагинов, скриптов, библиотек;
- get_header WordPress – выполняет подключение файла шаблона (для каждой страницы отдельное имя).
Заключение
Таким образом осуществляется настройка header WordPress. Файл требует вмешательства только на начальном этапе подготовки темы. Повторное использование необходимо при подключении дополнительных функций, скриптов или таблиц стилей. Рассмотрены основные теги и их предназначение. Разработчики постоянно модернизируют платформу для минимизации человеческих действий в редактировании подобных файлов. Для безопасности, не рекомендуется использовать сторонние и непроверенные скрипты.
В предыдущей статье мы создали нашу среду разработки темы WordPress, в этой статье мы пойдем на один шаг вперед и создадим шапку (header) в теме WordPress.
Для того, чтобы научиться делать свою тему на WordPress или “натягивать” свою верстку на движок можно использовать несколько подходов. Самый простой – взять стандартную тему WP и разобрать, как и что в ней работает, копируя в свою тему нужные части готового кода. Такой себе копипаст.
После установки темы, которую мы создали в предыдущей статье с помощью underscores, откройте свой сайт WordPress в браузере. Вы должны увидеть сломанный сайт без стиля, когда вы закончите читать эту статью, вы увидите, что верхняя часть (шапка) вашей темы WordPress полностью настроена. Обычно в эту часть входят – логотип, меню, описание и название сайта.
Вот так выглядит сайт сейчас
Файлы, используемые при создании верхней части сайта.
Нам понадобятся следующие файлы:
- header.php
- functions.php
- style.css
Что делает каждый из файлов.
header.php
header.php используется для отображения верхней части темы WordPress. Этот файл содержит код для отображения изображения, заголовка сайта, слогана сайта и меню. Эта часть одинакова (или почти одинакова) для всех страниц, поэтому ее выносят в отдельный файл, который потом можно легко и просто подключить к любой странице одной строкой кода:
Но если для какой-то страницы шаблона нужно использовать другую шапку, можно создать новый файл шапки, и назвать, например, header-new.php
А потом вызвать его при помощи стандартной функции:
functions.php
Этот файл содержит основные функции вашей темы. Он используется для изменения поведения по умолчанию в WordPress, здесь вы можете определить свои собственные функции.
style.css
Этот файл содержит стили для нашей темы WordPress.
Подключение стилей, скриптов и шрифтов
Предположим, у вас есть готовая верстка с подключенными стилями и скриптами.
Создадим в корне темы, там, где находится index.php папку для стилей. Скопируем все файлы .css из папки шаблона верстки в только что созданную папку с нашей темой test (кроме главного файла style.css, который всегда должен находится на одном уровне с index.php).
Теперь открываем файл style.css верстки и копируем его содержимое. Открываем тот же файл в папке с темой и добавляем в него все, что скопировали из исходника (то, что было можно удалить).
Аналогично создадим папку для скриптов. Копируем все файлы .js из папки js исходного шаблона, в только что созданную папку темы.
Теперь используя функцию wp_enqueue_style подключаем нужные css файлы и шрифты.
Открываем файл functions.php – внизу, там, где подключен скрипт вставляем.
Подключаем скрипты, используя функцию wp_enqueue_script.
Теперь должны подключиться стили и скрипты верстки. Проверяйте подключение на сайте с помощью F12.
Более детально о правильном подключении скриптов читайте в этой статье.
Header.php
Рассмотрим из чего состоит файл header.
Открыв файл header.php вы должны увидеть следующий код (скриншот). Давайте рассмотрим верхнюю часть:
wp_head() -обязательная строка!, которая выводится перед закрывающим тэгом </head>. С помощью этого хука подключаются стили и скрипты (те, что мы подключили через wp_enqueue_style()) и метатэги (title, description, robots).
Выведем в шапке название сайта и его описание.
Зарегистрируем свое меню в function.php, например для отображения навигации на мобильных устройствах. В function.php пропишем такие строки:
Теперь заходим во Внешний вид- меню, придумаем название своего меню и задаем область его отображения.
Чтобы вывести это меню на сайте нужно также воспользоваться фнкцией wp_nav_menu ( $args ) где $args – это параметры меню.
Сама функция wp_nav_menu() имеет множество параметров. В нашем примере это
Более подробно обо всех параметрах можно почитать в кодексе WordPress.
Вот и все, наша шапка готова, дальше можно менять стили в ней по своему усмотрению, добавлять произвольные поля и кастомизировать на свой вкус.
В следующей статье рассмотрим, как подключать footer (подвал) и sidebar.
Для большинства пользователей WordPress — это черный ящик. Вы помещаете Read more
Если вы веб-разработчик и создаете веб-сайты с помощью HTML и Read more
Понимание того, как использовать функцию wp_query может поднять ваши навыки Read more
В моей последней статье я писала о создании пользовательских типов Read more
Эта статья научит вас, как реализовать пользовательские типы записей WordPress. Read more
В этом руководстве мы поговорим о header.php, обязательном файле для каждой WordPress темы. Я покажу вам хороший пример этого файла и дам советы по поводу, что в нем должно быть, а чего быть не должно.
Вы также можете ознакомиться с этой информацией, посмотрев наш видео урок:
Шаг 1. Введение
В этом файле у нас не только логотип и меню, есть еще также тег head и много других тегов, например: link, script, meta и title.
Я написал пример файла header.php. Я постарался создать максимально полный файл, но не стесняйтесь комментировать это руководство с советами по поводу содержимого.
Помните, что ваша "шапка" – это контент, который отображается на всех страницах вашего сайта. Например, логотип и меню показываются на всех страницах, так что они будут добавлены в header.php.
Если элемент отображается только на конкретной странице, вам нужно еще раз подумать, нужно ли добавлять этот элемент в файл вашей шапки.
Давайте же приступим к работе, я надеюсь, вам понравится!
Шаг 2. Готовый Код
Здесь вы можете получить полный код для использования в вашей теме. Прочтите другие шаги для того, чтобы понять, что конкретно делает каждая строка.
Для начала, вставьте эти строки в верх вашего файла functions.php: (помните, что вам нужно будет отредактировать пути к вашим файлам CSS и JavaScript)
Теперь в файл header.php добавьте эти строки: (помните, что вам нужно будет отредактировать пути к вашим файлам CSS и JavaScript)
В шапке "должны" быть некоторые вещи. Этот шаблон, который я сделал, делает следующее: (в следующих шагах я поговорю о каждом конкретном)
- доктайпы;
- условия для IE8, 7, 6;
- мета теги для того, чтобы тема правильно воспринималась;
- фавиконка, RSS и пингбек;
- заголовок;
- следуя официальным правилам WordPress, добавления скриптов и стилей с помощью функций wp_enqueue_script и wp_enqueue_style;
- Оптимизированный с помощью констант код без тега Meta Generator (для безопасности);
- чистый и откомментированный код.
Дальше мы будем говорить о коде, который мы использовали. Вы узнаете о том, зачем нужно его использовать.
Шаг 3. Файл functions.php
Давайте поговорим о файле functions.php, мы добавили следующие строки в файл:
Первая строка создает константу THEME_DIR, которая хранит директорию шаблона. Мы создаем эту константу для того, чтобы оптимизировать тему. Если вы посмотрите в наш файл header.php, вы увидите, что нам нужно использовать директорию несколько раз, мы используем ее также в файле functions.php, чтобы вывести путь к теме. Если мы постоянно вызываем get_template_directory_uri(), мы просто создаем запросы. Создавая константу и используя ее, мы экономим ресурсы процессора, поскольку мы вызываем функцию только один раз.
Эта строка удаляет тег Meta Generator, поскольку этот тег показывает всем установленную версию WordPress. Эта информация может позволить злоумышленнику узнать баги вашей версии и использовать их.
Добавление вашего CSS
Здесь мы создали функцию для добавления тегов link в header.php. Официальное руководство WordPress указывает, что лучший способ добавления стилей (.css) и скриптов (.js) – это использование функций wp_enqueue_script и wp_enqueue_style. Больше об этом можно узнать в здесь .
Сначала мы создаем функцию под названием enqueue_styles и затем мы вызываем функцию add_action. Эта строка говорит WordPress, что он должен вызвать нашу функцию, когда происходит событие ‘wp_enqueue_scripts’, что происходит при нашем вызове wp_head() в header.php!
Внутри нашей функции у нас следующие строки:
Сначала мы зарегистрируем нашу таблицу стилей и добавим ее в очередь WordPress.
Мы используем функцию wp_register_style, чтобы зарегистрировать стиль. Эта функция требует следующее:
Затем мы вызываем функцию wp_enqueue_style и передаем в качестве параметра имя нашего стиля, который будет добавлен.
Чтобы добавить в файл больше стилей, просто скопируйте эти две строки и измените имя, директорию и другие параметры.
Добавление скриптов
Теперь мы рассмотрим функцию, которая добавляет наши скрипты.
Здесь процесс тот же, разница в том, что мы используем другие функции для добавления скриптов.
Чтобы добавить скрипты, мы используем функции wp_register_script и wp_enqueue_script. Функция wp_register_script требует следующих параметров:
Затем мы вызываем функцию wp_enqueue_script и передаем в качестве параметра имя нашего скрипта, который мы хотим добавить.
Чтобы добавить больше скриптов в ваш файл, просто скопируйте эти две строки и измените имена, директорию и другие параметры.
Шаг 4. header.php
Сначала я перечислю здесь ссылки на библиотеки, которые мы можем использовать в этом шаблоне, я уже использую jQuery и HTML5 Shim в этом шаблоне, но вы можете добавить другие.
- jQuery – библиотека для добавления симпатичных эффектов в вашу тему, я думаю, вы неверное знаете эту библиотеку, она уже включена в WordPress по умолчанию.
- Modernizr – эта библиотека позволяет вам знать точно возможности, которые поддерживает браузер пользователя.
- HTML5 Shim – эта библиотека позволяет браузерам, у которых нет своей встроенной поддержки разметки HTML5, поддерживать ее.
- Respond.js – позволяет браузерам, у которых нет встроенной поддержки CSS3 медиа-запросов, начать их поддерживать.
Вы можете скачать эти библиотеки и изменить пути в вашем файле header.php.
Doctype
В этом шаблоне мы используем стандартный доктайп HTML5:
Тег <html>
В этой части, мы использовали некоторые условия для IE , которые добавляют класс в соответствии с версией IE, или не добавляет ничего, если браузер не IE 8 или ниже (Firefox, IE9, Chrome и другие).
Это действительно удобно потому, что вы можете создать правило внутри CSS файла, чтобы оно подействовало на объект, если браузер IE 7:
Но вы также можете создать отдельный файл CSS и привязать его внутри области условий, мы будем говорить об этом на следующих шагах. Выбор за вами.
Теги <meta>
Мета-теги очень важны, т.к. они передают некоторую информацию браузеру, чтобы быть уверенными в том, что ваша тема будет правильно воспринята.
Эта строка подтверждает, что браузер не будет использовать Quirks Mode, это очень полезно, так как этот режим может поломать разметку.
Эта строка сообщает браузеру кодировку, чтобы избежать неизвестных символов.
Просто основные мета теги, которые могут улучшить SEO вашей темы. Вы можете добавить ключевые слова, которые описывают сайт и написать название вашего бизнеса.
Этот тег удаляет/сбрасывает любое увеличение мобильным устройством, по типу iPad и iPhone, очень удобно, если вы работаете с гибкой разметкой.
Теги <link>
Эта строка добавляет фавиконку для вашей страницы, добавляет немного профессионального вида вашему сайту.
Ссылка на RSS ленту вашего сайта.
Ссылка на пингбек URL вашего сайта.
Тег <title>
Тег заголовка очень важен, поскольку он заменяет заголовок по умолчанию и улучшает ваши позиции в поисковых системах.
wp_head()
Это очень важная функция, вы обязательно должны вызвать эту функцию! С помощью этой функции WordPress добавляет код из плагинов, JavaScript библиотек и т.д.
В этом руководстве давайте поговорим о header.php , необходимом файле для любой темы WordPress. Я покажу вам хороший пример файла заголовка и дам советы о том, что в него нужно, а что нет.
Шаг 1: Введение
Первое, что вам нужно знать о файле header.php, это ваша функция.
Но у нас есть больше, чем логотип и меню в этом файле, у нас также есть title и множество других тегов, таких как: link , script , meta и title .
Я написал пример файла header.php , я попытался создать максимально полный файл, но не стесняйтесь комментировать этот урок, давая советы о файле .
Если элемент отображается только на определенной странице, вам нужно подумать, действительно ли этот элемент должен находиться внутри вашего заголовка.
Давайте работать, и я надеюсь, что вам это нравится!
Шаг 2: Окончательный код
Здесь вы можете получить окончательный код для использования в вашей теме. Прочитайте другие шаги, чтобы точно знать, что делает каждая строка.
Сначала вставьте эти строки вверху вашего файла functions.php : (Помните, что вам нужно изменить пути к вашим файлам CSS и JavaScript)
Теперь внутри вашего header.php добавьте эти строки: (Помните, что вам нужно изменить пути к вашим файлам CSS и JavaScript)
Заголовок «должен» иметь некоторые вещи, этот шаблон, который я сделал, делает следующее (на следующих шагах я расскажу о каждом):
- DOCTYPEs
- Условные к IE8, 7, 6
- Мета-теги, чтобы убедиться, что ваша тема отображается правильно
- Фавикон, RSS и Pingback
- заглавие
- Следуя официальным рекомендациям WordPress, добавление скриптов и стилей с wp_enqueue_style функций wp_enqueue_script и wp_enqueue_style
- Оптимизирован с использованием констант и удалением мета-генератора, чтобы помочь с безопасностью
- Чистый и закомментированный код
Шаги ниже расскажут об используемом коде и вы узнаете, почему его использовать.
Шаг 2: Файл functions.php
Давайте начнем говорить о файле functions.php , мы добавили следующие строки в файл:
В первой строке просто создается константа с именем THEME_DIR которой хранится каталог шаблонов. Мы создаем эту константу для оптимизации темы. Если вы загляните в наш файл header.php , нам понадобится каталог несколько раз, и мы используем его в файле functions.php. также распечатать путь темы. Если мы постоянно вызываем get_template_directory_uri() , мы просто создаем запросы. Создавая константу и используя ее, мы сохраняем обработку сервера, потому что вызываем функцию один раз.
Эта строка удаляет мета-тег генератора, потому что этот тег показывает всем, кто установил версию WordPress. Такая информация может позволить злоумышленнику узнать ошибки вашей версии и использовать их.
Добавление вашего CSS
Сначала мы создаем функцию с именем enqueue_styles а затем вызываем функцию add_action , эта строка говорит WordPress, что она должна вызывать нашу функцию, когда запускается событие wp_enqueue_scripts, которое происходит во время нашего вызова wp_head() в header.php !
Внутри нашей функции у нас есть следующие строки:
Сначала мы регистрируем нашу таблицу стилей, а затем добавляем ее в очередь WordPress.
Мы используем функцию wp_register_style для регистрации стиля, эта функция запрашивает следующее:
Затем мы вызываем функцию wp_enqueue_style и передаем в качестве параметра имя нашего стиля, который будет добавлен.
Чтобы добавить больше стилей в ваш файл, просто продублируйте эти две строки и измените имя, каталог и другие параметры.
Добавление сценариев
Теперь мы увидим функцию, которая добавляет наши скрипты.
Здесь процесс такой же, разница здесь в том, что мы используем другие функции для добавления скриптов.
Для добавления скриптов мы используем функции wp_register_script и wp_enqueue_script . Функция wp_register_script требует следующего:
Затем мы вызываем функцию wp_enqueue_script и передаем в качестве параметра имя нашего скрипта, который будет добавлен.
Чтобы добавить больше скриптов в ваш файл, просто продублируйте эти две строки и измените имена, каталог и другие параметры.
Шаг 3: header.php
Сначала я перечислю здесь ссылки на библиотеки, которые вы можете использовать в этом шаблоне, я уже использую jQuery и HTML5 Shim в этом шаблоне, но вы можете добавить другие.
Читайте также: