Привет Друзья!
Решил написать статью про то, как можно самому вносить изменения в файл Header.php, к примеру вы хотите что-то добавить на свой сайт, в область выше меню, или ниже, а можно вообще на самый верх сайта поместить любой текст или фотографию. Просто через виджет или запись это невозможно сделать, так что придётся лезть в файл Header.php. Но не пугайтесь, на самом деле всё просто, скоро вы поймёте это, просто нужно знать куда вставлять , и тогда проблем не будет. Сейчас я объясню кое-какие моменты, думаю найдутся люди которым будет интересна данная информация. Итак перейдите по вкладке: Внешний вид – Редактор.
Далее, вам нужно найти справа вкладку – Заголовок (header.php), и нажать на неё.
Итак, на странице редактирования, в самом файле header.php вам нужно найти два Тега: </head> и </header>
Тег </head> присутствует в любом файле header.php шаблона WordPress, а вот тег </header> может и не быть в некоторых шаблонов. Итак, я покажу вам как вставить любой HTML элемент (текст, фото, кнопки соцсетей, слайдер и т.д.) в самый верх сайта, то есть выше меню, и после меню, до основного контента. Для примера я создам любой текст в записи.
Далее скопирую HTML код данного текста, перейдя во вкладку Текст.
Далее снова зайдите на страницу редактирования файла header.php. Смотрите здесь я вставлю скопированный мною HTML код после тегов </head> и </header>, то есть под ними, ниже тегов, а не выше. Смотрите, если у вас нет в файле тега </header> то тогда вставьте код только после тега </head>
Если вы вставите HTML код под тегом </head> то Текст отобразится над меню, в самом верху сайта.
А если вы вставите код под тегом </Header> то Текст отобразится под меню, то есть между меню и контентом.
После добавления кода, нажимаем на кнопку – Обновить файл. И далее переходим на сайт, и смотрим что у нас получилось. Да, если изменения не отобразились на вашем сайте, то удалите весь кэш.
Смотрите, если вы хотите, что бы у вас был отступ, от верхнего края, и от нижнего, то вам нужно вставить в код пробел, код пробела можно также скопировать из записи.
Копируем пробел, переходим снова в файл header.php, и вставляем код пробела, в то место где вы хотите чтобы у вас появился отступ или пробел. Нажимаем на кнопку – Обновить файл.
После того как вы вставили пробелы, переходим снова на сайт и смотрим, что у нас появилось. Как видите по фото ниже, у нас появились пробелы, отступы.
Всё, как видите всё просто, можете вставлять всё что угодно, фотографию, слайдер, кнопку, кнопки соцсетей, в общем всё что угодно. А если вы хотите выравнять по центру, то просто в записи заранее выставляете текст или фото по центру, и копируете код. Только будьте аккуратны, и не повредите соседний код, который рядом с тегами </head> и </header>. На всякий случай, перед редактированием файла header.php, можете сделать его копию, ну если вы боитесь повредить что-то. На этом всё, до новых встреч!
Если у вас остались Вопросы, то пишите в Обратную связь, либо оставьте комментарий!
С добрым утром, Илья! Хорошая статья, как всегда ))) вопрос в тему: а как уменьшить высоту хедера и футера? Мои эксперименты с таблицей стилей не дали мне результата. Может, ты знаешь?
Привет ! Если судить по моему шаблону, то высота хедера и футера зависит от их содержания, если убрать содержание, то футер или хедер просто исчезнет, я таким образом убрал свой футер. Но настройки у разных шаблонов могут отличатся, поэтому нужно смотреть конкретно. Если тебя интересует отступ от футера или хедера, то за это отвечает значение: margin-bottom.
Зашёл на твой Сайт, у тебя в футер вшита ссылка с текстом – unite Unite Theme powered by WordPress, тебе надо убрать эту ссылку с текстом, удалить, тогда посмотришь, исчезнет футер или нет. Сегодня буду писать о том, как убрать вшитую ссылку из футера.
Спасибо за статью все работает но есть три нюанса:
1. после вставки текста в самый верх хедера вместе с этим текстом добавляется и полоска (а у меня в хедере на всю область картинка)
2. Не могу понять каким кодом вставить текст чтоб он отобразился по правому нижнему краю хедера
3. Было бы полезно знать как вставить в хедер не просто текст а текст-ссылку на одну из страниц сайта.
Спасибо!
Всё просто делается, с помощью визуального редактора создаёте текст (можно ссылку вставить, фото, видео и т.д.), копируете код текста на вкладке “Текст”. Затем вставляете код в файл header.php. Текст можно заранее выравнять по правому или левому краю, либо по центру и т.д. С помощью визуального редактора можно всё что угодно сделать и получить готовый код для вставки в php файлы.
Можете менять CSS стили. Рекомендую Супер плагин – SiteOrigin CSS.
Илья здравствуйте, а если я все же повредил что то в header и у меня пропало половины страницы и не открываются страницы, как можно исправить? Или откатить Настройки?
Здравствуйте. Какой файл редактировали ?
Я пытался вставить текст слайд шоу в шапку через заголовок стили header.php, пихал этот код в разные места и смотрел чтобы слайд шоу было в нужном месте , и в очередной раз когда сохранял все сбилось
Это легко поправить. Замените неисправный файл на исходный и всё наладится.
Если файл header.php, то просто перезалейте его. Скачайте вашу тему на свой компьютер с сайта WordPress. Распакуйте тему, найдите файл header.php и загрузите его в корневую директорию сайта на хостинге, в файлы темы, где он должен быть. Неисправный файл удалите.
Спасибо огромное сегодня попробую!) а все мои заставки надписи и прочее что я вбивал вручную собьётся? Или останется?
Если вы хотите чтобы ваш код сохранился, тогда вы можете сравнить файлы, исходный и неисправный, посмотреть чего не хватает и добавить вручную. Просто это более трудоёмкий процесс. Коды можно заново добавить. Только в следующий раз будьте внимательней, чтобы не удалить лишнего кода !
Если вы плохо разбираетесь в коде, перед редактированием, делайте резервную копию сайта.
Спасибо большое еще раз!
Илья спасибо вам огромное за помощь! Благодаря вашей помощи все исправилось) Подскажите пожалуйста, а куда в header.php нудно вставить код который я скопировал из плагина слайд шоу чтобы это слайд шоу было наложено прямо на главную заставку в теме andrina lite. Не сверху ни снизу, а именно поверх главной заставки?
Я посмотрю вашу тему.
В общем смотри. Переходишь на страницу: Внешний вид – Редактор. Справа находишь файл – Статическая главная страница (front-page.php) и открываешь его для редактирования. Примерно в самом начале, есть код между php функцией (на скриншоте показано). Вот этот код замени на свой любой код. То что ты добавишь, будет отображаться на главной вместо заставки.
Вопросы если будут ещё, пишите !
Спасибо! сегодня попробую сделать по вашей инструкции.
Вбил код, обновил, ничего не изменилось..(
Удалите кэш и кэш в CSS.
Илья все получилось) спасибо вам огромное, сначала сделал все как вы сказали, не получилось, оказывается слайд шоу легло под заставкой, удалил Ее и все, осталось отцентровать ее!))
Илья, добрый день!
Помоги, пож-та :)
тема: Storefron – Дочерняя Deli
Как удалить в хедере место под “дополнительное меню” (между логотипом и поиском) или вместо него вписать то что мне нужно.
Здравствуйте. Попробуйте скрыть с помощью CSS.
Скрыть – не тяжело. На его место не могу добавить ничего :) Толи место под него все равно занято, толи не там добавляю. В это место ну ни как не попадаю, либо выше хедера, либо ниже, хотя добавляю внутри тега хедера
Может это место не внутри тега хедера, а в других местах. Попробуйте другие места, выше или ниже. Возможно даже в другом файле это место выводится. Возможно в файле functions.php. Вам надо просто узнать, что выводит дополнительное меню в этом месте.
Доброй ночи, Илья! Спасибо за совет,, все получилось. Только при обновлении страницы вставленное содержимое сползает сначала к краю браузера справа, перед тем как встать в место вставки. Как избежать подобного глюка, подскажите пожалуйста.. Может нужно в php обернуть html код?
Здравствуйте! Попробуйте вставить код с помощью плагина. Могу порекомендовать полезный плагин Head, Footer and Post Injections. Там есть функция Generics. В поле Inject before the вставляете тег, например body или head, либо любую часть из кода, перед которым будет отображаться ваш код. Сам код нужно вставить в поле Desktop (and mobile if no alternative specified).
Такая загрузка может быть связана с оптимизацией стилей. У вас стоят плагины типа WP Super Cache или W3 Total Cache?
Добрый день! Спасибо большое, попробую. Плагин Head, Footer and Post Injections у меня стоит как раз.
А вот плагинов типа WP Super Cache или W3 Total Cache у меня нет
Я имел ввиду вообще любой кэширующий плагин или может у вас стоит плагин для оптимизации стилей, скриптов и html кода?
По Вашей наводке вчера добавила WP Super Cache. Проблема не устранилась с глюком, но сайт начал быстрее работать. С Хедера вообще пришлось удалить добавленную информацию, т.к. в разных браузерах отображается в разных местах(
Попробуйте в другое место код добавить. Не обязательно ставить его именно перед и после тега head. Главное конструкцию кода не рушить, а то сайт заглохнет. Чтобы найти подходящее место, экспериментируйте с цифрами 123, в любое место ставите и смотрите где они на сайте отображаются. Так быстрее и проще!
А для ускорения сайта, рекомендую вам:
– Лучший плагин для оптимизации базы данных WordPress!
– Удалить неиспользуемые таблицы базы данных WordPress!
Спасибо, попробую!
Добрый день, подскажите, как сделать так, чтобы header (у меня это картинка между топ меню и меню категорий) отображался только на главной странице? Напишите, пожалуйста, подробнее – в предмете разбираюсь плохо. Тема simplegreat. Спасибо!
Здравствуйте. Вы имеете ввиду только картинку, а не весь хедер, если скрыть весь header, у вас меню пропадёт. Код картинки установите в код главной страницы и всё.
Внешний вид – Редактор, справа найдите файл home.php он отвечает за главную страницу, в него нужно код добавить.
Илья, здравствуйте!
Очень понравилась Ваша статья и мне показалось легче простого добавить телефон и почту в хедер. Но не тут-то было((( Все очистила … Торчит имейл вверху (под меню, верхний правый угол), а телефон так и не показался (где-то еще выше прячется) – так мне и не удалось контакты опустить пониже…..Все вернула….
Здравствуйте. Да, здесь ещё всё зависит от темы, от её конструкции. А в другом месте не пробовали код ставить, там нужно место с помощью цифр подбирать. Скажите название своей темы?
Огромное спасибо, Илья! Всё работает. Раньше пытался изображение просто через img src вставлять, но при загрузке страницы скачки были, думал, как решить через style.css … С Вашим же методом всё работает так, как если бы картинка изначально была в теме.
Илья, здравствуйте
Спасибо за статью. Помогите с советом, добавила тест с конт. информацией выше меню, в самое начало шапки. Как сделать фон прозрачным или картинкой, что в основном меню?
Здравствуйте. Могу порекомендовать плагин SiteOrigin CSS.
Спасибо
Здравствуйте. Подскажите, пожалуйста, а где взять сам html код? мне нужно вставить картинку мессенджеров выше меню
Здравствуйте. А где собственно взять сам код? через что его преобразовать? Мне , например, нужно в секцию над шапкой добавить картинку соцсетей, но как вытянуть из нее код?
Здравствуйте, через редактор записи или страницы, на вкладке Текст, там надо скопировать исходный html код. У вас классический редактор или новый?
Мне бы сначала понять что за редактор записи и где его взять?)
Зайдите в админ-панель WordPress, слева в меню нажмите Записи – Добавить новую. У вас откроется страница создания записи с визуальным редактором, либо откройте для редактирования уже имеющуюся запись. Если у вас классический редактор, справа от него будет вкладка Текст, в ней html код того, чтобы добавляете в визуальный редактор. Если новый редактор блоков, вверху справа жмите на кнопку Настройки, в открывшемся окне будет вкладка редактор кода.
Если я все правильно сделал, то у меня новый редактор, так как он не такой как у вас на скрине. Но в моем редакторе два поля: “Добавить заголовок” и “Начните писать текст или HTML код”. Как загрузить изображение, чтобы получить из него код?
Все получилось) только можно еще вопрос. Как изменить позицию изображения? Как сместить его вниз я понял, но как сместить вправо?
В визуальном редакторе есть кнопки для выравнивания позиции по центру, слева и справа. Вам нужно более внимательно и подробно изучить свой редактор.