Как вы верстаете Wordpress темы?

Question

[srko]

Расскажите как вы верстаете под wordpress, какие используете методологии и как вообще у вас протекает процесс разработки wordpress тем?

Пишу для своего блога тему. Столкнулся с проблемой, что задача оказалась мне не совсем по зубам — слишком большой кусок работы. Не в плане программирования. Тут-то для моих задач все более мене понятно, да и просто, Wordpress же. А в плане верстки и организации CSS.
Есть желание по окончании работ выложить тему в публичный доступ, поэтому хочется чтоб все было best practices или максимально к этому приближенно. Ну и на будущее, конечно же.

Верстаю в Brackets, осваиваю SCSS, макеты делаю в Balsamiq Mockups, фреймворк _S (наверное, стоило бы просто сначала сверстать в HTML и CSS, а потом уж делать шаблон wordpress?).

Answer 1

[Игорь Воротнёв]

Использование _s - очень правильная идея. Верстка сначала в html - очень неправильная, разве что есть уже свой собственный базовый код, основанный на WordPress. Почему? Потому что WordPress генерит везде кучу своих CSS-классов, и правильно использовать именно их.

Процесс такой:
- идея, эскизы на бумаге, продумывание особенностей, модульные сетки, прототип
- дизайн в фотошопе
- сборка функциональной части шаблона - подключение нужных плагинов, вывод метаполей, весь кастомный вывод - в общем, необходимо вывести в шаблон (_s) весь реальный контент (или приближенный к реальному), а не верстать с Lorem Ipsum
- а вот теперь самое интересное - SCSS, mobile first + javascript. В общем, чистый frontend.

Comments

[srko]

Попробовал с наскока взять _s, там много что не прописано в scss и пришлось городить свои какие-то костыли. Собственно из-за этого и возникло желание узнать что и как делают нормальные разработчики.

[Игорь Воротнёв]

Best practices есть тут https://github.com/Automattic/_s/issues, вперемешку в ответах. Первый шаги, конечно же, будут медленными, это нормально. Со временем накапливается свой собственный код, который базируется на WP и его стандартах и который можно повторно использовать в новых проектах. Тогда становится легче и быстрее. Но это не появляется в один день и сразу. Но очень важно с самого начала начать делать все "канонически", тогда потом меньше надо будет ломать и переделывать, а сам рост будет быстрее. Coding standards, полезный урок. Материалов в сети полно, но одной волшебной пилюли или волшебной стартовой темы, где есть все что нужно и именно так как нужно - не существует. Есть основа, базис. Все остальное - опыт и наработки. WordPress же штука очень гибкая)

[srko]

@HeadOnFire: WordPress Generated Classes очень полезная ссылка. Пусть это и будет правильным ответом. Спасибо!

[Игорь Воротнёв]

@srko: на здоровье)

Answer 2

[Дмитрий Гормаш]

Три дня назад впервые работал с вордпрессом и версткой под него. Сначала посмотрел несколько уроков на ютубе, как люди натягивают свою верстку на вордпресс и сразу же начал практиковаться и я. Работал с underscores. По началу, сверстал полностью все у себя на компьютере в папочке:) Далее, разбил свою верстку на footer.php page.php sidebar.php and header.php
Далее, удалил стандартный style.css, который был в теме, после underscores. Ну а потом запустил сайт и увидел некоторые недочеты, которые приподнес wordpress. например, когда создаешь меню через админку, он автоматом к ul и li прописывает свои классы. Пришлось их немного редактировать.
Также, использовал bootstrap. Никаких сложностей у меня не возникало с wordpress+bootstrap. Все, как в обычной верстке.

Answer 3

[Артур]

Инструменты:

1. Brackets (обязательно иметь emmet, по желанию любой wordpress function helper)
   
2. Photoshop (с плагинами css hat и png hat)
   
3. тема Underscores. Оптимизированная мной. Сделал форк на гитхабе и добавляю туда нужные функции по необходимости. такие как custom walker styles, бредкрамбсы, подключенный бустрап, регистрация кастом стилей из папки цсс, вывод jquery в футере и т.д.
   

Подготовка
Разворачиваю ВП с нужными плагинами, создаю главную страницу и пару внутренних. Выставляю в настройках статическую главную.
Верстка
Png hat'ом сохраняю всю графику в папочку. Создаю в теме файл index.html из заготовки. В нем верстаю главную. Начинаю с элементов, которые будут на всех страницах (то есть в основном шапка и футер). С помощью еммета сам каркас пишеться за 10 минут (предварительно конечно, смотря на макет продумываю логику элементов, необходимые названия стилей и т.д.)
Внедрение в Вп
раскидываю код из индекс хтмл по нужным файлам. Меняю пути (если где не через цсс вставлял картинки) Код хедера вставляю в header.php, футера - в footer.php. Далее от ситуации. Либо оставшуюся часть в front-page.php(что чаще всего), либо довожу до ума page.php и уже работаю комплексно (создание слайдеров в админке, настройка ACF и contact form 7 и т.д.)

Возможно это все не сильно правильно, но привык к такому)

Answer 4

[aivenreach]

Мне немного непонятен твой вопрос. Расскажу по порядку как делаю я. Все впринципе стандартно.
1. Сначала рисую весь шаблон в фотошопе.
2. Далее верстаю в статический html.
3. Ну а дальше конечно же php. Ну и прикручиваю всякие доп настройки для пользователей к нему.
Если у тебя у же есть нарисованный макет, то верстай его в статический html, когда будет верстка полностью готова, то натягивай его уже на движок.
Когда я делал свой первый шаблон, у меня толком не был готов макет в фотошопе, а я уже приступил к верстке, далее до конца не сверстав начал натягивать его на движок. В итоге разработка затянулась на долгое время. В общем не советую так делать. Лучше все по порядку, будет быстрее и качественнее в разы однозначно.

Comments

[srko]

Я где-то так же поступил. Что скажите насчет фреймворков?

[aivenreach]

Лично я писал все сам без фреймворков, мне так проще. Поэтому по поводу фреймворков ничего сказать не могу

Answer 5

[Денис Инешин]

Вроде тут всё есть: https://codex.wordpress.org/Theme_Development

Comments

[srko]

К сожалению, не все.

Answer 6

[Dimox]

Раньше я сначала верстал в HTML + CSS, затем эту верстку интегрировал в WordPress.

За годы у меня выработался базовый WordPress-шаблон, и теперь я сразу работаю с ним без промежуточного HTML-этапа, что значительно ускоряет процесс.

Comments

[David Sedrakyan]

можете отправить ваш шаблон?

Answer 7

[Денис Филонов]

Сделали каркас по кодексу на BootStrap3 + SCSS, сборку WP с наиболее часто встречающимися плагинами, заполнили тестовым контентом. Сейчас в основном редактируется SCSS, нарезается макет от дизайнера.