Примеры сайтов на WordPress (Вордпрес)

WordPress – самая популярная CMS в мире и блоговый движок, в частности. За счёт сотен тысяч плагинов и шаблонов вытаскивает любой тип сайтов от визиток до форумов и порталов. Стабильная, быстрая система, ставшая входной точкой в мир разработки сайтов для миллионов разработчиков. Относительно простая, бесплатная, чем и привлекает новичков.Мы подготовили небольшую подборку готовых проектов, чтобы вы смогли оценить возможности системы в различных сценариях применения.

WordPress — движок, прежде всего, о блогах. Из коробки функциональность выстроена под их комфортное обслуживание. WordPress хорошо подходит для создания сайтов под монетизацию. С его помощью создано множество авторитетных ресурсов, платформа пользуется популярностью и у новичков, и у гуру веб-разработки с одинаковым успехом. Море бесплатных шаблонов WordPress, а те, что за деньги, обычно стоят сравнительно недорого. Уникальный дизайн получить легко, купив качественный шаблон примерно за $50, а вот радикально редактировать его непросто — нужны знания PHP.

Блоги на WordPress имеют характерные черты, но далеко не все. В других сценариях определить принадлежность сайта к движку почти невозможно — шаблоны очень разные, по ним ничего понять нельзя. Опытные пользователи могут разве что узнать характерный дизайн виджетов и плагинов для вывода контента, если работали с ними. Система сравнительно требовательна к ресурсам хостинга, хорошо поддаётся SEO-оптимизации. Работы фрилансеров по ней стоят сравнительно недорого ввиду распространённости. Доступный во всех отношениях движок. Давайте знакомиться с примерами готовых сайтов.

Примеры WordPress-сайтов:

1. Sonymusic.com — Sony Music.
2. Blog.us.playstation.com — блог PlayStation.
3. Thewaltdisneycompany.com — сайт Walt Disney.
4. Techcrunch.com — блог о технологиях.
5. Lifehacker.ru — популярный блог.
6. Classicalmusicnews.ru — блог о классической музыке.
7. Blog.kupibilet.ru — туристический блог.
8. Pozneronline.ru — блог журналиста.
9. Nakonu.com — информационно-развлекательный сайт.
10. Edna.ru — цифровые каналы коммуникации.

Sony Music

Sonymusic.com — блог музыкального подразделения Sony. Структура дизайна узнаваемая, примерно так выглядят многие блоги на движке. Чёрно-красные мотивы передают атмосферу сцены, загадочности и лоска. Атмосферные фотографии артистов в слайдере и логотипы брендов дополняют образ — всё выглядит так, как нужно. Логотип «Sony» играет не последнюю роль — смотрится внушительно, аккуратно. Шрифты выразительные, хорошо читаются, используется много капслока. Меню простое, элегантное, навигация двухуровневая, понятная. Используются несложные эффекты смены цвета заголовков при наведении.

Сайдбар содержит ссылки на полезные материалы и FAQ. Их компоновка выглядит немного сумбурной. Блоговая лента оформлена обыкновенно по меркам движка. Крупные заголовки бросаются в глаза, затенение кратких описаний материалов теряется на белом фоне — смотрится не так уж красиво, сплошное полотно из букв мешается в кашу, не помешали бы более отчётливые разделители публикаций. Качество статей, конечно же, высокое. Оформление футера простейшее. Помимо социалок в него поместили множество ссылок контактов и юридической документации бренда. Блог минималистичный, соответствует духу Sony. Технически он простой, подобный сайт сможет создать и новичок.

Читайте также: Как создать интернет-магазин на WordPress: пошаговая инструкция.

PlayStation — блог игровой платформы

Blog.us.playstation.com — официальный блог PlayStation, игрового бренда Sony. Живёт на поддомене основного сайта платформы, служит исключительно для подачи игровых новостей, анонсов, обзоров и всего в таком духе. Дизайн отличный — живой, современный, адаптивный. Сочный широкоформатный хедер переходит сразу в блог, изобилующий красочными превьюшками материалов. Шрифты внятные, выглядят и читаются хорошо. Блог мультиязычный, имеет 10 локализаций, включая русскую.

Навигация удобная, очевидная. Она отражает категории новостей по типам игровых платформ. Для оставления комментариев в постах необходима регистрация. Есть быстрый поиск по новостям. Оформление публикаций ожидаемо качественное, сопровождается лентой свежий новостей для быстрого перевода, блоками социалок и комментариев. Футер красиво оформлен, содержит юридическую и контактную информацию. Блог приятный во всех отношениях, наглядно демонстрирует возможности WordPress по основному профилю.

Walt Disney — сайт компании

Thewaltdisneycompany.com — официальный сайт американского медиа-гиганта. Дизайн смотрится настолько органично, удачно, что взгляду не за что зацепиться: ничего не выбивается из общей концепции, не напрягает внимание. Идеально подобранные цвета, компоновка элементов, эффекты, шрифты и прочее. Эталон сайтостроения на WP. Структура макетов страниц сложная, но легко воспринимается. Глобальный поиск на виду — он здесь очень кстати. Страницы загружаются довольно быстро, учитывая объём контента, количество используемых изображений и анимационных эффектов.

Сразу под хедером расположена информация о курсе акций компании, а в разделе для инвесторов можно скачать отчёты о прибыли за периоды и прочие документы. Это корпоративный сайт, который, скорее, информирует инвесторов и партнёров о положении дел, чем что-то рекламирует. Блог с новостями является лишь одним из разделов этого мощного проекта. Выглядит и читается он прекрасно. Даже страница контактов выглядит очень насыщенно. Есть раздел и для трудоустройства в компанию — да и вообще, всё есть, что может быть. Функционально, по части контента и с дизайнерской точки зрения это топовый сайт на WP.

Techcrunch — блог о технологиях

Techcrunch.com — авторитетный зарубежный блог о технологиях, запущенный в 2013 году Verizon. По уровню реализации проект ощущается на уровне NY Times, The Verge и прочих мощнейших новостных сайтов. Дизайн красивый — белое пространство с зелёными акцентами и выразительно поданными превьюшками публикаций. Меню вертикальное, выглядит просто и классно. Структура у блога сложная, контента море и весь он красиво подан, грамотно отсортирован по категориям. Шрифты в меру крупные, читаются внятно, выглядят приятно: читать можно долго, глаза не устают. Регистрация в блоге даёт бонусы в виде отсутствия рекламных баннеров, ленты эксклюзивов, режима быстрого чтения и много чего ещё.

Блог предлагает подписку на рассылку ежедневных и еженедельных материалов. Подписавшись, посетитель будет в курсе всего, что происходит в мире технологий, без необходимости мониторить другие ресурсы из ниши. Гаджеты, мобильные приложения, наука, софт, обзоры, игры, новости, видео, аудио — здесь есть всё, можно сутками читать и смотреть. Качество публикаций отличное, оформление статей приятное, даже блок социалок выглядит свежо и симпатично. Скорость работы блога высокая — оптимизация налицо. Интересно, что при дочитывании материала (скроллинге к футеру) вас автоматически вернут к просмотру ленты новостей. Эффект нон-стоп чтения, так сказать, погружения в статьи. Отличный блог.

Lifehacker — популярный блог

Lifehacker.ru — известный отечественный блог с огромным количеством разделов публикаций. Что-то вроде популярной энциклопедии на тему новостей, что и как нужно делать и прочего. Лайфхаки, советы, познавательные факты — можно читать сутками, занимая себя всё новыми темами. Дизайн адаптивный, дружелюбный. Меню навигации понятное, оформлено просто и аккуратно, одноуровневое. Шапка содержит ссылку на раздел новостей и свежих публикаций, чтобы посетители долго не искали, чем себя развлечь. Глобальный поиск по сайту работает хорошо. Есть личный кабинет, мобильное приложение и возможность подписки на рассылку.

Онлайн-журнал (назовём блог так) рассчитан на широкую аудиторию. Несмотря их на огромное количество, статьи довольно подробные — действительно могут быть полезными. Структура блоговой ленты классическая. Яркие заголовки, лаконичные описания, качественные миниатюры, счётчик комментариев и просмотров, указание категории материала (даже партнёрские, то есть рекламные статьи, помечают). Статьи изобилуют иллюстрациями и видео по контексту, отлично написаны и форматированы. Читать приятно и удобно. Блок социалок при скроллинге прилипает к шапке, его можно убрать — наглядно и удобно. Для комментирования можно быстро авторизоваться через соцсеть. Отличный пример цветущего блога на WordPress.

ClassicalMusicNews — блог о классической музыке

Classicalmusicnews.ru — бородатый (существует с 2006 года) и качественный блог, рассчитанный на аудиторию поклонников классической музыки и культуры вообще. Дизайн чистый, немного даже пресный, адаптивный. Красные акценты ассоциируются с занавесом сцены, созвучны тематике. Блоговая лента на главной странице оформлена блоками из колонок, что выглядит немного сумбурно — много мелких элементов на экране. Меню навигации сдобрено эффектов разворачивания подменю, имеет довольно сложную структуру, информативное. В мобильной версии новостная лента выглядит не очень красиво: мелкие миниатюры, слабо выделяющийся стиль заголовков, много пустого белого пространства.

Качество материалов отличное, но местами не хватает изображений для разбавления хорошо форматированного текста. Система комментирования удобная, можно авторизоваться через соцсеть и сразу отписаться. Есть возможность подписки на рассылку в Telegram или по почте. Футер массивный, содержит множество полезной информации и даже календарь, позволяющий выбрать материалы по дате выпуска. Тут же висит обширное облако тегов для быстрого выбора тематики для чтения. Помимо блога, есть раздел с видео, спецпроектами, интервью и прочими интересными штуками. Мощный, качественный блог, хоть и не идеальный в плане структуры и дизайна.

Kupibilet — туристический блог

Blog.kupibilet.ru — блог, выступающий дополнением к сайту по продаже авиабилетов и бронирования отелей на курортах. Служит для поддержки основного бизнеса, сбора поисковых запросов и предоставления общей туристической информации для потенциальных клиентов. Блог обширный, хоть и висит на поддомене основного ресурса, его можно рассматривать как полноценный туристический сайт. Дизайн адаптивный, приятный, контрастный за счёт вкраплений красных акцентов элементов, выглядит чисто и даже празднично, что хорошо сочетается с настроением желающих поехать в отпуск.

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

Познер Online — блог журналиста

Pozneronline.ru — блог известного журналиста, писателя, радио- и телеведущего, Владимира Познера. Имеет английскую локализацию. Дизайн отличный: серьёзный, внятный и контрастный. В хедере красуется содержательное меню и блок ссылок на последние материалы. Туту же можно найти ссылки на социальные каналы автора, обратную связь и полезную информацию общего плана. Дальше идут блоки из различных разделов публикаций. Венчает всё это лаконичный футер со знаковыми видео и краткой информацией о проекте. Структура макета главной страницы явно удачная: информативная и удобная.

Возможность регистрации и комментирования записей отсутствует. В блоге много видео: интервью, записи передач, фильмы. Текстовые материалы имеют ожидаемо высокое качество, они информативны, выражают точку зрения автора по злободневным темам либо цитируют его высказывания по разным вопросам. Отдельным разделом выведена афиша мероприятий с участием Познера. Можно задать вопрос автору через специальную форму — вероятно, таким образом редакция собирает идеи для тем материалов, отбирая наиболее интересные. Хороший авторский блог во всех отношениях.

Другие новости

Nakonu.com — информационно-развлекательный сайт, на котором можно найти публикации в различных форматах (текст, фото, видео). Они сгруппированы по тематикам, которые размещены в меню сайта. Также в шапке находится строка поиска, значки соцсетей и RSS-ленты.

В первом блоке расположен слайдер, содержащий ссылки на отдельные публикации. Ниже часть страницы делится на основную область с анонсами последних новостей и боковую панель с рекламными объявлениями. За ними следуют блоки, соответствующие заявленным тематикам. Страницы категорий и отдельных новостей имеют схожую структуру – основная область и правый сайдбар с рекламой. Установленный виджет позволяет поделиться новостью или подписаться на страницу сайта в FB.

Контент на сайте занимательный, но не уникальный, собран из различных источников. С первого взгляда понятно, что сайт создан с целью заработка на рекламе. Рекламные баннеры находятся всюду – на первом экране, между блоками, сайдбаре, всплывающих и выезжающих окнах, что выглядит навязчиво и очень раздражает. Отсутствует характерная для аналогичных сайтов возможность комментирования.

Цифровые каналы коммуникации

Edna.ru — платформа, позволяющая подключить и собрать в едином рабочем пространстве различные цифровые каналы коммуникации для построения диалога с клиентами. Поэтому целевой аудиторией сайта являются представители среднего и крупного бизнеса. В шапке сайта закреплено многоуровневое меню и ссылка на форму обратной связи. Главный экран презентует сайт и также содержит ссылку на отправку заявки. Ниже расположены блоки с принципами работы платформы, преимуществами ее использования, компонентами, слайдер, демонстрирующий интерфейс кабинета пользователя, галерея с логотипами известных клиентов. Внизу страницы находится форма обратной связи для получения консультации, в подвале продублировано меню.

Сайт позволяет детально ознакомиться с каждым каналом коммуникации и инструментами для их интеграции, посмотреть кейсы действующих клиентов, найти ответы на интересующие вопросы в базе знаний. Дизайн сайта выполнен в корпоративном стиле, но для оформления использованы стоковые изображения. На сайте отсутствует информация о ценовой политике компании, что обуславливает определенные неудобства для потенциальных клиентов. Кстати, контакты компании «спрятаны» под ссылкой в футере.

Подводим итоги

WordPress используют для создания своих сайтов компании с мировым авторитетом, известные личности и редакции популярных изданий. При столь огромном ассортименте движков такой выбор говорит о большом доверии, проявляемом к этой системе. Её любят не только за бесплатность, но и за качество, большое количество возможностей, получаемых с многочисленных плагинов и шаблонов. Мощная экосистема, высокая степень изученности, профильные тарифы на хостингах — всё этого говорит в пользу WP.

установка CMS в 1-клик на хостинг ↵

Быстрый, простой и безопасный хостинг с автоматической установкой WordPress. Включена БЕСПЛАТНАЯ регистрация домена на 1 год + SSL сертификат в подарок!
Цена: от $2.95

* Bluehost — надежный хостинг-провайдер, обслуживает более 2 млн. сайтов, официально рекомендуемый компаниями WordPress, PrestaShop, WooCoomerce и др.!

Стоит ли использовать движок? Да, конечно. Но он сложнее в освоении, чем об этом принято говорить. На фоне других CMS прост. В целом же, — нет. Необходимы хотя бы базовые знания HTML/CSS/PHP для действительно плодотворной работы. Облегчить работу с WordPress в какой-то степени поможет плагин Elementor – визуальный “drag-n-drop” конструктор страниц для новичков. Знание плагинов, опыт веб-мастеринга — всё это желательно для достижения успеха. Любой конструктор сайтов проще и приятнее в обращении. Обычно перед новичками стоит выбор между одним из них и WP либо Joomla. Выбор предпочтительного варианта зависит от текущего уровня навыков и характера/сложности задач.

• Автор: Дмитрий Луценко

Источник: uguide.ru