WordPress — движок, прежде всего, для блогов и новостных порталов. Из коробки функциональность выстроена как раз под такие типы сайтов. WordPress также подходит для создания сайтов под монетизацию (читайте наш гайд по созданию сайтов на Вордпресс). На его базе работает множество авторитетных ресурсов, платформа пользуется популярностью во всём мире, в том числе и в Ру-сегменте. Огромное количество бесплатных шаблонов WordPress, премиум-темы обычно стоят приемлемых денег. Уникальный дизайн получить легко, купив качественный шаблон примерно за $50-60, а вот радикально редактировать его непросто — нужны знания PHP, HTML и CSS.
Блоги на WordPress имеют характерные черты, но далеко не всегда их можно определить безошибочно. В других сценариях определить принадлежность сайта к движку почти невозможно — шаблоны очень разные, по ним ничего понять нельзя.
Система может работать на слабом «железе», то есть на тарифах общего хостинга, но по мере роста посещаемости потребление ресурсов сервера будет расти кратно. Поэтому хостинг нужно подбирать с особой тщательностью (см. наш список лучших хостеров). Сайты на WordPress отлично продвигаются в поиске (при качественной настройке технических параметров). Работы фрилансеров по этой CMS стоят сравнительно недорого ввиду распространённости и простоты кода. Это доступный во всех отношениях движок.
Давайте знакомиться с примерами готовых сайтов.
Примеры WordPress-сайтов:
Sony Music
Sonymusic.com — блог музыкального подразделения Sony. Структура дизайна узнаваемая, примерно так выглядят многие блоги на движке. Чисто технически внешний вид уже немного устарел, так как сейчас принято сопровождать все записи новостей/блога медиаматериалами – картинками превью. Но в реальности это всё на любителя. Плюс, тратится много ресурсов сервера на загрузку.
Касательно оформления: используются чёрно-красные мотивы, они передают атмосферу сцены, загадочности и лоска. Атмосферные фотографии артистов в слайдере и логотипы брендов дополняют образ — всё выглядит так, как нужно. Логотип «Sony» играет не последнюю роль — смотрится внушительно, аккуратно. Шрифты выразительные, хорошо читаются, используется много капслока. Меню простое, элегантное, навигация двухуровневая, понятная. Применяются несложные эффекты смены цвета заголовков при наведении.
Сайдбар содержит ссылки на полезные материалы и FAQ. Их компоновка выглядит немного сумбурной. Блоговая лента оформлена обыкновенно по меркам движка. Крупные заголовки бросаются в глаза, затенение кратких описаний материалов теряется на белом фоне — смотрится не так уж красиво, сплошное полотно из букв мешается в кашу, не помешали бы более отчётливые разделители публикаций. Качество статей, конечно же, высокое. Оформление футера простейшее. Помимо социалок в него поместили множество ссылок, контактов и юридической документации бренда. Блог минималистичный, соответствует духу Sony. Технически он простой, подобный сайт сможет создать даже новичок.
Читайте также: Как создать интернет-магазин на WordPress: пошаговая инструкция.
PlayStation — блог игровой платформы
Blog.us.playstation.com — официальный блог PlayStation, игрового бренда Sony. Живёт на поддомене основного сайта платформы, служит исключительно для подачи игровых новостей, анонсов, обзоров и всего в таком духе. Дизайн отличный — живой, современный, адаптивный. Сочный широкоформатный хедер переходит сразу в блог, изобилующий красочными превьюшками материалов. Шрифты внятные, выглядят и читаются хорошо. Блог мультиязычный, имеет 10 локализаций, включая русскую. Везде разный контент.
Навигация удобная и очевидная. Она отражает категории новостей по типам игровых платформ. Для оставления комментариев в постах необходима регистрация (через сервис собственных учётных записей Sony PlayStation). Есть быстрый поиск по новостям. Оформление публикаций ожидаемо качественное, сопровождается лентой свежих новостей, блоками социалок и комментариев. Футер красиво оформлен, содержит юридическую и контактную информацию. Блог приятный во всех отношениях, наглядно демонстрирует возможности WordPress по основному профилю.
Единственный нюанс – сильно переделаны стандартные пути. Никаких каталогов типа «wp-content» здесь не найти. Тема playstation-2018 написана по индивидуальному заказу, доработана для поддержки тёмного режима в браузерах. Судя по названию – создана в 2018 году. Прямо в коде можно найти отчёт по времени генерации страницы (чтобы разработчикам было удобнее заниматься отладкой).
Walt Disney — сайт компании
Thewaltdisneycompany.com — официальный сайт американского медиагиганта. Дизайн смотрится настолько органично и удачно, что взгляду не за что зацепиться: ничего не выбивается из общей концепции, не напрягает внимание. Идеально подобранные цвета, компоновка элементов, эффекты, шрифты и прочее. Эталон сайтостроения на WP. Структура макетов страниц сложная, но легко воспринимается. Глобальный поиск на виду — он здесь очень кстати. Страницы загружаются довольно быстро, учитывая объём контента, количество используемых изображений и анимационных эффектов.
Сразу под хедером расположена информация о курсе акций компании, а в разделе для инвесторов можно скачать отчёты о прибыли за периоды и прочие документы. Это полноценный корпоративный сайт, который, скорее, информирует инвесторов и партнёров о положении дел, чем что-то рекламирует. Блог с новостями является лишь одним из разделов этого мощного проекта. Выглядит и читается он прекрасно. Даже страница контактов выглядит весьма насыщенно. Есть раздел и для трудоустройства в компанию — да и вообще, всё есть, что может быть. Функционально, по части контента и с дизайнерской точки зрения это топовый сайт на WP.
Желающим погрузиться глубже сразу расскажем: переработана структура хранения медиафайлов (они вынесены на CDN-сервис), тема разработана с нуля (имеет название thewaltdisneycompany-theme), для управления данными вместо привычных в России CRM используется платформа управления данными и конфиденциальностью OneTrust (интегрируется с WP за счёт плагина).
Techcrunch — блог о технологиях
Techcrunch.com — авторитетный зарубежный блог о технологиях, запущенный в 2013 году Verizon. По уровню реализации проект ощущается на уровне NY Times, The Verge и прочих мощнейших новостных сайтов. Дизайн красивый — белое пространство с зелёными акцентами и выразительно поданными превьюшками публикаций. Меню горизонтальное, дополненное вертикальным выпадающим (будет интересно в первую очередь для мобильных гаджетов), выглядит просто и классно. Структура у блога сложная, контента море и весь он красиво подан, грамотно отсортирован по категориям. Шрифты в меру крупные, читаются внятно, выглядят приятно: читать можно долго, глаза не устают. Регистрация в блоге даёт бонусы в виде отсутствия рекламных баннеров, ленты эксклюзивов, режима быстрого чтения и много чего ещё.
Блог предлагает подписку на рассылку ежедневных и еженедельных материалов. Подписавшись, посетитель будет в курсе всего, что происходит в мире технологий, без необходимости мониторить другие ресурсы из ниши. Гаджеты, мобильные приложения, наука, софт, обзоры, игры, новости, видео, аудио — здесь есть всё, можно сутками читать и смотреть. Качество публикаций отличное, оформление статей приятное, даже блок социалок выглядит свежо и симпатично. Скорость работы блога высокая — оптимизация налицо. Интересно, что при дочитывании материала (скроллинге к футеру) вам автоматически подгрузят следующую запись. Эффект нон-стоп чтения, так сказать, для полного погружения в статьи. Отличный блог.
Немного технических деталей: используется кастомная тема TC-24 (в названии явно год релиза, так как прошлая датировалась 2017-ым), интегрированы скрипты нескольких систем аналитики, за оптимизацию отвечает Yoast SEO Premium. В коде можно найти текущую версию движка – WordPress 6.7.2.
Lifehacker — популярный блог
Lifehacker.ru — известный отечественный блог с огромным количеством разделов публикаций. Что-то вроде популярной энциклопедии на тему новостей, что и как нужно делать и прочего. Лайфхаки, советы, познавательные факты — можно читать сутками, занимая себя всё новыми темами. Дизайн адаптивный, дружелюбный. Меню навигации понятное, оформлено просто и аккуратно, двухуровневое. Шапка содержит ссылку на раздел оригинальных сервисов (онлайн-калькуляторы, мини-игры, специальные лонгриды и т.п.). Глобальный поиск по сайту работает хорошо. Есть личный кабинет и возможность подписки на рассылку.
Онлайн-журнал (назовём блог так) рассчитан на широкую аудиторию. Несмотря на огромное количество, статьи довольно подробные — действительно могут быть полезными. Структура блоговой ленты классическая. Яркие заголовки, лаконичные описания, качественные миниатюры, счётчик комментариев и просмотров, указание категории материала (даже партнёрские, то есть рекламные статьи, помечают). Статьи изобилуют иллюстрациями и видео по контексту, отлично написаны и форматированы. Читать приятно и удобно. Шапка и рекламные объявления в сайдбаре при скроллинге фиксируются. Для комментирования можно быстро авторизоваться через соцсеть. Отличный пример цветущего блога на WordPress.
Для жаждущих технических деталей: интерфейс сайта реализован на JavaScript, то есть при попытке парсинга вы получите буквально 50-60 строк кода, весь остальной контент грузится в фоне прямо в браузере. Всё это лишний раз доказывает, что технических ограничений для WordPress нет. Тема готовая – Ringo (своего рода премиум-конструктор с возможностью настройки всего, что только может прийти в голову).
NGENIX – сайт крупного холдинга, отвечающего за защиту web-сервисов
Ngenix.net — это очень качественно и профессионально сделанный корпоративный сайт. Компания предоставляет услуги CDN, очистки трафика, защитой от DDoS, оптимизацией изображений и т.п. Тема явно разрабатывалась на заказ, называется Ngenix-reboot (это точно уже не первая версия). Продумано всё до мелочей и закрыто комплексно: бизнес-информация размещается на стандартных страницах (на них много кастомных элементов и инфографики), а в дополнение к ним есть корпоративный блог (тут всё по дефолту). Как бы это вызывающе не звучало, но компания, предлагающая услуги безопасности и защиты от ботов, выбрала в качестве CMS бесплатный WordPress.
Сайт, судя по коду, интегрирован с CRM Битрикс24 (в первую очередь это формы для сбора лидов и заказа звонка), страницы кеширует с помощью плагина Total Cache. За создание SEO-атрибутов (мета-тегов) отвечает плагин от Rank Math (Rank Math WordPress SEO плагин).
Дизайн смотрится органично и сбалансированно. Основные цвета: белый и синий, акцент – красный. Особого внимания стоит многоуровневое меню со всплывающими пунктами при наведении курсора.
Cgood – корпоративный сайт и официальный блог компании Цифровые Системы
Cgood.ru — это типичный сайт-визитка с описанием услуг (презентацией ассортимента и преимуществ сотрудничества), предоставлением контактов и с площадкой для сбора поискового трафика (за счёт корпоративного блога с новостями и тематическим контентом).
И основные страницы сайта, и блог сделаны весьма качественно несмотря на то, что сайт откровенно рассчитан на локальную аудиторию, из города Сочи. Всё самое важное и интересное вынесено в верхнее меню – телефон для связи (кликабельный), форма поиска, вызов формы обратной связи, ссылки на описание компании, сертификаты, блог и т.п.
Структура бизнес-страниц во многом напоминает лендинги, так как содержимое собрано из знакомых многим секций (как в онлайн-конструкторах), с определённой периодичностью встречаются призывы к целевым действиям (открыть демоверсию личного кабинета, скачать официальное мобильное приложение и прочее). Такой эффект достигается здесь за счёт премиум-версии конструктора Elementor.
Шаблон для блога делать с нуля не стали, задействовали премиум-тему Koira от CMSSuperHeroes. Она отлично сочетается с Elementor. Все недостающие элементы, например, блоки похожих материалов, вывод новостей (здесь это отдельный тип контента), реализованы за счёт возможностей пейдж-билдера.
Блог Projecto – инфораздел для сбора SEO-трафика по тематике
Projecto.pro/blog — это пример того, как WordPress может работать в качестве подраздела основного сайта. Projecto – это облачный сервис для управления проектами (онлайн таск-трекер или BPM-система – кому как удобнее), у него своя кодовая база и сайт не имеет CMS. Но на хостинге в отдельной директории доустановлен WordPress, который отвечает только за обслуживание корпоративного блога (собирает трафик по SEO-запросам, связанным с ведением проектов).
Тема оформления блога максимально простая и строго соответствует основному корпоративному стилю (синий + белый). Строится на базе шаблона Allium от TemplateLens (с фреймворком Bootstrap). Комментарии отключены, система тегов не задействована. Никаких посторонних виджетов и блоков. Футер и шапка намеренно реализованы сквозными с основным сайтом, чтобы пробросить с них ссылки на страницы с описанием ключевого продукта, предоставить актуальные контакты и реквизиты.
Мета-теги выводит привычный многим Yoast SEO plugin, в коде присутствуют счётчики Яндекс.Метрики, Top.Mail.Ru и Аналитики Google (что логично).
ClassicalMusicNews — блог о классической музыке
Classicalmusicnews.ru — бородатый (существует с 2006 года) и качественный блог, рассчитанный на аудиторию поклонников классической музыки и культуры вообще. Дизайн чистый, немного даже пресный, адаптивный. Красные акценты ассоциируются с занавесом сцены, созвучны тематике. Блоговая лента на главной странице оформлена блоками из колонок, что выглядит немного сумбурно — много мелких элементов на экране. Меню навигации сдобрено эффектов разворачивания подменю, имеет довольно сложную структуру, информативное. В мобильной версии новостная лента выглядит не очень красиво: мелкие миниатюры, слабо выделяющийся стиль заголовков, много пустого белого пространства.
Качество материалов отличное, но местами не хватает изображений для разбавления хорошо форматированного текста. Система комментирования стандартная (та, что поставляется с WordPress по дефолту). Есть возможность подписки на рассылку в Telegram или по почте. Футер массивный, содержит множество полезной информации и даже календарь, позволяющий выбрать материалы по дате выпуска. Тут же висит обширное облако тегов для быстрого выбора тематики для чтения. Помимо блога, есть раздел с видео, спецпроектами, интервью и прочими интересными штуками. Мощный, качественный блог, хоть и не идеальный в плане структуры и дизайна.
В основе шаблонная тема Magazine Pro от разработчика StudioPress. Можно заметить, что даже крупные издательства не брезгуют покупкой шаблонов. За SEO отвечает Yoast SEO Premium.
Kupibilet — туристический блог
Kupibilet.ru/blog — блог, выступающий дополнением к сайту по продаже авиабилетов и бронирования отелей на курортах. Служит для поддержки основного бизнеса, сбора поисковых запросов и предоставления общей туристической информации для потенциальных клиентов. Блог обширный, его можно рассматривать как полноценный туристический сайт. Дизайн адаптивный, приятный, выглядит чисто и даже празднично, что хорошо сочетается с настроением желающих поехать в отпуск.
Новостная лента выполнена тремя колонками, но за счёт разной длины описаний материалов выстроена неровно, это сделано намеренно. Публикации подгружаются автоматически – по мере прокрутки страницы. Сайдбар отсутствует. Меню категорий спрятано во всплывающей панели, которая открывается при клике на иконке поиска. Навигации как таковой нет, если не считать хлебные крошки, всё внимание специально уделено ключевым ссылкам – страницам, посвящённым поиску туров и отелей.
Детали для технарей: используется шаблонный дизайн (тема Mura от 3FortyMedia), плагин Yoast SEO (без премиум-подписки), плюс, ещё несколько мелких дополнений (для реализации Ajax-подгрузки и для открытия изображений во всплывающих окнах). По факту – это стандартный блог на WordPress.
Познер Online — блог журналиста
Pozneronline.ru — блог известного журналиста, писателя, радио- и телеведущего, Владимира Познера. Имеет английскую локализацию (по факту это отдельная категория контента). Дизайн отличный: серьёзный, внятный и контрастный. В хедере красуется содержательное меню и блок ссылок на последние материалы. Тут же можно найти ссылки на социальные каналы автора, обратную связь и полезную информацию общего плана. Дальше идут блоки из различных разделов публикаций. Венчает всё это лаконичный футер со знаковыми видео и краткой информацией о проекте. Структура макета главной страницы явно удачная: информативная и удобная.
Возможность регистрации и комментирования записей отсутствует. В блоге много видео: интервью, записи передач, фильмы. Текстовые материалы имеют ожидаемо высокое качество, они информативны, выражают точку зрения автора по злободневным темам либо цитируют его высказывания по разным вопросам. Отдельным разделом выведена афиша мероприятий с участием Познера. Можно задать вопрос автору через специальную форму — вероятно, таким образом редакция собирает идеи для тем материалов, отбирая наиболее интересные. Хороший авторский блог во всех отношениях.
Технические нюансы: используется популярная премиум тема Sahifa (от TieLabs, около 30 тыс. проданных копий на ThemeForest) и никаких специальных плагинов (то есть фактически «голый» WordPress).
Цифровые каналы коммуникации
Edna.ru — платформа, позволяющая подключить и собрать в едином рабочем пространстве различные цифровые каналы коммуникации для построения диалога с клиентами. Поэтому целевой аудиторией сайта являются представители среднего и крупного бизнеса. В шапке сайта закреплено многоуровневое меню и ссылка на форму обратной связи. Главный экран презентует сайт и также содержит ссылку на отправку заявки (как на большинстве лендингов). Ниже расположены блоки с принципами работы платформы, преимуществами ее использования, компонентами, слайдер, демонстрирующий интерфейс кабинета пользователя, галерея с логотипами известных клиентов. Внизу страницы находится форма обратной связи для получения консультации, в подвале продублировано меню.
Сайт позволяет детально ознакомиться с каждым каналом коммуникации и инструментами для их интеграции, посмотреть кейсы действующих клиентов, найти ответы на интересующие вопросы в базе знаний. Дизайн сайта выполнен в корпоративном стиле, но для оформления использованы стоковые изображения. На сайте отсутствует информация о ценовой политике компании, что обуславливает определенные неудобства для потенциальных клиентов. Кстати, контакты компании «спрятаны» под ссылкой в футере.
Под капотом: плагин кеширования W3 Total Cache, Youst SEO, тема, разработанная по индивидуальному заказу.
Подводим итоги
WordPress используют для создания своих сайтов компании с мировым авторитетом, известные личности и редакции популярных изданий. Необязательно разрабатывать дизайн с нуля, вполне можно купить качественный шаблон и настроить работу с ним. При столь огромном ассортименте движков такой выбор говорит о большом доверии, проявляемом к этой системе. Её любят не только за бесплатность, но и за качество, а также за исчерпывающее количество возможностей. Мощная экосистема, детальная документация, доступные тарифы на хостингах — всё этого говорит в пользу WP.
Стоит ли использовать движок? Да, конечно. Но он сложнее в освоении, чем об этом принято говорить. На фоне других CMS прост. В целом же, — нет. Необходимы хотя бы базовые знания HTML/CSS/PHP для действительно плодотворной работы. Облегчить работу с WordPress в какой-то степени поможет плагин Elementor или аналогичные пейджбилдеры (блочные «drag-n-drop» конструкторы страниц для новичков). Для новичков и представителей малого бизнеса любой онлайн-конструктор сайтов будет проще и приятнее в обращении.
