Новости Про Келси

Кодекс, нужно переработать нижний блок страницы модели XELEBS:

• «Новости про [имя модели]»;
• сообщение об отсутствии новостей;
• кнопку «Читать все новости»;
• строку общего количества просмотров материалов.

Сайт работает на WordPress.

Активная дочерняя тема: Reboot Child.

Все изменения выполнять только в теме Reboot Child.

Родительскую тему Reboot, плагины, WordPress Core и базу данных не менять.

Проблемы текущего блока

Сейчас блок выглядит плохо:

• слишком большой заголовок;
• огромная синяя кнопка;
• синяя кнопка не соответствует фирменной стилистике XELEBS;
• много пустого пространства;
• сообщение «Для этой модели пока нет новостей» выглядит потерянным;
• счётчик просмотров находится в отдельной серой полосе;
• блок визуально не связан с остальной страницей.

Задача

Собрать весь нижний блок в одну аккуратную белую карточку.

Структура:

Новости про Kelsie Jean Smeby

Для этой модели пока нет новостей.

[Смотреть все новости]

32 649 просмотров всех материалов

Общий контейнер

Сделать единый контейнер:

• белый фон;
• тонкая светло-серая рамка;
• border-radius примерно 8–10 px;
• внутренние отступы 24–30 px;
• без большой внешней тени;
• допустима лёгкая тень, как у других карточек сайта;
• максимальная ширина по основному контенту;
• не растягивать блок на всю ширину сайта вместе с сайдбаром.

Заголовок

Текущий заголовок слишком крупный.

Нужно:

• размер примерно 24–28 px;
• font-weight 700;
• цвет #181818;
• margin-bottom около 16–20 px;
• добавить фирменный красный акцент.

Допустимый вариант:

• красная вертикальная линия слева;
• либо тонкая красная линия снизу.

Не использовать одновременно несколько акцентов.

Состояние без новостей

Если новостей нет:

• вывести компактное сообщение;
• не оставлять большое пустое пространство;
• текст сделать серым;
• размер примерно 16 px;
• line-height 1.5;
• допустимо добавить небольшую нейтральную иконку только если она уже есть в проекте;
• не подключать новые библиотеки и иконки.

Текст:

Для этой модели пока нет новостей.

Не менять смысл текста.

Кнопка «Смотреть все новости»

Заменить текущую большую синюю кнопку.

Новый вариант:

• красный фон XELEBS;
• белый текст;
• компактный размер;
• padding примерно 10–16 px по вертикали и 18–24 px по горизонтали;
• border-radius 6–8 px;
• font-size 14–16 px;
• font-weight 600;
• без подчёркивания;
• без огромной ширины;
• кнопка должна занимать ширину по содержимому;
• не делать её на всю строку.

Текст кнопки:

Смотреть все новости

или сохранить текущий текст, если он уже используется в шаблоне:

Читать все новости

Цвет:

background: #a70404;

Hover:

background: #870303;

Добавить плавный transition.

Расположение empty-state и кнопки

На desktop:

• сообщение и кнопку можно поставить в одну строку;
• сообщение слева;
• кнопка справа или рядом;
• использовать flex;
• gap примерно 20–24 px;
• выравнивание по центру.

На мобильных:

• элементы должны переходить в колонку;
• кнопка под текстом;
• кнопка не должна растягиваться на всю ширину без необходимости.

Счётчик просмотров

Текущую отдельную серую полосу убрать.

Строку просмотров перенести внутрь общей карточки.

Оформить компактно:

Общее количество просмотров всех материалов: 32 649

или более коротко:

32 649 просмотров всех материалов

Требования:

• расположить внизу карточки;
• отделить тонкой линией сверху;
• margin-top примерно 22–26 px;
• padding-top примерно 16–18 px;
• цвет основного текста серый;
• число выделить фирменным красным или тёмным цветом;
• не использовать синий;
• не делать большую отдельную полосу;
• не центрировать на всю ширину страницы, если это нарушает композицию.

Рекомендуемый стиль:

color: #666;
font-size: 14px;

Число:

color: #a70404;
font-weight: 700;

Если новости есть

Если для модели новости существуют:

• сохранить текущую PHP-логику вывода;
• не менять запрос;
• не менять количество новостей;
• не менять ссылки;
• применить новый контейнер и стили к существующему списку;
• кнопку «Смотреть все новости» оставить внизу или справа от заголовка.

Не создавать фиктивные новости.

Технические требования

Сначала определить:

1. В каком шаблоне выводится блок новостей.
2. Какие классы уже используются.
3. Где выводится общий счётчик просмотров.
4. Является ли счётчик частью того же шаблона или отдельным блоком.
5. Можно ли объединить их без изменения бизнес-логики.

Предпочтительно:

• сохранить текущую PHP-логику;
• изменить только HTML-обёртки при необходимости;
• основную работу выполнить через CSS.

Все CSS-изменения выполнять только в:

/wp-content/themes/reboot_child/style.css

Не использовать слишком общие селекторы.

Использовать локальный namespace, например:

.xelebs-model-news
.xelebs-model-news__title
.xelebs-model-news__empty
.xelebs-model-news__button
.xelebs-model-news__views

Ограничения

Не менять:

• сайдбар;
• галерею;
• меню;
• карточку модели;
• SEO-текст;
• пагинацию;
• lazy load;
• похожих моделей;
• футер;
• другие страницы;
• PHP-запрос новостей, если он уже работает;
• данные просмотров;
• WordPress Core;
• плагины;
• родительскую тему Reboot.

Адаптивность

Проверить:

• desktop 1920 px;
• desktop 1366 px;
• tablet;
• mobile.

На мобильных:

• заголовок не должен быть слишком крупным;
• кнопка должна быть удобной для нажатия;
• не должно быть горизонтального скролла;
• блок должен иметь уменьшенные внутренние отступы;
• строка просмотров должна переноситься нормально.

Итоговый отчёт

После выполнения показать:

1. Какие файлы изменены.
2. Где находится шаблон блока новостей.
3. Какие классы добавлены или изменены.
4. Как оформлено состояние без новостей.
5. Как оформлена кнопка.
6. Как перенесён счётчик просмотров.
7. Подтверждение, что логика новостей и просмотров не менялась.
8. Подтверждение, что изменения сделаны только в Reboot Child.
9. Краткий результат проверки desktop и mobile.

Не делать других изменений за пределами нижнего блока новостей и просмотров.

Избранное0