Содержание статьи
Установите её немедленно. И забудьте о всех остальных шаблонах. Ни единого лишнего килобайта, никаких перегрузок. Только чистый код и контроль в ваших руках.
Платформа полностью поддерживает Gutenberg, а это значит – никакой пляски с блоками. Что видите – то и получаете. Никаких кастомных билдов, никакой зависимости от конструкторов. Только базовая структура и точная передача замысла. Кастомизация через кастомайзер, но и это не предел.
Вот, например, как изменить отступы заголовков без подключения дополнительных файлов:
h1.entry-title {
margin-bottom: 1.2em;
}
Минимум CSS. Максимум контроля. Логика шаблона проста – ничего лишнего. Один layout, один фокус: контент. И он работает быстро. Почти моментально. GTmetrix на дефолтной установке показывает 100/100. Без кеша. Без плагинов оптимизации.
Поддержка типографики через system stack. Шрифты? Только системные. Зачем грузить лишнее. Нет иконок в виде веб-шрифтов – только SVG. Никаких Font Awesome.
Важно! Если вы хотите использовать сторонние шрифты – придётся добавить их вручную через
functions.phpи фильтры. Автоматической подгрузки нет и не будет.
Реакция на изменение ширины экрана происходит без медиа-запросов в большом количестве – используется гибкая система отступов и процентное масштабирование. Контейнеры выстроены на CSS Grid. Это избавляет от хаоса в float или flexbox-костылях.
Вот пример сетки для главной страницы:
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2rem;
}
Главная фишка – это кодовая чистота. Никакой логики внутри шаблонов. Всё выведено в хуки. Хочешь убрать метаинформацию? Просто отключи нужный фильтр:
add_filter( \'saga_show_post_meta\', \'__return_false\' );
Не нужно лезть в шаблон, не нужно править HTML. Всё как должно быть в 2025. Чисто. Структурно. Предсказуемо.
RSS работает. Микроразметка встроена. Страницы не перегружены div-адом. Чтение кода – как глоток свежего воздуха. Нет лишних классов. Нет JS, кроме скролла и меню. 3 килобайта. Всего.
Пользуйтесь. Но осознанно. Это не шаблон – это скелет. Всё остальное – на вашей совести.
Как установить тему Saga на сайт WordPress вручную и через каталог
Через встроенный репозиторий
Перейдите в административную панель. Раздел Внешний вид – Темы. Кнопка Добавить новую. Введите название в поиск: saga. Ищите иконку с минималистичной обложкой и подписью автора Andrey Mikhaylov. Установите. Активируйте. Готово? Не торопитесь!
Откройте Консоль – Обновления. Убедитесь, что шаблон в последней версии. Бывает, что каталог подтягивает кэшированную копию. Обновляйте вручную при необходимости.
Важно! После установки стоит проверить совместимость с активными плагинами. Некоторые могут конфликтовать с пользовательскими блоками или стилями.
Установка вручную через архив
Скачайте ZIP-файл с официальной страницы разработчика на GitHub: https://github.com/AndreyMikhaylovDev/saga. Не распаковывайте. В панели управления: Внешний вид – Темы – Добавить новую – Загрузить. Выберите архив, нажмите Установить. Дождитесь загрузки. Активируйте.
Проверьте наличие файла style.css в корне архива. Без него оболочка не распознается системой. Иногда браузеры автоматически разворачивают архив – загружается папка без нужной структуры. Следите.
Помните: ручной способ дает больше контроля. Но ответственность за обновления ложится на вас. Каталог WordPress обновляет всё сам.
Проблемы и нестандартные случаи
Ошибка: «Файл стиля отсутствует» – частая. Причина: загружается не сама оболочка, а архив с вложенной директорией. Решение: откройте архив, найдите папку с style.css и functions.php, запакуйте заново и загрузите её.
Не отображается превью после активации? Это баг WordPress – иногда миниатюра не подтягивается. Не влияет на функциональность.
Хотите накатить через FTP? Подключитесь к /wp-content/themes/, загрузите распакованную директорию. Проверьте права доступа: 755 для папок, 644 для файлов.
Через каталог – быстрее, но ограниченно. Ручная установка – гибче, но требует внимательности. Выбор зависит от целей. Одно точно: контроль нужен в любом случае. Не надеетесь на автоматизацию – проверяйте каждое действие.
Настройка внешнего вида: шрифты, цвета и отступы в Saga
- Заголовки: шрифт с засечками придаёт строгость. Размер H1 – не менее 36px. H2 – 28px. Остальное по убыванию.
- Основной текст: 16–18px, интерлиньяж 1.6–1.75em. Без этих параметров блоки слипаются.
Важно помнить: шрифты из Google Fonts подгружаются с задержкой. Убирай лишние, оставляй максимум два.
Цвета. Ищи блок Colors. Основной фон – нейтральный, не белоснежный (#f9f9f9 или #fefefe). Цвет текста – #333 или #444. Никогда не #000. Он давит.
Акценты? Не больше двух. Один для ссылок, другой для кнопок. Примеры:
#0057A3– строгий синий#F25042– энергичный красно-оранжевый
Контраст между фоном и текстом – минимум 4.5:1 по WCAG. Проверяй на webaim.org.
Внимание! Не используй больше трёх цветов. Это не витрина лакомств, а структура восприятия.
Отступы на грани искусства. Нет их – всё в кашу. Много – глаза устают. Ищи раздел Additional CSS и вставляй вручную:
.entry-content p {
margin-bottom: 1.4em;
}
.entry-title {
margin-bottom: 0.5em;
margin-top: 2em;
}
.site-header {
padding: 2em 1em;
}
Если хочешь больше контроля – подключай кастомный CSS-класс через body_class() и стилизуй по своей системе отступов: 4, 8, 16, 32px.
Проверяй результат в разных браузерах. Убедись, что текст не «прыгает». Иногда line-height ломает мобильную версию. Проверяй вручную. Никакие плагины не спасут.
Цепляй внимание – но не кричи. Цвет и типографика должны вести пользователя, а не сбивать с толку. Простой шрифт. Два цвета. Воздух вокруг текста. Этого достаточно.
Работа с записями и изображениями: возможности форматирования в Saga
Используйте встроенную поддержку Gutenberg-блоков для обогащения текста мультимедийными элементами. Стандартный блок \»Изображение\» позволяет задавать выравнивание, подпись, ссылки и alt-атрибуты без ручного редактирования HTML.
Галерея подключается блоком Gallery. Минимизируйте количество колонок, если используете вертикальные изображения – в противном случае обрезка испортит композицию.
Текстовые блоки Paragraph поддерживают выравнивание, жирное, курсив и гиперссылки. Никакой магии – просто пишите, редактируйте, сохраняйте. Автоматическое сохранение не даст потерять изменения.
Важно! Не загружайте изображения напрямую из буфера обмена – используйте медиа-библиотеку. Это исключает дублирование и гарантирует корректное отображение.
Используйте Cover-блок для создания заставок между секциями. Пример: поверх изображения добавляется текст с затемнением через ползунок «Opacity». Нет кода – всё на визуальном уровне. Но если надо тонко настроить – используйте класс .wp-block-cover и задайте стили в кастомном CSS.
Преобразуйте вложенные блоки в группы для настройки единого стиля. Пример: заголовок, текст и изображение оборачиваются в Group с фоном и отступами. Всё двигается как единое целое.
Заголовки – от h2 до h6 – поддерживают отдельное оформление. Но будьте аккуратны: не нарушайте иерархию. h1 уже зарезервирован под название сайта, не повторяйтесь в теле записи.
Внимание! Если вы вставляете изображения через внешние ссылки, убедитесь, что сервер поддерживает CORS. Иначе получаете серое окно вместо картинки.
Для оформления цитат используйте блок Quote – он применяет типографику, отличающуюся от основного текста, увеличивает межстрочный интервал. Подходит для акцентов внутри длинных записей.
Встроенный медиаменеджер не оптимизирует изображения. Рекомендуется плагин типа WP-Smush – он автоматически сжимает загруженные файлы без потери качества.
Нестандартные форматы – аудио, видео, файл – тоже поддерживаются через соответствующие блоки. Ставьте на паузу, выбирайте обложку, задавайте автоматическое воспроизведение. Встроенные инструменты делают это без стороннего кода.
Виджеты в записях не работают – используйте только Gutenberg-блоки. Исключение – кастомные шорткоды. Пример:
Но не злоупотребляйте. Ручной ввод ID усложняет редактирование.
Редактор поддерживает drag-and-drop. Просто перетащите файл в окно записи – и он загрузится туда, где отпустили курсор. Проверяйте порядок, особенно если добавляете несколько изображений подряд.
Адаптация под мобильные устройства и поведение темы на разных экранах
Сразу включите масштабирование viewport через мета-тег:
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
Без него поведение на телефонах превратится в хаос. Элементы полезут, тексты будут съезжать, навигация станет бесполезной. Проверено.
Ширина контейнера должна быть ограничена:
.container {
max-width: 720px;
margin: 0 auto;
padding: 0 20px;
}
На узких экранах это спасает от горизонтальной прокрутки. Используйте медиазапросы, не стесняйтесь:
@media (max-width: 768px) {
.menu {
display: none;
}
.mobile-menu-toggle {
display: block;
}
}
Убирайте всё лишнее. Скрывайте боковую колонку. Прячьте ненужные блоки. Не пытайтесь впихнуть десктопный интерфейс в 375 пикселей. Это провал.
Важно: На разрешении ниже 480px не оставляйте фиксированных значений ширины и высоты. Только em, % и vw/vh.
Шрифты тоже адаптируются. Базовый размер задается так:
html {
font-size: 16px;
}
@media (max-width: 600px) {
html {
font-size: 14px;
}
}
Отступы – бич мобильного UI. Применяйте clamp(), если хотите гибкости:
padding: clamp(10px, 2vw, 20px);
Картинки? Только <picture> с srcset. Или используйте sizes:
<img src=\"image-800.jpg\"
srcset=\"image-400.jpg 400w, image-800.jpg 800w\"
sizes=\"(max-width: 600px) 100vw, 800px\"
alt=\"описание\">
Без этого вы либо теряете скорость, либо показываете мыльные JPEG. Обе ситуации критичны.
Внимание! Тестируйте поведение в DevTools Chrome: iPhone SE, Pixel 7, Galaxy Fold. Все ведут себя по-разному.
Проблемы часто начинаются с вложенных блоков с display: flex. Они ломаются при нехватке ширины. Проверяйте flex-wrap: wrap и min-width.
Если используется sticky-шапка – не забывайте про z-index и position: fixed на маленьких экранах. Иначе меню будет скакать как сумасшедшее.