Header.php

Как самому добавить текст или фото на верх сайта через файл header.php


Привет Друзья!

Решил написать статью про то, как можно самому вносить изменения в файл Header.php, к примеру вы хотите что-то добавить на свой сайт, в область выше меню, или ниже, а можно вообще на самый верх сайта поместить любой текст или фотографию. Просто через виджет или запись это невозможно сделать, так что придётся лезть в файл Header.php. Но не пугайтесь, на самом деле всё просто, скоро вы поймёте это, просто нужно знать куда вставлять , и тогда проблем не будет. Сейчас я объясню кое-какие моменты, думаю найдутся люди которым будет интересна данная информация. Итак перейдите по вкладке: Внешний видРедактор.

 

29-06-2015 18-44-05

 

Далее, вам нужно найти справа вкладку – Заголовок (header.php), и нажать на неё.

 

29-06-2015 18-45-41

 

Итак, на странице редактирования, в самом файле header.php вам нужно найти два Тега: </head> и </header>

 

29-06-2015 20-27-00

 

Тег </head> присутствует в любом файле header.php шаблона WordPress, а вот тег </header> может и не быть в некоторых шаблонов. Итак, я покажу вам как вставить любой HTML элемент (текст, фото, кнопки соцсетей, слайдер и т.д.) в самый верх сайта, то есть выше меню, и после меню, до основного контента. Для примера я создам любой текст в записи.

 

29-06-2015 20-33-55

 

Далее скопирую HTML код данного текста, перейдя во вкладку Текст.

 

29-06-2015 20-34-58

 

Далее снова зайдите на страницу редактирования файла header.php. Смотрите здесь я вставлю скопированный мною HTML код после тегов </head> и </header>, то есть под ними, ниже тегов, а не выше. Смотрите, если у вас нет в файле тега </header> то тогда вставьте код только после тега </head>

 

Если вы вставите HTML код под тегом </head> то Текст отобразится над меню, в самом верху сайта.

А если вы вставите код под тегом </Header> то Текст отобразится под меню, то есть между меню и контентом.

 

29-06-2015 20-40-33

 

 

После добавления кода, нажимаем на кнопку – Обновить файл. И далее переходим на сайт, и смотрим что у нас получилось. Да, если изменения не отобразились на вашем сайте, то удалите весь кэш.

 

29-06-2015 20-41-29

 

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

 

29-06-2015 20-42-35

 

Копируем пробел, переходим снова в файл header.php, и вставляем код пробела, в то место где вы хотите чтобы у вас появился отступ или пробел. Нажимаем на кнопку – Обновить файл.

 

29-06-2015 20-44-22

 

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

 

29-06-2015 20-45-47

 

Всё, как видите всё просто, можете вставлять всё что угодно, фотографию, слайдер, кнопку, кнопки соцсетей, в общем всё что угодно. А если вы хотите выравнять по центру, то просто в записи заранее выставляете текст или фото по центру, и копируете код. Только будьте аккуратны, и не повредите соседний код, который рядом с тегами </head> и </header>. На всякий случай, перед редактированием файла header.php, можете сделать его копию, ну если вы боитесь повредить что-то. На этом всё, до новых встреч!

 

Если у вас остались Вопросы, то пишите в Обратную связь, либо оставьте комментарий!

 




Как самому добавить текст или фото на верх сайта через файл header.php обновлено: Октябрь 3, 2019 автором: Илья Журавлёв

42 комментария

  • Илья Журавлёв 30.06.2015

    Привет ! Если судить по моему шаблону, то высота хедера и футера зависит от их содержания, если убрать содержание, то футер или хедер просто исчезнет, я таким образом убрал свой футер. Но настройки у разных шаблонов могут отличатся, поэтому нужно смотреть конкретно. Если тебя интересует отступ от футера или хедера, то за это отвечает значение: margin-bottom.

  • Илья Журавлёв 30.06.2015

    Зашёл на твой Сайт, у тебя в футер вшита ссылка с текстом – unite Unite Theme powered by WordPress, тебе надо убрать эту ссылку с текстом, удалить, тогда посмотришь, исчезнет футер или нет. Сегодня буду писать о том, как убрать вшитую ссылку из футера.

  • Сплетница 30.06.2015

    С добрым утром, Илья! Хорошая статья, как всегда ))) вопрос в тему: а как уменьшить высоту хедера и футера? Мои эксперименты с таблицей стилей не дали мне результата. Может, ты знаешь?

  • Виктор 12.03.2017

    Спасибо за статью все работает но есть три нюанса:
    1. после вставки текста в самый верх хедера вместе с этим текстом добавляется и полоска (а у меня в хедере на всю область картинка)
    2. Не могу понять каким кодом вставить текст чтоб он отобразился по правому нижнему краю хедера
    3. Было бы полезно знать как вставить в хедер не просто текст а текст-ссылку на одну из страниц сайта.
    Спасибо!

  • Илья Журавлёв 13.03.2017 Автор

    Всё просто делается, с помощью визуального редактора создаёте текст (можно ссылку вставить, фото, видео и т.д.), копируете код текста на вкладке “Текст”. Затем вставляете код в файл header.php. Текст можно заранее выравнять по правому или левому краю, либо по центру и т.д. С помощью визуального редактора можно всё что угодно сделать и получить готовый код для вставки в php файлы.

    Можете менять CSS стили. Рекомендую Супер плагин – SiteOrigin CSS.

  • Миша 21.05.2017

    Илья здравствуйте, а если я все же повредил что то в header и у меня пропало половины страницы и не открываются страницы, как можно исправить? Или откатить Настройки?

  • Илья Журавлёв 21.05.2017 Автор

    Здравствуйте. Какой файл редактировали ?

  • Миша 21.05.2017

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

  • Илья Журавлёв 21.05.2017 Автор

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

  • Илья Журавлёв 21.05.2017 Автор

    Это легко поправить. Замените неисправный файл на исходный и всё наладится.

  • Миша 21.05.2017

    Спасибо огромное сегодня попробую!) а все мои заставки надписи и прочее что я вбивал вручную собьётся? Или останется?

  • Илья Журавлёв 21.05.2017 Автор

    Если вы хотите чтобы ваш код сохранился, тогда вы можете сравнить файлы, исходный и неисправный, посмотреть чего не хватает и добавить вручную. Просто это более трудоёмкий процесс. Коды можно заново добавить. Только в следующий раз будьте внимательней, чтобы не удалить лишнего кода !

  • Илья Журавлёв 21.05.2017 Автор

    Если вы плохо разбираетесь в коде, перед редактированием, делайте резервную копию сайта.

  • Миша 21.05.2017

    Спасибо большое еще раз!

  • Миша 22.05.2017

    Илья спасибо вам огромное за помощь! Благодаря вашей помощи все исправилось) Подскажите пожалуйста, а куда в header.php нудно вставить код который я скопировал из плагина слайд шоу чтобы это слайд шоу было наложено прямо на главную заставку в теме andrina lite. Не сверху ни снизу, а именно поверх главной заставки?

  • Илья Журавлёв 22.05.2017 Автор

    Я посмотрю вашу тему.

  • Илья Журавлёв 23.05.2017 Автор

    В общем смотри. Переходишь на страницу: Внешний вид – Редактор. Справа находишь файл – Статическая главная страница (front-page.php) и открываешь его для редактирования. Примерно в самом начале, есть код между php функцией (на скриншоте показано). Вот этот код замени на свой любой код. То что ты добавишь, будет отображаться на главной вместо заставки.

    Вопросы если будут ещё, пишите !

  • Миша 23.05.2017

    Спасибо! сегодня попробую сделать по вашей инструкции.

  • Миша 25.05.2017

    Вбил код, обновил, ничего не изменилось..(

  • Илья Журавлёв 26.05.2017 Автор

    Удалите кэш и кэш в CSS.

  • Миша 27.05.2017

    Илья все получилось) спасибо вам огромное, сначала сделал все как вы сказали, не получилось, оказывается слайд шоу легло под заставкой, удалил Ее и все, осталось отцентровать ее!))

  • Сергей 16.06.2017

    Илья, добрый день!
    Помоги, пож-та :)
    тема: Storefron – Дочерняя Deli
    Как удалить в хедере место под “дополнительное меню” (между логотипом и поиском) или вместо него вписать то что мне нужно.

  • Илья Журавлёв 16.06.2017 Автор

    Здравствуйте. Попробуйте скрыть с помощью CSS.

  • Сергей 16.06.2017

    Скрыть – не тяжело. На его место не могу добавить ничего :) Толи место под него все равно занято, толи не там добавляю. В это место ну ни как не попадаю, либо выше хедера, либо ниже, хотя добавляю внутри тега хедера

  • Илья Журавлёв 16.06.2017 Автор

    Может это место не внутри тега хедера, а в других местах. Попробуйте другие места, выше или ниже. Возможно даже в другом файле это место выводится. Возможно в файле functions.php. Вам надо просто узнать, что выводит дополнительное меню в этом месте.

  • VikaShiva 17.08.2017

    Доброй ночи, Илья! Спасибо за совет,, все получилось. Только при обновлении страницы вставленное содержимое сползает сначала к краю браузера справа, перед тем как встать в место вставки. Как избежать подобного глюка, подскажите пожалуйста.. Может нужно в php обернуть html код?

  • Илья Журавлёв 17.08.2017 Автор

    Здравствуйте! Попробуйте вставить код с помощью плагина. Могу порекомендовать полезный плагин Head, Footer and Post Injections. Там есть функция Generics. В поле Inject before the вставляете тег, например body или head, либо любую часть из кода, перед которым будет отображаться ваш код. Сам код нужно вставить в поле Desktop (and mobile if no alternative specified).

    Такая загрузка может быть связана с оптимизацией стилей. У вас стоят плагины типа WP Super Cache или W3 Total Cache?

  • VikaShiva 17.08.2017

    Добрый день! Спасибо большое, попробую. Плагин Head, Footer and Post Injections у меня стоит как раз.
    А вот плагинов типа WP Super Cache или W3 Total Cache у меня нет

  • Илья Журавлёв 17.08.2017 Автор

    Я имел ввиду вообще любой кэширующий плагин или может у вас стоит плагин для оптимизации стилей, скриптов и html кода?

  • VikaShiva 18.08.2017

    По Вашей наводке вчера добавила WP Super Cache. Проблема не устранилась с глюком, но сайт начал быстрее работать. С Хедера вообще пришлось удалить добавленную информацию, т.к. в разных браузерах отображается в разных местах(

  • Илья Журавлёв 18.08.2017 Автор

    Попробуйте в другое место код добавить. Не обязательно ставить его именно перед и после тега head. Главное конструкцию кода не рушить, а то сайт заглохнет. Чтобы найти подходящее место, экспериментируйте с цифрами 123, в любое место ставите и смотрите где они на сайте отображаются. Так быстрее и проще!

  • Илья Журавлёв 18.08.2017 Автор

    А для ускорения сайта, рекомендую вам:

    Лучший плагин для оптимизации базы данных WordPress!
    Удалить неиспользуемые таблицы базы данных WordPress!

  • VikaShiva 19.08.2017

    Спасибо, попробую!

  • Дмитрий 04.11.2017

    Добрый день, подскажите, как сделать так, чтобы header (у меня это картинка между топ меню и меню категорий) отображался только на главной странице? Напишите, пожалуйста, подробнее – в предмете разбираюсь плохо. Тема simplegreat. Спасибо!

  • Илья Журавлёв 04.11.2017 Автор

    Здравствуйте. Вы имеете ввиду только картинку, а не весь хедер, если скрыть весь header, у вас меню пропадёт. Код картинки установите в код главной страницы и всё.

  • Илья Журавлёв 04.11.2017 Автор

    Внешний вид – Редактор, справа найдите файл home.php он отвечает за главную страницу, в него нужно код добавить.

  • Светлана 04.12.2017

    Илья, здравствуйте!
    Очень понравилась Ваша статья и мне показалось легче простого добавить телефон и почту в хедер. Но не тут-то было((( Все очистила … Торчит имейл вверху (под меню, верхний правый угол), а телефон так и не показался (где-то еще выше прячется) – так мне и не удалось контакты опустить пониже…..Все вернула….

  • Илья Журавлёв 05.12.2017 Автор

    Здравствуйте. Да, здесь ещё всё зависит от темы, от её конструкции. А в другом месте не пробовали код ставить, там нужно место с помощью цифр подбирать. Скажите название своей темы?

  • Valdis 09.05.2018

    Огромное спасибо, Илья! Всё работает. Раньше пытался изображение просто через img src вставлять, но при загрузке страницы скачки были, думал, как решить через style.css … С Вашим же методом всё работает так, как если бы картинка изначально была в теме.

  • Мария 31.08.2018

    Илья, здравствуйте

    Спасибо за статью. Помогите с советом, добавила тест с конт. информацией выше меню, в самое начало шапки. Как сделать фон прозрачным или картинкой, что в основном меню?

  • Илья Журавлёв 31.08.2018 Автор

    Здравствуйте. Могу порекомендовать плагин SiteOrigin CSS.

  • Will 03.10.2019

    Спасибо

Добавить комментарий

Ваш e-mail не будет опубликован.

 

Внимание! Вы соглашаетесь с Политикой конфиденциальности сайта info-effect.ru


Обратная связь

Политика конфиденциальности - Пользовательское соглашение