Рубрика: Код

Исходные данные: что было «из коробки»

Когда я начал вести этот блог, у меня не было ни времени, ни желания разрабатывать тему с нуля. WordPress Twenty Twenty-Five — блочная тема по умолчанию — казалась идеальным кандидатом: чистый код, поддержка Full Site Editing, минималистичный дизайн.

Но «минималистичный» не всегда значит «готовый к использованию». Вот что я получил из коробки:

---

📋 Что работало сразу

• Адаптивность — тема отлично выглядела на мобильных
• Блочный редактор — Gutenberg работал без конфликтов
• Базовая типографика — шрифты и размеры были читабельными
• SEO-структура — правильная иерархия заголовков и семантика

❌ Чего не хватало

• Навигация по рубрикам — в шапке не было меню категорий
• SEO-описание — мета-теги были в <head>, но не видны посетителям
• Удобные отступы — на страницах постов заголовок был слишком далеко от шапки
• Кнопка «Наверх» — на длинных статьях неудобно скроллить обратно
• Ширина контента — 645px было слишком узко для современных экранов

---

🛠️ Хронология правок: от шаблона к кастому

Все изменения я делал через WPCode — плагин, который позволяет добавлять JavaScript и CSS сниппеты без редактирования файлов темы. Это гарантия, что при обновлении WordPress или темы ничего не сломается.

1. SEO-описание под заголовком H1

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

Решение: JavaScript автоматически находит H1 на главной странице и вставляет после него параграф с описанием. CSS-переменные темы обеспечивают идеальное визуальное соответствие.

Результат: текст «Я музыкант (мелодический эмбиент, поп- и рок-баллады, нью-эйдж) и веб-разработчик…» теперь виден сразу. Ключевые навыки выделены <strong> для быстрого сканирования.

---

2. Меню рубрик в шапке

В стандартной теме Twenty Twenty-Five навигация по рубрикам была только в футере. Но посетителям нужно быстро переходить к нужной категории — «Итоги», «Музыка», «Кино».

Что сделал:

• JavaScript создает блок <nav> с ссылками на рубрики
• CSS добавляет анимацию подчеркивания при наведении
• Активная рубрика выделяется цветом (#503AA8)
• Адаптив для мобильных — уменьшенные отступы и шрифт

Важный момент: меню вставляется динамически после шапки, но до основного контента. Это сохраняет семантику HTML и не ломает блочную структуру темы.

---

3. Удаление дублирующей ссылки

В блоке «Другие заметки» в конце каждого поста WordPress показывал связанные статьи. Проблема: туда попадала и сама эта статья.

Решение: JavaScript проверяет URL каждой ссылки в блоке. Если он совпадает с текущим URL — удаляет весь родительский элемент <li>.

const currentUrl = window.location.href.split('#')[0].split('?')[0];
const postLinks = relatedPostsSection.querySelectorAll('.wp-block-post-title a');

postLinks.forEach(function(link) {
    const linkUrl = link.href.split('#')[0].split('?')[0];
    if (linkUrl === currentUrl) {
        link.closest('.wp-block-post').remove();
    }
});

---

4. Кнопка «Наверх» (Back to Top)

На длинных статьях (как эта) неудобно скроллить обратно к началу. Встроенной кнопки в теме не было.

Что получилось:

• Круглая кнопка с иконкой стрелки (SVG)
• Появляется после 400px прокрутки
• Плавная анимация появления/исчезновения (opacity + transform)
• Эффект «подпрыгивания» при наведении
• Плавный скролл наверх (behavior: ‘smooth’)

Дизайн: светло-серебристый цвет (#d1d5db) отлично виден на белом фоне. При наведении становится темнее (#b0b5bd) с увеличенной тенью.

---

5. Уменьшение отступов на страницах постов

Это была самая сложная правка. На главной и в рубриках заголовок был на комфортном расстоянии от шапки (~30px). Но на страницах одиночных постов — ~140px!

Проблема: inline-стили в HTML имели высокий приоритет. Простого CSS было недостаточно.

Решение: использовал специфичные селекторы с проверкой атрибутов и !important:

.single main.wp-block-group.has-global-padding.is-layout-constrained {
    margin-top: var(--wp--preset--spacing--40) !important;
}

.single-post .wp-block-group.alignfull[style*="padding-top:var(--wp--preset--spacing--60)"] {
    padding-top: var(--wp--preset--spacing--30) !important;
}

---

6. Расширение области контента

Стандартная ширина контента 645px на современных экранах выглядит узкой. Изображения и код «сжаты», много пустого пространства по бокам.

Что изменил:

• --wp--style--global--content-size: 780px (было 645px)
• --wp--style--global--wide-size: 1440px (было 1340px)
• Адаптив для мобильных — комфортные отступы 20px вместо стандартных

Результат: контент шире на ~20%, улучшенная читаемость на десктопе, на мобильных текст не прилипает к краям.

---

Итоговая статистика

За ~2 часа работы (с перерывами на кофе и тестирование) я внес следующие изменения:

---

💡 Выводы: почему Twenty Twenty-Five — отличный фундамент

После всех правок я могу с уверенностью сказать: стандартная тема WordPress — это не «костыль», а профессиональный инструмент, который требует минимальной доводки под конкретные задачи.

Что понравилось:

• Блочный редактор — мощный, но для тонкой настройки нужен JavaScript
• CSS-переменные — позволяют легко кастомизировать без хардкода
• Чистый код — нет лишних стилей и скриптов, которые конфликтуют
• Адаптивность — из коробки работает на всех устройствах

Что требует доработки:

• Навигация — нужно добавлять меню рубрик вручную
• Отступы — на некоторых страницах слишком большие
• UX-элементы — кнопка «Наверх», улучшенная типографика списков
• SEO-видимость — мета-теги есть, но их нужно дублировать визуально

Главный вывод: 2 часа работы превращают шаблонную тему в уникальный продукт. При этом вы получаете все преимущества стандартной темы — обновления, безопасность, совместимость с плагинами.

---

Что дальше?

Блог продолжает развиваться. В планах:

• Добавить темную тему (уже есть CSS-переменные, осталось написать JavaScript)
• Улучшить поиск по сайту (сейчас стандартный WordPress)
• Добавить email-рассылку для новых постов
• Оптимизировать скорость загрузки (сейчас 100/100 в PageSpeed, но можно лучше)

Если вы думаете о том, чтобы использовать Twenty Twenty-Five для своего блога — однозначно рекомендую. Это не «костыль для новичков», а профессиональная тема, которая требует минимальной доводки. А результат выглядит как кастомная разработка за сотни тысяч рублей.