Сайт Tiku 2.0

Сайт Tiku 2.0

Сайт Tiku 2.0 — я сделал первое крупное обновление своего сайта с момента его запуска в 2012 году. Началось все с того, что я хотел перенести сайт на CMS Wordpress. Ранее на Wordpress работал только блог на моём сайте, а остальная часть сайта была статичной т. е. сделана на чистом HTLM и CSS.

www.tiku.ru

Задача. Сделать новую версию сайта Tiku и перенести сайт на CMS Wordpress.

Новый сайт и новые знания

В конечном итоге основная задача по переносу сайта на Wordpress обернулась тем, что я попутно переделал почти весь сайт. Эта работа коснулась множества аспектов начиная с веб-дизайна, вёрстки и заканчивая программированием и поисковой оптимизацией.

Конечно, в процессе я также получил много новых знаний и умений связанных с разработкой сайтов. Освежил свои навыки по вёрстке и значительно улучшил свой навык создания сайтов на Wordpress. Не говоря уже о программировании и SEO.

Вступительная часть немного затянулась, пора перейти непосредственно к сайту.

В качестве основной идеи для дизайна я решил взять ленту из карточек. Этот подход сейчас называют Bento Grids (Бенто Гридз). Этот подход показался мне достаточно универсальным и при этом гибким и с широкими возможностями для дальнейшего развития. При появлении новых типов контента можно просто создать новый тип карточек и вписать их в общую ленту.

Одним из основных разделов моего сайта всегда было резюме. Я полностью переработал дизайн этого раздела, сделал его более современным и информативным. Опыт работы и образование я представил в виде вертикального таймлайна. А все основные навыки поделил на жёсткие и мягкие. Навыки я также визуализировал в виде прогресс-баров с уровнем знания в процентах.

Основные обновления

Перед тем как продолжить обзор конкретных страниц и разделов сайта Tiku 2.0 я расскажу про основные фишки и нововведения, которые я внедрил про обновлении, вот они:

- Тёмная тема
- Версия сайта на английском
- Универсальная бенто-сетка, которая адаптируется под количество блоков
- Блок похожих записей
- Лайки, количество просмотров и время на чтение в блоге
- Блок следующая запись
- Визуализация частотной диаграммы для музыки
- Поиск по сайту
- Форма обратной связи
- Согласие с coockie
- Оптимизация адаптивной вёрстки
- Избранное в портфолио и музыке
- Перенос сайта Deerror в раздел с музыкой
- Индикатор прокрутки страниц

Что-то было сделано с использованием стандартных функций WordPress, а что-то я писал сам или использовал внешние библиотеки и code-сниппеты.

Для портфолио и музыки я также внедрил тэгирование по стилям, типам и форматам работ. Это облегчает группировку связанных работ и музыкальных релизов.

Музыка

Дизайн шаблона страницы с музыкальными релизами и DJ-миксами был полностью переработан. Новая структура контента и более современное оформление интерфейса в сочетании с визуализацией частотной диаграммы создают гораздо более эффективный пользовательский опыт.

После переноса всего контента с сайта Deerror была сохранена фирменная цветовая схема. Новый дизайн также был адаптирован под цветовое оформление Deerror.

Раздел с музыкой Deerror как таже сделан на основе общего дизайна в стиле карточек Bento Grids (Бенто Гридз) со стилизацией фирменным градиентом.

Адаптивность и отзывчивость

Само-собой сайт отлично адаптируется под различные размеры экрана, различные устройства и различные методы ввода. Мне никогда не нравилось меню-гамбургер, поэтому на новом сайте везде используется меню с горизонтальной прокруткой.

В портфолио добавились новые подразделы с целью большей детализации работ по типам и форматам. Также было добавлены новые главные разделы в портфолио. Одним из новых разделов это «Видео». «Фотографии» и «Анимация» также были доработаны.

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

На сайте появилось множество дополнительных разделов и элементов шаблона. Часть из них призвана выполнять требования закона по персональным данным. Также новые разделы часто являются функциональными и используются для внутренней перелинковки на многих страницах сайта.

У сайта появился полноценный «подвал». В нем размещается рекламный блок и дополнительная навигация включая «хлебные крошки».

Обновление блога

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

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

Все текстовые блоки в блоге и на всем сайте были оформлены с учетом оптимальной длины строки. Этот момент часто игнорируется при дизайне сайтов, что плохо влияет на скорость и удобство чтения.

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

Перевод текста в элементах интерфейса я реализовал на основе PHP условий и специальных переменных WordPress, которые определяют текущий сайт.

Благодарности

Закончить хотелось бы тем, что полностью самостоятельно я бы не смог сделать такой сайт. Я использовал достаточно много информации из открытых источников. Специально по этому поводу был создан раздел «Благодарности». В нём я говорю всем «Спасибо» и даю обратные ссылки на использованный ресурс.