Попытки автоматизации вёрстки wordpress тем из PSD
В последнее время меня всё больше интересует создание тем для wordpress. Хорошенько разобравшись с визуальным редактором для создания шаблонов WordPress, Joomla, Drupal и др. – Artisteer, я понял, что это далеко не самый лучший вариант. Код шаблона получается довольно монструозным, а сам дизайн ограничен возможностями программы.
А вот создать тему самому – это уже совсем другой уровень. Единственное, что в таком случае может тебя ограничить – это твои собственные знания (вернее будет сказать незнание) и фантазия. Но скажу сразу – базовых знаний тут уж точно не хватит, так что это решение подойдёт далеко не для всех.
Начинается всё, естественно, с фотошопа. Сначала мы рисуем то, что хотим видеть в финальном варианте, не особо заморачиваясь о том, как всё это будет реализовано. В разумных пределах, конечно 
Это называется созданием PSD макета.
Следующий этап – вёрстка XHTML/CSS шаблона. Дело это очень нудное и кропотливое, требующее хорошего знания html и css. Вот как раз поисками способов упрощения/ускорения этого процесса я и занимался в последнее время. Волшебной палочки я, конечно, не нашел, но всё же есть чем с вами поделиться:
- Divine – плагин для фотошопа, с помощью которого можно превратить PSD макет сразу в wordpress тему. Продукт еще довольно сырой и находится в стадии бета-тестирования, но, как мне кажется, имеет все шансы стать очень популярным. Существуют две версии плагина – платная и бесплатная. Бесплатная имеет ряд ограничений, но в общих чертах позволяет ознакомиться с плагином. Функционал плагина на данный момент очень даже скромный, так что мне кажется, что создатели поспешили с платной версией.
- Psd2cssonline – онлайн генератор готовых XHTML/CSS шаблонов из PSD файлов. В большинстве случаев, конечно, на выходе шаблоны нуждаются в доработке/корректировке. Но даже несмотря на это данный сервис может сэкономить очень много времени при вёрстке шаблона.
Третий этап создания шаблона – превращение его из статического в динамический, т.е. из html в php. Если вы хорошо знаете структуру шаблонов wordpress, то этот этап не вызовет особых затруднений. Всё может быть усложнено дополнительными наворотами, которые вы захотите прикрутить к своей теме.
На блоге Klaived‘a вы сможете найти много уроков по созданию PSD макетов, а так же другие очень полезные материалы по HTML и CSS.
Мегаподборка из 14 лучших туториалов по превращению PSD файлов в XHTML/CSS шаблоны. Все статьи на английском. Если кто-нибудь видел что-нибудь похожее на русском – поделитесь в комментариях. Я лично ничего подобного в рунете не встречал.
Вот про Divine не знал. Спасибо !
спасибо, весьма интересно, да и за Klaived спасибо, Есть что просмотреть
а дивайн ты пробовал? там реально столько ограничений что сделать тему адекватной очень сложно, тот же артистир намного лучше и удобнее, просто покрутить его нужно чтоб сделать что то нормальное
Пробовал. Самое главное ограничение – в бесплатной версии нельзя изменить стандартную разметку блога. Это очень напрягает. А платную версию покупать я как-то не осмелился, толком не убедившись в том, что плагин стоящий. Буду следить за развитием проекта.
На самом деле “Если вы хорошо знаете структуру шаблонов wordpress, то этот этап не вызовет особых затруднений.” – не совсем верное.
Конечно все зависит от вашей фантазии и от того, с чего вы все же начали делать тему оформления. Если вот как написано “с нуля”, то и данный третий этап займет кучу времени. Эта куча времени будет потрачена на оттачивание темы оформления и разные мелочи. Проверено на собственной шкуре.
Куда удобнее брать какую-нибудь тему за основу и переделывать ее. В таком случае есть некая база, которая сэкономит время.
Да, это хороший вариант, я о нем уже писал когда-то. Но не всегда всё так просто. Иногда разобраться в чужой писанине может занять тоже очень много времени. Проверено на собственной шкуре
Да, я еще забыл сказать, что существуют конструкторы-фреймворки для создания тем оформления. Когда тема оформления имеет все необходимые блоки, а вам остается только кастомизировать их под свои нужды.
Это наверное наиболее удобно и оптимально.
Это Вы про что-то вроде online theme generator говорите? Если нет, то поделитесь, пожалуйста, ссылочкой.
Нет, на online themes generator вроде не похоже.
На самом деле этих конструкторов-фреймворков просто куча. Конечно же с каждым из них не разберешься. Но выбрать что-то для себя и использовать вполне реально.
К сожалению конкретных ссылок дать не могу. Не по причине того, что не знаю, а по причине того, что их очень много.
1. inGoogle: http://www.google.com/search?client=opera&rls=ru&q=wordpress+themes+framework&sourceid=opera&ie=utf-8&oe=utf-8
2. on SmashingMag: http://www.smashingmagazine.com/2009/05/27/wordpress-theme-development-frameworks/
Отдельно стоит отметить отечественную разработку:
Тема-Конструктор для WordPress http://anton.shevchuk.name/wordpress/theme-constructor-for-wordpress/
Вот. Вот вам и тема для записи)
Надеюсь ссылки не порежуться.
Спасибо! Полажу по ссылочкам, посмотрю что да как и может быть напишу пост на эту тему
Зачетная тема, я как то делал шаблоны на артистире, но они делают сильно сложный css что сайт долго загружается. Дивайном пользовался пару мес назад, так он тогда глючил, нельзя было сохранить шаблон.
Спасибо за интересную статью.
Как вижу, и по комментариям в том числе, особого прогресса пока в этой сфере еще нету.
А направление весьма перспективное, ведь WordPress-сообщество уже достаточно большое, если не огромное.
я лично не рисую макет =)
я все делаю спонтанно, может быть вне компа нарисую в блокнотике да и все
Когда перед глазами есть PSD макет, верстать намного проще. Да и графические элементы всё равно придется рисовать,а так они уже все есть, осталось их только сохранить отдельными файлами. Получается экономия времени.
Пустой пост. 0 инфы. Кому нужна эта вода? Я думаю, я знаю, представляете есть такая штука, ой какой модный плагин, а если вы умеете, … чё это за бред? В итоге тема: Как автоматизировать… , так и не раскрыта. Ниже следуют такие же коменты. Вы что все копипаст-боты?
Смотрите как надо писать посты, о создании тем на вордпрес с 0 http://themetation.com/2008/07/14/how-to-create-wordpress-themes-from-scratch-part-1/
P.S. А почему блог на российском языке, а не например на английском? Аудитория ж больше будет
А пост разве называется “Как автоматизировать…”? Вы дали ссылку на отличный пост про создание темы для wordpress с нуля вручную, а мой пост о том, что появляются сервисы, которые гордо заявляют о том, что могут полностью автоматизировать процесс вёрстки из PSD в XHTML, но получается у них это пока хреново.
Из автоматизации ничего хорошего не выйдет. В лучшем случае – грязный код.