Как изменить шапку сайта в WordPress

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

В теме оформления за неё отвечает файл header.php

На моём тестовом блоге про страйкбол установлена стандартная тема WordPress: Twenty Seventeen.

Как сменить шапку сайта показываю на её примере.

Как сделать адаптивную шапку сайта

Ты слышал что-нибудь об адаптивном дизайне…

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

Учитывая, что все большее значение приобретает мобильный интернет “резиновый” дизайн на сайте это mast-have.

Он стоит денег или затраченного времени. Напротив тема Twenty Seventeen – она адаптивная, и идёт в комплекте с движком.

Какая удача: замени шапку, подкрути стили под тему своего блога – и вот, ПРОБЛЕМИЩА решена!

Как изменить шапку сайта в WordPress

Шаг 1. Кликни по шапке правой кнопкой мыши. В появившемся окне выбери пункт открыть изображение.

Картинка шапки сайта wordpress

Шаг 2. Увеличь до полного и сохрани на компьютере. После чего посмотри его параметры.

Как изменить шапку сайта в wordpress

У меня это картинка с именем header.jpg расширением 2000 на 1200 пикселей.

Шаг 3. В Photoshop, или другом редакторе, подготовь изображение для шапки сайта с теми же именем, типом файла, шириной и высотой.

Изображение для шапки сайта

Если идей нет, то прочти заметку: где брать картинки для сайта.

Шаг 4. Загрузи файл на сервер в тот же каталог где хранится текущая шапка.

Как сменить шапку сайта

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

Шаг 5. Обнови главную страницу блога – посмотри что получилось.

Какой новая картинка шапки сайта WordPress будет на мобильных устройствах

В меню браузера Mozilla FireFox, инструменты вебразработки, есть вкладка адаптивный дизайн. Её быстрый вызов Ctrl+Shift+M.

Как сделать адаптивную шапку сайта

Здесь ты увидишь каким будет сайт на экранах разных размеров и в мобильных устройствах целого ряда производителей.

Картинка шапки сайта wordpress

PS: Таким образом, без вмешательства в код, можно изменить остальные картинки темы 2017, а также поменять шапки сайтов в других дизайнах.

С уважением, Сергей.

Просмотров: 49

Оставить комментарий или два

Оповещать о новых комментариях по RSS