Содержание
- Шаг 1. Функция add_theme_support() — подключаем необходимый функционал в теме WordPress
- Шаг 2. Выводим шапку и ее параметры
- Смотрите также
- Необходимые элементы тега
- Добавляем логотип, название и описание сайта в шапку
- Добавляем логотип сайта
- Добавляем название и описание сайта
- Регистрация и вывод меню
- Наполнение style.css для шапки сайта
Не уверен, что я дал правильное название этому функционалу, но зато точное, ведь вся его суть заключается в том, что вы можете менять параметры шапки вашего сайта через админку .
Какие именно параметры? Изображение шапки, цвет текста, а также её ширина и высота. Я считаю, что на своем сайте делать такое смысла нет — гораздо проще зайти в код и поменять там то, что нужно. Однако для клиентов такой функционал может оказаться полезным.
Сама эта возможность 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) написания краткого описания сайта по той же схеме, которая была описана выше.
Напоминаю, что можно внести изменения в соответствующую папку в файловом менеджере. Но мы изменим здесь. И опять
Читайте также: Как подключить ps4 без hdmi кабеля
Консоль — Внешний вид — Редактор — Таблица стилей (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 и вставляем код:
Так по моему понятнее и запутаться вы не должны. Стили подключили, добавили несколько строчек в шапку.
Добавляем логотип, название и описание сайта в шапку
Главными атрибутами подавляющего большинства сайтов в интернете являются:
- Логотип сайта;
- название в шапке;
- краткое описание сайта;
- навигационное меню.
Когда мы все это добавим в нашу тему, можно будет считать что данный урок закончен, а пока вам нужно сделать следующее.
Читайте также: Как называется ethernet кабель
Забегая наперед покажу что должно выйти в итоге всех наших дальнейших действий.
Вот так будет смотреться наша шапка сайта после всех необходимых настроек. Напоминаю, это только пример и суть этого цикла уроков не скопировать то что я описываю, а показать как создавать самостоятельно тему, имея при себе рекомендации. Абсолютно все параметры можно подгонять именно под ваши нужды, в этом и суть уроков. Давайте вернемся к нашей теме.
Итак, у нас должны быть открыты три файла 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.
Источник: