Resonar — бесплатная блоговая тема WordPress с фокусом на миниатюры для стильных и визуально привлекательных блогов

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

Реализация полной ширины на главной странице достигается без кастомизации PHP-шаблонов. Просто активируйте настройку: Customizer → Layout → Full-width. Ни одного лишнего хука. Никаких виджетов. Только контент.

Важно помнить: при загрузке обложек размером меньше 2000 пикселей теряется весь смысл – превью будут сжаты и размыты.

Минимум CSS, минимум JS. Верстка построена на flex, без использования сторонних библиотек. Это обеспечивает чистоту DOM и мгновенную отрисовку. Адаптация под мобильные – не фрагмент, а логика всей структуры.

Контрастная типографика, чёткое разделение заголовков и основного текста. Для заголовков используется font-family: \'Merriweather\', serif;, для тела – font-family: \'Open Sans\', sans-serif;. Размер шрифта в теле: 20px. Интерлиньяж – 1.75. Абзацы отстоят друг от друга на 32px. Это создаёт ритм.

Нет поддержки WooCommerce. И правильно. Эта конструкция не рассчитана на каталог. Только блоги. Только статьи. Только визуальный удар.

Внимание! Фоновая загрузка изображений отключена. Всё грузится синхронно. Это может быть критично при использовании дешёвого хостинга.

Пример использования рекомендуемого изображения в записи:


<?php
if ( has_post_thumbnail() ) {
    the_post_thumbnail( \'full\' );
}
?>


В архивной выдаче – только заголовок и картинка. Тело текста скрыто. Без превью, без аннотаций, без обрывков. Это агрессивно. Но это работает.

Для настройки фонового изображения в заголовке используйте:


header.site-header {
    background-image: url(\'path-to-image.jpg\');
    background-size: cover;
    background-position: center;
}


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

Как включить и настроить полноэкранные изображения записей в теме Resonar

Задайте изображение записи через блок «Изображение записи» в редакторе. Без этого фон не появится. Заголовок, дата и автор отобразятся поверх фона – только при наличии миниатюры.

Поддерживаются только записи, не страницы. Убедитесь, что тип записи – post. Проверяется автоматически. Остальные типы игнорируются.

Изображение должно быть достаточно большим: минимум 2000px по широкой стороне. Маленькие картинки обрезаются и теряют резкость. Формат – JPEG, реже PNG. GIF не подойдёт.

Для включения полноценного отображения на главной странице необходимо, чтобы в настройках отображения сайта была активна опция «Последние записи». Если установлена статическая главная – обложки отключаются.

Если изображение не отображается, проверьте функцию the_post_thumbnail() в файле content.php. Отсутствие вызова этой функции – причина, по которой картинка не тянется в фон.

Внимание! Загружайте изображения через медиабиблиотеку WordPress, не вставляйте напрямую из внешних источников – они не обрабатываются должным образом и не масштабируются под фон.

Фоновое изображение тянется через CSS с фильтрами. Визуальные эффекты накладываются автоматически. Вмешательство в стили может нарушить выравнивание текста. Будьте осторожны.


if ( has_post_thumbnail() ) { the_post_thumbnail( \'full\' ); }


Выравнивание текста по центру задаётся через класс .entry-header. Любая дополнительная разметка ломает визуальную композицию. Проверяйте отступы.

Минимальная высота фона задаётся через min-height: 100vh. Если блоки короче – фон обрезается. Не увеличивайте через padding – используйте высоту напрямую.

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

Внутри одиночной записи фоновая обложка работает при условии, что файл single.php не был изменён. Любая кастомизация шаблона может отключить функцию.

Итог? Один промах – и обложки исчезают. Один правильный шаг – и запись сияет. Проверяйте. Тестируйте. Не доверяйте внешнему виду в редакторе – смотрите фронтенд.

Какие типы контента лучше всего смотрятся с визуальным оформлением Resonar

Большие фотоподборки – безоговорочный фаворит. Если изображение не захватывает с первого экрана, оно бесполезно. Минимум текста, максимум визуального веса. Используйте горизонтальные изображения с разрешением от 2000px по ширине. Идеальное соотношение сторон – 16:9. Загружайте через медиабиблиотеку, не вставляйте напрямую из URL – иначе адаптивность ломается.

Одноэкранные рецепты – бомба. Фото блюда на весь экран, короткий заголовок и кнопка \»читать\». Всё. Тело статьи – на второй вкладке. Используйте кастомный excerpt:


<?php the_excerpt(); ?>


Реальные кейсы бизнеса – только если они упакованы в storytelling. Без лишней аналитики и таблиц. Один кейс – один герой. Одна обложка – один крючок. Подбирайте обложку по палитре, не по содержанию.

Личные блоги с лонгридами работают, если в начале – визуальный хук. Один заглавный абзац. Ни меню, ни виджетов. Только фото. Загружаем через \»Изображение записи\», не вставляем в тело контента:


<?php if ( has_post_thumbnail() ) { the_post_thumbnail( \'full\' ); } ?>


Музыкальные подборки – спорный тип. Но если каждую песню сопровождает фото, выдержанное в одном стиле – сработает. Без этого – провал. Используйте ACF для подстановки галереи:


<?php the_field(\'gallery\'); ?>


Важно: не вставляйте изображения одинакового формата подряд. Рваный ритм композиции удерживает внимание сильнее линейной сетки.

Фотожурналы на одну тему – визуально безупречны. Одна серия – одна статья. Не больше 10 снимков. Чёткий порядок: первый кадр – атмосферный, последний – финальный. Между ними ни одного пояснения. Если нужно описание – в конце.

Категорически не подходят технические статьи, чек-листы, сравнения. Этот стиль подавляет текст, превращая его в декор. Примеры кода теряются. Если уж нужно вставить код, делайте это как модуль внизу статьи:


<pre><code>
// Пример вставки для сниппета
function example() {
return true;
}
</code></pre>


Помните: каждый тип контента должен выглядеть как афиша. Не рассказывайте – показывайте.

Если сомневаетесь, как будет выглядеть пост – создайте черновик и откройте предпросмотр в режиме полноэкранного просмотра. Всё, что выглядит тускло – удаляйте. Беспощадно.

Настройка меню, виджетов и типографики для гармонии с обложками

Сразу удалите лишние пункты из основного меню. Оставьте не более 5. Всё, что не связано с ключевым контентом – в подвал. Чрезмерная вложенность? Уберите. Мобильная версия не прощает многослойных структур.

Выравнивание – строго по центру. Используйте text-align: center; в настройках кастомайзера или через CSS. Визуальный баланс обязателен, иначе крупные изображения «съедают» навигацию.

Цветовая палитра меню должна быть контрастной, но не кричащей. Белый шрифт на фоне фото – ошибка новичков. Лучше использовать тёмный фон под меню с небольшой прозрачностью: background-color: rgba(0,0,0,0.6);

Важно: добавьте фиксированное меню, если на первой полосе – масштабное изображение. Иначе пользователь просто его не увидит.

Виджеты – только внизу и в сайдбаре на внутренних страницах. Ни одного блока вверху или рядом с изображением. Рекомендуется максимум два: поиск и категории. Всё остальное – в подвал, подальше от обложек.

Тексты в виджетах: короткие, лаконичные, без заголовков H1–H3. Используйте <span> или <p>, избегая вложенности. Перегрузка типографики – минус 50 к эстетике.

Помните: любой виджет, отвлекающий от визуального контента, – это ошибка. Минимализм не тренд, а необходимость.

Теперь – шрифты. Используйте не более двух. Один для заголовков, другой для основного текста. Sans-serif, без засечек. Примеры: Montserrat, Open Sans, Rubik. Никаких рукописных – они убивают читабельность.

Размеры: заголовки – от 36px и выше, текст – 16–18px. Межстрочный интервал минимум line-height: 1.6;. Увеличение читаемости – приоритет, особенно если фон фото неоднороден.

Резюмируем. Меню – компактное, центрированное, контрастное. Виджеты – за пределами первых экранов. Шрифты – функциональны, а не декоративны. Всё, что не подчёркивает визуальный контент, удаляем. Без компромиссов.