Как поменять шапку сайта в wordpress

Не уверен, что я дал правильное название этому функционалу, но зато точное, ведь вся его суть заключается в том, что вы можете менять параметры шапки вашего сайта через админку .

Какие именно параметры? Изображение шапки, цвет текста, а также её ширина и высота. Я считаю, что на своем сайте делать такое смысла нет — гораздо проще зайти в код и поменять там то, что нужно. Однако для клиентов такой функционал может оказаться полезным.

Сама эта возможность WordPress появилась в версии 2.1, я не стану рассматривать, как это работало в старых версиях, а лучше расскажу, как это используется сейчас.

Вот как это выглядит на примере стандартной темы TwentyTwelve (Внешний вид > Заголовок):

Шаг 1. Функция add_theme_support() — подключаем необходимый функционал в теме WordPress

Начиная с версии WordPress 3.4 мы можем использовать функцию add_theme_support() в файле functions.php для задействования данной возможности движка.

Если же вам понадобится обратиться к этой функции из другого файла темы или из файлов плагина, тогда используйте хук after_setup_theme следующим образом:

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

Вот эти параметры:

Шаг 2. Выводим шапку и ее параметры

Используйте функцию header_image() для вывода URL изображения шапки, а функцию get_custom_header() — для получения параметров шапки, например:

Также есть функция get_header_textcolor() , которая возвращает установленный цвет.

Смотрите также

Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю, но с 2019 выступаю только на тех, которые сам организовываю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.

Как изменить заголовок в WordPress. Как изменить шрифт заголовка WordPress. Как изменить заголовок страницы в html.

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

КонсольВнешний видНастроитьИзображение заголовкаЦвета.

КонсольВнешний видЗаголовок.

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

В некоторых темах кроме как поменять цвет заголовка — функций по размеру шрифта и виду шрифта нет.

В таком случае придется это делать через Редактор файлов WordPress.

В более ранних версиях тем WordPress изменения вносились в этот файл — header.php. Но на снимке мы видим, что он нам мало чем может помочь. Будем изменять класс стиля заголовка (style.css).

Для этого посмотрим, где он находится. Нажатие кнопок (горячих клавиш) ctrl+shirt+C или ctrl+shift+I или ctrl+U или F12 сотворит с нашей страницей вот такое преображение:

Щелкнув мышкой на интересующее нас изображение или текст — элементы страницы сайта — справа, при наведении мышкой, всплывают подсказки и мы видим, где прячутся коды элементов — адреса

Можно внести изменения по стандартной схеме в папку темы через файловый менеджер. Можно это сделать и через панель управления/консоль нашего сайта.

КонсольВнешний видРедакторТаблица стилей

строчки 656-664 определяют стиль заголовка. Их и будем менять.

margin: 0;
padding: 0;
font-size: 60px;
line-height: 70px;
word-wrap: break-word;
font-weight: 700;
color: #000;
letter-spacing: -.02em;
text-transform: uppercase;

изменен размер шрифта с 60 на 50 и добавлены строки 665-667

text-shadow:3px 3px 11px rgba(0, 0, 255, 0.62);
font-family: "Garamond", Serif, Georgia, Times New Roman;
font-style: oblique;

добавлена размытая синяя тень, изменено семейство шрифтов и сделан стиль шрифта наклонным.

Обновляем/сохраняем файл с внесенными изменениями. Смотрим на результат:

таким же образом меняем краткое описание сайта, чтобы из колеи не выбивалось. С помощью нажатия кнопок (горячих клавиш) ctrl+shirt+C или ctrl+shift+I или ctrl+U или F12 ищем класс (style.css) написания краткого описания сайта по той же схеме, которая была описана выше.

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

Читайте также:  Как перенести информацию с айфона на айфон

Консоль — Внешний вид — Редактор — Таблица стилей (style.css)

font-size: 23px;
line-height: 28px;
margin: 0;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;

Добавляем то же самое, что и при изменении заголовка на строки 674-677

text-shadow:3px 3px 11px rgba(0, 0, 255, 0.62);
font-family: "Garamond", Serif, Georgia, Times New Roman;
font-style: oblique;

и изменяю кегль(размер)font-size — шрифта с 23 на 50

Обновляемся/сохраняемся — Проверяем. Опять ничего. закрываем браузер, перезаходим. Ну вот:

Совсем другое дело. Изменю, пожалуй краткое описание сайта.

Консоль — Настройки — Общие

Интернет Издание — мне более нравится, как Искусственный Интеллект.

Можно было бы сделать и совсем проще: в программах по редактированию изображений наложить текст, какой вам заблагорассудится и всю эту картинку загнать в изображение заголовка. Но не все темы дают возможность иметь заголовок и краткое описание сайта скрыто, и тогда название сайта и его описание не будет выводиться во вкладках сайта и в результатах выдачи поисковых систем — поисковых строчках. Поэтому приходится извращаться.

Меняя тип шрифта — будьте аккуратны, поскольку не все устройства вывода(монитор, принтер) их могут отобразить. Во избежание получения неясных квадратиков используйте основные шрифты, и другие для подстраховки:

font-family: "Garamond", Serif, Georgia, Times New Roman;

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

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

После небольшого перерыва продолжим разрабатывать свою собственную тему для сайта на WordPress. Тема сегодняшнего урока шапка сайта, добавляем нужные функции, вставляем логотип, название сайта и выводим навигационное меню сайта.

В данном уроке будем работать с файлом header.php, functions.php и style.css, а так же добавим несколько изображений в папку images.

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

Как я уже говорил в данной публикации будем корректировать файл header.php, именно его нам и нужно открыть в первую очередь.

Необходимые элементы тега

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

Теперь по порядку все разберем:

  • Первая строчка указывает тип и метод кодировки документа.
  • Вторая подключает файл style.css (не забрасывайте камнями, те кто считает такое подключение не корректным, далее все объясню почему написал так).
  • Третья строка выводит тайтл страницы, ранее использовалась функция wp_title (). Сейчас wp_title () считается устаревшей, хотя и поддерживается в темах.

С первой и второй строкой все более или менее понятно. По поводу подключения стилей. Правильное подключение стилей осуществляется через файл functions.php таким вот способом:

Это действительно правильный вариант подключения скриптов и стилей. Пример подключения стилей непосредственно в header.php нельзя назвать не правильным, все будет работать, но разработчики советуют подключать именно скриптом. По этому добавьте этот код в functions.php и подключите скрипты, зная об альтернативном способе (первый предложенный вариант). Зачем я вообще даю два варианта?

Это нужно знать, возможно вам придется работать с чужими темами, тогда вы будете знать что это за строчка такая в хедере.

Боюсь что хотел как лучше, а вышло еще больше запутать, значит вернусь назад и еще раз скажу что делать.

Первое, открываем файл header.php и между тегами head вставляем это:

Следующим переходим к файлу functions.php и вставляем код:

Так по моему понятнее и запутаться вы не должны. Стили подключили, добавили несколько строчек в шапку.

Добавляем логотип, название и описание сайта в шапку

Главными атрибутами подавляющего большинства сайтов в интернете являются:

  • Логотип сайта;
  • название в шапке;
  • краткое описание сайта;
  • навигационное меню.

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

  1. Зайти в админку и в настройках указать название и описание сайта. В случае если вы плохо ориентируетесь в консоли ее описание можно изучить тут.
  2. Создать несколько страниц для добавления их в меню, для пробы подойдут и пустые страницы.
  3. Создать логотип, звучит не очень. Можете просто сделать картинку не шире 400 пикселей и высотой примерно 200 пикселей, это примерные цифры, если вы будете использовать свои параметры, просто нужно будет подправить предложенный мной CSS.
  4. Выбрать картинку, которая будет фоновой для шапки. Обычно это простая структура изображения, плитка или что-то в этом роде, которую можно легко совмещать по горизонтали. Если непонятно ниже приведу пример.
Читайте также:  Как отследить местоположение абонента мегафон

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

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

Итак, у нас должны быть открыты три файла header.php, style.css и functions.php.

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

Теперь все по порядку. Если кратко, то мы добавили логотип, название, описание и навигационное меню. Это конечно очень кратко. Теперь все разбираем по винтикам.

Добавляем логотип сайта

Первым делом мы добавляем дополнительный див header-present, в котором будут размещаться логотип, название и описание. По поводу логотипа, думаю вы заметили новый класс logo, его наполнение вмещает в себя ссылку на главную страницу сайта, альт и тайтл с названием сайта, картинку-логотип. Продублирую:

Что мы видим с этого фрагмента, открывающуюся ссылку на домашнюю страницу (главную), в alt и title ссылки функция выведет название блога. Это стандартный прием, который применяется на многим сайтах, ставить на логотип в альте и тайтле название сайта.

Следующее это добавление картинки, которая находиться в папке image вашей темы, с названием logo.png. Тут немного внесу ясности. Вы можете сколько угодно изменять картинку (экспериментировать). Главное сохранять идентичность в названии картинки и интерпретации в коде.

К стилям пока не идем. Я выбрал такую подачу материала, она более сконцентрирована на одном действии и не нужно прыгать по файлам шаблона.

Добавляем название и описание сайта

Как мы можем видеть с предыдущего примера ничего сложного нет, но все поменяется когда дойдем к стилям. Если вы отлично владеете CSS, тогда и там у вас не возникнет проблем, тем кто со стилями дела не имел, будет трудно. Советую прочитать несколько книг по CSS, они не очень объемные, в интернете их полно в свободном доступе. Прочитайте их штуки три, там одно и тоже, но разными словами, тогда лучше вникнете и будет проще работать дальше. Это займет не больше дня, так что стоит попробовать понять.

Возвращаемся к шаблону и разбираем следующий фрагмент:

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

Суть в том, что бы вывести название в шапке и функцией bloginfo (‘name’) мы это реализовываем. Следующей строкой будет описание сайта, заданное в настройках админки. Это так же будет более детально анализироваться в дальнейшем.

Регистрация и вывод меню

Последнее что мы добавим в header.php в этом уроке будет:

Это вывод меню, которое нужно зарегистрировать, по этому переходим в файл functions.php и перед закрывающимся «?>» вписываем такое:

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

Наполнение style.css для шапки сайта

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

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

Читайте также:  Как изменить пароль в одноклассниках если забыл

В общем, создаем полу резиновый (такого понятия нет), адекватно неправильный (валидный и корректный, но не оптимальный) файл style.css.

Как мы уже говорили картинка, которую мы получим в итоге (показана в начале поста), будет иметь следующие элементы:

Для всех этим элементов были назначены классы, мы их добавили в header.php вместе с html и php кодом. Теперь пришло время в эти классы добавить правила. По традиции сначала полный файл, затем детальный обзор.

Уже вижу летящие в меня камни… Уклоняясь от них приступлю к разбору всего выше написанного.

Первым делом идем к основному блоку шапки с классом header, к его описанию мы и переходим. Итак, дублирую и объясняю:

Ширина стоит 100%, это позволяет растягивать шапку на всю ширину экрана, так же стоит минимальное ограничение по ширине в 1000 пикселей, эта цифра идет с расчета 400 пикселей на логотип (это все примерные цифры), и 500 на название и описание сайта. Таким образом наша шапка растягивается как угодно широко, но не дает блокам съехать вниз. Многие могут сказать что это не адаптивный дизайн, то-есть не предназначен под мобильные устройства, я с этим полностью согласен, и мое мнение таково, что под мобильные устройства нужно делать отдельный шаблон. Возможно когда закончим с шаблоном для ПК, я возьмусь за описание создания тем под мобильные устройства.

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

Отступы сверху и снизу в 10 и 5 пикселей соответственно позволят сделать расположение элементов более удобным.

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

Переходим к логотипу сайта. Логотип, название и описание помещены в отдельный блок header-present. Я ему задал высоту в 90px. Остальное пространство отойдет на вертикальное меню.

В класс logo Добавляем ширину в 430px (это под мою картинку) отступ от левого края браузера в 20px и задаем обтекание с правой стороны, что бы наше название сайта не съехало вниз. Саму картинку мы добавляли в html.

Идем дальше и переходим к следующему блоку с названием и описанием:

Шрифт и жирное выделение можете брать по вашему усмотрению, прилепим к правому краю, и дадим отступ в 20 пикселей. Так же я сделал выравнивание текста по ширине, это можете корректировать как вам нужно.

Главный заголовок H1 сделал в 40, а текст описания в 20 пикселей, так же можете делать как вам угодно, просто меняя цифры.

Наконец-то доходим до последнего, до основного меню сайта, тут я не стал сильно углубляться в оформление, цвет, шрифт, размер все это сами подбираете под себя, вот фрагмент оформления меню.

Класс menu добавляет WordPress самостоятельно, при создании меню, в него лишь нужно внести несколько правил.

К меню я задал отступы (5px 20px 0 20px), в общем мог бы этого и не делать, у меня вышло и так довольно нормальное расположение, сделал это лишь потому, что бы вы могли самостоятельно двигать всю строчку навигации как вам угодно.

Меню выводиться списком (li) в него я ввел следующее:

  • Убрал маркер;
  • задал размер шрифта;
  • сделал линейное расположение элементов;
  • задал отступы от каждого элемента (отступы между словами).

Напоминаю что меню создается и корректируется в админке — Внешний вид/Меню.

Следующим шагом является работа со ссылками меню, что я сделал здесь:

  • Задал цвет ссылки по умолчанию и после наведения мыши;
  • убрал нижнее подчеркивание.

Ну вот в общем и все что я запланировал проделать в этом уроке. Я свое дело сделал, с вас комментарии, замечания (возможно, где-то ошибки), предложения по оформлению следующих уроков. Меня очень интересует удобно ли такая подача материала как в этой публикации, где сначала описываю html, а только потом CSS, возможно лучше что бы параллельно все прописывать.

Следующий урок будет об основной части страницы, где расположен контент, а в случае с главной страницей — анонсы постов. Оформим красивый вывод анонсов с миниатюрами и принадлежностью к рубрикам и меткам. Не забывайте подписываться на обновления и получать свежую информацию о работе с CMS WordPress.

Adblock detector