Как установить и настроить выравнивание изображений в WordPress правильно

Автор: Владимир Петров | Опубликовано: 13.11.2025

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

Почему важно уметь управлять выравниванием изображений в WordPress

По умолчанию WordPress предлагает базовые опции выравнивания: слева, по центру и справа. Однако в реальных проектах требования намного шире: нужно учитывать адаптивность, обтекание текстом, отступы, а также особенности разных тем и блоковых редакторов. Некорректное выравнивание приводит к «рваному» дизайну, ухудшению UX и даже снижению SEO, так как поисковые системы ценят правильную структуру контента.

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

Базовое выравнивание изображений в WordPress: встроенные возможности

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

По левому краю — изображение «обтекается» текстом справа.
По центру — изображение занимает весь ряд, текст располагается сверху и снизу.
По правому краю — изображение обтекается текстом слева.
Без выравнивания — изображение вставляется без обтекания.

Чтобы задать выравнивание, достаточно в визуальном редакторе выбрать нужный параметр. Но это работает корректно только при условии, что тема поддерживает соответствующие CSS-классы. Если тема стили не содержит, можно добавить их самостоятельно.

Добавление CSS для выравнивания изображений

Если у вашей темы нет поддержки для классов alignleft, aligncenter и alignright, добавьте в файл style.css вашей темы следующий код:

.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

Эти стили обеспечат правильное обтекание и отступы, улучшая визуальное восприятие контента.

Использование плагинов для расширенного управления выравниванием изображений

Для тех, кто хочет получить больше контроля, существуют плагины, которые расширяют функционал выравнивания и добавляют новые возможности.

1. Advanced Image Styles

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

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

2. Image Hover Effects Ultimate

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

Это полезно, если вы хотите не только выровнять, но и добавить интерактивности.

3. WP-Host Custom Image Align

Для наших читателей на wp-host.ru я подготовил простой плагин, который добавляет дополнительное выравнивание "по сетке" с помощью CSS Grid. Вот основной код плагина:

<?php
/*
Plugin Name: WP-Host Custom Image Align
Description: Добавляет кастомное выравнивание изображений с помощью CSS Grid
Version: 1.0
Author: WP-Host.ru
*/

function wphost_enqueue_custom_styles() {
    wp_enqueue_style('wphost-image-align', plugin_dir_url(__FILE__) . 'image-align.css');
}
add_action('wp_enqueue_scripts', 'wphost_enqueue_custom_styles');

function wphost_add_image_align_options($settings) {
    $settings['imageAlign'] = array(
        'grid-left' => 'По сетке слева',
        'grid-center' => 'По сетке по центру',
        'grid-right' => 'По сетке справа',
    );
    return $settings;
}
add_filter('block_editor_settings_all', 'wphost_add_image_align_options');
?>

Файл image-align.css содержит стили для новых классов:

.grid-left {
    display: grid;
    justify-items: start;
    margin-bottom: 1em;
}

.grid-center {
    display: grid;
    justify-items: center;
    margin-bottom: 1em;
}

.grid-right {
    display: grid;
    justify-items: end;
    margin-bottom: 1em;
}

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

Настройка выравнивания изображений в редакторе Gutenberg

В редакторе Gutenberg есть расширенные возможности управления изображениями. Помимо стандартного выбора выравнивания, вы можете использовать блок "Обертка" (Group) и задавать для него стили выравнивания.

Чтобы сделать кастомное выравнивание, выполните следующие шаги:

Вставьте изображение в блок.
Оборачивайте его в блок "Group" или "Columns".
Выберите в настройках блока нужное выравнивание.
Добавьте дополнительные CSS-классы в поле "Дополнительные CSS-классы".

Например, если вы добавите класс grid-center, то изображение будет выровнено по центру с помощью CSS Grid, как описано выше.

Дополнительные советы по работе с выравниванием в Gutenberg

Не забывайте проверять отображение на мобильных устройствах, так как float и grid ведут себя по-разному. Для адаптивного дизайна можно использовать медиа-запросы:

@media (max-width: 768px) {
    .alignleft, .alignright {
        float: none;
        display: block;
        margin: 0 auto 1em auto;
    }
}

Так вы обеспечите корректное выравнивание на смартфонах и планшетах.

Обработка изображений и выравнивание через PHP: пример функции для wp-host.ru

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

function wphost_wrap_image_with_align($html, $id, $caption, $title, $align, $url, $size, $alt) {
    if (!in_array($align, array('alignleft', 'aligncenter', 'alignright'))) {
        $align = 'aligncenter';
    }
    return '<div class="'. esc_attr($align) .'">' . $html . '</div>';
}
add_filter('image_send_to_editor', 'wphost_wrap_image_with_align', 10, 8);

Эта функция позволяет гарантировать, что любое изображение, вставленное через редактор, будет обернуто в блок с классом выравнивания, что упрощает стилизацию.

Преимущества такого подхода:

Единообразие в коде
Легкость изменения стилей через CSS
Поддержка любых тем и кастомных решений

Заключение: рекомендации по выбору подхода к выравниванию изображений

Для большинства сайтов достаточно встроенных возможностей WordPress и базовых CSS-стилей. Если же вы хотите более гибкого управления, используйте плагины с расширенными стилями или создайте собственный плагин, как показано выше.

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