Здесь я бы не хотел рассматривать основные теги wordpress, которые применяются в wordpress шаблонах. Я хочу рассказать саму идею, остальное это лишь инструмент достижения цели. Придерживаясь этой идеи, я верстаю шаблоны не только к wordpress, но и к любым другим движкам или статику, меняется лишь инструмент. Все что требуется от дизайнера - это получить на выходе красивый вордпресс шаблон, который будет радовать посетителей блога или сайта. Т.к. в этом блоге я пишу о WordPress, то, как вы уже догадались, рассматривать все буду на примере wordpress.
Темы и шаблоны wordpress
Сначала нужно разметить макет будущего wordpress шаблона. Не поленитесь, возьмите ручку с листочком и набросайте структуру шаблона wordpress. Чаще всего выделяют такие элементы, как шапка (header), меню (вертикальное или горизонтальное), блок-контент (содержимое самой страницы), подвал (footer).
Далее под темой wordpress я буду рассматривать совокупность всех шаблонов wordpress, папку которую вы скачиваете из интернета. Под шаблоном какой-то 1 файл темы, например index.php.
Далее верстается макет темы от шапки до подвала, т.е. по принципу "сверху в низ". Т.к. структура темы в wordpress достаточно гибкая и в зависимости от сложности блога мы можем сделать тему в виде одного шаблон index.php или нескольких шаблонов - home.php, index.php, footer.php. На самом деле, в wordpress достаточно много шаблонов, каждый из которых создается не просто так. Но пока я хочу рассмотреть саму идею, не углубляясь в детали.
При верстке макета wordpress, если у вас есть уже нарисованный дизайн, то я рекомендую сразу оформлять и дизайн (обычно это просто стили CSS). По мере верстки wordpress шаблона сайт будет приобретать конечный вид от шапки до подвала.
Конечно же при оформлении темы wordpress, очень пригодились бы знания CSS - каскадные таблицы стилей. Без знаний CSS очень сложно сделать красивую тему для wordpress.
При верстке темы следует после нескольких шагов постоянно смотреть как выглядит блог в браузере, рекомендую смотреть сразу в нескольких браузерах - FireFox, InternetExplorer и Opera. Увы, каждый их этих браузеров представляет страницу по-своему. Не пугайтесь если в FireFox и Opera все выглядит хорошо, а в InternetExplorer что-то куда-то поехало. Благодаря постоянному мониторингу готового дизайна выявляются ошибки и "сложные" места в шаблоне. Если вы все сверстаете от начала до конца и потом обнаружите, что, скажем, в Опере сайдбар (sidebar.php) отображается не на своем месте, то найти причину будет намного сложнее, чем во время верстки шаблона wordpress.
К кроссбраузерности (единому отображению вордпресс шаблона в любом браузере) нужно стремится. Но если вы не знаете, как привести все в единый вид - это одна из главных проблем верстальщиков, то попробуйте использовать так называемые хаки для браузеров (все опять упирается в знания CSS), напишите мне, возможно, я вам что-то подскажу. Допустим, все шаблон wordpress не нормально отображется только в IE 6, то искать пути исправления или нет, решать вам, т.к. IE 6 уже почти никто не пользуется.
На последок хочу привести статистику пользователей за последний месяц (данные взяты с этого блога о wordpress), которые используют тот или иной браузер:
- Firefox 3 - 38.0%
- Opera 9 - 32.5%
- Firefox 2 - 8.9%
- Explorer 7 - 6.3%
- Chrome - 5.2%
- Другие браузеры - 9.1%
Более детально о принципах создание тем для wordpress с заострением внимания на wordpress шаблонах и тэгах, возможно, напишу попозже. Если вас интересует что-то конкретное в создании тем или шаблонов в wordpress, то пишите. Постараюсь осветить эту тему.
ordPress
плагины

Неплохо было бы, если вы сделали видео урок по верстке шаблонов на wordpress
Это будет конкретика уже, а не идея )
Я думал над этим. К сожалению это отнимает много времени, возможно в будущем займусь видео уроками, но сейчас увы не могу…
что-то ваша статистика не совсем правдоподобна. на ие еще процентов 30 юзеров сидит (по моей статистике). дале этим ие5.5 некоторые пользуются. сначала тоже думал делать страницы и для шестого ие, но передумал — нарисовал страницу с описанием новейших браузеров и линков для их скачки. на эту страницу сразу же перенаправляются все юзеры, у кого старий ие (в новых как-то получше все, хотя супер-глючный браузер).
Вы хотите сказать, что я написал не правду?
Нет?
Опишу в будущем конкретный пример верстки шаблона, как что-то сверстать возьмусь и будет много времени, чтобы все по ходу конспектировать
Мне очень будет интересно почитать более подробно о создании шаблоно (тем) для WordPress… интересует как сам процесс верстки так и непосредственно структура шаблона (обязательные элементы + фишечки и свистульки)…
Я вам как верстальщик скажу, что чтиво не поможет. Я не один десяток шаблонов сверстал и до сих пор на дивлюсь «тупости» IE6. Сейчас обленился, и стал выводить сообщение, мол скачайте нормальный браузер для пользователей IE6.
Я конечно слышала раньше о глюках в разных браузерах, но как-то увлеклась блогом и забыла после каждого изменения просматривать в ИЕ 6… Сегодня с разочарованием увидела, как ИЕ порвал мой шаблон, а поскольку изменений было много, я уже вряд ли смогу установить, что к этому привело
У меня Ие 6 пользуются около 1,5 % пользователей, но все равно обидно. Может подскажите. где можно почитать о конкретных методах решения проблем с ИЕ 6 ?
Да, все уроки это только помощь, пока сами не захотите никто вас не научит.
Хех, отвечу уже сам на свой вопрос:для того, чтобы начать изучение, его нужно НАЧАТЬ :-[ .На многих блогах есть пошаговое описание создания шаблона. Начал читать, повторять за авторами — и потихоньку получается. И ничего страшного нет. А раньше было просто впадлу, поэтому и казалось тяжело:)
Здравствуйте! У меня проблема та же, что и у многих. Верстку я уже делал, вначале табличную, потом блочную, но для себя, для статичных сайтов. Матюкался с IE долго. Потом перешел на joomla,wordpress и прогу Artisteer для создания шаблонов. Того, что она делала, мне для себя хватало. Сейчас появился заказ сделать сайт на wordpress. Возможностей Artisteer-а там явно не хватает, да и понимаю, что пора уже перестать баловаться, а взяться серьезно.
Вот и не знаю, как к этому подойти. Подскажите, пожалуйста, с чего начать, чтобы потери времени были наименьшими.
Видео уроки…
Может быть сделаю ряд видео уроков в будующем.
Было бы совсем отлично если выше написанное было разобрано на конкретном примере и оформлено в виде видео урока.
Нужно немного просто почитать о хаках CSS и с IE тоже можно мирно жить. *THUMBS UP*
очень интерестный блог.
и статистика тоже:
* Firefox 3 — 38.0%
* Opera 9 — 32.5%
* Firefox 2 — 8.9%
* Explorer 7 — 6.3%
* Chrome — 5.2%
* Другие браузеры — 9.1%
По моей статистике ИЕ пользуються больше половины юзеров. И это меня удручает.
Со стандаотами ЦСС в ИЕ совсем беда!