header php wordpress где находится
Файл header.php в WordPress (фрилансеру)
Шаблон WordPress, как и другие CMS, состоит не из одного файла index.php, а из нескольких файлов. Типичная блоговая структура, собирается из нескольких файлов – шапки (header.php), подвала (footer.php), боковой панели (sidebar.php) и контента (single.php). Зачем так делается?
Как это работает, посмотрим на примере файла header.php. Остальные файлы шаблона, подключаются по аналогии шапки.
Содержимое header.php
Если мы заглянем в HTML разметку любого сайта, то все что находится между тегами, относится к шапке сайта.
Чаще всего, шапка сайта включает и меню навигации с логотипом. Что именно будет входить в шапку вашего сайта, вам нужно решить самостоятельно.
Таким образом, весь этот код, выносится в отдельный файл header.php.
Если нам нужно что-то поменять в хедере, например title или description, то замена в одном файле, отобразится сразу на всех страницах.
Как подключить header.php
В WordPress есть специальная функция для подключения header.php.
Как подключить другой header
WordPress, предусмотрел возможность использования разных шапок для разных страниц. Например, нам нужно создать шаблон для отдельной рекламной страницы конкретного товара или услуги, но в рамках этого же сайта. Для этих целей, нам нужна другая шапка, без меню. Тогда к этой странице подключаем другой хедер. В скобочках функции get_header(), передадим параметры – название нового шаблона.
название нового шаблона, в обязательном порядке, должно содержать слово header и какое-нибудь слово, написанное через дефис, например, header-no_menu.php.
Так WordPress поймет, что следует подключать, не header.php, а другой файл, header-no_menu.php.
Вызов функции get_header()
Для вызова нестандартного хедера для другой страницы, например offer.php, в качестве параметра, передаем название, этой шапки.
Для разных страниц, можно создавать сколько угодно хедеров. Но не всем страницам вообще нужны шапки, например странице с контактами. Можно к шаблону contact.php, подключить шаблон, без лого и кнопок.
Практический пример
Стандартный вид страницы с хедером.
Контактная страница, без хедера.
Заключение
Точно такие же принципы, работают и для других шаблонов, footer.php, sidebar.php. Для специалиста по WordPress, нужны эти знания. Ведь заказчики, обращаются к фрилансерам, для решения нестандартных задач (уровня разработчика тем). Об этом нужно помнить, чтобы хорошо зарабатывать.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Создание своей темы WordPress — Header.php
В предыдущей статье мы создали нашу среду разработки темы WordPress, в этой статье мы пойдем на один шаг вперед и создадим шапку (header) в теме WordPress.
Для того, чтобы научиться делать свою тему на WordPress или “натягивать” свою верстку на движок можно использовать несколько подходов. Самый простой – взять стандартную тему WP и разобрать, как и что в ней работает, копируя в свою тему нужные части готового кода. Такой себе копипаст.
После установки темы, которую мы создали в предыдущей статье с помощью underscores, откройте свой сайт WordPress в браузере. Вы должны увидеть сломанный сайт без стиля, когда вы закончите читать эту статью, вы увидите, что верхняя часть (шапка) вашей темы WordPress полностью настроена. Обычно в эту часть входят – логотип, меню, описание и название сайта.
Вот так выглядит сайт сейчас
Файлы, используемые при создании верхней части сайта.
Нам понадобятся следующие файлы:
Что делает каждый из файлов.
header.php
header.php используется для отображения верхней части темы WordPress. Этот файл содержит код для отображения изображения, заголовка сайта, слогана сайта и меню. Эта часть одинакова (или почти одинакова) для всех страниц, поэтому ее выносят в отдельный файл, который потом можно легко и просто подключить к любой странице одной строкой кода:
Но если для какой-то страницы шаблона нужно использовать другую шапку, можно создать новый файл шапки, и назвать, например, header-new.php
А потом вызвать его при помощи стандартной функции:
functions.php
Этот файл содержит основные функции вашей темы. Он используется для изменения поведения по умолчанию в WordPress, здесь вы можете определить свои собственные функции.
style.css
Этот файл содержит стили для нашей темы WordPress.
Подключение стилей, скриптов и шрифтов
Предположим, у вас есть готовая верстка с подключенными стилями и скриптами.
Теперь открываем файл style.css верстки и копируем его содержимое. Открываем тот же файл в папке с темой и добавляем в него все, что скопировали из исходника (то, что было можно удалить).
Теперь используя функцию wp_enqueue_style подключаем нужные css файлы и шрифты.
Открываем файл functions.php – внизу, там, где подключен скрипт вставляем.
здесь мы подключили шрифты, фавиконки, стили bootstrap. Главный файл style.css подключается в конце — wp_enqueue_style( ‘test_style’, get_stylesheet_uri() );
Подключаем скрипты, используя функцию wp_enqueue_script.
array (‘jquery‘) — означает, что данный скрипт зависит от jquery и подгрузится после него.
Теперь должны подключиться стили и скрипты верстки. Проверяйте подключение на сайте с помощью F12.
Более детально о правильном подключении скриптов читайте в этой статье.
Header.php
Рассмотрим из чего состоит файл header.
Открыв файл header.php вы должны увидеть следующий код (скриншот). Давайте рассмотрим верхнюю часть:
Здесь выводится название языка сайта и его направление — language_attributes();
Кодировка сайта — bloginfo( ‘charset’ );
Выведем в шапке название сайта и его описание.
Любое меню должно быть зарегистрировано в файле function.php.
Так как мы использовали Underscores в качестве основы, там уже зарегистрировано одно меню.
Зарегистрируем свое меню в function.php, например для отображения навигации на мобильных устройствах. В function.php пропишем такие строки:
Теперь заходим во Внешний вид- меню, придумаем название своего меню и задаем область его отображения.
Сама функция wp_nav_menu() имеет множество параметров. В нашем примере это
‘theme_location’ — это ключ, с помощью которого мы зарегистрировали меню ранее в файле functions.php.
‘menu_id’ — id самого меню (тега ul).
Более подробно обо всех параметрах можно почитать в кодексе WordPress.
Вот и все, наша шапка готова, дальше можно менять стили в ней по своему усмотрению, добавлять произвольные поля и кастомизировать на свой вкус.
В следующей статье рассмотрим, как подключать footer (подвал) и sidebar.
Для большинства пользователей WordPress — это черный ящик. Вы помещаете Read more
Если вы веб-разработчик и создаете веб-сайты с помощью HTML и Read more
Понимание того, как использовать функцию wp_query может поднять ваши навыки Read more
В моей последней статье я писала о создании пользовательских типов Read more
Эта статья научит вас, как реализовать пользовательские типы записей WordPress. Read more
Вставить код в раздел head на WordPress – темы, плагины и php функции
Большинство скриптов и систем аналитики требуют чтобы подключение к серверам происходило в шапке сайта, где располагается вся служебная информация. Чтобы добавить код в head WordPress не нужно придумывать сложных схем, стоит применить некоторые методы, описанные в статье.
Не путайте head и header, второй это тег семантической разметки сайта, который отображается и показывает, что здесь находится шапка сайта.
Если шаблон не обновляется
Самый простой методом – добавить код напрямую в файлы шаблона. Но есть несколько ограничений:
Открываете файл header.php (находится в корне темы), обычно он отвечает за показ первого экрана в WordPress. Используйте соединение по FTP, чтобы при ошибках откатить изменения. Я покажу на примере стандартного редактора в админке WP.
Перешел в редактор тем, нашел файл, потом вставил тестовый тег и обновил. Так он выглядит на главной странице.
Если обновляется, то данный метод сразу не подходит, переходим к другим способам.
Темы с возможностью добавлять код html в head
Возможно вы не знаете обо всех функциях своего шаблона, полезно будет изучить настройки, может быть в нем есть область для записи произвольного кода в хеад. Например, в теме Reboot есть такая возможность Внешний вид – Настроить.
Видим текстовую область, вставляете туда необходимый скрипт или мета информацию, и обновления уже не страшны. Посмотрите повнимательнее, проверьте все вкладки, скорее всего такая возможность для контента есть.
Если не нашли таких настроек, то переходим к другим методам, чтобы добавить код в раздел в хеад.
Применяем плагин ClearfyPRO
Любимый ClearfyPRO умеет все, также прописывать html и другие виды спецификации в head блога.
Есть переключатель можно на время отключить отображение, чтобы не приходилось стирать и заново загружать код. Аналогично можно удалить стили recentcomments. Полезно узнать что ClearfyPRO оптимизирует, ускоряет и улучшает seo в WordPress дополнительно по 49 требованиям. Для читателей WPCourses делаем скидку на покупку.
Плагин для вставки кода Head & Footer Code
Применяем PHP инструкцию
Помещаем его в файл function php. Видим место куда добавлять, вводите любой HTML и js script, после сохранения изменений, ваша функция выведется после отработки основных сценариев wp_head. Также отключается xml rpc протокол в WordPress.
Применяя четыре простых способа смогли добавить любой код в head любимой CMS WordPress, советую использовать плагины, если нет подходящих мест в шаблоне.
Файл темы header.php тонкости настройки
Один из ключевых файлов темы WordPress, который отвечает за подключение стилей, встроенных функций и скриптов. Благодаря ему происходит передача всех необходимых данных для поочередного запуска модулей и структуры сайта браузеру. Не требует постоянной настройки.
Что такое хедер сайта?
Прямой перевод – «шапка». Находится в верхней части, может быть оформлена по общему стилю или индивидуально. Основные элементы:
Используя правильную компоновку навигационных элементов, привлекательный дизайн и краткую информацию о деятельности сайта, можно значительно улучшить поведенческие факторы, включая первое впечатление посетителей. Header.php находится в корневой директории выбранного шаблона.
Содержимое header WordPress
Добавление метатегов в хедер осуществляется при помощи текстового редактора (рекомендуется Notepad++). В их список входят: head, title, meta, script, link. Как пример, рассмотрим наиболее полный файл без лишних элементов. Дальнейшее внедрение дополнительного функционала зависит от потребностей отдельного заказчика.
Кодовая часть
Необходимо добавить следующие строки в верхнюю часть functions.php:
| define(“THEME_DIR”, get_template_directory_uri()); /*— REMOVE GENERATOR META TAG —*/ remove_action(‘wp_head’, ‘wp_generator’); // ENQUEUE STYLES function enqueue_styles() < wp_enqueue_style( ‘screen-style’ ); /** REGISTER HTML5 Shim **/ wp_register_script (‘html5-shim’, ‘http://html5shim.googlecode.com/svn/trunk/html5.js’, array(‘jquery’ ), ‘1’, false ); /** REGISTER HTML5 OtherScript.js **/ wp_enqueue_script( ‘custom-script’ ); |
В header.php следует прописать код:
Подробно рассмотрев пример, указанный выше, разделим его на несколько важных элементов, обязательных в файле:
Важно: В сети можно встретить рекомендации добавлять комментарии к строкам, ведь – это сократит время поиска нужных кодов. На самом деле, с точки зрения поисковой эффективности – это мусор на который можно сократить страницу. Мы рекомендуем не злоупотреблять комментариями и прибегать к ним в крайних случаях.
Работа с function.php
Указанный ранее код уже помещен в функциональный файл. Некоторые элементы позволяют нам сократить затраты ресурсов сервера на обработку запросов путем создания константы THEME_DIR. Это изложено в первой строке, где сохраняется директория шаблона. Является важным элементом оптимизации темы. Некоторые вебмастера идут сложным путем, вызывая повторные запросы через «get_template_directory_uri()».
Следующая строка избавляет от генератора метатегов, который демонстрирует текущую версию шаблона пользователям (включая злоумышленников).
| /*— REMOVE GENERATOR META TAG —*/; remove_action(‘wp_head’, ‘wp_generator’); |
Добавление CSS
Теперь необходимо добавить тег link в header.php – для этого создается функция:
| // ENQUEUE STYLES; function enqueue_styles() < wp_enqueue_style( ‘screen-style’ ); |
Используются «wp_enqueue_script» и «wp_enqueue_style» согласно рекомендациям руководства по WordPress. Очередность действий:
Содержит внутри строки:
Для регистрации таблицы стилей используется «wp_register_style», она требует список параметров:
Далее, вызывается «wp_enqueue_style» и передается имя стиля, который будет применен. Для добавления нескольких образцов в header WordPress можно повторно копировать строки, а также изменять имеющиеся параметры.
Добавление скриптов
Применяя данный код происходит добавление скриптов:
| // 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’ ); wp_enqueue_script( ‘custom-script’ ); |
Процесс аналогичен подключению стилей, но используются другие функции («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-параметры:
Список стандартных и наиболее применяемых функций:
Заключение
Таким образом осуществляется настройка header WordPress. Файл требует вмешательства только на начальном этапе подготовки темы. Повторное использование необходимо при подключении дополнительных функций, скриптов или таблиц стилей. Рассмотрены основные теги и их предназначение. Разработчики постоянно модернизируют платформу для минимизации человеческих действий в редактировании подобных файлов. Для безопасности, не рекомендуется использовать сторонние и непроверенные скрипты.
Header php wordpress где находится
Статья посвящена файлам шаблона WordPress! Предупреждаю сразу – внимательно изучив данный материал Вы с легкостью будете ориентироваться в своем шаблоне и сможете практически моментально находить нужное место в нем. Мне кажется любой блоггер, который владеет ресурсом на WP, должен понимать из чего состоит его блог – а то получается: все работает, но что да как – без разницы! 
Не поленитесь и прочитайте данную статью до конца – и она обязательно поможет Вам в будущем или даже в настоящем! Как только понадобиться что-то изменить или добавить в шаблон, или Вам захочется написать свою собственную тему – за плечами уже будет необходимые знания о том как и что тут устроено.
Для начала предлагаю посмотреть из чего состоит Ваш шаблон. Для этого из административной панели перейдите по вкладкам: “Дизайн” → “Редактор”:
В правой колонке Вы увидите примерно следующую картину, в зависимости от установленной версии WordPress:
Не стоит пугаться их названий и неизвестностью. Открыли, посмотрели, закрыли. А после прочтения данного материала открыли снова и сравнили результат. Итак, давайте начнем по пунктам и с использованием живого примера!
Последовательность изучения файла шаблона обусловлена логическим строением любого блога.
1 файл: index.php – шаблон главной страницы.
За вывод главной страницы ответственен файл шаблона index.php. Именно в нем прописано все, что Вы видите на блоге вбивая его адрес в строку браузера!
2 файл: single.php – шаблон записей.
Вы прямо сейчас находитесь на странице записи. Именно шаблон записи задает оформление к ним. Вы с легкостью можете побродить по записям этого блога и увидеть что страница выглядит везде одинаково – отличается только контент, все другие элементы сделаны по шаблону single.php.
3 файлs: page.php – шаблон страниц.
Система управления контентом позволяет пользователям добавлять на блог не только записи, но и страницы, для которых существует отдельный шаблон: page.php. Два примера страниц: услуги, контакты. Естественно шаблон страниц от шаблона записей может отличаться, например у меня на страницах нет формы комментирования, формы подписки, блока кнопок социальных сетей и похожих записей.
4 файл: archive.php – шаблон архивов/рубрик.
По сути принцип работы страниц, созданных при помощи шаблона archive.php такой же как и у главной страницы (index.php) – он выводит список записей, но отличие конечно есть: при помощи данного файла создаются страницы разделов, архивов или меток. Например: страница категории Инвестиции.
5 файл: style.css – файл стилей.
Этот файл находится в самом низу списка, а над ним стоит говорящая надпись: “Стили”. Именно файл style.css отвечает за все визуальное оформление блога – цвета, шрифты, месторасположение элементов относительно друг друга и так далее.
По сути это все необходимые файлы, которые требуются для функционирования блога на CMS WordPress. Но остается открытым вопрос: если это все что нужно, то почему тогда в любой теме больше файлов?
Любой блоггер наверное замечал, что некоторые элементы повторяются на всех страницах, это:
Что бы каждый раз не прописывать то, что должно находится в этих местах на блоге в файлах: index.php, single.php, page.php и archive.php было принято решения создать файлы шапки, подвала и боковой колонки и ссылаться на них.
6 файл: header.php – шаблон шапки.
В этом файле прописано то, что должно выводится в верхней части блога:
7 файл: footer.php – шаблон подвала.
В файле footer.php прописано то, что должно выводится в нижней части блога:
8 файл: sidebar.php – шаблон боковой колонки.
Файл sidebar.php как правило не задействуют при правке шаблона, так как в WordPress предусмотрено его редактирование через виджеты (которые подключены специальным файлом functions.php – о нем ниже). Когда я создавал тему я добавил поддержку виджетов, однако у меня сейчас не добавлен ни один из них, все таки кому как удобней – мне легче отредактировать файл sidebar.php и дописать непосредственно туда все, что требуется:
9 файл: comments.php – файл комментариев.
В этом файле прописан вывод комментариев. Поэтому в single.php после кода вывода статьи прописывается “ссылка” на этот файл, так же этот файл может быть вызван и на страницах – page.php. Часто встречается вариант, когда часть функционала комментариев прописывается в файле functions.php.
10 файл: functions.php – функции темы.
Пожалуй самый непонятный и “могущественный” файл в сборке любого шаблона WordPress. С его помощью можно сделать с блогом практически все, что угодно. Вот несколько примеров, что мы может сделать редактируя этот файл:
Итак 10 файлов, необходимые для оптимального и полноценного функционирования шаблона WordPress:
Так же отмечу еще 5 файлов шаблона WordPress, которые встречаются довольно часто и которые обычно я созданию при написании темы:
11 файл: 404.php – шаблон 404 ошибки.
Когда Ваш блог не загружается браузер выдает 404 ошибку. Для того чтобы эта страница была красиво оформлена создается ее шаблон. Сейчас у меня на блоге самый примитивный вариант: в этом файле прописан вызов шапки, сайдбара и футера и появляется надпись, что страница не найдена:
12 файл: searchform.php – шаблон формы поиска.
Форма поиска может находится на сайте не в одном месте. Банальный пример – форма поиска в шапке и дублирующая форма на странице с результатами поиска, а может кто-нибудь еще и в сайдбар ее вставит. Поэтому чтобы не прописывать каждый раз длинный код этой формы и создается данный файл, а в том месте где ее нужно вывести ставится “ссылка” на него.
13 файл: search.php – шаблон результатов поиска.
Принцип работы этой страницы такой же как и файла index.php или archives.php, только список статей должен соответствовать введенному поисковому запросу.
14 файл и 15 файл: loop.php и theloop.php – файлы циклов вывода статей.
Создавать эти файлы необязательно, однако мне удобней работать с ними, что бы не делать больше файлы index.php и archives.php. “Лупы” содержат алгоритм вывода списка статей по параметрам (последние записи на главной или записи из одной категории на “архивной” странице). Так же эти файлы у меня имеют разное оформление:
Если Вы внимательно прочитали статью, то наверняка заметили что шаблон главной страницы (index.php) и страниц рубрик (archives.php) состоят из запросов к другим шаблонам, то есть “своей информации” в файле index.php нет никакой, есть лишь запросы к файлам (сверху вниз, слева направо по разметке страницы):
Чтобы укомплектовать все знания и запомнить наиболее распространенный вариант шаблона WordPress я создал вот такую картинку, в которой все собрал в одном месте. После прочтения данной статьи вопросов: что? откуда и куда? наверняка не останется, а графическая часть закрепит пройденный материал: