Сборка собственного шаблона 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>© 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-я часть начнет вас знакомить с элементами, позволяющими менять содержимое нашего сайта из панели администратора.
Write a comment