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

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

    Дмитрий Луценко
  • Обновлено:
    2024-03-04
  • Просмотры:
    420
  • Отзывы:
    0
  • Рейтинг: 4.9
WordPress – самая популярная CMS в мире. Несмотря на то, что система разрабатывалась как блоговый движок, умеет работать с любыми типами сайтов, в том числе со сложными интернет-магазинами, форумами, СМИ и пр. Плюс, отлично справляется с малостраничниками: визитки, лендинги, портфолио. Такая гибкость достигается за счёт десятков тысяч плагинов и шаблонов. Это простая и удобная система. Полностью бесплатная, подходит для новичков и профи.

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

WordPress — движок, прежде всего, для блогов и новостных порталов. Из коробки функциональность выстроена как раз под такие типы сайтов. WordPress также подходит для создания сайтов под монетизацию. На его базе работает множество авторитетных ресурсов, платформа пользуется популярностью во всём мире, в том числе и в Ру-сегменте. Огромное количество бесплатных шаблонов WordPress, премиум-темы обычно стоят приемлемых денег. Уникальный дизайн получить легко, купив качественный шаблон примерно за $50-60, а вот радикально редактировать его непросто — нужны знания PHP, HTML и CSS.

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

Система может работать на слабом «железе», но по мере роста посещаемости потребление ресурсов сервера будет расти кратно. Поэтому хостинг нужно подбирать с особой тщательностью. Наш список лучших хостеров. Сайты на WordPress отлично продвигаются в поиске (при качественной настройке технических параметров). Работы фрилансеров по этой CMS стоят сравнительно недорого ввиду распространённости и простоты кода. Это доступный во всех отношениях движок.

Давайте знакомиться с примерами готовых сайтов.

 

Примеры 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 по основному профилю.

Единственный нюанс – сильно переделан экран авторизации, так как у PlayStation используются сквозные пользовательские профили. Тема playstation-2018 написана по индивидуальному заказу. Судя по названию – работает с 2018 года. Прямо в коде можно найти отчёт по времени генерации страницы (чтобы разработчикам было удобнее заниматься отладкой).

 

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

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

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

Желающим погрузиться глубже сразу расскажем: переработана структура хранения медиафайлов (они вынесены на CDN-сервис), тема разработана с нуля (имеет название thewaltdisneycompany-theme), для управления данными вместо привычных в России CRM используется платформа управления данными и конфиденциальностью OneTrust (интегрируется с WP за счёт плагина).

 

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

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

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

Немного технических деталей: используется кастомная тема techcrunch-2017, интегрированы скрипты платформы Piano (персонализация, аналитика и т.п.), плагин подбора похожих материалов ElasticPress, за оптимизацию отвечает Yoast SEO Premium. В футере сохранён копирайт WordPress.

 

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

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

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

Для жаждущих технических деталей: интерфейс сайта реализован на JavaScript, то есть при попытке парсинга вы получите буквально 50-60 строк кода, весь остальной контент грузится в фоне прямо в браузере. Плюс, в наличии есть API. Всё это лишний раз доказывает, что технических ограничений для WordPress нет.

 

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

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

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

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

 

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

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

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

Детали для технарей: используется шаблонный дизайн (тема Mura от 3FortyMedia), плагин Yoast SEO (без премиум-подписки), плюс, ещё несколько мелких дополнений (для реализации Ajax-подгрузки и для открытия изображений во всплывающих окнах). По факту – это стандартный блог на WordPress.

 

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

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

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

Технические нюансы: используется популярная премиум тема Sahifa (от TieLabs, около 30 тыс. проданных копий на ThemeForest) и никаких специальных плагинов (то есть фактически «голый» WordPress).

 

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

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

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

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

Технические детали: используется премиум-тема для онлайн-журналов SimpleMag (относительно недорогая, много продаж на ThemeForest, разработчик ThemesIndep, хорошо документирована), плагин Yoast SEO и несколько других мелких расширений.

 

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

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

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

Под капотом: плагин кеширования W3 Total Cache, Youst SEO, тема, разработанная по индивидуальному заказу.

 

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

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

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

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

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

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

  • Автор:

no avatar