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

Услуги веб-верстальщика: Вёрстка дизайна для темы Вордпресс – хорошо, дёшево и быстро

Для кого эта статья

Допустим вы оплатили создание дизайна сайта, и теперь ищите вебмастера, который посадит дизайн на WordPress.

Заказать отдельно дизайн а потом вёрстку точно не дешевле чем заказывать простой дешовый сайт с нуля. Потому что верстальщику вероятно надо вникать в ваш дизайн и думать как это заверстать.

 

О каком дизайне и вёрстке по цене и типу мы говорим?

Речь не идёт о сайте с особым, уникальным функционалом.

Я имею в виду вёрстку рядового блога, интернет-магазина или малостраничника на CMS WordPress с минимальным или средним бюджетом. Тот случай, когда клиент хочет ХОРОШО И ДЁШЕВО. А ещё и БЫСТРО.

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

 

Услуги веб-верстальщика: Вёрстка дизайна для темы Вордпресс

Что первично в вёрстке темы WordPress – PSD-дизайн или адаптивная тема?

Вёрстка дизайна для WordPress никогда не делается только в HTML и CSS.

Вёрстка всегда создаётся с условием внедрения дизайна в тему WordPress, с полным тестированием на сайте.

Вордпресс это сверхпопулярная CMS, поэтому для неё создано огромное количество тем оформления.

Для Вордпресс можно найти темы для любых задач и любых стилей.

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

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

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

 

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

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

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

Абсолютное большинство дизайнов можно (без потери дизайнерской задумки) и нужно внедрять в имеющиеся темы.

 

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

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

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

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

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

 

Вёрстка контента страниц сайта красиво, структурно, аналогично лендингам

Безвозвратно прошли те времена, когда страницы для WordPress верстали в HTML и CSS. Щас всё делается блоками в Гутенберг или Элементор. Конечно вид страницы будет попроще чем скажем на лендинге, не будет допустим фоновых заливок и фотографий. Но в остальном вёрстка в Гутенберг вполне сопоставима с вёрсткой элементов на лендинге. Можно вставить текст, картинки в несколько колонок, плиткой, поставить слайдеры фоток или постов,таблицы и практически любой пользовательский контент.

При вёрстке контента в Гутенберг речь никогда не идёт о завёрстывании 1 в 1 с нарисованым PSD-макетом. Важно лишь достойно представить информацию из макета на каждой странице. И у Гутенберг и у Элементор свои представления о прекрасном (а именно об отступах, адаптивности для смартфонов, размере и юзабилити). Менять их мы разумеется не будем. Но большинство народа вёрстка элементов в Гутенберг и Элементор вполне устраивает.

Чтобы обеспечить функционал лендинга и принимать заказы на сайте Вордпресс можно установить плагины:
– «заказ в один клик», «обратный зыонок»,
– чаты «Живосайт» или чат от группы Вконтакте
и другие.

Ходят слухи что Элементор якобы тормозит сайт, поэтому будем рекомендовать заказчику Гутенберг и для вёрстки особых страниц и для повседневного наполнения сайта.

 

Вёрстка полноценного лендинга на Вордпресс

Для полноценной вёрстки лендингов на Вордпресс обычно используются специальные плагины и темы лендинга, однако я предпочитаю завёрстывать лендинги на своём самописном генераторе. Мне так проще, быстрее и понятнее.

 

Могут ли некоторые темы Вордпресс тормозить сайт

Что касается протестированных и отобранных мной простых тем (смотрите на главной) – точно нет. В них нет лишнего кода.

Я отбираю темы для работы до 1,2мб в архиве и желательно с количеством кода до 300кб (остальное в архиве – это картинки и шрифты).

Что касается премиумных сложных тем – то вполне возможно.

Обычная тема Вордпресс это 1-2мб в архиве (реальный разархивированный размер будет в полтора-два раза больше).

Премиумные или большие (сложные) темы бывают на 3-5-7 мб в архиве. Бывают и на 100мб в архиве (вместе с PSD кнопок и пр элементов).

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

 

Скорость работы сайта на Вордпресс зависит от:

1) версии PHP.
Вордпресс работает быстрее в 6-10 раз на хостинге с PHP 7 по сравнению с PHP 5.2-5.3

2) хостинга.
VPS или VDS могут работать быстрее чем шаред хостинг. Но не всегда. Если на хостинге мало клеинтов то и шаред хостинг будет быстрым.

3) количества и тяжести установленных плагинов и темы.
Чем больше кода обрабатывается при создании страницы – тем дольше. Бывают плагины которые реально тормозят сайт. Грамотные люди их обычно выявляют и отключают.

4) плагина кеширования.
Трудно сказать какой плагин кеширования лучше. Сверхпопулярным WP-SUPER-CASHE довольны далеко не все.

Однако сайт Themes-WordPress.ru на WordPress работает быстро на PHP7 и без плагина кеширования (страница грузится 0,3-0,4сек). А установлено на нём щас ровно 50 плагинов!

 

Выводы:

– если не использовать большие и/или премиумные темы, то в большинстве случаев тема не будет тормозить сайт.

– если не гоняться за вёрсткой 1 в 1 по макету (так называемая «пиксель-перфект») – то можно заказать адаптивную вёрстку сайта (и создание сайта в целом) вполне недорого и с гарантированным результатом.

 

Добавить комментарий

Ваш адрес email не будет опубликован.