WordPress — самая популярная CMS в мире. На ней созданы миллионы сайтов разного уровня: от совсем простых проектов, сделанных на бесплатных шаблонах, до международных порталов, над которыми работают целые команды разработчиков.
Одна из главных особенностей WordPress — уникальные возможности для расширения функциональности. Для движка созданы тысячи плагинов. Одни расширения решают узкие задачи — например, добавляют на страницы кнопки соцсетей. Другие плагины делают движок заметно мощнее — например, позволяют реализовать функциональность форума или интернет-магазина (Ecwid, WooCommerce).
Мы собрали несколько примеров сайтов, сделанных на WordPress. В основном это сайты компаний, на которых они рассказывают о своих услугах. Изучая эти примеры, вы наглядно увидите возможности WordPress для разработки, а также поймёте, какие могут быть ошибки при создании первого сайта.
1. Производственное предприятие
Отличный пример многостраничного сайта компании, сделанного на WordPress. На главной странице — слайдер с описанием основных видов деятельности. Он может быть встроен в шаблон или подключен в виде расширения. Ниже — информация о предприятии, карточки с примерами продукции, последние новости, галерея с сертификатами (фотографии можно увеличивать), карусель с заказчиками и потребителями.
Прайс-листы продукции загружены в виде PDF-документов. Ссылки на них размещены на отдельной странице. Активно используются фотографии и галереи. Последние, скорее всего, реализованы с помощью одного из плагинов для WordPress.
Связаться с представителями компании можно по телефону. Есть возможность заказать обратный звонок. В хедере размещена ссылка на стандартную форму, но на странице есть также виджет от Envybox. В постах есть кнопки соцсетей, которые позволяют сделать быстрый репост.
У шаблона адаптивный дизайн. В мобильном браузере сетка перестраиваются, шрифт и элементы управления становятся крупнее. Пользоваться сайтом на смартфоне удобно.
Общее впечатление: хорошая работа с возможностями WordPress. Страницы загружаются быстро и нормально отображаются на разных экранах. Есть форма заказа обратного звонка, активно используются галереи и слайдеры. Единственный недостаток — нехватка контента на страницах с описанием продукции. Но это уже работа вебмастера, который занимается наполнением сайта.
2. Дизайнерские беседки и барбекю
Качественная визитка компании по проектированию/изготовлению барбекю, беседок, печей и всего, что находится по смыслу около этой темы. Первое, что бросается в глаза, – настойчивая попытка превратить посетителя в клиента. Как только входите на сайт, сразу появляется плашка связи по WhatsApp, крупный виджет которого висит на каждой странице, прыгает при скроллинге и даже в пассивном состоянии. Он очень крупный и навязчивый. Раздражает, хотя, возможно, на некоторых клиентах такое решение срабатывает. Ему помогают онлайн-консультант и всплывающая форма заказа обратного звонка. Тот вариант, когда страница контактов не особо-то и нужна. Предложения связаться атакуют со всех щелей. Сделано качественно, симпатично, но всё же они переборщили с напором, на наш взгляд: человек толком не понял, куда он попал, а уже пора кому-то звонить или писать.
Дизайн у сайта неплохой, но вполне обыкновенный по меркам WP. Каких-то изысков, интересных решений не видать, но, тем не менее, всё сделано добротно. Информация в блоках хорошо подана, отлично читается. Шрифты внятные, крупные, как и кнопки, фотографии одного размера и все достаточно приличного качества. Красные и зелёные акценты элементов придают сайту красочности, контрастности. Присутствует некоторое количество графики и анимаций, которые добавляют макетам страниц живости. Логотип простой, но очень точно передаёт направление деятельности компании.
С точки зрения качества контента сайт неплох, хотя в разделе конфигуратора рассчитываешь увидеть калькулятор стоимости, а не схему сотрудничества. Зато раздел по подборке материалов информативный – палитра наглядная, примеры работ тоже выполнены хорошо. Информации о компании достаточно, есть юридические данные, социалки, карта проезда и прочее, как и положено. В целом, сайт хорош, хотя структура подачи материалов местами нелогичная, ну и количество кнопок призыва к действию и прочих триггеров выхода на контакт с клиентами зашкаливает.
3. Монтаж кондиционеров и вентиляции
Небольшой сайт компании, занимающейся монтажом кондиционеров и вентиляции. Первое, что бросается в глаза, — анимация. В первом блоке на главной странице используется эффект пишущей машинки. Его можно реализовать с помощью плагинов для WordPress или кастомных решений.
Для общения с клиентами есть несколько контактных номеров. Есть также форма заказа обратного звонка, которая всплывает при нажатии на кнопки, разбросанные по всем страницам сайта. Можно было реализовать онлайн-чат — для WordPress доступно несколько бесплатных плагинов. Но это уже решение владельца сайта, которое зависит от того, есть ли у компании возможность держать менеджера для общения с клиентами в живом чате.
Радует адаптивный дизайн шаблона. В мобильном браузере вёрстка полностью перестраивается. Меню прячется под кнопкой «гамбургер», горизонтальное расположение карточек становится вертикальным, шрифт и элементы управления укрупняются. С сайтом на смартфоне работать так же удобно, как на десктопе. Сохраняется даже анимация — важно, что она не перегружает страницу и не влияет на скорость загрузки контента.
Общее впечатление: качественная работа с возможностями WordPress. Для сайта подобран хороший шаблон с адаптивным дизайном, анимация используется уместно, проблем со скоростью загрузки страниц нет.
4. Белорусский картофель оптом
Очень простой сайт компании, которая занимается высокотехнологичным производством продовольственного картофеля. По сути, это информационный портал, на котором можно узнать про сорта картофеля и узнать контакты для более предметного разговора.
Главная страница — статичная. На ней размещены два значимых блока. Первый — три карточки с преимуществами компании. Второй — лента новостей с тремя последними записями. Фотографий очень мало, в основном текст. Это странно, учитывая возможности WordPress. Движок по умолчанию содержит отличный менеджер файлов и галереи, а в последних версиях есть визуальный редактор Gutenberg, который позволяет собирать записи с текстами, фотографиями и видео из готовых элементов.
Шаблон не адаптивный. На смартфоне отображается та же вёрстка, что и на десктопе. Меню не перестраивается, сетка не меняется, шрифт и кнопки не увеличиваются. Из-за этого пользоваться сайтом на мобильном устройстве очень неудобно. Чтобы прочитать текст, приходится увеличивать масштаб страницы. На кнопки нажимать сложно — слишком мелкие для пальцев.
Общее впечатление: в футере написано, что компания работает с 2014 года. Есть ощущение, что сайт был сделан тогда же и с тех пор не обновлялся с точки зрения функциональности и дизайна. Страницы долго загружаются, дизайн не адаптивный, возможности оформить покупку онлайн нет — надо звонить. WordPress позволяет создавать куда более функциональные и удобные сайты даже при использовании только бесплатных шаблонов и плагинов.
5. Чудные штуки
Отличная визитка компании-организатора разнообразных детских мероприятий – научных, мастер-классов, квестов и т. д. Дизайн игривый, прекрасно сочетается с направлением деятельности. Весёлые шрифты, многоцветная гамма, которая, кстати, приятно сочетается, не выглядит беспорядочной какофонией красок. Практически все графические элементы на сайте кастомные – кнопки, триггеры, иконки, также здесь много разнообразной графики.
Да и вообще, визитка солидная, страниц много, над оформлением каждой из них проведена приличная работа, что легко просматривается. Есть даже блог, в нём не так уж много статей, но оформление ленты и публикаций отличное – при виде такого всё равно, как и что там написано, можно просто рассматривать качество дизайна. Контент тоже качественный, классно форматирован, легко читается – сразу видно, что писали копирайтеры. Живенько, с задором материалы собраны.
Сайт даёт много контактов – телефон, кучу мессенджеров и соцсетей. Отзывов пропасть, причём, они настоящие, это видно, да и перенесены с Фейсбука. По ним можно легко сложить представление о качестве услуг компании. Есть галерея фото и видео с праздников – наглядно показано качество организации мероприятий. Очень много материалов. Отдельно создали раздел с фото площадок для проведения праздников, с описаниями.
Сайт практически эталонный по всем показателям. Над ним провели серьёзную работу, явно заказывали у студии или опытного фрилансера. Самостоятельно новичок такой проект не потянет.
6. Сайт стоматологической клиники
Ещё одна приличная визитка, теперь уже на стоматологическую тему. Довольно объёмная по количеству страниц и контента, есть и блог с качественными публикациями, красиво и грамотно оформленными. Правда, сама лента смотрится немного странно – разные длины превью в десктопной версии очень бросаются в глаза, создают хаос в восприятии. Посты разбросаны как попало, не на одном уровне, остаётся много кривых дырок из пустого белого пространства.
Также странновато выглядит «стеклянное», прозрачное меню в полной версии сайта. Оно закреплено и при скроллинге сквозь него прокручиваются и видны все элементы – текст, картинки и прочее. Забавно, конечно, но больше похоже на недоработку, чем на фишку. В мобильной версии всё нормально, она и по другим параметрам выглядит более интересной, проработанной, чем ПКшкная.
Главная страница красиво оформлена, да и вообще дизайн у сайта добротный. Сочетания белых и зелёных тонов всегда классно, свежо смотрятся. Разработчики не прогадали, выбрав такую гамму, тем более, для клиники. Фотографии/иллюстрации везде качественные, шрифты тоже не подвели – нормального размера и читаемости.
Каждая услуга детально, грамотно описана. С указанием цен, что важно. О каждом враче выложена чуть ли не целая биография, есть возможность выбрать специалиста перед записью на приём. Вообще, презентация внушает доверие – смотришь и понимаешь, что контора-то не шарашкина, а вполне приличная. Нужный эффект на целевую аудиторию достигнут.
В целом, сайт хорош, несмотря на некоторые нелепости в вёрстке страниц. Главное – смотрится красиво, контент грамотный и подробно описывает всё, что может интересовать потенциального клиента клиники.
7. Цифровые системы г.Сочи
Компания оказывает услуги в сфере информационных технологий (создание локальных и корпоративных сетей, VoIP телефония, видеонаблюдение и пр.).
Шапка сайта небольшая, но информативная. В ней расположено меню, строка поиска и основной номер телефона. Детальные контактные данные вынесены на отдельную страницу. Главный экран знакомит посетителей с направлением деятельности компании и видами предоставляемых услуг.
Ниже на главной странице отдельными блоками вынесена информация о тарифах, известных клиентах, анонсы публикаций в блоге. В подвале собраны ссылки на аккаунты в соцсетях, услуги компании и политику конфиденциальности. В правом нижнем углу экрана находится кнопка «вверх», позволяющая быстро вернуться к началу страницы.
Страницы с описанием услуг содержат подробную информацию и ответы на часто задаваемые вопросы.
Виджет онлайн-чата позволяет связаться с администрацией в режиме реального времени непосредственно на сайте или в Telegram-канале.
Общее впечатление: дизайн сайта разработан в веб-студии, он адаптивный, стильный с продуманным юзабилити. Страницы сайта не перегружены лишней информацией, а наличие блога дает преимущество в продвижении сайта.
8. Провайдер CDN
Компания CDNvideo является ведущим провайдером сети доставки контента в России и СНГ. Сайт имеет русскую и английскую локализации.
Плашка вверху главной страницы содержит ссылку на одну из публикаций блога. Однако чтобы найти сам блог, необходимо спуститься в подвал. Под каждой публикацией размещена форма подписки.
В верхней части экрана находится многоуровневое меню и галерея с перечнем услуг компании, для оформления которой использованы изображения с эффектом перекатывания.
На главной странице пользователь видит краткое описание компании и ее преимущества, интерактивную карту с точками размещения узлов связи, отзывы клиентов. Кроме этого страница содержит форму обратной связи и кнопку целевого действия.
Также на сайте есть плавающие кнопки с формой обратной связи и онлайн-чатом.
В подвале находятся ссылки на служебные страницы и документацию, а также подразделы основного меню. Очевидно, компания не располагает аккаунтами в соцсетях, поскольку ссылки на них отсутствуют.
Общее впечатление: сайт имеет достойное оформление, адаптивный дизайн, понятную навигацию. Пользователи получают возможность создания личного кабинета и различные способы связи со службой технической поддержки.
9. БигПикча – новости в фотографиях
Сайт информационно-развлекательного проекта рассказывает о новостях и ярких событиях по всему миру посредством фото контента.
Главная страница весьма лаконичная, состоит из шапки, фотогалереи и подвала. В шапку вынесены категории публикаций и строка поиска. Галерея публикаций небольшая, но с помощью кнопки «Показать еще» посетители могут подгрузить больше новостей. В подвале находятся ссылки на соцсети, контакты и полезную для пользователей информацию.
В тематических разделах публикации также размещены в виде фотогалереи с постраничной навигацией. Страница конкретной публикации содержит сайдбар с виджетом вывода популярных новостей и рекламными баннерами. Под публикацией – блок с кнопками Поделиться, а также блоки с горячими темами, новостями партнеров и новыми публикациями.
Общее впечатление: сайт представляет собой классический блог со всеми присущими ему элементами. Он однозначно интересен и удобен для пользователей. Единственным упущением разработчиков является отсутствие формы подписки на новостную рассылку.
10. ИТ-компания Крок
Крок занимается внедрением ИТ-технологий в различные сферы бизнеса. Компания довольно крупная, насчитывает более 2000 сотрудников и реализует около 3000 проектов в год.
Первый экран занимает большой слайдер, в верхнем углу которого находится значок поиска и спрятанное под кнопкой меню. Ниже – блок с новостями компании, приглашение к сотрудничеству, спецпроекты Крок, ссылка на блог и форма обратной связи. В подвале размещены кнопки соцсетей, форма email-подписки и дополнительное меню.
Основные страницы сайта имеют структуру лендинга. Они состоят из отдельных блоков и имеют верхнее навигационное меню. На информационных страницах присутствует правый сайдбар с кнопками Поделиться и краткой информацией о компании.
Общее впечатление: сайт имеет приятный дизайн, вероятно разработанный на заказ профессиональными вебмастерами. Однако с навигацией разработчики несколько намудрили. Несмотря на наличие строки поиска, нескольких меню, фильтра в разделе Решения, найти нужную информацию проблематично.
11. ГидОнлайн
Сайт представляет собой онлайн-кинотеатр. Подложкой всех страниц служат рекламные баннеры, поскольку ресурс создан с целью заработка на рекламе.
Вверху главной страницы расположена строка поиска по названию фильма. Также можно осуществить быстрый поиск по нескольким критериям (новинки, премьеры, навигатор, случайный).
Под небольшой подборкой фильмов расположен перечень категорий, а также выпадающие списки для выбора фильма по актеру, режиссеру, стране и году выпуска. Основную часть страницы занимает галерея фильмов с постраничной навигацией. В правом сайдбаре расположены кнопки регистрации/входа в личный кабинет, рекомендуемые фильмы и сериалы. В подвале находятся ссылки на FAQ, контакты и информацию для правообладателей.
Каждый фильм имеет рейтинг, который формируется на основании оценки пользователей. Также зарегистрированные пользователи могут оставлять комментарии.
На странице фильма находится описание, плеер для его просмотра, блок с кнопками Поделиться, рекомендуемые к просмотру фильмы.
Общее впечатление: сайт имеет удобную систему поиска, личный кабинет пользователя позволяет добавить фильмы в избранное. Рекламные баннеры несколько отвлекают внимание от содержимого страниц, а кнопки регистрации и размещенные в подвале ссылки зрительно не выделяются на общем фоне. Однако эти недостатки не являются критическими.
Выводы
WordPress — мощный и гибкий инструмент для создания сайтов. В представленных примерах мы показали только малую часть того, что можно реализовать на этой CMS. Функциональность движка зависит от того, какие плагины к нему подключил пользователь. Если у разработчика есть опыт работы с HTML/CSS/JavaScript и PHP, то он может создавать кастомные решения для WordPress.
Внешний вид сайта во многом определяется используемым шаблоном. Можно найти достойный бесплатный вариант или купить премиум-тему. На WordPress есть редактор Gutenberg, который позволяет собирать страницы и посты из готовых элементов. Кроме того, можно установить плагин, добавляющий на движок полноценный визуальный редактор.
Адаптивность зависит от того, какой шаблон выбирает разработчик сайта. Среди бесплатных тем можно без проблем найти подходящие варианты. Обычно они подписаны как mobile-friendly или responsive. Особой настройки такие шаблоны не требует — сетка сама подстраивается под размер экрана. Впрочем, всегда можно поправить код вручную — файлы шаблона находятся в открытом доступе.
