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>-&nbsp;<a href="#">Песок</a></li>

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

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

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

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

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

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

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

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

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

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

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

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

</ul>

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

<ul class="m_1">

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

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

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

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

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

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

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

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

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

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

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

</ul>

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

<p class="date">-&nbsp;10.08.10</p>

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

<p class="date">-&nbsp;10.08.10</p>

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

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

<ul class="m_1">

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

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

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

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

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

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

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

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

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

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

<li>-&nbsp;<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","-&nbsp;<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">-&nbsp;<?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","-&nbsp;<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","-&nbsp;<a",$str);

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

echo($str);

?>

</ul>

<div class="zagl">Новости&nbsp;&nbsp;&nbsp;<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">-&nbsp;<?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","-&nbsp;<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:


  • То, что касается html кода я не понял, а Вот анектод про Вовку зачет!

  • Спасибо. Давно собирался разобраться в этой теме, так как не могу подобрать нормальный шаблон для одного блога, а вот из обычных html кое-что нравится. Попробую переделать.

  • ледиолга

    Да темка не для моих мозгов:)

  • vadimon

    Как то уж слишком все замудрено автор сделал. Можно же сделать гораздо попроще

  • Владимир! С удовольствием ознакомился со всеми 4 частями руководства, сделав вывод для себя, что знания мои в этой теме не соответствуют должному уровню. Какой багаж инф. надо иметь, какие языки систем надо знать для создания шаблонов и подобных операций?
    Какими программами, языками, инструментами надо владеть, чтобы сделать все так, как рассказано в постах?
    Может быть есть какие-то тренировочные и обучающие курсы?

  • Как, если не секрет? Интересно было бы знать другие способы и мнения.

  • Тебе нужны знания Photoshop'a, php и html.
    Курсов полно, как текстовых так и видео.
    Я скоро открою проект специально для пользователей WordPress.

  • Может вы себя не дооцениваете?

  • Gert21

    Дизайн блока красивый!!!!!!!!!!!!! Вовка молодец!!!!!!!!!!!!!!!!

  • Назар

    Привет! Вова ты б лучше написал саму суть отображения и разбивания документа на части и динамичной подгрузки.... а тут просто куча кода с которого я шаблон сделал но так и не понял как натянуть свой html блог на движок.

  • Прикольная статья!

    Профессиональная HTML верстка (WordPress, Joomla)
    http://danil-html.ru - отзывы, примеры.

  • Дмитрий

    Отличная статья, очень вам благодарен. А не могли бы вы написать статью о натяжке html вёрстки на DataLife Engine? Было бы просто отлично!

  • Alex

    День добрый! Посоветуйте лучшие маркетинговые плагины для WordPress?
    Нашел плагин TORPAGE, отзывы вроде не плохие.
    https://www.youtube.com/watch?v=gj1mlRcyFDY
    Что скажите по данному плагину?

Я в Google Plus

Блоггеру

Рекомендую

Мануалы

Опрос

Какая из социальных кнопок дает, по вашему мнению, больше пользы сайту?

Просмотреть результаты

Загрузка ... Загрузка ...

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

SEO Powered by Platinum SEO from Techblissonline