Если что, дизайн, как по мне ещё актуален, а вот от вордпресса давно пора избавиться.
Что внутри
Оформление не копировал, а придумал с нуля. Сетка тоже моя.
До этого старался не использовать «попсовые» шрифты, общепринятые контрасты (шаг разницы размеров и жирности шрифтов и элементов), но пластмассовый мир победил!
Предыдущие версии оформления:
Текущий вариант я реализовал в 2021 году и если тут ±, как на заглавной картинке, то пока что в целом меня он устраивает.
Косяки
Сайт создавался в 2014 году и с тех пор обрастал контентом. Контент успел пережить многочисленные обновления wordpress, переход на визуальный редактор контента Gutenberg, замену плагинов своими скриптами и две смены тем оформления.
Из этого следует, что лишние инлайн стили, неактуальная инфа в посте или просто картинка, погрызенная шакалами — практически неизбежны. Я от использования important в стилях избавился, что при таких условиях уже неплохо.
В скриптах используется jQuery. Угу. Если его по умолчанию использует вордпресс, то почему бы не сэкономить время, используя фишки этой библиотеки. А на ванильном JS или TS я всё это повторить могу, если что, но — нафига.
Почему же я, такой охрененный разработчик Vue/React до сих пор на WordPress?
По-хорошему: надо нормально вручную пересоздавать контент в новой CMS (Django, например), чтобы во-первых переосмыслить подачу контента с учетом нового оформления, во-вторых избавиться от всякого мусора и устаревших стилей в оформлении контента, в-третьих, желательно и картиночки оптимизировать, продублировав всякими webp.
Компромисс меня не устраивает. По мне, так либо делать уже сразу нормально, либо ничего не менять пока. А т.к. этот сайт вообще не про бабло, то и тратить время на это я пока не хочу (если он ещё не на Vue/React, то и сейчас не захотел).
Учитывая это, имеем вот что.
Тема вордпресс
Что имеется в виду под темой вордпресс? Ну прежде всего структура вывода контента в разных категориях, а не всякое оформление — про оформление я вначале уже написал.
Написана с нуля. Т.к. постоянной практики с PHP и WordPress давно не было, периодически подсматривал решения, например на WP-KAMA — охренительный ресурс для «вордпрессеров».
Используемые плагины:
- Code Syntax Block — подсветка кода. Тупо задолбаешься расписывать в каком языке что и как подсвечивается, так что только переопределил ему стили на свои.
- Cyr-To-Lat — транслитерация генерируемых url на латиницу. В принципе можно было и самому на JS сделать, то лень словарь правил транслитерации свой делать.
- WP Add Mime Types — для обхода ограничений вордпресса на загрузку и добавление в визуальном редакторе файлов типа .ttf, .exe и т.п.
Соответственно, всё остальное реализовано, либо кастомной темой через PHP, либо опять же мой JS скрипт (из готовых скриптов только masonry).
Фишечки
Меня задолбало, что даже мелкие сервисы делают свои мобильные приложения и отправляют посетителя его устанавливать. Достали, блин. Мобильная версия сайта должна выглядеть и вести себя максимально приближенно к мобильному приложению, а приложение зачастую не нужно делать вовсе. Вот как этот сайт. Это первая фишка.
Автовыбор темы на основе предпочитаемого режима (темный/светлый). Работает так: при первом заходе будет выбран вариант, который выбран в ОС пользователя, но можно изменить на другой вариант в настройках сайта. Тогда выбранный вариант запомнится и переопределит предпочитаемый в ОС.
В той же менюшке можно изменить размер шрифта и вырубить анимацию фона (некоторых бесит). Естественно всё запоминается в localstorage.
Генератор паролей: делал для себя, чтобы лишний раз на левые сайты не ходить. Потестить можно тут. Там же удобненько можно глянуть размер вьюпорта или свой ip. Если что, никаких данных там не собираю, яваскриптом клянусь!
Сделал разные варианты начального текста на главной странице:
Лайтбокс делал для другого проекта, но за пару минут встроил к себе — хороший пример подхода написания переиспользуемых функций. Вот тут про него.
Все иконки в иконочном шрифте, а вся графика, которой уместней быть векторной в SVG.
По значениям в стилях. Всё, что можно забито в переменные.
Во всяких СЕОшных штуках не сильно разбираюсь, но вроде, если запостить ссылку в какой-нибудь телеграм, то она красивенько отображается там. Что по этой теме нагуглил, то и применил.
Ещё всякие мелочи, типа прелодера, скролла наверх, появляющегося только когда страницу проскроллили, анимированного SVG фона и т.п.
Если в браузере будет отключен JavaScript сайт резко преобразится: