Файл header WordPress сайта | Как создать свой сайт

Из чего состоит файл header.php WordPress сайта

Июн-2-2011 Автор: VeryOldMan

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

Для этого запускаем редактор и из меню Создать выбираем PHP. Как видите, Dreamweaver уже создал небольшую заготовку для нашего php файла. Но прежде разбираться с этой заготовкой, нужно в редакторе выполнить кое-какие настройки. Их немного, но они важные. Для этого зайдем в меню Редактировать – Установки. В открывшемся окошке найдем пункт Создать документ, в окошкеКодировка по умолчанию выбираем Юникод (UTF-8). В том же окошке найдем пункт Шрифты и в окошке Параметры шрифта выбираем Юникод. Вот теперь все готово для создания файла header.php для WordPress сайта.

По поводу самой темы. Чтобы создавать тему WordPress, нужно определиться с тематикой темы. Я не буду выдумывать что-то оригинальное и возьму тематику — Сайт о лошадях.

Ну и к делу. Значит, остановились мы на том, что Dreamweaver уже создал начальный код php файла. Спасибо ему за это, но мы удалим все это и вставим свой код, вот такой:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> <meta name=»description» content=»Сайт о лошадях, история приручения лошади человеком» /> <meta name=»keywords» content=»лошадь, кони, племенные лошади, история лошади» /> <title><?php wp_title (‘ ‘); ?> | <?php if (wp_title (‘ ‘, false)) { echo ‘ | ‘; } ?><?php bloginfo (‘name’); ?></title> <link rel=»alternate» type=»application/rss+xml» title=»RSS 2.0″ href=»http://feeds.feedburner.com/ваш фид» /> <link rel=»pingback» href=»<?php bloginfo (‘pingback_url’); ?>» /> <link rel=»stylesheet» href=»<?php bloginfo (‘stylesheet_url’); ?>» type=»text/css» media=»screen»/> <?php wp_head (); ?> </head> <body> <div id=»cont»> <div id=»header»> <div id=»blogtitle»><?php bloginfo (‘name’); ?></div> <div id=»subtitle»><h1><?php bloginfo (‘description’);?></h1></div> <ul id=»menu»> <li><a href=»http://ваш сайт.com/»>Главная</a></li> <li><a href=»http://ваш сайт.com/o sajte»>О сайте</a></li> <li><a href=»http://ваш сайт.com/kontakty»>Контакты</a></li> </ul> </div> Собственно это и есть готовый код файла header. А теперь разберемся какая часть кода за что отвечает. Естественно, если создание темы WordPress для Вас не просто процесс слепого копирования и вставки кода.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> —  это так называемый доктайп. Что это и зачем он нужен а так же какие бывают доктайпы Вы можете узнать из статьи — Уроки html. Что такое DOCTYPE

<html xmlns=»http://www.w3.org/1999/xhtml»> — это открывающий тег html со ссылкой на w3c стандарт. Ссылка, в общем-то, не обязательна, но на всякий случай пусть будет.

<head> — Открывающий тег <head>. Между открывающим тегом <head> и закрывающим тегом </head> находится очень важная информация. Судите сами:

<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> — с помощью этого мета-тега прописана кодировка документа. Так как мы создаем сайт на движке WordPress, то и кодировка должна быть UTF-8. Это единственная кодировка, с которой работает этот движок.

<meta name=»description» content=»Сайт о лошадях, история приручения лошади человеком» /> мета-тег description. То есть описание вашего сайта.

<meta name=»keywords» content=»лошадь, кони, племенные лошади, история лошади» /> — мета-тег keywords. То есть ключевые слова сайта.

<title><?php wp_title (‘ ‘); ?> | <?php if (wp_title (‘ ‘, false)) { echo ‘ | ‘; } ?><?php bloginfo (‘name’); ?></title> — мета-тег title. Очень важный мета-тег. С помощью этого кода мета-тег title будет создан в виде: название рубрика – название статьи – название сайта.

<link rel=»alternate» type=»application/rss+xml» title=»RSS 2.0″ href=»http://feeds.feedburner.com/ваш фид» /> — ссылка на RSS фид Вашего сайта <link rel=»pingback» href=»<?php bloginfo (‘pingback_url’); ?>» /> — ссылка отсылки пингбеков на другие сайты или блоги. Что такое пингбеки – разберемся как-нибудь в другой раз. <link rel=»stylesheet» href=»<?php bloginfo (‘stylesheet_url’); ?>» type=»text/css» media=»screen»/> — ссылка на css лист стилей Вашего сайта

<?php wp_head (); ?> — код, обеспечивающий работу многих плагинов, которые добавляют в страницу сайта свой код

</head> — закрывающий тег <head>

Дальше идет тег <body>. Все, что находится в пределах этого тега, собственно и есть Ваш сайт, то есть все то, что видят на экране монитора посетители Вашего сайта.

Первым идет открывающий тег контейнера cont — <div id=»cont»>. Что это за контейнер. Как уже говорилось в начале статьи, я создаю тему с той же версткой, что и в разделе о создании простого сайта. В этом простом сайте, все контейнеры – header, sidebar, content и footer размещаются в общем контейнере cont. Подробнее о такой верстке Вы можете узнать на странице – Принципы создания страницы сайта в Dreamweaver

<div id=»header»> — открывающий тег контейнера header

<div id=»blogtitle»><?php bloginfo (‘name’); ?></div> — контейнер blogtitle, с кодом вызова названия сайта. Название сайта Вы задаете в админпанели движка <div id=»subtitle»><h1><?php bloginfo (‘description’);?></h1></div> <ul id=»menu»> — контейнер subtitle, с кодом вызова описания сайта. Описание сайта Вы задаете в админпанели движка

<ul id=»menu»> <li><a href=»http://ваш сайт.com/»>Главная</a></li> <li><a href=»http://ваш сайт.com/o sajte»>О сайте</a></li> <li><a href=»http://ваш сайт.com/kontakty»>Контакты</a></li> </ul>

Меню в хедере. Точно такое же, как и в созданном ранее простом сайте.

</div> — закрывающий тег контейнера header

Все понятно? Тогда сохраняем созданный файл header в заранее созданной папке темы, естественно под именем header и как php файл. Продолжаем. На очереди создание файла стилей css для нашей темы. Об этом в статье — Создаем файл стилей css WordPress темы






9 комментариев
  1. Татьяна Пишет,

    а как на счет моего предложения отредактировать шаблон?

  2. Татьяна Пишет,

    Если не затруднит, может подскажете. Мне нужно в шапку вставить картинку. или несколько. Я уже пробовала зайти в Заголовок (header.php) и вставляла сохраненную картинку. Не получается. Как нужно сохранить картинку и куда ее нужно вставить в (header.php), чтобы она отразилась в шапке

  3. VeryOldMan Пишет,

    Проще всего вставить картинку в header как фоновое изображение. Для этого нужно в html редакторе открыть файл стилей (style), найти стиль, определяющий свойства хедера, чаще всего он так и называется – header и добавить в него строку:

    background-image: url (images/имя Вашей картинки.jpg);

    естественно, что сама картинка должна находиться в папке images шаблона. Но проще всего это сделать в редакторе Dreamweaver. Нужно открыть стиль в режиме редактирования, выбрать категорию Фон, а там все понятно.

  4. Татьяна Пишет,

    У Вас отличный сайт, для новичков, создающих свой сайт, то что надо. Спасибо за разъяснение.

  5. антон Пишет,

    подскажите…как вставить в коментарии такие аватарки??? Админ, если можешь ответь на емеил. — спасибо)

  6. VeryOldMan Пишет,

    Из админпанели заходим в: настройки-обсуждение-аватар «по умолчанию» и выбираем нужный

  7. антон Пишет,

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

  8. Сергей Кондулуков Пишет,

    Спасибо Вам большое. Комментарии очень ясные чёткие и понятные:-) И сам материал подан великолепно. Я немного знаю Drupal и Joomla но и WordPress не помешает:-)

  9. Татьяна Пишет,

    Написано все просто изумительно, только вот внутренние ссылки желательно прописывать относительными (без домена). Я ставила специальный плагин. Можно ли обойтись без него, задать условие ручками?

Добавить комментарий