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

Header.php WordPress

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

Решил написать статью про то, как можно самому вносить изменения в файл 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, можете сделать его копию, ну если вы боитесь повредить что-то. На этом всё, до новых встреч!

 

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

 

info-effect.ru
Добавить комментарий для Илья Журавлёв Отменить ответ

Имя и Email указывать не обязательно. Чтобы получить ответ на свою электронную почту, укажите свой Email.

  1. Сплетница

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

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

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

      Ответить
  2. Виктор

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

    Ответить
    1. Admin автор

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

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

      Ответить
  3. Миша

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

    Ответить
    1. Admin автор

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

      Ответить
      1. Миша

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

        Ответить
        1. Admin автор

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

          Ответить
    2. Admin автор

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

      Ответить
      1. Миша

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

        Ответить
        1. Admin автор

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

          Ответить
        2. Admin автор

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

          Ответить
          1. Миша

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

  4. Миша

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

    Ответить
    1. Admin автор

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

      Ответить
    2. Admin автор

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

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

      Ответить
      1. Миша

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

        Ответить
      2. Миша

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

        Ответить
        1. Admin автор
          Ответить
          1. Миша

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

  5. Сергей

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

    Ответить
    1. Admin автор

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

      Ответить
      1. Сергей

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

        Ответить
        1. Admin автор

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

          Ответить
          1. VikaShiva

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

          2. Admin автор

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

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

          3. VikaShiva

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

          4. Admin автор

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

          5. VikaShiva

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

          6. Admin автор

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

          7. VikaShiva

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

  6. Дмитрий

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

    Ответить
    1. Admin автор

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

      Ответить
    2. Admin автор

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

      Ответить
  7. Светлана

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

    Ответить
    1. Admin автор

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

      Ответить
  8. Valdis

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

    Ответить
  9. Мария

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

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

    Ответить
    1. Admin автор

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

      Ответить
  10. Will

    Спасибо

    Ответить
  11. Кирилл

    Здравствуйте. Подскажите, пожалуйста, а где взять сам html код? мне нужно вставить картинку мессенджеров выше меню

    Ответить
  12. Кирилл

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

    Ответить
    1. Admin автор

      Здравствуйте, через редактор записи или страницы, на вкладке Текст, там надо скопировать исходный html код. У вас классический редактор или новый?

      Ответить
      1. Кирилл

        Мне бы сначала понять что за редактор записи и где его взять?)

        Ответить
        1. Admin автор

          Зайдите в админ-панель WordPress, слева в меню нажмите Записи – Добавить новую. У вас откроется страница создания записи с визуальным редактором, либо откройте для редактирования уже имеющуюся запись. Если у вас классический редактор, справа от него будет вкладка Текст, в ней html код того, чтобы добавляете в визуальный редактор. Если новый редактор блоков, вверху справа жмите на кнопку Настройки, в открывшемся окне будет вкладка редактор кода.

          Ответить
      2. Кирилл

        Если я все правильно сделал, то у меня новый редактор, так как он не такой как у вас на скрине. Но в моем редакторе два поля: “Добавить заголовок” и “Начните писать текст или HTML код”. Как загрузить изображение, чтобы получить из него код?

        Ответить
      3. Кирилл

        Все получилось) только можно еще вопрос. Как изменить позицию изображения? Как сместить его вниз я понял, но как сместить вправо?

        Ответить
        1. Admin автор

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

          Ответить