Как сделать один header для всех страниц

Добавил пользователь Владимир З.
Обновлено: 10.09.2024

В этом мастер классе я еще добавила эффект залипания. Это когда при прокрутке экрана шапка остается на месте.

Перед тем, как вы приступите к просмотре, пара замечаний:

1.Если вы решили создать произвольную шапку, придется создать и футер. Они работают в паре. Не получится создать только шапку, а футер оставить прежним. Или наоборот, футер создать в Elementor, а шапку оставить от шаблона.

Почему так происходит?

Если мы посмотрим файлы шаблона, то увидим, что у шапки и футер есть отдельные файлы (header.php и footer.php). Разработчики шаблонов обычно в файл шапки прописывают открывающий тег HTML, а в футер закрывающий. Делается это, чтобы не повторять один и тот же тег во всех файлах шаблона. И когда мы создаем произвольную шапку в Elementor и прикрепляем к страницам сайта, он полностью заменяет файл header.php, тоже самое и с footer.php. Таким образом наш сайт остается без основного открывающего и закрывающего тега. А к этому тегу могут быть прописаны стили и ширина.

Как решить эту проблему?

Выбирать шаблон сайта интегрированный с Elementor
Создавать шаблоны страниц для всех страниц сайта (одиночная страница, архив, страница статьи, 404, поиск)

Приятного просмотра мастер-класса. Если у вас еще остались вопросы, пишите в комментариях

Что такое залипший элемент (фиксированный) на странице/лендинге сайта на WordPress.
В чем особенность создания шапки (header) и подвала (footer) с помощью Elementor.
Какую шапку с залипшим меню мы сделаем на этом вебинаре.
Что необходимо сделать перед созданием шапки и подвала сайта с помощью Elementor.
С чего начать создание шапки с залипающим меню.
Где в Elementor расположено множество уже готовых настроенных шаблонов шапки для выбора и применения.
Какие элементы Elementor можно использовать для создания шапки сайта, которую мы решили создать на этом вебинаре.
Какой код прописать в шапке для телефон и email, чтобы при клике на них появлялось окошко для звонка и отрывалась форма отправки почты.
Как настроить цвет и шрифт в верхней полоске (бар сайта) шапки сайта.
Как настроить значки социальных сетей и их цвет в верхней полоске (бар сайта) шапки сайта.
Как создать второй ряд шапки с логотипом и меню сайта, которые будут прилипать (оставаться неподвижнымb) при прокрутке страницы/лендинга сайта.
Как установить в процентах колонки второго ряда шапки сайта.
Как настроить отображение меню на мониторе компьютера/ноутбука, на планшете и на мобильном телефоне.
Как разместить и настроить во втором ряде шапки вход в личный кабинет и корзину магазина.
Как настроить отображение входа в личный кабинет и корзины магазина на мониторе компьютера/ноубука, на планшете и на мобильном телефоне.
Как сделать, чтобы шапка с меню не сливалась с фоном страницы/лендинга сайта.
Сколько можно создавать разных шапок для своего сайта на WordPress с помощью Elementor.
Для каких шаблонов Elemetor работает правила отображения шапки.
Как сделать, чтобы второй ряд шапки был фиксированным (прилипал) при прокрутке страницы / лендинга.
Какие особенности настройки шапки для мобильной версии сайта.
Как разместить элементы шапки логотипом, меню, входа в личный кабинет и корзину магазина в один ряд в мобильной версии сайта.
Как отредактировать отображение шапки логотипом, меню, входа в личный кабинет и корзину магазина в один ряд в мобильной версии сайта.
Как настроить условия отображения шапки в нужном нам месте сайта.
Как настроить подвал (футер) сайта на WordPress с помощью Elementor для разных версий сайта.
Какие особенности отображения элементов подвала (футера) сайта.
Примеры большой шапки (header) сайта.
О предстоящем вебинаре по созданию меню для инстаграм по аналогии меню Taplink.

Один из ключевых файлов темы WordPress, который отвечает за подключение стилей, встроенных функций и скриптов. Благодаря ему происходит передача всех необходимых данных для поочередного запуска модулей и структуры сайта браузеру. Не требует постоянной настройки.

Что такое хедер сайта?

название;
слоган;
логотип компании;
контактные данные;
навигация

Используя правильную компоновку навигационных элементов, привлекательный дизайн и краткую информацию о деятельности сайта, можно значительно улучшить поведенческие факторы, включая первое впечатление посетителей. Header.php находится в корневой директории выбранного шаблона.

Содержимое header WordPress

Добавление метатегов в хедер осуществляется при помощи текстового редактора (рекомендуется Notepad++). В их список входят: head, title, meta, script, link. Как пример, рассмотрим наиболее полный файл без лишних элементов. Дальнейшее внедрение дополнительного функционала зависит от потребностей отдельного заказчика.

Кодовая часть

Необходимо добавить следующие строки в верхнюю часть functions.php:

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 **/

/** REGISTER HTML5 OtherScript.js **/

wp_register_script( ‘custom-script’, THEME_DIR . ‘/js_path/customscript.js’, array( ‘jquery’ ), ‘1’, false );

В header.php следует прописать код:

Подробно рассмотрев пример, указанный выше, разделим его на несколько важных элементов, обязательных в файле:

Важно: В сети можно встретить рекомендации добавлять комментарии к строкам, ведь – это сократит время поиска нужных кодов. На самом деле, с точки зрения поисковой эффективности – это мусор на который можно сократить страницу. Мы рекомендуем не злоупотреблять комментариями и прибегать к ним в крайних случаях.

Работа с function.php

Следующая строка избавляет от генератора метатегов, который демонстрирует текущую версию шаблона пользователям (включая злоумышленников).

/*— REMOVE GENERATOR META TAG —*/;
remove_action(‘wp_head’, ‘wp_generator’);

Добавление CSS

Теперь необходимо добавить тег link в header.php – для этого создается функция:

wp_register_style( ‘screen-style’, THEME_DIR . ‘/css_path/screen.css’, array(), ‘1’, ‘all’ );

Содержит внутри строки:

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

Выбор доступного имени.
Указание пути к файлу (в данной ситуации используется константа THEME_DIR).
Вписываются условия, необходимые файлы для предварительной загрузки, название стилей.
используемая версия.
Медиа-атрибут тега link.

Добавление скриптов

Применяя данный код происходит добавление скриптов:

/** REGISTER HTML5 Shim **/

wp_enqueue_script( ‘html5-shim’ );
div>
/** REGISTER HTML5 OtherScript.js **/

wp_register_script( ‘custom-script’, THEME_DIR . ‘/js_path/customscript.js’, array( ‘jquery’ ), ‘1’, false );

Header WordPress

Стандартный файл содержит набор тегов и функций, используемых по умолчанию. Рассмотрим их особенности и функционал.

Устанавливаются языковые атрибуты или добавляются классы в соответствии с версией браузера (больше не применяется).

Добавление метатегов в хедер является важной операцией, поскольку браузеру передается важная информация для правильного отображения темы.

Строка отключающая использование браузером Quirks Mode – данный режим плохо сказывается на разметке:

Указание кодировки для правильного отображения шрифтов:

Параметры, улучшающие SEO-показатели ресурса (описание, ключевые слова):

Добавление favicon для сайта:

Высокая важность. Изменяет стандартный заголовок, улучшая SEO-параметры:

Список стандартных и наиболее применяемых функций:

wp_head WordPress – используется для добавления кода из плагинов, скриптов, библиотек;
get_header WordPress – выполняет подключение файла шаблона (для каждой страницы отдельное имя).

Заключение

Таким образом осуществляется настройка header WordPress. Файл требует вмешательства только на начальном этапе подготовки темы. Повторное использование необходимо при подключении дополнительных функций, скриптов или таблиц стилей. Рассмотрены основные теги и их предназначение. Разработчики постоянно модернизируют платформу для минимизации человеческих действий в редактировании подобных файлов. Для безопасности, не рекомендуется использовать сторонние и непроверенные скрипты.

В этом руководстве мы поговорим о 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:

В этой части, мы использовали некоторые условия для IE , которые добавляют класс в соответствии с версией IE, или не добавляет ничего, если браузер не IE 8 или ниже (Firefox, IE9, Chrome и другие).

Это действительно удобно потому, что вы можете создать правило внутри CSS файла, чтобы оно подействовало на объект, если браузер IE 7:

Но вы также можете создать отдельный файл CSS и привязать его внутри области условий, мы будем говорить об этом на следующих шагах. Выбор за вами.

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

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

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

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

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

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

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

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

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

wp_head()

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

Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.

Рис. 6.3. Ширина шапки

Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру элемента .

В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.

Рис. 6.4. Совмещение изображения по горизонтали

На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).

Рис. 6.5. Фоновая картинка для шапки

Оптимизация шапки

Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.

Рис. 6.6. Градиентный рисунок (header-gradient.jpg)

Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.

Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.jpg)

Два рисунка для фона шапки подготовлены, пишем код HTML.

И стиль для элемента и слоя header-bg .

В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.

Название сайта

Название написано на облаке с растушёванными краями, что должно создать трудности при наложении на градиент. Есть два способа, как их обойти.

Использовать формат PNG-24 при сохранении прозрачности.
Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.

Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.

Выравнивание по центру делается через свойство text-align , добавляемое к родителю тега , а сдвиг вниз через свойство top . Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative .

На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:

Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.

Какие проблемы с заголовками h1 были на моём блоге

Суть в том, что все эти доработки не должны слетать при обновлении темы. У меня же, как только обновил тему, так и давай всё заново настраивать. Но фишка в другом, элементы дизайна – это цветочки, а подлянка заключается в том, что у меня после этих обновлений перестали работать древовидные комментарии и постоянно меняются местами заголовки h1 и h2. А вы знаете, что поисковики не жалуют сайты, где тег h1 отсутствует или слишком часто используется.

Вот здесь расскажу немного поподробнее. Так вот, практически в каждой теме оформления для WordPress есть возможность прописать заголовок сайта и описание.

А также установить логотип.

В моей теме тоже всё это есть. Заголовок прописывается тегом h1, а описание сайта тегом h2. А если установить логотип, то он будет обозначен как заголовок и внесёт в тег h1.

И вроде бы всё хорошо – на главной странице заголовок сайта имеет тег h1, а заголовки статей h2. А вот в статьях и страницах тоже изначально было так. Причём это не в одной моей теме, во многих темах WordPress заголовки статей и страниц прописаны в теге h2 – что по правилам SEO неверно.

Я этот момент подправил – в статьях и страницах заголовки изменил на h1, а заголовок сайта на h2.

Но вот прошло обновление, визуально я заметил только проблемы с дизайном. Исправил и не о чём не волнуюсь. Через какое-то время прошло ещё обновление и вдобавок к дизайну перестали работать древовидные комментарии. Ну, это то, что я заметил визуально.

Всё, решил больше тему не обновлять, а заменить полностью. Но пока нет времени. А пока я этого не сделаю, нужно разбираться с моей текущей темой.

Но после последнего обновления на самом деле всё оказалось хуже – произошла подмена тегов h1 и h2. А точнее, изображение, которое я использовал в качестве логотипа, и которое было заключено в тег h1, — тег просто исчез (на главной странице). Так на главной странице вообще не осталось тега h1. Зато в статьях и страницах заголовок сайта обрёл тег h1. И соответственно заголовок сайта, и заголовок статьи были обозначены тегом h1. Перебор!

А ещё эта путаница повлияла на микроразметку – пропал заголовок сайта.

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

Как изменить тег заголовка h1 в зависимости от условий

Для себя я обозначил такой логический порядок – если открывается главная страница, результаты поиска, архив, в общем, любая страница, кроме статей и отдельных страниц, то заголовок сайт должен быть обозначен тегом h1.

Если открывается статья или отдельная страница, — заголовок сайта должен обозначаться тегом h2.

Итак, приступаем к реализации задуманного.

Как известно, практически во всех темах шаблон состоит из нескольких блоков и такие блоки, как шапка (header.php), подвал (footer.php), сайтбар (sidebar.php) подключаются как отдельные элементы к основной странице (index.php), статьям (single.php), страницам (page.php).

Следовательно, заголовок и описание сайта находятся в шапке (header.php). И нужно лишь прописать условие, которое будет менять тег h1 в зависимости от того какая страница открывается.

Нужно найти строчку кода с тегом h1, в некоторых случаях это может быть и тег h2. Во всяком случае, нужно обращать внимание на содержимое этих строк. Изначально в моей теме было так.

Итак, перед строкой кода с заголовком h1 вставляем вот этот код:

А после строки с кодом h1 нужно закрыть условие, этим кодом:

В итоге у вас должно получиться вот так:

А теперь по аналогии добавляем ещё одно условие, сразу после первого:

Это условие обозначает: Если (if) открыта статья (is_single) или (||) страница (is_page) – заголовок сайта будет обозначен тегом h2.

Обратите внимание, я изменил тег заголовка во втором условии с h1 на h2. Так же можно заменить h1 на абзац (р) или блоки div, span. Это важно!

Сохраняем файл и проверяем.

Как должно быть после внедрения условий

Открываете любую страницу сайта, далее просмотр исходного кода (CTRL+U) и ищите тег h1 (CTRL+F) – на странице должен быть один тег h1.

На главной странице, рубриках, поиске и так далее заголовок сайта должен быть обозначен тегом h1, а все заголовки статей и так далее h2, h3…

При открытии статьи или отдельной страницы, заголовок сайта меняется на h2. Если вы изменили на предыдущем шаге h2 на p, div, span — значит и изменения у вас будут соответствующие. Только не забудьте прописать стили для этих элементов.

Здесь очень важно проверить в файлах single.php и page.php чтобы заголовки статей и страниц обозначались тегом h1. Если у вас не так, откройте эти файлы и исправьте циферку.

Подведение итогов

Этим решением я избавился от конфликта с тегами заголовков h1 и h2 и восстановил работоспособность микроразметки. Всего-то пару строк кода, а какое удобство.

Друзья, у кого подобная ситуация берите на вооружение.

И в завершение видеоурок по теме. Я покажу на своём блоге, как этот метод работает.

А у меня на этом сегодня всё. Всем желаю хорошего настроения и до встречи в новых статьях и видеоуроках.

Читайте также: