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

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

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

Портал об экологии живёт статьями и рекламой — четыре дефекта интерфейса мешали и тому, и другому. Закрыл все четыре.

PHP

WordPress

JavaScript

jQuery

CSS

MySQL

ACF

Задача

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

Тема сайта правится прямо в файлах — ни истории изменений, ни сборки. Любая правка окончательна с момента выката.

Что сделано

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

Нашёл причину проваливания текста: в коде осталась дублирующая функция, вставлявшая пустой блок-заглушку. Убрал её вызов вместо того, чтобы компенсировать высоту отступами.

Заменил механизм раскладки карточек на тот, что заполняет пустоты, и выровнял высоту карточек, ограничив заголовок двумя строками, а описание — тремя. На телефонах ограничение снято: там места хватает.

Скрыл пустые рекламные места: когда объявление не загружалось, контейнер всё равно занимал высоту и рвал сетку.

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

Итог

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

Карточки на главной складываются без дыр: 32 материала при четырёх колонках дают ровные ряды вместо неполного последнего — раньше их было 31. Реклама перестала ломать вёрстку: пустые блоки скрываются, отступ до заголовка задан явно.

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

Фиксация элементов: отказ от 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).