ECOportal.info — доработка темы WordPress

Экологический контентный портал (рунет) · Экология / контентный медиапортал

Fullstack/backend WordPress-разработчик (доработка существующей темы)

Заменил JS-библиотеку StickySidebar на нативный CSS position: sticky для правого сайдбара и оглавления статьи — стабильная фиксация без зависимости от загрузки скриптов

PHP

WordPress

JavaScript

jQuery

CSS

MySQL

ACF

Контекст и задача

ecoportal.info — русскоязычный контентный портал об экологии (статьи, категории, комментарии, профили пользователей, Premium-доступ). Сайт работает на кастомной теме WordPress ecoportal, основанной на стартовой теме your-clean-template-3 (без git и без системы сборки; PHP/CSS/JS правятся напрямую). Заказчик предоставил ТЗ (март 2026) с 4 конкретными дефектами вёрстки/поведения интерфейса, мешающими чтению и показу рекламы.

Что я сделал

Доработка существующей темы (не разработка с нуля). По каждой из 4 проблем ТЗ проведена диагностика кода (PHP-шаблоны, JS-логика, CSS) и внесены точечные правки:

Правый сайдбар с баннером не отображался до скролла и исчезал при возврате наверх — переведён со StickySidebar на CSS position: sticky.

Контент «опускался» при скролле — удалена дублирующая JS-функция fixed_block, создававшая блок-заглушку высотой >500px.

Малый отступ между рекламой и заголовком в теле статьи — добавлены CSS-отступы для adfinity-блоков.

Неравномерная сетка карточек с пустотами — Masonry заменён на Packery, выровнены высоты карточек, скрыты пустые рекламные блоки, исправлена кратность числа статей колонкам. Дополнительно тем же CSS-подходом стабилизировано оглавление статьи (левая колонка). Изменения развёрнуты на прод по SSH.

Результат

Подтверждено по артефактам: устранены все 4 проблемы из ТЗ (ОТЧЕТ-ИЗМЕНЕНИЯ.md); число статей приведено к кратности 4 колонкам (главная 31→32, категории 12); правки присутствуют в рабочих файлах темы. Сайт https://ecoportal.info/ публично доступен и подтверждён как экопортал (live-проверка).

Решение и подход

Фиксация элементов: отказ от JS-библиотеки StickySidebar в пользу нативного position: sticky для .right_column и .nav_article (подтверждено style.css:1371-1372,1477-1478 и комментариями js/main.js:226-229). Это убрало зависимость от порядка загрузки скриптов и некорректные расчёты позиции.
«Скачок» статьи: корневая причина — функция fixed_block, динамически вставлявшая высокий placeholder; её вызов отключён (js/main.js:226-227), позиционирование оглавления переведено на CSS sticky.
Сетка карточек: layoutMode: 'packery' в инициализации раскладки (js/main.js:90-106), подключение packery-mode.pkgd.min.js через wp_enqueue_script (functions.php:269); выравнивание высоты через -webkit-line-clamp (style.css:1057-1071); скрытие пустых adfinity-блоков через селекторы :has() (style.css:3692-3706).
Кратность колонкам: 32 поста на главной (index.php:21), 12 постов на страницу в категориях/архивах через pre_get_posts → sort_posts (functions.php:1202-1207, там же сортировка по cookie sortby: popular/comments/date).

Стек и обоснование

WordPress + PHP — платформа существующего сайта. JavaScript/jQuery — вся клиентская логика темы (jQuery подключён вручную в header.php, стандартный WP-jQuery отключён). Packery вместо Masonry — у Masonry алгоритмическое ограничение: не заполняет пустоты; Packery (тот же автор) использует «умную упаковку». Нативный CSS position: sticky вместо StickySidebar — стабильнее и без JS-зависимостей. ACF (bigsize, navarticle, links), Yoast SEO, WPPay (Premium), WP Favorite Posts — плагины, с которыми взаимодействует тема. MySQL — БД портала.

Инженерные вызовы

Legacy-кодовая база без git и сборки, с множеством версионных копий файлов (functions (23.07.24).php, functions.php!!!, functionsя.php, !category.php и т.п.) — пришлось отделять рабочие версии от бэкапов.
Float-/процентная вёрстка (article_content 50%, right_column 25% float) усложняла перевод на position: sticky — потребовалась корректировка родительского контейнера, иначе sticky не срабатывал.
Взаимовлияние рекламных вставок (adfinity/AdsPlacer) и JS-сетки: пустые незагруженные блоки ломали раскладку — решено CSS-скрытием через :has().
Развёртывание без CI: ручной деплой по SSH с обязательной очисткой кэша (LiteSpeed Cache / WP Fastest Cache).