- Все для CMS | Joomla, Drupal, phpBB, Wordpress, DLE, IPB - http://cmsart.ru -

Как создать шаблон для WordPress: заготовка шапки сайта, — header.php.

Posted By Archi On 31.05.2012 @ 5:26 пп In Статьи Wordpress | No Comments

Полагаю вы прочитали материал предыдущей статьи-примера «Создание темы для WordPress [1]», где были рассмотрены такие вопросы, как: «Из каких файлов состоит шаблон, с чего начать?», «Что делать со стилями CSS?»

Итак, в этой части мы подготовим шапку сайта. Слайд-шоу и подключение JQuery к WordPress в functions.php будет в следующей заметке.

Приступаем. В <папка с WP>/wp-content/themes/brainmix в кодировке UTF-8 без BOM создаем header.php. Поочерёдно открываем HTML-файлы Brainmix [2] (index.html, support.html, about.html, blog.html, contact.html). Смотрим, выявляем общие элементы, как бы получше разбить. В итоге выделяем этот кусок разметки:

Свернуть ▲ [3]

<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.

Первые три строчки стандартов оставляем как есть:

 

Свернуть ▲ [3]

<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> на наше:

 

Свернуть ▲ [3]

<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. Заменяем то, что между его «дивами» на:

Свернуть ▲ [3]

<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»).

В итоге этих манипуляций должно быть подобие вот этого:

Свернуть ▲ [3]

<!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 [4]

Article printed from Все для CMS | Joomla, Drupal, phpBB, Wordpress, DLE, IPB: http://cmsart.ru

URL to article: http://cmsart.ru/wordpress/wordpress-articles/kak-sozdat-shablon-dlya-wordpress-zagotovka-sha

URLs in this post:

[1] Создание темы для WordPress: http://cmsart.ru/goto/http://www.sooource.net/create-wordpress-theme

[2] Brainmix: http://cmsart.ru/goto/http://www.sooource.net/sites/default/files/files/images/brainmix.zip

[3] Свернуть ▲: http://cmsart.ru/goto/http://www.sooource.net/create-wordpress-theme-header#

[4] sooource.net: http://cmsart.ru/?goto=http%3A%2F%2Fwww.sooource.net

Copyright © 2012 Поддержка CMS | Документация, статьи по Joomla, Drupal, phpBB. All rights reserved.