Сборка собственного шаблона wordpress. Часть 2

Сборка собственного шаблона wordpress. Часть 1

Теперь в папке нашего шаблона два файла index.php,  style.css и папка images, в которую мы складываем картинки от нашего шаблона.

Обратите пожалуйста внимание на файл style.css — в нашей таблице стилей есть ссылки на картинки, которые следует тоже поправить.

обратите внимание на следующие строки таблицы: 52, 110, 148 и 156.
там следует заменить sprites.png на images/sprites.png

2 часть будет посвящена тому, чтобы выделить из файла index.php несколько функциональных частей:

«шапка» —  header.php

«подвал»- footer.php

«бок» —  sidebar.php

Шапка

в папке нашего шаблона создаем файл  header.php

из index.php мы вырезаем блок head и блок header

и вставляем вырезанное в наш новый файл header.php


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>2 Column Layout with a top Menu</title>
<!-- The below script Makes IE understand the new html5 tags are there and applies our CSS to it -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<?php wp_head (); ?>
</head>
 
<body>
 
<header>
<hgroup>
<h1>Ampersand Solutions</h1>
<h2>Very catchy Strapline</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Example 1</a></li>
<li><a href="#">Example 2</a></li>
<li><a href="#">Example 3</a></li>
</ul>
</nav>
<a href="#" title="Ampersand Solutions homepage"><img src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="Ampersand Solutions" /></a></header>

а теперь мы в файле index.php подключим с помощью php кода файл header.php
т.е. мы в 1 строке файла index.php пишем

<?php get_header(); ?>

и сохраняем. Шапка выделена.

Подвал

в папке нашего шаблона создаем файл footer.php

в файле index.php идем в самый конец и переносим в footer.php блок footer и все остальное

<footer>
	<p>&copy; 2010 Ampersand Solutions - <a href="#">Sitemap</a> | <a href="#">Privacy policy</a> almost <a href="http://validator.w3.org/check?uri=http://www.webdezign.co.uk/blog/html5-examples/2col/">valid HTML5</a> and <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.webdezign.co.uk/blog/html5-examples/2col/">valid <abbr title="Cascading Style Sheet">CSS</abbr>3</a> design by <a href="http://www.webdezign.co.uk" title="web design london">Webdezign</a></p>
</footer>
<?php wp_footer (); ?>
</body>
</html>

в файле index.php подключим с помощью php кода файл footer.php
т.е. мы в последней строке файла index.php пишем

<?php get_footer(); ?>

и сохраняем. Подвал выделен.

Боковая панель

в папке нашего шаблона создаем файл sidebar.php

переносим блок section из index.php в sidebar.php

<section>
<h1>Categories</h1>
<ul>
	<li><a href="#">example 1 </a></li>
	<li><a href="#">example 2 </a></li>
	<li><a href="#">example 3 </a></li>
	<li><a href="#">example 4 </a></li>
	<li><a href="#">example 5 </a></li>
	<li><a href="#">example 6 </a></li>
	<li><a href="#">example 7 </a></li>
	<li><a href="#">example 8 </a></li>
</ul>
</section>

в файле index.php подключим с помощью php кода файл sidebar.php

<?php get_sidebar(); ?>

и сохраняем. Боковая панель выделена.

и теперь index.php имеет вот такой вид

<?php get_header(); ?>
<article>
	<h1>Lorem ipsum dolor sit amet</h1>
    <p>Integer dignissim ... purus auctor vitae.</p> 
    <p>Donec vitae lorem quis ... adipiscing imperdiet.</p>
    <h2>Curabitur fermentum</h2>
    <p>Ut et nunc metus. Quisque ... metus lobortis et.</p>
    <p>Sed ut eros enim ... aliquam risus mollis vel.</p>
    <h3>Donec mattis</h3>
    <p>Etiam porttitor ... sagittis sodales ac et nunc. </p>
</article>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Подводим итог 2-х частей:

Мы взяли сверстанный шаблон и создали из него новую тему для wordpress, однако это все еще статичный html не управляемый из админ-панели.

Следующая 3-я часть начнет вас знакомить с элементами, позволяющими менять содержимое нашего сайта из панели администратора.



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