все самое интересное о веб-дизайне

Как создать готовый вордпресс шаблон из сверстанного макета сайта

41

04-11-2011

Как создать готовый вордпресс шаблон из сверстанного макета сайтаВ этом завершающем уроке от Line25 мы посмотрим как создается готовый вордпресс шаблон, готовый для установки на хостинг. Для этого на базе файла index.htm создаются php файлы, каждый из которых отвечает за соответствующую часть вордпресс шаблона. В частности это файлы, управляющие шапкой сайта, внешним видом главной страницы, сайдбаром, архивами, страницей поиска, одиночным постом, одиночной страницей и комментариями. Сразу хочу сказать, что на этой стадии неплохо бы обладать некоторыми базовыми знаниями, в частности понимать что такое теги шаблонов.

 
 

Прежде, чем вы начнете изучать этот урок, хочу вас предупредить об одной… хм… хитрости автора урока. Когда я начала переводить этот цикл уроков, то была уверена, что на выходе мы будем иметь готовый собственноручно сделанный шаблон. Но все немного сложнее. В последнем уроке автор дал вордпресс коды не в виде текста, как в предыдущих уроках, а в виде картинок с пояснениями. А весь готовый шаблон предлагается скачать в виде готового архива за символическую плату. Я бы могла купить этот архив и выложить здесь, но я не уверена, что это легально. В общем такая ситуация. Так что c этим уроком скорее придется познакомиться исключительно в ознакомительно-обучающих целях.

Сверстанный макет сайта
Итак, в первых двух уроках мы сначала создали в фотошопе макет сайта, а потом с помощью инструментов HTML и CSS сверстали шаблон сайта. Щелкните по картинке ниже, чтобы посмотреть как выглядит сверстанный макет сайта.Как создать готовый вордпресс шаблон из сверстанного макета сайта

Все файлы вордпресс шаблона
Теперь осталось создать вордпресс шаблон на основании сверстанного макета сайта. На картинке ниже представлен стандартный набор файлов вордпресс шаблона. В предыдущем уроке мы создали папку images и файл style.css. Также у нас есть файл index.htm, из которого будут браться фрагменты кода и копироваться в соответствующие файлы php. И уже потом в php файлы вставляются команды вордпресса и тем самым формируются php файлы вордпресс шаблона. Как создать готовый вордпресс шаблон из сверстанного макета сайта

Редактируем файл style.css
Сначала следует вставить в начало файла style.css информацию о шаблоне. Это стандартный код, который редактируется под свои данные (название шаблона, урл, описание, информация об авторе).Как создать готовый вордпресс шаблон из сверстанного макета сайта

Header.php
Этот файл отвечает за вывод шапки сайта. Суть такая, берется кусок кода из файла index.htm (сверху и включая <div id=»header»>), вставляется в файл header.php и после этого интегрируются в код команды вордпресса. На картинке они отмечены красным. Щелкаем по картинке, чтобы посмотреть в большом размере.Как создать готовый вордпресс шаблон из сверстанного макета сайта

Index.php
Этот файл отвечает за вывод того, что пользователь видит на главной странице сайта. Аналогичным образом формируется файл index.php. Копируется кусок кода из index.htm и наполняется командами вордпресса. Щелкаем по картинке, чтобы посмотреть в большом размере.Как создать готовый вордпресс шаблон из сверстанного макета сайта

Sidebar.php
Этот файл отвечает за вывод элементов в сайдбаре. Также вырезаем код из index.htm (весь div id=»side») и вставляем в файл sidebar.php. Далее, как и раньше, вставляем команды вордпресса. Щелкаем по картинке, чтобы посмотреть в большом размере.Как создать готовый вордпресс шаблон из сверстанного макета сайта

Archive.php
Отвечает за выдачу архивных записей сайта. Чтобы создать этот файл, полностью копируем содержимое файла index.php и вставляем в archive.php, а потом вставляем кусок кода (7 строк) между строками &#60?php if(have_posts()) : ?&#62 и &#60?php while(have_posts()) : the_post(); ?&#62. Смотрим как это сделано на картинке ниже. Щелкаем по картинке, чтобы посмотреть в большом размере.Как создать готовый вордпресс шаблон из сверстанного макета сайта

Search.php
Этот файл отвечает за результаты поиска. Чтобы создать этот файл, полностью копируем содержимое файла index.php и вставляем в search.php, а потом вставляем кусок кода (1 строка) между строками &#60?php if(have_posts()) : ?&#62 и &#60?php while(have_posts()) : the_post(); ?&#62. Смотрим как это сделано на картинке ниже. Щелкаем по картинке, чтобы посмотреть в большом размере.Как создать готовый вордпресс шаблон из сверстанного макета сайта

Single.php
Этот файл выводит одиночный пост. Щелкаем по картинке, чтобы посмотреть в большом размере.Как создать готовый вордпресс шаблон из сверстанного макета сайта

Page.php
Этот файл отвечает за вывод одиночной страницы. Щелкаем по картинке, чтобы посмотреть в большом размере.Как создать готовый вордпресс шаблон из сверстанного макета сайта

Comments.php
Этот файл отвечает за выдачу блока комментариев на сайте. Щелкаем по картинке, чтобы посмотреть в большом размере.Как создать готовый вордпресс шаблон из сверстанного макета сайта

Установка и тестирование
На этой стадии тема может быть установлена и протестирована. Можно создать несколько постов, чтобы проверить работу навигации, кнопок и ссылок.Как создать готовый вордпресс шаблон из сверстанного макета сайта

Live Demo шаблона
Если нажать на картинку, то можно посмотреть готовый вордпресс шаблон онлайн.Как создать готовый вордпресс шаблон из сверстанного макета сайта

 
 

PS. Постовой. А вы знаете, для того, чтобы начать делать дизайны нужно овладеть инструментами и функциями фотошопа. В этом случае вам помогут курсы фотошопа, которые дадут вам необходимый базовый уровень знаний.

109643
  • Поделиться:
  • Короткая ссылка на этот пост: http://www.designonstop.com/?p=4461
  • Подписаться на обновления:

  • Понравился пост? Поддержите DesingNonstop рублём!

Написать комментарий с помощью формы ВКонтакте

Написать комментарий с помощью формы Facebook

Написать комментарий с помощью формы Facebook

Комментариев 41 комментарий

Хочу научится верстать а врмени нет(

ОтветитьОтветить

@Ваня:
Да, изучение таких вещей все-таки требует вдумчивого обучения. Так что придется выкроить как-нибудь ))

ОтветитьОтветить

Жаль, что самоцель этого поста заключена в постовом

ОтветитьОтветить

@Search Bot:
Жаль что вам больше нечего написать…

ОтветитьОтветить

@Search Bot: Да ничего подобного. Самоцель — рассказать, например, мне, как натянуть давно сверстанный шаблон. Вот на английском читать лень, а эту статью очень даже почитаю.

ОтветитьОтветить

@Search Bot: Полностью согласен с комментариями выше. Неплохо бы уважать автора как минимум за перевод.

ОтветитьОтветить

Спасибо за такие уроки, Наташ! Ничего страшного, что автор в картинках все выложил, главное — понять алгоритм. Возьму какой-нибудь свой уже сверстанный сайт и попробую из него шаблон сделать 🙂

ОтветитьОтветить

@Виктор:
Ну научить делать вп шаблоны эта статья не научит, но понять логику и познакомиться с базовыми понятиями безусловно поможет ))

@Pavel:
Спасибо ))

@Елена:
Вам спасибо!
Я бы вам все-таки посоветовала взять какой-нибудь фришный вордпресс шаблон, желательно совсем простой, разобрать его по косточкам, а уже потом пытаться делать свою вордпресс тему на его основе. Поскольку создавать все с нуля ну ооочень сложно для человека, который раньше этого не делал. 🙂

ОтветитьОтветить

Спасибо за урок, кое-что для себя почерпнула. Буквально на днях искала подобную информацию. Да и в целом, в Вашем блоге масса полезных статей.

ОтветитьОтветить

@Александра:
Вам спасибо большое за хороший комментарий! И успехов вам в изучении вордпресса ))

ОтветитьОтветить

@Наташа Клевер: «научить делать вп шаблоны эта статья не научит»
согласен на 100%, и я о том же

ОтветитьОтветить

@Search Boy:
Я еще не оставляю надежду, что вы все-таки в адеквате, а подобные комментарии пишите по каким-то своим причинам. Но если будет еще один подобный комментарий, то я вас забаню.

ОтветитьОтветить

@Наташа Клевер: в чем неадекват? В том, что я вас процитировал?
Объясню свою позицию:
Переведённая вами статья называется «Как создать готовый вордпресс шаблон из сверстанного макета сайта» и вы в комментах к последней части наконец честно признаетесь, что этому она научить не может. Это адекватно, не спорю.
Баньте уже,
баньте.

ОтветитьОтветить

@Search Boy:
Ну во-первых, вы читаете текст исключительно с точки зрения «до чего бы докопаться». Этот странный комментарий про постовой, потом выхваченная из контекста фраза…

Во-вторых, мне не нравится то, что вы по сути являетесь коллегой-дизайнером, По крайней мере у вас на Твиттер фоне указан адрес дизайнерской студии http://twitter.com/#!/voeslav
Просто попытайтесь сами для себя разобраться в причинах, по которым вы пишите эти комментарии…

В общем если вы обещаете вести себя более лояльно и не ходить сюда в таком раздражении, то я предлагаю забыть наш предыдущий опыт общения и разговаривать нормально. А я в свою очередь смогу прислушаться к вашим комментариям…

ОтветитьОтветить

По этой теме есть хорошая книжка Игоря Квентора «Создание 3х/2х колоночного шаблона для Вордпресс»
Есть ещё программа «Artisteer», с её помощью можно сгенерить тему для Вордпресс и ещё для других 4х CMS без кодинга и Фотошопа. В ней можно генерить дизайн страницы и её отдельных элементов как случайным образом так и вручную. Я когда её опробовал, просто в восторге был от её возможностей.

Я бы ещё посоветовал вам разобрать тему локализации ВП. Мне нравится тема H5(Jeff Starr) Ей можно пользоваться в качестве фреймворка, она хорошо демонстрирует преимущества HTML5 перед XHTML, но она англоязычная. Я пробовал перевести её «Poedit»ом но что-то не получилось, а в ручную ковырять как-то это нецивилизованно.

ОтветитьОтветить

@EverEve:
Чувствуются глубокие познания в области создания вордпресс тем )) А уроки Игоря Квентора с его сайта мне в свое время очень помогли. Про программу не слышала, спасибо за наводку. ))

ОтветитьОтветить

Отличный пост! Держи ретвит )

ОтветитьОтветить

@Alexpts:
Спасибо! И за ретвит тоже ))

ОтветитьОтветить

Интересно, а свой темплид сами сверстали?

ОтветитьОтветить

@Пётр:
Сама конечно. Правда не скажу, что возиться с кодами это мое любимое занятие. Мне больше нравится в фотошопе дизайнить ))

ОтветитьОтветить

Наталья,спасибо вам за верстку html макета,конечно в wordpress он не очень помог,зато я понял основные принципы верстки.
EverEye вам большое спасибо за наводку на книгу по вордпресс.С помощью этой книги я за сутки понял как кодить под вордпресс.
Увы и ах по данной статье я не смог сделать шаблон,но разобрался в основных принципах и используя базу которую получил на сайте и то что прочел в книге сумел добиться желаемого. Спасибо вам Наталья за проделанный труд.
А комментаторам выше хочу сказать одно, если нет нормальной базы вам вряд ли поможет какая либо статья.
А для того чтобы она была вам необходимо или знать хоть один язык программирования(сформируется необходимое мышление),или верстать верстать и еще раз верстать.

ОтветитьОтветить

@Андрей:
Вам спасибо за комментарий и успехов в освоении вордпресса ))

ОтветитьОтветить

Да не за что.Просто за 3 дня выучить с нуля html,css и немного php без этой статьи это не возможно в принципе. Кстати если вы не против я кину что мне сильно помогло:
в изучении css:http://htmlbook.ru/
в изучении водпресса-ваша статья и ссылка на книгу по вп:
http://www.websovet.com/
Там есть две отличные книги:блочная верстка и создание шаблонов для вордпресс

ОтветитьОтветить

@Андрей:
Да, конечно! Спасибо за ссылки ))

ОтветитьОтветить

Вот я тоже все чаще склоняюсь к уникальному редизайну. Сам-то дизайн мне нарисуют, а вот натянуть его — вот это задача. Может фрилансерам отдать?

ОтветитьОтветить

@Руслан:
Да, можно и так. Сейчас много людей специализируются на верстке.

ОтветитьОтветить

@Наташа Клевер: А ручки-то чешутся))))) Все-таки сам буду натягивать, наверное.

ОтветитьОтветить

@Руслан:
Ну если ручки чешутся, тогда да. Удачи в настройке ))

ОтветитьОтветить

Привет Наташа.Давно не была у тебя на блоге,а смотрю уже и тему новую выпустила.Класс поздравляю. У меня наконец-то вдохновение появилось и я решила эти уроки выполнить.Правда рисовать макет лень было- воспользовалась демкой. Натянуть макет удалось, конечно сделать из html макета wordpress тему было не так просто т.к. в уроке автора на самом деле много ошибок в коде, но немного покопавшись можно всё сделать.В общем на данный момент имею почти готовую тему свёрстанную и работающую, есть ещё немного работы с настройкой — например почему-то заголовок H2 прописан, но выводится как весь текст без форматирования(ошибка где-то точно, буду искать) и в самой теме автора мне кажется есть какие-то скрипты возможно, и форма комментариев у меня почему-то совсем не так выглядит.
Но додумать тему можно, и смысл уроков — показать что всё возможно, если очень захотеть.Конечно чтоб сверстать тему WordPress этого маловато и нужно ещё почитать и попрактиковать немного.

А по большому счёту спасибо автору за уроки и тебе за перевод.
А ещё я думала ты сама кодишь темы ?Или ты большей частью рисуешь?

ОтветитьОтветить

@Kuzuxa:
Аня, привет! Спасибо! Да, выпустила следующую тему. Еще несколько на подходе. Насколько я быстро и легко рисую, настолько вдумчиво и медленно верстаю, поэтому решила, что сотрудничество с профессиональным верстальщиком пойдет только на пользу. У тебя, кстати очень симпатичная и стильная тема сейчас на сайте. Мне очень понравилась ))

ОтветитьОтветить

Урок очень хороший! =)
Скажите пожалуйста, а можно ли скачать данный шаблон?)

ОтветитьОтветить

Впринципе я уже понял что скачать его можно только за деньги, вот только, то что выложил первоначальный автор — не совсем хороший пример. Там есть несколько ошибок, например в файле index.php и в файле archive.php

Плюс файл стилей совершенно не подходит, к остальным. Всё очень криво и съезжает.

Вообщем, если Вас интересует где именно неточности, пишите, я Вам помогу =)

ОтветитьОтветить

Добрый вечер Наташа! Хочу выразить вам огромную благодарность..ваш сайт чудо!Я новечёк в веб дизайне…только учусь)) Нашла у вас много интересных постов. Только вчера подумала…где бы найти инфу по вёрстке тем на вордпресс и сегодня наткнулась на ваш сайт! Я в случайности не верю..точно ангелы привели)))

ОтветитьОтветить

@Лариса:
Лариса, спасибо большое за такой хороший комментарий! Вам успехов в обучении ))

ОтветитьОтветить

а точно будет работать без файла footer.php там же вроде окончание кода????

ОтветитьОтветить

Без футера работать не будет. футер закрывает тему. Сайт то откроется, но все может съехать

ОтветитьОтветить

@veloman: это я и говорю…. а в описании(картинки) футера нет…(((
и скачать шаблон не получается, вот такой обидосик!))

ОтветитьОтветить

Вообще, статья хорошая. Спасибо Но, имхо, нечестно не указывать источник, с которого переведено.

ОтветитьОтветить

@Допустим, инкогнито:
Пожалуйста. Первая строка урока — источник указан.

ОтветитьОтветить

Мда, для меня верстка это такой темный лес) Но статейка гуд написана.

ОтветитьОтветить

Спасибо! А то весь интернет облазил — нормального мануала по шаблонам WP не нашел… пойду разбираться! Сайт в избранное!!!

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!