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

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

Партнерская программа Vulkanpartner

Как скопировать шаблон 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:

Натяжка сайта на Wordpress

Рисунок 23:

Верстка шаблонов Wordpress

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

Итак, из данной серии уроков «Создаем шаблон для 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