Шаблон WordPress своими руками. Урок 7. Работа с header.php

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

Полезно: файл темы header.php тонкости настройки

Общая информация

Сегодня речь пойдет о документе header.php и подключение некоторых элементов через functions.php, также в процессе работы мы добавим несколько картинок в папку «images». Содержимое index.php и таблицы стилей style.css мы уже изучили на прошлом уроке. Стили для используемых элементов мы прописали ранее, поэтому поговорим подробнее о самих составляющих шапки сайта, к которым и привязываются те или иные параметры.

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

Давайте разберемся, какие необходимые компоненты должны находиться в теге <head>. Также сегодня мы научимся генерировать логотип, название и описание сайта в его шапке. Полезной информацией будет и опция регистрации пользователей, а также формирование понятного меню. В конечном итоге мы привяжем к элементам данные из файла style.css, с которым заголовок сайта приобретет совершенно новый внешний вид.

Основные элементы шапки сайта

Для создания красивого заголовка сайта, нам потребуется работать с тегом <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>

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

Полезно: настройка FTP-доступа на сайте WordPress

Что касается подключение стилей, которые уже были созданы нами ранее, правильно осуществлять его через файл 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’);  ?>

Такой вариант является верным для подключения всех скриптов и стилей для шаблона. Однако, приведенный нами вариант подключения непосредственно через документ header.php также является правильном. Все будет работать корректно и без ошибок.

Разработчики же рекомендуют подключать стили именно через скрипты. Поэтому добавим наш код в файл functions.php, но будем помнить и об альтернативном способе, который мы предложили изначально.

Почему мы разбираем оба варианта? Это связано с тем, что вам может понадобиться работать с чужими шаблонами, где мог быть использован либо тот, либо иной варианты. Так вы будите знать, что данная строчка может обозначать внутри тега <head>. Это позволит легче ориентироваться в сторонних темах, а значит иметь под рукой пример для создания своей собственной.

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

<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’);  ?>

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

Логотип, название и описание

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

  • название ресурса;
  • логотип компании;
  • краткое описание;
  • меню навигации по страницам.

Генерацией именно этих элементов мы с вами и займемся сегодня.

Первым делом нам потребуется зайди в административную панель и в настройках прописать название и описание нашего ресурса. Далее создадим несколько страниц, чтобы можно было добавить их в меню. Для этого подойдут даже пустые страницы. Если вы не имеете логотипа, то можно его создать. В качестве примера можно выбрать просто картинку размером 400 на 200 px. Это ориентировочные цифры, если вы захотите задать другие параметры, то нужно будет немного отредактировать файл CSS.

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

Полезно: шаблон WordPress своими руками. Урок 1. Основы

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

Работать мы будем в основном с тремя документами темы:

  • таблица стилей style.css, сгенерированная ранее;
  • header.php, с которым мы непосредственно будем работать;
  • functions.php для вызова тех или иных опций.

Таблица стилей уже заполнена классами, которые мы будем здесь применять. В header.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>

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

Полезно: шаблон WordPress своими руками. Урок 4. Информация до разработки

Логотип

Чтобы разместить логотип, а также другие элементы, нам потребуется добавить новый тег <div> header-present. Для логотипа был создан новый класс «logo», который включает ссылку на домашнюю страницу ресурса, атрибут альт и название, а также картинку с брендом компании.

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

Следующим шагом будет добавление непосредственно изображения, которое предварительно размещаем в папке «image». Картинка должна иметь название logo.png. Редактировать изображение можно по собственному усмотрению не ограниченное количество раз. Единственное условие в сохранение единства в название картинки и самом коде.

Название и описание

На этом шаге также нет никаких сложностей. Самое трудное было в работе со стилями, особенно, если ранее вы никогда не работали с CSS. Лучше заранее немного изучить CSS, чтобы хоть немного ориентироваться в таблицах стилей. Если прочесть всего несколько книг, то разбираться в коде будет в разы проще.

Теперь же разберем фрагмент года с «site-title». В H1 будет выводиться название сайта. Со стороны последующего продвижения это не очень удобно, потому что заголовок будет примяться на всех страницах сайта. Однако, в начале работы можно использовать подобный способ. Об оптимизации мы будем говорить позднее.

Чтобы вывести название в шапке, нам понадобиться уже известная функция bloginfo (‘name’). Вторым аналогичным тегом выводим описание, прописанное нами ранее в административной панели WordPress.

Полезно: шаблон WordPress своими руками. Урок 5. Работа с кодом

Регистрация и меню

Последней строчкой, которую мы прописали в файле header.php, была:

<?php wp_nav_menu(); ?>

Этот фрагмент кода формирует меню навигации по сайту, а значит пользователи смогу легко переходить по страницам и находить нужную информацию. Подобный вывод меню требуется зарегистрировать. Сделать это можно в документе functions.php. Впереди завершающего элемента “?>” прописываем следующее:

add_theme_support( ‘menus’ );

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

Заключение

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