srko
@srko
JavaScript / HTML / CSS

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

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

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

Верстаю в Brackets, осваиваю SCSS, макеты делаю в Balsamiq Mockups, фреймворк _S (наверное, стоило бы просто сначала сверстать в HTML и CSS, а потом уж делать шаблон wordpress?).
  • Вопрос задан
  • 7484 просмотра
Решения вопроса 1
HeadOnFire
@HeadOnFire Куратор тега WordPress
WordPress Evangelist
Использование _s - очень правильная идея. Верстка сначала в html - очень неправильная, разве что есть уже свой собственный базовый код, основанный на WordPress. Почему? Потому что WordPress генерит везде кучу своих CSS-классов, и правильно использовать именно их.

Процесс такой:
- идея, эскизы на бумаге, продумывание особенностей, модульные сетки, прототип
- дизайн в фотошопе
- сборка функциональной части шаблона - подключение нужных плагинов, вывод метаполей, весь кастомный вывод - в общем, необходимо вывести в шаблон (_s) весь реальный контент (или приближенный к реальному), а не верстать с Lorem Ipsum
- а вот теперь самое интересное - SCSS, mobile first + javascript. В общем, чистый frontend.
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
Три дня назад впервые работал с вордпрессом и версткой под него. Сначала посмотрел несколько уроков на ютубе, как люди натягивают свою верстку на вордпресс и сразу же начал практиковаться и я. Работал с underscores. По началу, сверстал полностью все у себя на компьютере в папочке:) Далее, разбил свою верстку на footer.php page.php sidebar.php and header.php
Далее, удалил стандартный style.css, который был в теме, после underscores. Ну а потом запустил сайт и увидел некоторые недочеты, которые приподнес wordpress. например, когда создаешь меню через админку, он автоматом к ul и li прописывает свои классы. Пришлось их немного редактировать.
Также, использовал bootstrap. Никаких сложностей у меня не возникало с wordpress+bootstrap. Все, как в обычной верстке.
Ответ написан
@IamArtyShock
Инструменты:
  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 и т.д.)

Возможно это все не сильно правильно, но привык к такому)
Ответ написан
@aivenreach
Мне немного непонятен твой вопрос. Расскажу по порядку как делаю я. Все впринципе стандартно.
1. Сначала рисую весь шаблон в фотошопе.
2. Далее верстаю в статический html.
3. Ну а дальше конечно же php. Ну и прикручиваю всякие доп настройки для пользователей к нему.
Если у тебя у же есть нарисованный макет, то верстай его в статический html, когда будет верстка полностью готова, то натягивай его уже на движок.
Когда я делал свой первый шаблон, у меня толком не был готов макет в фотошопе, а я уже приступил к верстке, далее до конца не сверстав начал натягивать его на движок. В итоге разработка затянулась на долгое время. В общем не советую так делать. Лучше все по порядку, будет быстрее и качественнее в разы однозначно.
Ответ написан
IonDen
@IonDen Куратор тега CSS
JavaScript developer. IonDen.com
Dimox
@Dimox
Верстаю сайты с 2003-го года.
Раньше я сначала верстал в HTML + CSS, затем эту верстку интегрировал в WordPress.

За годы у меня выработался базовый WordPress-шаблон, и теперь я сразу работаю с ним без промежуточного HTML-этапа, что значительно ускоряет процесс.
Ответ написан
DVF
@DVF
предприниматель
Сделали каркас по кодексу на BootStrap3 + SCSS, сборку WP с наиболее часто встречающимися плагинами, заполнили тестовым контентом. Сейчас в основном редактируется SCSS, нарезается макет от дизайнера.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы