Как создать шаблон для WordPress: заготовка шапки сайта, - header.php.
You are here
Primary tabs
- Просмотр(active tab)
- Обсуждение
Полагаю вы прочитали материал предыдущей статьи-примера «Создание темы для WordPress», где были рассмотрены такие вопросы, как: «Из каких файлов состоит шаблон, с чего начать?», «Что делать со стилями CSS?»
Итак, в этой части мы подготовим шапку сайта. Слайд-шоу и подключение JQuery к WordPress в functions.php будет в следующей заметке.
Приступаем. В <папка с WP>/wp-content/themes/brainmix в кодировке UTF-8 без BOM создаем header.php. Поочерёдно открываем HTML-файлы Brainmix (index.html, support.html, about.html, blog.html, contact.html). Смотрим, выявляем общие элементы, как бы получше разбить. В итоге выделяем этот кусок разметки:
<html>
<html>
<!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>
<title>BrainMix</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/coin-slider.css" />
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-colaborate-800.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
</head>
<body>
<div class="main">
<div class="header">
<div class="header_resize">
<div class="logo">
<h1><a href="index.html">Brain<span>Mix</span> <small>Company Slogan Here</small></a></h1>
</div>
<div class="menu_nav">
<ul>
<li class="active"><a href="index.html"><span>Home Page</span></a></li>
<li><a href="support.html"><span>Support</span></a></li>
<li><a href="about.html"><span>About Us</span></a></li>
<li><a href="blog.html"><span>Blog</span></a></li>
<li><a href="contact.html"><span>Contact Us</span></a></li>
</ul>
</div>
<div class="clr"></div>
<div class="slider">
<div id="coin-slider"> <a href="#"><img src="images/slide1.jpg" width="960" height="333" alt="" /> </a> <a href="#"><img src="images/slide2.jpg" width="960" height="333" alt="" /> </a> <a href="#"><img src="images/slide3.jpg" width="960" height="333" alt="" /> </a> </div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="content">
<div class="content_resize">
</html>Вставляем то, что описано выше в пока ещё пустой header.php. Скрипты Cufon отсекаем сразу, - излишняя здесь замена шрифтов картинками нам ненужна. Да и вообще JavaScript, его мы подключим в functions.php.
Первые три строчки стандартов оставляем как есть:
<html><html> <!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"></html>
Заменяем содержимое между тегами <head> на наше:
<php>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php get_bloginfo('name'); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
</php>Функция bloginfo возвращает нам различные полезные сведения о блоге:
- bloginfo('html_type'), - возвращает информацию о содержимом , правильнее поручать это WordPress.
- bloginfo('charset'); - кодировка страницы.
- bloginfo('name'); - имя сайта.
- bloginfo('stylesheet_url'); - подключает наши стили style.css.
- bloginfo('rss2_url') - подписка, feed.
- bloginfo('pingback_url') - обратные ссылки.
- wp_head() - подключает штатные скрипты JavaScript, а также некоторые хуки. Нужно для корректной работы.
- wp_title() - отображает заголовок страницы, тоже очень нужная вещь.
Делаем меню темы, - выведем список страниц. На участке, который мы выделили под header.php находим класс menu_nav. Заменяем то, что между его «дивами» на:
<php>
<ul>
<li <?php if (is_home()) : echo 'class="current_page_item"'; endif; ?>><a href="<?php bloginfo('url'); ?>"><span>Главная</span></a></li>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</php>- Функция wp_list_pages - выводит список страниц. Параметр depth задаёт глубину показа дочерних страниц. В данном случае будут выведены только родительские. title_li= - без префиксов, только заголовки.
- С помощью is_home() определяем домашнюю/главную. Если да, тогда прибавим класс current_page_item. Вот так в WordPress можно выделить текущий элемент меню. Не забываем поменять в style.css
.menu_nav ul li.active a, .menu_nav ul li a:hover
на
.menu_nav ul li.current_page_item a, .menu_nav ul li a:hover
Тут встроенный отладчик Google Chrome в помощь («Ctrl+Shift+J»).
В итоге этих манипуляций должно быть подобие вот этого:
<php>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php is_wp_head(); ?><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php get_bloginfo('name'); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div class="main">
<div class="header">
<div class="header_resize">
<div class="logo">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?><small><?php bloginfo('description'); ?></small></a></h1>
</div>
<div class="menu_nav">
<ul>
<li <?php if (is_home()) : echo 'class="current_page_item"'; endif; ?>><a href="<?php bloginfo('url'); ?>"><span>Главная</span></a></li>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</div>
<div class="clr"></div>
<div class="slider">
<div id="coin-slider">
<div id="coin-slider"> <a href="#"><img src="images/slide1.jpg" width="960" height="333" alt="" /> </a> <a href="#"><img src="images/slide2.jpg" width="960" height="333" alt="" /> </a> <a href="#"><img src="images/slide3.jpg" width="960" height="333" alt="" /> </a> </div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="content">
<div class="content_resize">
</php>Не смущаемся обилия кода, - по мере накопления опыта на «всё про всё» будет уходить не более 1,5-5 часов в зависимости от сложности исходной вёрстки.
- Добавить новый отзыв
Опрос
- Старые опросы
- Результаты