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

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

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

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

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

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

 

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

  1. Sonymusic.com – Sony Music.
  2. Mercedes-benz.com – сайт компании.
  3. Blog.us.playstation.com – блог PlayStation.
  4. Thewaltdisneycompany.com – сайт Walt Disney.
  5. Techcrunch.com – блог о технологиях.
  6. Lifehacker.ru – популярный блог.
  7. Classicalmusicnews.ru – блог о классической музыке.
  8. Limtu.ifmo.ru – сайт академии.
  9. Blog.kupibilet.ru – туристический блог.
  10. Pozneronline.ru – блог журналиста.

 

Sony Music

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

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

 

Mercedes-Benz – сайт компании

Mercedes-benz.com – внушительный сайт одного из самых авторитетных автопроизводителей в мире. Дизайн адаптивный, контрастный. Всем известный аккуратный логотип придаёт вес проекту. В макете используется большое количество эффектов. Чёрная подложка и белые буквы выглядят строго на фоне стремительных силуэтов автомобилей. Всё это чередуется со светлыми секциями и чёрным текстом, что добавляет контраста, выразительности. Солидно смотрится. Скорость загрузки страниц высокая, хотя за счёт эффектов неспешного проявления контента возникает впечатление недостатка производительности сайта.

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

Читайте также: Как создать интернет-магазин на 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 или по почте. Футер массивный, содержит множество полезной информации и даже календарь, позволяющий выбрать материалы по дате выпуска. Тут же висит обширное облако тегов для быстрого выбора тематики для чтения. Помимо блога, есть раздел с видео, спецпроектами, интервью и прочими интересными штуками. Мощный, качественный блог, хоть и не идеальный в плане структуры и дизайна.

 

Университет ИТМО – сайт академии

Limtu.ifmo.ru – сайт подготовительных курсов для поступления в Академию ЛИМТУ. По формату является качественной визиткой с адаптивным дизайном. Выглядит опрятно, собран хорошо. Акценты оттенка зелёного освежают макет, делают его более дружелюбным, подходящим для аудитории будущих молодых специалистов. В шапке находятся контакты, ссылка ан блог и социальные каналы учреждения. Меню без изысков – простое и внятное, сдобрено эффектами проявления цветных подпунктов. При переходе в мобильную версию появляется выпадающее меню со множеством ссылок на общую информацию об университете и кафедрах. Удобно.

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

 

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

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

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

 

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

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

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

 

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

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

Хостинг от Bluehost
Создать сайт на WordPress + Bluehostустановка CMS в 1-клик на хостинг ↵

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

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

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

  • Автор:

no avatar