Вёрстка дизайна для темы Вордпресс

Эта статья актуальна только для тех, кто приходит на создание сайта со своим дизайном

1) Если предварительно заказать дизайн не у меня, а у другого дизайнера, то создание сайта не будет ни дешевле, ни быстрее.

2) Нарисованный дизайн не всегда можно и нужно внедрять 1 в 1, многое зависит от особенностей выбранной темы WordPress

 

Если у Вас нет заранее созданного дизайна для будущего сайта,

но интересует что-то связанное с дизайном сайта – переходите сюда – Доработка темы WordPress или Woocommerce 

 

* * *

 

Особенности вёрстки дизайна для темы WordPress или Woocommerce 

Далее я расскажу подробно что и как я делаю.

 

Из каких этапов состоит внедрение дизайна в тему Вордпресс

1) Поиск темы с близкими к нужным Вам параметрами. Поиск тем для WordPress и Woocommerce. Как я ищу темы?

2) Доработка темы WordPress или Woocommerce и настройка. Некоторые темы позволяют загружать фон и логотип, менять цвета и шрифты в админке – это настройка темы. В других темах нет таких возможностей, приходится всё это прописывать в коде – это доработка темы.

3) Создание (вёрстка) специальных страниц с индивидуальным дизайном (обычно в виде лендинга) для существующего сайта. Например главной или если нужно продвинуть новый классный товар.

В зависимости от того, что Вам нужно, подбирается оптимальная статегия работы.

 

Почему нарисованый дизайн в макете сайта будет отличаться от завёрстаного в теме?

Внедрение вебдизайна в тему происходит с учётом особеностей темы.

Для внедрения дизайна подбирается тема с близкими к желаемым параметрам.

Надо понимать главный принцип работы верстальщика:
Верстальщик не верстает дизайн пиксель в пиксель по макету дизайнера, а внедряет ваш дизайн (как зрительный образ) в имеющуюся тему CMS, с полным тестированием на сайте.

ХОРОШО завёрстаный дизайн сайта – тот, который после вёрстки сохраняет дизайнерскую задумку, хорошо смотрится на всех девайсах (смартфонах, широких мониторах, айпадах), причём сайт идеально работает, а текст везде читаем. А не тот, который на скриншоте 1 в 1 с дизайном.

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

 

Какие элементы темы сайта будут немного отличаться от макета дизайнера

В каждой теме есть свой скрипт адаптивности для главного (чаще горизонтального) меню и бокового виджетариа, свои отступы  между элементами. Вебмастеру совершенно нецелесообразно тратить время чтобы сделать дизайн точно также как нарисовано в PSD макете, особено это касается выезжающего (сворачивающегося) меню.

 

Меню

Вёрстку меню в большинстве случаев лучше не трогать, так как для его идеальной адаптивности грамотные люди потратили не один день на написание и тестирования css и яваскриптов. Этот труд надо ценить и уважать. А не ломать, основываясь на своих нездоровых амбициях (хотелках). А вот поменять цвета шрифты размеры можно.

 

Отступы

Отдельно надо подчеркнуть невозможность и нецелесообразность в большинстве случаев заверстать дизайн с теми же отступами и размерами пиксель в пиксель как в макете. Веб-верстальщик верстает так, чтобы хорошо смотрелось и складывалось на смартфонах с учётом общей идеи дизайна, а не так как захотелось нарисовать дизайнеру. Нарисовать в Корел Дро или Фотошоп можно любую ><уйню. Но не любую ><уйню можно заверстать имеющимися средствами. А если выражаться без мата, то дизайнерам глубоко фиолетово как мы будем завёрстывать их творение.

 

Слайдеры

Далее. Веб-верстальщик подбирает работающие в данной CMS слайдеры фоток, новостей, фотогалереи и пр.. Разумеется кнопочки и вид слайдеров не может совпадать в нарисованом макете и на сайте в реальности. Ну если не писать свой слайдер с нуля. Что естественно вебмастер не будет делать при вёрстке рядового сайта. К счастью для WordPress дохрена плагинов слайдеров, и всегда можно найти что-то похожее на макет.

 

Слайдеры фотографий и выпадающие меню – это самый ненадёжный функционал сайта

Они могут не работать в каком-то из браузеров, поэтому их всегда надо тестировать во всех популярных современных браузерах, а также в не очень старых браузерах (5-7 летней давности). 

Если у темы или плагина на официальном сайте нет 4-4,5 звёзд, тысяч загрузок и десятков положительных отзывов, нельзя быть уверенным, что слайдер и выпадающие меню идеально работают.

Слайдеры могут быть и в теме, и плагинах. Слайдеры фотографий рекомендуется использовать из самых популярных плагинов WordPress, потому что они многократно проверены на других сайтах, а не из тем.

Выпадающее меню всегда задаётся в теме WordPress. Если оно полностью не работает, такую тему лучше не использовать. Это сырая недоработанная тема! И всегда лучше написать автору темы чтобы исправил. 

 

Выводы:

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

Без крайней необходимости не стоит переделывать в работающей теме важные скрипты (слайдеры, адаптивность, выпадающие меню).

Если не гоняться за вёрсткой дизайна 1 в 1 по макету – то можно заказать создание сайта в целом вполне недорого и с гарантированным результатом.