Создаем шаблон для WordPress. Шаг 4: натяжка HTML шаблона на WordPress
Итак, расслабляться ещё рано. Впереди последний этап создания шаблона для WordPress или так называемой wordpress темы – натяжка HTML шаблона. Пожалуй, здесь у вас может возникнуть самое большое число трудностей и ошибок. Натяжка на движок обязывает знаниями php, а это уже гораздо сложнее.
Но даже если что-то будет неполучаться или возникнут вопросы, задавайте их в комментариях и на них ответит Игорь Чайка или я.
Создаём новую папку и называем её, например, «era_stroy». В этой папке мы и будем хранить наши файлы. Заходим в эту папку и создаём файл «head.php». Открываем чистый файл.
Копируем часть кода с «index.html» и вставляем в файл «head.php»:
Так как мы делаем шаблон для одной из самых популярных Content Management System - WordPress, то нужно все динамические части заменить на ПХП(php) вставки: Между тегами нужно вставить такой код в итоге получим Пропишем динамически путь к файлу стилей: – здесь всё ясно. Теперь самое интересное, вывод главного меню: '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, " $str=substr($str,0,$i); $str=str_replace("
$i=0;
$tmp="";
$tmp.=substr($str,0,$i);
$str=substr($str,$i);
$k=strpos($str, ">", 0);
$tmp.=substr($str,0,$k+1).' ';
$str=substr($str,$k+1);
}
$str=$tmp.$str;
$str=str_replace("","
",$str);echo($str);
?>
Не пугайтесь, для вывода достаточно этого куска кода $str=wp_nav_menu( array('container_class' => 'menu-header', 'container'=>'li', 'echo'=>'0') );, но так как нам нужно распарсить код вывода и дописать наш код, то я написал парсер на ПХП, который добавляет дополнительный код у вывод.
В итоге у нас получился такой файл:
'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, " $str=substr($str,0,$i); $str=str_replace(" $i=0; $tmp=""; $tmp.=substr($str,0,$i); $str=substr($str,$i); $k=strpos($str, ">", 0); $tmp.=substr($str,0,$k+1).' '; $str=substr($str,$k+1); } $str=$tmp.$str; $str=str_replace(""," echo($str); ?>
Продолжаем, в папке «era_stroy» создаём файл «index.php» и копируем туда код с «index.html», но не весь, а только часть:
- 10.08.10 Открыто производство в столице - 10.08.10 Новая серия бетона по спец. цене и качеству dsaas sada dsaas sada
Нерудные сыпучие материалыУслугиДополнительно
dsadas sadasd asdas
И вкинем сюда ПХП вставки:
Код для динамического меню:
'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, "
$str=substr($str,0,$i);
echo($str);
?>
Код вывода новостей:
-
Код для вывода информационного блока:
В итоге мы получили такой файл:
get_header(); ?>
'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, " $str=substr($str,0,$i); //$str=str_replace(""," echo($str); ?> '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, " $str=substr($str,0,$i); //$str=str_replace(""," echo($str); ?> '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, " $str=substr($str,0,$i); //$str=str_replace(""," echo($str); ?>
Нерудные сыпучие материалыУслуги- Дополнительно
Создаём ещё один файл «footer.php» и запишем туда такой код:
Наверное, не стоит говорить, что всё это значит. Также в эту папку для шаблона нужно скопировать 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 темы.
ОФФпост:
Подходит Вовочка к воспитательнице и спрашивает:
- А почему все милиционеры такие маленькие?
- С чего ты взял, что они маленькие? - удивляется она.
- А мне папа сказал, что ему все менты до задницы! 😀
Похожие записи в блоге:
Нравится как я пишу? Давайте вместе формировать интересные материалы на моем блоге. Вы можете сделать ретвит данной статьи или подписаться на мою ленту в системе микроблогов Твиттер.
Читайте меня в Твиттере и будьте в курсе последних моих действий.
Загрузка ...