Домой Интернет Создание шаблона WordPress. Урок 2. Header.php — создание шапки и навигационного меню

Создание шаблона WordPress. Урок 2. Header.php — создание шапки и навигационного меню

шаблон

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

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

 

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

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

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

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

<head>
<meta http-equiv=»Content-Type» content=»text/html» charset=»utf-8″/>
<link rel=»stylesheet» href=»<?php bloginfo(‘stylesheet_url’);?>»
<title><?php echo wp_get_document_title(); ?></title>
</head>

12345

<head>  <meta http-equiv=»Content-Type» content=»text/html» charset=»utf-8″/>  <link rel=»stylesheet» href=»<?php bloginfo(‘stylesheet_url’);?>»  <title><?php echo wp_get_document_title(); ?></title></head>

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

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

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

<?php
function load_style_script(){
wp_enqueue_style(‘style’, get_template_directory_uri() . ‘/style.css’);
}
add_action(‘wp_enqueue_scripts’, ‘load_style_script’);
?>

123456

<?phpfunction load_style_script(){ wp_enqueue_style(‘style’, get_template_directory_uri() . ‘/style.css’);}add_action(‘wp_enqueue_scripts’, ‘load_style_script’);?>

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

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

 

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

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

<head>
<meta http-equiv=»Content-Type» content=»text/html» charset=»utf-8″/>
<title><?php echo wp_get_document_title(); ?></title>
</head>

1234

<head>  <meta http-equiv=»Content-Type» content=»text/html» charset=»utf-8″/>  <title><?php echo wp_get_document_title(); ?></title></head>

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

<?php
function load_style_script(){
wp_enqueue_style(‘style’, get_template_directory_uri() . ‘/style.css’);
}
add_action(‘wp_enqueue_scripts’, ‘load_style_script’);
?>

123456

<?phpfunction load_style_script(){ wp_enqueue_style(‘style’, get_template_directory_uri() . ‘/style.css’);}add_action(‘wp_enqueue_scripts’, ‘load_style_script’);?>

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

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

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

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

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

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

 

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

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

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

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

<body>
<div class=»header»>
<div class=»header-present»>
<div class=»logo»>
<a href=»<?php echo home_url();?>»
alt=»<?php bloginfo(‘name’) ?>»
title=<?php bloginfo(‘name’) ?> >
<img src=»<?php bloginfo(‘template_url’) ?>/images/logo.png»>
</a>
</div>
<div class=»site-title»>
<h1><?php bloginfo(‘name’) ?></h1>
<p><?php bloginfo(‘description’) ?></p>
</div>
</div>
<?php wp_nav_menu(); ?>
</div>

1234567891011121314151617

<body>        <div class=»header»>   <div class=»header-present»>     <div class=»logo»>   <a href=»<?php echo home_url();?>»            alt=»<?php bloginfo(‘name’) ?>»                             title=<?php bloginfo(‘name’) ?> >             <img src=»<?php bloginfo(‘template_url’) ?>/images/logo.png»>   </a>     </div>                     <div class=»site-title»>       <h1><?php bloginfo(‘name’) ?></h1>       <p><?php bloginfo(‘description’) ?></p>     </div>   </div> <?php wp_nav_menu(); ?>        </div>

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

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

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

<div class=»header-present»>
<div class=»logo»>
<a href=»<?php echo home_url();?>»
alt=»<?php bloginfo(‘name’) ?>»
title=<?php bloginfo(‘name’) ?> >
<img src=»<?php bloginfo(‘template_url’) ?>/images/logo.png»>
</a>
</div>

12345678

<div class=»header-present»>     <div class=»logo»>   <a href=»<?php echo home_url();?>»            alt=»<?php bloginfo(‘name’) ?>»                             title=<?php bloginfo(‘name’) ?> >             <img src=»<?php bloginfo(‘template_url’) ?>/images/logo.png»>   </a>     </div>

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

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

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

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

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

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

<div class=»site-title»>
<h1><?php bloginfo(‘name’) ?></h1>
<p><?php bloginfo(‘description’) ?></p>
</div>

1234

<div class=»site-title»>  <h1><?php bloginfo(‘name’) ?></h1>  <p><?php bloginfo(‘description’) ?></p></div>

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

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

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

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

<?php wp_nav_menu(); ?>

1

<?php wp_nav_menu(); ?>

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

add_theme_support( ‘menus’ );

1

add_theme_support( ‘menus’ );

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

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

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

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

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

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

  • Логотип.
  • Название сайта.
  • Описание.
  • Навигацию.

 

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

/*
Theme Name: MyFirstTheme
Theme URI: http://ipartnery.ru
Description: Описание темы
Version: 1.0
Author: Alex Spivak
*/

/* CSS Document */
* {
margin:0; /*Обнуляем все отступы, в нужных местах добавим их*/
padding:0;
}
body {
font-family: Arial, Helvetica, sans-serif; /*задаем основной шрифт текста*/
display:block; /*Заставляем все элементы вести себя как блочные*/
background: #f8f8f8;
}
.header {
width: 100%;
min-width:1000px;
height: 120px;
padding-top:10px;
margin-bottom: 5px;
text-align: center;
background: url(images/head-image.png) repeat-x;
}
.header-present {
height: 90px;
}
.logo {
margin-left: 20px;
width: 430px;
float: left;
}
.site-title {
font-family: Arial, Helvetica, sans-serif;
float:right;
text-align: justify;
margin-right: 20px;
}
.site-title h1 {
font-size: 40px;
}
.site-title p {
font-size: 20px;
}
.menu {
margin:5px 20px 0 20px;
}
.menu li {
list-style-type: none;
font-size: 20px;
display: inline;
margin-left: 25px;
}
.menu li a {
color:#165F12; text-decoration:none;
}
.menu li a:hover{
color:#fff; text-decoration:none;
}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162

/*Theme Name: MyFirstThemeTheme URI: http://ipartnery.ru Description: Описание темыVersion: 1.0Author: Alex Spivak*/ /* CSS Document */* {margin:0; /*Обнуляем все отступы, в нужных местах добавим их*/padding:0;}body {font-family: Arial, Helvetica, sans-serif; /*задаем основной шрифт текста*/display:block; /*Заставляем все элементы вести себя как блочные*/background: #f8f8f8;}.header { width: 100%; min-width:1000px; height: 120px; padding-top:10px; margin-bottom: 5px; text-align: center; background: url(images/head-image.png) repeat-x;}.header-present { height: 90px;}.logo { margin-left: 20px; width: 430px; float: left;}.site-title {font-family: Arial, Helvetica, sans-serif;float:right;text-align: justify;margin-right: 20px;}.site-title h1 { font-size: 40px;}.site-title p { font-size: 20px;}.menu {margin:5px 20px 0 20px;}.menu li { list-style-type: none; font-size: 20px;        display: inline; margin-left: 25px;}.menu li a {color:#165F12; text-decoration:none; }.menu li a:hover{color:#fff; text-decoration:none;}

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

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

.header {
width: 100%;
min-width:1000px;
height: 120px;
padding-top:10px;
margin-bottom: 5px;
text-align: center;
background: url(images/head-image.png) repeat-x;
}

123456789

.header { width: 100%; min-width:1000px; height: 120px; padding-top:10px; margin-bottom: 5px; text-align: center; background: url(images/head-image.png) repeat-x;}

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

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

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

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

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

.header-present {
height: 90px;
}
.logo {
margin-left: 20px;
width: 430px;
float: left;
}

12345678

.header-present { height: 90px;}.logo { margin-left: 20px; width: 430px; float: left;}

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

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

.site-title {
font-family: Arial, Helvetica, sans-serif;
float:right;
text-align: justify;
margin-right: 20px;
}
.site-title h1 {
font-size: 40px;
}
.site-title p {
font-size: 20px;
}

123456789101112

.site-title {font-family: Arial, Helvetica, sans-serif;float:right;text-align: justify;margin-right: 20px;}.site-title h1 { font-size: 40px;}.site-title p { font-size: 20px;}

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

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

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

.menu {
margin:5px 20px 0 20px;
}
.menu li {
list-style-type: none;
font-size: 20px;
display: inline;
margin-left: 25px;
}
.menu li a {
color:#165F12; text-decoration:none;
}
.menu li a:hover{
color:#fff; text-decoration:none;
}

123456789101112131415

.menu {margin:5px 20px 0 20px;}.menu li { list-style-type: none; font-size: 20px;        display: inline; margin-left: 25px;}.menu li a {color:#165F12; text-decoration:none; }.menu li a:hover{color:#fff; text-decoration:none;}

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

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

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

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

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

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

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