S.Tominoff

Fullstack JavaScript разработчик

ra73.ru

Сайт для рекламного агентства на Wordpress

 

Не так давно, в медиахолдинге был обновлён брендбук, всвязи с чем, нами проводятся работы по обновлению и перезапуску сайтов компании. Первым на очереди стал сайт рекламного агентства «Мозаика».

 

Первая, и единственная, на данный момент версия сайта была разработана в далёком уже 2012 году, и с тех пор претерпела очень мало изменений, но времена меняются, и всё старое неизбежно отправляется в утиль, освобождая дорогу новому.

 

История изменений сайта с 2012 на одной картинке:

 

 

Плюс пару раз я обновлял информацию на странице с членами команды.

 

На этот раз было решено разработать новую концепцию и новый сайт на замену старому. Единственное что осталось в наследство — Wordpress, только в отличии от образца 2012 года, я добавил туда кучу вкусностей, о которых расскажу далее.

 

1. Дополнительные типы материалов

На старом сайте всё представляет из себя либо блоговую запись, либо страницу. Например, портфолио это даже не рубрика — это страница, на которой администратор вручную должен был вводить информацию — не удивительно, что за 5 лет эти страницы почти не изменились.

 

Зацените как это было:

 

Каждый проект представляет собой куцую картинку, с прицепленным к ней colorbox и кратким описанием.

 

А теперь смотрим, что получилось:

 

 

Каждый проект теперь представляет собой отдельный объект, которому можно назначить определённый тип кейса (это объединённые для кейсов и проектов рубрики) и добавить интересный контент.

 

Было разработано 9 дополнительных типов материалов, позволяющих гибко контроллировать каждый аспект сайта:

 

 

2. Кастомные виджеты

Старый сайт довольствовался решениями, встроенными в коробку Wordpress. Для реализации новой версии пришлось запилить несколько новых виджетов. К примеру, были написаны виджеты для отображения динамических фильтров на базе freewall.js и виджет для генерации офферов.

 

3. Кастомные плагины

В Wordpress существует система shortcode'ов, т.е. таких bb-like тегов для вставки контента. На мой взгляд, это убивает идею WYSIWYG напрочь, но без них к сожалению всё ещё не обойтись, поэтому для того, чтобы менеджер сайта мог работать не забивая себе голову этими вещами я разработал два плагина.

 

 

Этот плагин добавляет в визуальный редактор кнопку для генерации shortcode кнопки вызова оффера (модального окна с формой) и удобной проставки параметров окна:

 

 

Второй плагин уже посерьёзнее первого и работает с Wordpress на более низком уровне (читать как, на уровне использования хаков):

 

 

История этого плагина началась после поиска готового решения для вставки видео в текст. Существует ОГРОМНОЕ МНОЖЕСТВО плагинов с необходимой функциональностью, но в каждом из них есть один недостаток — они все намного хуже встроенной медиагалереи Wordpress. При этом стандартная галерея не позволяет указывать размеры видео, что тоже оказалось для нас большой печалькой.

 

Для решения этой проблемы я разработал плагин admin-media-embedurl-wh-fields-hack. Этот плагин добавляет несколько хуков, а также применяет MonkeyPatch к Javascript коду галереи (никогда не подумал бы что стану корячить Backbone объекты XD) и добавляет эти волшебные параметры управления размерами:

 

 

К сожалению, я так и не смог отправить свой плагин в репозиторий Wordpress — то–ли мне попался такой непонятливый участник комьюнити, то–ли я что–то не понимаю в этой жизни, ибо он настаивал на том что такой функционал уже есть — нужно всего лишь вставить видео, переключить режим WYSIWYG в режим кода и поправить размеры вручную в shortcode, а я настаивал на том что это ппц как не удобно.

 


Честно говоря, после 3–4 email наше общение прекратилось и я забил на эту затею.

Более подробно и эмоционально об этой истории читайте в моём блоге.


 

4. Оптимизация

Благодаря тому, что я посвятил достаточно много времени всесторонней оптимизации сайта, скорость его загрузки выросла в ~5 раз:

 

 

В GPS соточку пока что не удалось выбить из–за малой компрессии изображений (не нашел плагина, который справился бы с этим лучше чем EWWW Image Optimizer), хотя если сравнивать с тем что было показатели увеличились в три с лишним раза: