Моментальное размещение вашей рекламной строчки. Попробовать!

Добавьте сюда вашу рекламу всего за 1 $ !

24 Сен, 2010

Категории: Wordpress, Верстка
Автор: Вовка

Создаем шаблон для WordPress. Шаг 4: натяжка HTML шаблона на WordPress

Итак, расслабляться ещё рано. Впереди последний этап создания шаблона для WordPress или так называемой wordpress темы – натяжка HTML шаблона. Пожалуй, здесь у вас может возникнуть самое большое число трудностей и ошибок. Натяжка на движок обязывает знаниями php, а это уже гораздо сложнее.

Но даже если что-то будет неполучаться или возникнут вопросы, задавайте их в комментариях и на них ответит Игорь Чайка или я.

Создаём новую папку и называем её, например, «era_stroy». В этой папке мы и будем хранить наши файлы. Заходим в эту папку и создаём файл «head.php». Открываем чистый файл.

Копируем часть кода с «index.html» и вставляем в файл «head.php»:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

<link href="style.css" rel="stylesheet" type="text/css">

<!--[if IE 6]>

<link href="ie-6.css" rel="stylesheet" type="text/css">

<![endif]-->

</head>

<body>

<div id="conteiner">

<div></div>

<div>

<div id="v_menu_txt_1">Звоните нам:</div>

<div id="v_menu_txt_2">(499)999-0135</div>

<ul>

<div class="vert_line"></div>

<li><a href="#"><div></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Главная</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Блог</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Материалы</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Услуги</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Прайс</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Доска объявлений</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">О Компании</p></a></li>

<div class="vert_line"></div>

<li><a href="#"><div></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">Контакты</p></a></li>

</ul>

</div>

Так как мы делаем шаблон для одной из самых популярных Content Management System - WordPress, то нужно все динамические части заменить на ПХП(php) вставки:

Между тегами <title></title> нужно вставить такой код <?php wp_title( '|', true, 'right' ); ?> в итоге получим <title><?php wp_title( '|', true, 'right' ); ?></title> – в результате этих действий мы получим динамические заглавия страниц.

Пропишем динамически путь к файлу стилей: <link rel="stylesheet" media="all" href="<?php bloginfo( 'stylesheet_directory' ); ?>/style.css" /> – здесь всё ясно.

Теперь самое интересное, вывод главного меню:

<?php $str=wp_nav_menu( array('container_class' => 'menu-header', 'container'=>'li', 'echo'=>'0') );

$i=strpos($str, "ul");

$str=substr($str,$i);

$i=strpos($str, ">");

$str=substr($str,$i+1);

$i=strpos($str, "</ul");

$str=substr($str,0,$i);

$str=str_replace("<li","<div class=\"vert_line\"></div><li",$str);

$i=0;

$tmp="";

while($i=strpos($str, "<a", 0)){

$i=strpos($str, "<a", $i);

$tmp.=substr($str,0,$i);

$str=substr($str,$i);

$k=strpos($str, ">", 0);

$tmp.=substr($str,0,$k+1).'<div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">';

$str=substr($str,$k+1);

}

$str=$tmp.$str;

$str=str_replace("</a>","</p></a>",$str);

echo($str);

?>

Не пугайтесь, для вывода достаточно этого куска кода $str=wp_nav_menu( array('container_class' => 'menu-header', 'container'=>'li', 'echo'=>'0') );, но так как нам нужно распарсить код вывода и дописать наш код, то я написал парсер на ПХП, который добавляет дополнительный код у вывод.

В итоге у нас получился такой файл:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title><?php wp_title( '|', true, 'right' ); ?></title>

<link rel="stylesheet" media="all" href="<?php bloginfo( 'stylesheet_directory' ); ?>/style.css" />

<!--[if IE 6]>

<link rel="stylesheet" media="all" href="<?php bloginfo( 'stylesheet_directory' ); ?>/ie-6.css" />

<![endif]-->

</head>

<body>

<div id="conteiner">

<div></div>

<div>

<div id="v_menu_txt_1">Звоните нам:</div>

<div id="v_menu_txt_2">(499)999-0135</div>

<ul>

<?php $str=wp_nav_menu( array('container_class' => 'menu-header', 'container'=>'li', 'echo'=>'0') );

$i=strpos($str, "ul");

$str=substr($str,$i);

$i=strpos($str, ">");

$str=substr($str,$i+1);

$i=strpos($str, "</ul");

$str=substr($str,0,$i);

$str=str_replace("<li","<div class=\"vert_line\"></div><li",$str);

$i=0;

$tmp="";

while($i=strpos($str, "<a", 0)){

$i=strpos($str, "<a", $i);

$tmp.=substr($str,0,$i);

$str=substr($str,$i);

$k=strpos($str, ">", 0);

$tmp.=substr($str,0,$k+1).'<div class="l_f"></div><div class="r_f"></div><div class="line_top_menu"></div><p class="txt_m">';

$str=substr($str,$k+1);

}

$str=$tmp.$str;

$str=str_replace("</a>","</p></a>",$str);

echo($str);

?>

</ul>

</div>

Продолжаем, в папке «era_stroy» создаём файл «index.php» и копируем туда код с «index.html», но не весь, а только часть:

<div>

<div id="top_plash"></div>

<div id="bottom_plash"></div>

<div>

<div id="left">

<div class="zagl">Нерудные сыпучие материалы</div>

<ul>

<li>- <a href="#">Песок</a></li>

<li>- <a href="#">Асфальтовая крошка</a></li>

<li>- <a href="#">Керамзит</a></li>

<li>- <a href="#">Щебень известковый</a></li>

<li>- <a href="#">Торф</a></li>

<li>- <a href="#">Глина</a></li>

<li>- <a href="#">Чернозем</a></li>

<li>- <a href="#">Гравий</a></li>

<li>- <a href="#">Грунт</a></li>

<li>- <a href="#">Гравий</a></li>

<li>- <a href="#">Нерудные материалы</a></li>

<li>- <a href="#">Щебень гранитный</a></li>

<li>- <a href="#">Песчано-гравийная смесь</a></li>

</ul>

<div class="zagl">Услуги</div>

<ul class="m_1">

<li>- <a href="#">Аренда экскаватора-погрузчика</a></li>

<li>- <a href="#">Асфальтирование</a></li>

<li>- <a href="#">Благоустройство территорий</a></li>

<li>- <a href="#">Вывоз мусора</a></li>

<li>- <a href="#">Вывоз снега</a></li>

<li>- <a href="#">Грузоперевозки</a></li>

<li>- <a href="#">Организация дренажных систем</a></li>

<li>- <a href="#">Рытьё котлованов</a></li>

<li>- <a href="#">Ландшафтные работы</a></li>

<li>- <a href="#">Укладка тротуарной плитки</a></li>

<li>- <a href="#">Укладка асфальтовой крошки</a></li>

</ul>

<div class="zagl">Новости   <b>(<a href="#">смотреть все</a>)</b></div>

<p class="date">- 10.08.10</p>

<a href="#">Открыто производство в столице</a>

<p class="date">- 10.08.10</p>

<a href="#">Новая серия бетона по спец. цене и качеству</a>

<div class="zagl">Дополнительно</div>

<ul class="m_1">

<li>- <a href="#">Аренда экскаватора-погрузчика</a></li>

<li>- <a href="#">Асфальтирование</a></li>

<li>- <a href="#">Благоустройство территорий</a></li>

<li>- <a href="#">Вывоз мусора</a></li>

<li>- <a href="#">Вывоз снега</a></li>

<li>- <a href="#">Грузоперевозки</a></li>

<li>- <a href="#">Организация дренажных систем</a></li>

<li>- <a href="#">Рытьё котлованов</a></li>

<li>- <a href="#">Ландшафтные работы</a></li>

<li>- <a href="#">Укладка тротуарной плитки</a></li>

<li>- <a href="#">Укладка асфальтовой крошки</a></li>

</ul>

</div>

<div id="inform">

<h1>dsadas sadasd asdas</h1>

<hr/>

<p>dsaas sada</p>

<p>dsaas sada</p>

</div>

</div>

</div>

И вкинем сюда ПХП вставки:

Код для динамического меню:

<?php $str=wp_nav_menu( array('menu' => 'vertikal_menu_1', 'container'=>'li', 'echo'=>'0') );

$i=strpos($str, "ul");

$str=substr($str,$i);

$i=strpos($str, ">");

$str=substr($str,$i+1);

$i=strpos($str, "</ul");

$str=substr($str,0,$i);

$str=str_replace("<a","- <a",$str);

echo($str);

?>

Код вывода новостей:

<?php query_posts('cat=5&showposts=3'); $more=false;?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="date">- <?php the_title(); ?></div>

<a href="<?php the_permalink() ?>">

<?php the_content(false); ?>

</a>

<?php endwhile; else: ?>

<?php endif; ?>

Код для вывода информационного блока:

<?php query_posts($query_string);?>

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<div <?php post_class(); ?>>

<?php if (!is_page()): ?>

<h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

<?php endif;?>

<div>

<?php the_content(""); ?>

</div>

</div>

<?php endwhile; ?>

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

В итоге мы получили такой файл:

get_header(); ?>

<div>

<div id="top_plash"></div>

<div id="bottom_plash"></div>

<div>

<div id="left">

<div class="zagl">Нерудные сыпучие материалы</div>

<ul>

<?php $str=wp_nav_menu( array('menu' => 'vertikal_menu_1', 'container'=>'li', 'echo'=>'0') );

$i=strpos($str, "ul");

$str=substr($str,$i);

$i=strpos($str, ">");

$str=substr($str,$i+1);

$i=strpos($str, "</ul");

$str=substr($str,0,$i);

$str=str_replace("<a","- <a",$str);

//$str=str_replace("</a>","</p></a>",$str);

echo($str);

?>

</ul>

<div class="zagl">Услуги</div>

<ul class="m_1">

<?php $str=wp_nav_menu( array('menu' => 'vertikal_menu_2', 'container'=>'li', 'echo'=>'0') );

$i=strpos($str, "ul");

$str=substr($str,$i);

$i=strpos($str, ">");

$str=substr($str,$i+1);

$i=strpos($str, "</ul");

$str=substr($str,0,$i);

$str=str_replace("<a","- <a",$str);

//$str=str_replace("</a>","</p></a>",$str);

echo($str);

?>

</ul>

<div class="zagl">Новости   <b>(<a href="#">смотреть все</a>)</b></div>

<?php query_posts('cat=5&showposts=3'); $more=false;?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="date">- <?php the_title(); ?></div>

<a href="<?php the_permalink() ?>">

<?php the_content(false); ?>

</a>

<?php endwhile; else: ?>

<?php endif; ?>

<div class="zagl">Дополнительно</div>

<ul>

<?php $str=wp_nav_menu( array('menu' => 'vertikal_menu_3', 'container'=>'li', 'echo'=>'0') );

$i=strpos($str, "ul");

$str=substr($str,$i);

$i=strpos($str, ">");

$str=substr($str,$i+1);

$i=strpos($str, "</ul");

$str=substr($str,0,$i);

$str=str_replace("<a","- <a",$str);

//$str=str_replace("</a>","</p></a>",$str);

echo($str);

?>

</ul>

</div>

<div id="inform">

<?php query_posts($query_string);?>

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php if (!is_page()): ?>

<h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

<?php endif;?>

<div class="entry-content">

<?php the_content(""); ?>

</div>

</div>

<?php endwhile; ?>

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

</div>

</div>

</div>

<?php get_footer(); ?>

Создаём ещё один файл «footer.php» и запишем туда такой код:

<div id="footer"></div>

</div>

</body>

</html>

Наверное, не стоит говорить, что всё это значит. Также в эту папку для шаблона нужно скопировать 2 файла «style.css» и «ie-6.css». Они у нас есть их нужно просто туда скопировать. Также не забудьте скопировать папочку «img».

Ах да, чуть не забыл, зайдите в папку шаблонов WordPress («wp-content\themes») и скопируйте с папки «twentyten» файлы: «404.php», «functions.php», «comments.php» и папку «languages». Всё, шаблон готовый. Берём всю папку «era_stroy» и переносим в папку шаблонов. Устанавливаем WordPress, активируем шаблон и вуаля, практически всё работает. Но без ложки дёгтя в бочке мёда не обошлось. У каждого меню есть свое имя и теперь каждое меню нужно сформировать, сперва забив нужные страницы.

Вот посмотрите, как это делал я:

Рисунок 22:

Рисунок 23:

Это дело не сложное.

Итак, из данной серии уроков «Создаем шаблон для WordPress» вы можете сделать определенные выводы, найти ошибки в своей верстке. Кто вообще не имел представление о процессе создания своей темы также может прочесть посты о прорисовке.

Именно так и создаются нормальные wordpress темы.

ОФФпост:

Подходит Вовочка к воспитательнице и спрашивает:
- А почему все милиционеры такие маленькие?
- С чего ты взял, что они маленькие? - удивляется она.
- А мне папа сказал, что ему все менты до задницы! 😀

Купить рекламное место

Похожие записи в блоге:

Нравится как я пишу? Давайте вместе формировать интересные материалы на моем блоге. Вы можете сделать ретвит данной статьи или подписаться на мою ленту в системе микроблогов Твиттер.
Читайте меня в Твиттере и будьте в курсе последних моих действий.

Комментирование Facebook:

Разделы блога

Мои проекты

Блоггеру

Gogettop - уникальный сервис продвижения вечными ссылками с максимальной эффективностью и рассрочкой платежа на 12 месяцев. Эффективность естественных вечных ссылок очень высокая. Продвижение становится еще доступнее.

Рекомендую

Интересное

Опрос

Загрузка ...

Вовкин блог на Facebook

Эксперименты
FAQ

Мои продукты
Путешествия

Книга «Кнопка Бабло»

Последние комментарии

Александр Чурилов: 23 причины поставить комментарии DISQUS
Мария: Заработок с видеоконтентом на МоеVideo
Ali Express: Сервис Zenlink продолжает свое развитие
Marketing: 7 основных ошибок взаимодействия заказчика с исполнителем в онлайн маркетинге
Александр Шувалов: Партнерская программа WelcomePartners
wang wang: 23 причины поставить комментарии DISQUS
Владимир: Contentmonster.ru — новая биржа контента другого уровня
Gaucho: Оптимизация сайта под китайскую Baidu

Самое комментируемое

Горячие записи

© 2009-2016 Авторские статьи о seo, блоггинге, личном развитии, заработке в сети. Все права защищены. Полное или частичное использование материалов без согласия Карпеева Владимира или без прямой индексируемой гиперссылки на сайт vovka.su запрещено.