Легкий способ изменить шапку сайта на WordPress
Пардоньте, за такой вот сплагиаченный слог приветствия, из фильма «Белое солнце пустыни», не смог удержаться. Надеюсь никто не в обиде.
Сегодня, как уже всем стало понятно, речь пойдет о том, как же можно изменить стандартную шапку блога. Т.е. о том, как вставить новую картинку в верхнюю часть нашего сайта, которая называется Хедер (Header).
Для экспериментов, опять буду использовать клон своего блога, размещенный на локальном сервере.
Итак, поехали.
В первую очередь необходимо зайти в админ панель и немножко изменить код, в двух файлах, которые отвечают за отображение хедера и за стили. Файлы эти называются: header.php и style.css соответственно.
Зачем же, что-то менять? Да еще и в коде. Спросите вы. Отвечаю! Вся беда в том, что функционал шаблона GreenChilli, позволяет вставить картинку размером, всего лишь 286×50 px. Это, как вы понимаете, очень маленький размер, который не совсем соответствует идее блога.
Заходим в админку, переходим к меню «Внешний вид», следом к меню «Редактор» и наблюдаем перед глазами, окно редактора. Ищем справа файл header.php, кнопаем на него, и видим тот самый код, в который сейчас будем вносить изменения. Я выделил кусочек кода, который отвечает за саму картинку в шапке и за вывод формы поиска справа. Как видим этот код заключен между тегами
Использование атрибута id говорит о том, что стилевой идентификатор, в данном случае header, должен быть в единственном экземпляре. Это я так решил поумничать.
Внешний вид идентификатора header, т.е. нашей шапки, заключенного в теги <div> </div > прописывается в файле стилей — style.css
Код, который отвечает за вывод формы поиска, мы трогать не будем, а вот все остальное безжалостно удалим. Так же необходимо удалить скобочку вот здесь <?php >
Жмем на кнопку «Обновить файл»
Небольшой совет, дорогой читатель, перед тем вносить какие-либо изменения в код, сохраняй редактируемый файл. Сколько раз бывало уже, наудаляеш чего-нибудь, а шаблон потом раз, и перекосило.
Итак, давайте посмотрим, что у нас получилось.
Вот это белое поле вверху, и будет место для нашей новой шапки. Единственно, что мне не сильно нравится, это форма поиска с правой стороны. Удалять ее не будем, а просто спрячем.
Возвращаемся опять в редактор, выбираем файл style.css, ищем в этом файле вот такой блок.
И после открывающей скобочки вставляем следующую строчку – visibility: hidden; Нажимаем «Обновить»
В результате код должен выглядеть вот так.
Все! Место для новой шапки подготовлено. Осталось только, ее нарисовать и вставить.
Советую скачать очень удобную программку. Которая в дальнейшем, очень пригодится и которая называется PicPick. Функций у нее много, но что потребуется в данный момент, так это линейка. Качаем программку, устанавливаем.
Измеряем линейкой это белое поле и у нас получается 960 на 114 px.
Теперь необходимо подготовить красивую картинку такого точно размера, вставить там свою фотографию, нарисовать логотип, написать имя сайта, и т.д., и т.п. Я ограничился малым, тем, что сделал синий фон, написал название сайта, сделал небольшой логотипчик и придумал слоган.
Как делать картинку в Фотошопе или в другом графическом редакторе, я расскажу в позже. В принципе, ничего мега сложного в этом нет. Я думаю справится любой, у кого есть хоть какой-то, малейший опыт работы в этой программе.
Итак, картинка готова. Называем ее ну, например, header.jpg, и заливаем на хостинг по FTP. Причем заливаем по адресу ….wp-content/themes/greenchilli/images
Далее опять открываем редактор. Открываем файл стилей, ищем вот такой блок:
И после открывающей скобки вставляем вот такой вот код:
В результате должно получиться так:
Нажимаем “Обновить», переходим по адресу блога в браузере и любуемся новой симпатичной шапочкой.
Пожалуйста подписывайтесь на новые статьи. Никакого спама, только полезная информация.
Вот и все! Таким вот образом мы разобрались с тем как изменить шапку сайта нашего любимого WordPress. Если остались вопросы, пишите в комментариях, всегда буду рад помочь.
Использование редактора сайта » Настройка заголовка с помощью редактора сайта
Типовой заголовок на веб-сайте включает в себя логотип, название сайта, меню навигации и во многих случаях некоторые другие элементы. Макетом этих элементов управляет ваша тема. Можно ли это настроить для себя?
В этом руководстве будет показано, как это сделать с помощью редактора сайта. Чтобы изменить порядок элементов в заголовке с помощью описанного здесь метода, необходимо использовать тему, которая поддерживает редактор сайта.
Редактирование шаблона заголовка
Для настройки заголовка необходимо отредактировать шаблон заголовка. При редактировании этого шаблона изменения будут распространяться сразу на все страницы сайта. Чтобы открыть шаблон заголовка, выполните следующее.
- На панели администратора сайта перейдите в раздел Внешний вид → Редактор.
- Щёлкните текущий шаблон по центру в верхней части экрана (здесь отображается «Индекс»).
- Нажмите «Просмотр всех шаблонов».
- На следующем экране нажмите «Части шаблона».
- Затем выберите «Заголовок».
Затем сделайте следующее.
В зависимости от темы вы можете найти различные элементы в своём предварительно определённом заголовке. В этом документе будет рассмотрен процесс добавления и настройки всех этих элементов.
Добавление элементов в заголовок
В заголовок можно добавить различные элементы. В этом документе будут рассмотрены элементы, которые используются чаще всего: логотип, меню, панель поиска и меню ссылок на социальные сети.
Элемент 1 — Логотип сайта
Чтобы добавить логотип в заголовок, выполните следующее.
- Нажмите кнопку инструмента вставки блоков +.
- Найдите блок «Логотип сайта».
- Щёлкните его, чтобы вставить.
- Загрузите изображение логотипа, используя этот блок.
После добавления блока можно использовать стрелки навигации «влево» и «вправо», чтобы изменить его положение относительно других элементов меню.
Наконец, можно изменить его размер, перемещая точки выделения.
Когда всё будет готово, нажмите кнопку Сохранить, а затем нажмите Сохранить ещё раз. Также убедитесь, что установлен флажок для части шаблона заголовка.
Узнайте больше об использовании блока «Логотип сайта». Вы узнаете, как менять положение, изменять выравнивание, обрезать изображение, добавлять фильтр, заменять изображение, применять различные стили и проч.
Элемент 2 — Меню сайта
Чтобы добавить меню в заголовок, выполните следующее.
- Нажмите кнопку инструмента вставки блоков +.
- Найдите блок «Навигация».
- Щёлкните его, чтобы вставить.
После добавления блока «Навигация» в заголовок, у вас будет два варианта:
- Выбор существующего меню. Нажмите кнопку, а затем выберите меню.
- Создайте новое меню с нуля. Щёлкните и добавьте любые элементы.
Когда меню будет готово, его можно переместить в нужное место с помощью стрелок «влево» и «вправо».
Когда всё будет готово, нажмите кнопку Сохранить, а затем нажмите Сохранить ещё раз. Убедитесь, что установлен флажок для части шаблона заголовка.
Узнайте больше об использовании блока «Навигация». Вы узнаете, как вставить блок навигации, добавить ссылки, создать подменю, изменить настройки ссылок и проч.
Элемент 3 — Панель поиска
Чтобы добавить панель поиска в заголовок, выполните следующее.
- Нажмите кнопку инструмента вставки блоков +.
- Найдите блок «Поиск».
- Щёлкните его, чтобы вставить.
После добавления блока можно использовать стрелки навигации «влево» и «вправо», чтобы изменить его положение относительно других элементов меню.
Наконец, можно изменить его размер, перемещая точки выделения.
Когда всё будет готово, нажмите кнопку Сохранить, а затем нажмите Сохранить ещё раз. Убедитесь, что установлен флажок для части шаблона заголовка.
Узнайте больше об использовании блока «Поиск». Вы узнаете, как добавить блок, изменить текст кнопки, изменить шрифт и цвета, используемые на кнопке, изменить ширину блока, переключить кнопку или изменить её положение, изменить выравнивание блока и проч.
Элемент 4 — Значки социальных сетей
Чтобы добавить значки социальных сетей в заголовок, выполните следующее.
- Нажмите кнопку инструмента вставки блоков +.
- Найдите блок «Значки социальных сетей».
- Щёлкните его, чтобы вставить.
После добавления блока можно приступить к добавлению в него профилей социальных сетей. Для этого выполните следующее:
- Нажмите кнопку инструмента вставки блоков + и введите название социальной сети, которую необходимо добавить. Щёлкните элемент, чтобы добавить его к значкам социальных сетей.
- Щёлкните значок снова, чтобы добавить ссылку на профиль. Вставьте URL-адрес своего профиля в социальной сети и нажмите стрелку для подтверждения.
- Для добавления нового значка, если следующая кнопка «+» сразу не отображается, нажмите кнопку В виде списка, а затем нажмите «Значки социальных сетей» слева. Кнопка «+» должна появиться, затем можно продолжить добавление значков.
- Повторите шаги 2 и 3 необходимое число раз, чтобы добавить все свои профили в социальных сетях.
После добавления всех значков можно выбрать блок, нажав блок «Значки социальных сетей» в представлении В виде списка, а затем с помощью стрелок «влево» и «вправо» изменить положение блока относительно других элементов меню.
Когда всё будет готово, нажмите кнопку Сохранить, а затем нажмите Сохранить ещё раз. Убедитесь, что установлен флажок для части шаблона заголовка.
Узнайте больше об использовании блока «Значки социальных сетей». Вы узнаете, как можно вставить значки, добавить свои профили в социальных сетях, изменить тип значков, стиль, удалить значки и проч.