Как вставить в шапку сайта картинку или текст.

01.06.2018

В этой статье расскажу как вставить картинку или текст в шапку сайта на Wordpress. Сейчас шапка моего сайта выглядит так (скрин для показа результата):

Заходим в админ панель нашего сайта и в левом меню выбираем пункт "Внешний вид" > "Редактор".

Откроется раздел в котором можно вносить изменения в файлы шаблона сайта. Изменения стоит вносить аккуратно, дабы не сломать тему сайта. В последующих уроках я буду показывать как работать с файлами. Сейчас скажу только что файл " functions.php " трогать не стоит, если конечно Вы не знаете точно что делаете.)

И так, находим среди списка справа файл "header.php". Этот файл отвечает за вывод шапки сайта.

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

Нас интересует часть кода заключенная в парный тег "header". В нем и прописан весь код шапки сайта. То есть ищем начало шапки <header> и закрытие тега </header>. Всё что между ними и есть код нашей шапки. У меня на сайте он выглядит так:

Вставлять картинку или текст нужно сразу после тега <header> либо перед закрытием тега </header>. Достаточно сделать переход строки с помощью клавиши "Enter" как в любом текстовом редакторе.

Для корректного отображения текст или картинка должны быть написаны на языке HTML. Не пугаемся)) сейчас покажу как это легко сделать по средствам самого wordpress.

Сначала вставим в шапку текст.

И так нам нужен текстовый редактор. Заходим в записи и жмем "Добавить новую", я уже описывал добавление записей в предыдущих статьях. В редакторе пишем необходимый текст и настраиваем как нужно нам. На скрине ниже показано: я написал текст и выделил его жирным. Обратите внимание что при добавлении текста должна быть активна вкладка "Визуально".

После того как закончили редактирование своего текста нужно переключиться на вкладку "Текст" где и будет добавленный текст на нужном нам языке HTML.

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

Вот как это выглядит на сайте:

Внешний вид текста можно настроить в редакторе (цвет, размер шрифта и т.д.), а вот расположение нужно менять с помощью внесения изменений в файл "style.css". О том как это делать расскажу в следующей статье, сейчас только о самом процессе добавления текста или картинки.

Далее добавим картинку в нашу шапку. Для этого идем в текстовый редактор (где редактировали текст) и жмем "Добавить медиафайл". Как добавлять картинки в записи я тоже писал ранее. Вкладка должна быть "Визуально".

После того как добавили и настроили картинку (размер например), переходим на вкладку "текст" и копируем полученный код.

Вставляем скопированный ранее код также в в нужное место в "header.php". Я вставил опять после тега <header>. Вы можете менять размер вставленной картинки прямо в коде, изменяя параметры width="" и height="" ширина и высота картинки.

Вот как выглядит вставленная мной картинка на сайте:

Как видите при добавлении картинки шапка сайта растянулась по вертикали. Это тоже решается через внесение изменений в файл стилей "style.css". О том как изменить расположение картинки расскажу в следующей статье.

Вот Вы и узнали как добавить картинку или текст в шапку сайта.))

Подписывайтесь на канал и не забывайте ставить лайки если статья была Вам полезна.

Вопросы можете задавать на: gorin.nik2015@yandex.ru

Всем пока!)