В этом занятии мы уже начнем наполнять файл header.php WordPress, пропишем мета теги в head (кодировку, языковую принадлежность сайта, тайтлы и прочее). Подключим ВРЕМЕННО файл style.css напрямую в header.php. Я буквально по строчке разберу значения каждой функции и мета тегов.
В позапрошлом занятии мы уже создали файлы для базового шаблона WordPress, сейчас-же мы создадим основу для всего сайта — собственно файл header.php.
Прописываем мета теги и функции в файл header.php WordPress
Итак, открываем и вставляем в header.php следующее содержимое ( пояснения по коду ниже):
<?php /** * The Header template for our theme * * @since Start WP 1.0 */ ?> <!DOCTYPE html> <!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) & !(IE 8)]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header> <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> </header>
Пояснения по вставкам в файл header.php WordPress
!DOCTYPE html — Начало HTML документа.
Нижеследующий отрывок — вектор версии Internet Explorer , позволяет с помощью условных комментариев определять версию IE и отдавать для неё отдельный код.
<!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) & !(IE 8)]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
Тут какая фишка, если вас не устраивает отображение каких-то элементов в разных версиях IE 7, IE 8 и других, то применив определенные стили к HTML документу — html class="ie ie7", html class="ie ie8", его прочитает только браузер IE с определенной версией. Остальные браузеры этот код просто проигнорируют и посчитают за обычный комментарий.
Тут-же в этом отрывке функция language_attributes(); — указывает языковую принадлежность сайта. Аналог HTML тега html lang="ru".
Функция bloginfo( 'charset' ); добавляет в файл header.php WordPress кодировку документа utf-8, Аналог HTML тега charset="utf-8".
<meta charset="<?php bloginfo( 'charset' ); ?>" />
Аналогично вышеупомянутому, автоматически устанавливает документ в более доступный режим совместимости с версиями IE 8, IE 9 Internet Explorer.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Так как мы будем использовать Bootstrap, этот мета тег я взял из стандартного HTML документа того-же Bootstrap.
Совместимость документа с мобильными устройствами.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Функция добавляет обычный тайтл, название страницы в файл header.php WordPress.
<title><?php wp_title( '|', true, 'right' ); ?></title>
Если вы хотите выводить название страницы, а через черту название сайта, то вместо этого отрывка добавьте такой:
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>Поддержка микроформата, микроразметки.
<link rel="profile" href="http://gmpg.org/xfn/11" />
В окончании создания шаблона WordPress сделаем микроразметку. Хотя дефолтные файлы в WordPress уже размечены.
Код, отвечающий за оповещение авторов блогов, на которых вы ссылаетесь, он направляет нас к XML-RPC файлу.
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
В консоли WordPress есть настройка оповещения авторов блогов, если ставить ссылки на их сайты. Не знаю, нужна или нет такая функция, но будем считать, что нужна.
Подключаем в файл header.php WordPress нашу таблицу стилей style.css
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css">
Пока стилевой файл подключаем напрямую, позже будем заполнять function.php и подключим как положено через него. А можно и оставить тут, это без разницы.
Поддержка HTML5 элементов и медиа размеров, точек прерывания в IE8, IE9.
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
Так-же скрипты будут работать только в IE8, IE9. Взял из Bootstrap документа, хотя в WP такая возможность так же реализована.
wp_head(); — подключает саму шапку сайта и запускает хук wp_head.
php body_class();
Выводит css классы относящиеся к текущей странице. Предназначен для использования в тете <body>.В темах WordPress можно использовать Тег Шаблона body_class(), который может пригодится разработчикам тем, чтобы эффективнее использовать CSS селекторы. Функция body_class() дописывает к тегу body различные классы, в зависимости от того на какой странице находится посетитель, залогинен он или нет и т.д. (например,
class="home logged-in").
Если вникнуть и посмотреть документацию, то можно понять как управлять и где применять эту ОТЛИЧНУЮ функцию.
Выводит в файл header.php WordPress название сайта.
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
Выводит в файл header.php WordPress описание сайта.
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
Позже внесем изменения
Пока просто копируйте и вставляйте весь код целиком, позже, последовательно будем вносить в header.php изменения и дополнения. Некоторые дополнения мы внесем в через файл functions.php, например добавим RSS ленту и прочее.
— Если немного отвлечься от занятия, то создание создание шаблона WordPress не такое уж и сложное занятие. Мне сложнее писать статьи на эту тему 🙂 . Ну а так, не стесняйтесь, задавайте вопросы в комментариях.
https://irkutsk.warpoint.ru работа в виар иркутск. Брендинговое агентство https://svoemnenie.com.
Похожие по Тегам статьи
Наполняем файл footer.php WordPressПродолжаю цикл статей по переносу HTML верстки в WordPress. В прошлом занятии мы первоначально…
Разбираем и наполняем файл index php WordPressРазбираем и наполняем файл index php WordPress, знакомимся с некоторыми функциями и переносим часть…
Перенос header HTML в WordPress header.phpИтак, мы уже подготовили минимально необходимые файлы для работы нашего учебного сайта. Теперь пришла…
Здравствуйте, Егор!
Полезный у Вас сайт. Полезный.
Беру на карандаш…. ))
Люблю когда всё делают сами — в тч и создают сайт.
Только спрашивается: кому я толковал о «ручной работе» ??
Я читал посты ночью, с телефона — не помню в какой статье у вас видел что-то о скорости загрузки…
Но, тем не менее, дополню здесь: оптимизируя сайт, web-мастеру нужно всегда помнить (а не болезненно кастрировать своё детище. мы ж не в ветлечебнице))
Я к тому что пора бы учится требовать от провайдера отработку своих денег… и т.п. канители.
Интернет должен работать 30 дней в месяц. И хорошо работать…
И нужно чётко понимать причины, когда сайт туго грузится из-за ошибок, а когда из-за свинской работы уважаемых….
Убеждённое ИМХО.
Здравствуйте, Александр. Именно. Живой пример хостинг Hostland. Оптимизировал сайт, спрашиваю почему они не кешируют изображения на стороне клиента, браузера пользователя? Несут какую-то чушь. Пришлось дополнять файл .htaccess кодом кеширования картинок скриптов и стилей (плагин Hyper Cashe и Super Cashe не кешируют эти моменты). Это прямая работа хостинга. Иногда доступа по ftp нет, да и к сайтам.
К примеру в TimeWeb таких проблем нет. (не реклама, из собственных наблюдений). 🙂
День добрый… извините, что с ответом замешкался… Много бестолковой работы одолело. Вероятно, сам такой.
Вот я и говорю, что подстраиваться и пилить свой сайт из-за нахально-о..шей братии хостеров, нужно только озираясь на будущее, которое, уверен всё расставит по местам. О Hostland мало слышал, а раз мало, или не слышал, значит чушь и пурга (в подобных случаях редко ошибёшься)
Я, уж как года …. на импортных. Песочница здесь и… (Ладно, подобные толковище не для подобной формы общения))
Мне всё fozzy предлагают (сервера как обычно — по миру), хотя я его и знал, но сейчас повторно проверяю.
Я не понимаю многого… например как люди могут терпеть, когда 18 часов нет доступа к сайтам, и это с завидной периодикой…
Видел своими глазами. А меж тем хостинг это как сердце или пламенный мотор, должны работать.
Посему культура адекватного предоставления услуг связи должна нами также освещаться.
Так что ускорение сайта ускорением, но и про ускоренный бег от подобных хостеров нужно не забывать.
t/s
Кстати, мне отчего-то на почту не приходили уведомления с Вашего сайта?
Хорошая статья. Как раз в тему. Делаю редизайн шапки сайта, кое что почерпнул для себя новое.
Да, статья отличная, можно кое что изменить на сайте.