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 ? обновлено: Январь 7, 2016 автором: Илья Журавлёв

21 комментарий

  • Сплетница 30.06.2015 Ответить

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

    • Илья Журавлёв 30.06.2015 Ответить

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

    • Илья Журавлёв 30.06.2015 Ответить

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

  • Виктор 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 Ответить Автор

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

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

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

      • Миша 21.05.2017 Ответить

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

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

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

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

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

          • Миша 21.05.2017

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

  • Миша 22.05.2017 Ответить

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *



Яндекс.Метрика

Правила - Карта - Связь - Мой хостинг

Стрелка вверх