Полагаю вы прочитали материал предыдущей статьи-примера «
Итак, в этой части мы подготовим шапку сайта. Слайд-шоу и подключение JQuery к WordPress в functions.php будет в следующей заметке.
Приступаем. В <папка с WP>/wp-content/themes/brainmix в кодировке UTF-8 без BOM создаем header.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"> <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">
Вставляем то, что описано выше в пока ещё пустой header.php. Скрипты Cufon отсекаем сразу, — излишняя здесь замена шрифтов картинками нам ненужна. Да и вообще JavaScript, его мы подключим в functions.php.
Первые три строчки стандартов оставляем как есть:
<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> на наше:
<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>
Функция 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. Заменяем то, что между его «дивами» на:
<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>
- Функция 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»).
В итоге этих манипуляций должно быть подобие вот этого:
<!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> <div> <div> <div> <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?><small><?php bloginfo('description'); ?></small></a></h1> </div> <div> <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></div> <div> <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></div> </div> <div></div> </div> </div> <div> <div>
Не смущаемся обилия кода, — по мере накопления опыта на «всё про всё» будет уходить не более 1,5-5 часов в зависимости от сложности исходной вёрстки.
Источник: sooource.net