Создание WordPress темы из PSD файла. Часть 4: Header.php

Дата публикации:Октябрь 13, 2011

В прошлой главе я выполнил разбиение .html-файла на несколько php-файлов. Естественно, это действие вряд ли могло остаться без нашего внимания. Что в действительности делает каждый из php-файлов? Какой код должен располагаться в них? В этой главе мы окинем взглядом php-составляющую, и первым файлом, который попадет под наше с вами рассмотрение, будет header.php.

Header.php, по своей природе, является самым первым файлом, который обычно вызывается в теме. Как правило, он состоит из следующих элементов:

  • Doctype информация
  • Meta-данные (Charset, Title, Description, Keywords)
  • RSS информация (Feed/Comments Feed)
  • Стилевые таблицы CSS
  • Вызов Javascript
  • Вызов WordPress хэдера

Doctype информация автоматически добавляется к файлу при его создании в Dreamweaver.

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

<?php bloginfo(‘name’); ?>

, то ключевые слова обычно заносятся в название блога.

Следующий пункт — это описание. Если вы хотите использовать описание, задаваемое в WordPress, вы можете использовать

<?php bloginfo(‘description’); ?>

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

Наконец, ключевые слова не должны быть слишком отвлеченными, ведь их основная задача — четко описать ваш сайт. Google не любит откровенный спам в ключевых словах.

Следующим пунктом у нас следует RSS-информация. Вызов RSS-фидов в хэдере происходит следующим образом:

<link rel=“alternate” type=“application/rss+xml” title=“<?php wp_bloginfo(‘name’); ?>” href=“<?php wp_bloginfo(‘rss2_url’); ?>” /> 

Именно эта строка отвечает за создание небольшой оранжевой иконки RSS в браузере.

Дальше идет ссылка на таблицу стилей CSS. Если вы используете Dreamweaver, то вам не требуется ничего прописывать самому, поскольку таблица стилей, указанная вами, будет подключена автоматически. Однако если вы хотите выпустить свою тему для пользователей, то вам понадобится использовать в ссылке следующий адрес:

"<? php wp_bloginfo (‘url’);?>/wp-content/themes/THEMENAME/style.css" 

Я советую использовать такой путь всегда, чтобы потом не возникало никаких вопросов (тем более, так легче портировать тему на разные сайты).

Javascript-сценарии обычно подключаются после CSS-таблиц.

Наконец, перед закрывающим тегом

</head>

должен стоять хук

<?wp head(); ?>

. Этот хук используется различными функциями и плагинами, так что его нельзя упускать из внимания.

Итак, вы закончили область head и открыли тег

<body>

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

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

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

http://www.studionashvegas.com/old-posts/creating-a-wordpress-theme-from-a-psd-file-part-4-headerphp/

Поделиться

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.