Оптимизация миниатюр сообщений WordPress для публикации в социальных сетях
Получение идеального избранного изображения важно, если вы хотите заинтересовать свою аудиторию. Будь то получение высококачественного изображения или изображения правильного размера, все это способствует получению правильного избранного изображения
Плагины помогают улучшить функциональность вашего сайта WordPress. Они также помогают облегчить множество утомительных задач, таких как различные доступные плагины SEO .
Плагины SEO предоставляют вам контрольный список, который позволяет вам легко отслеживать и заполнять все факторы ранжирования SEO на странице.
Если вы используете плагин Yoast SEO , он дает вам возможность включить изображение, заголовок и описание, относящиеся к различным социальным платформам. Он также указывает правильный размер изображения, который будет использоваться для различных платформ социальных сетей.
Таким образом, вам не нужно явно создавать конкретный пост для различных платформ. Вы можете легко создать это прямо из своей панели управления WordPress.
Изображение от размера экрана
Смена изображения в зависимости от размера экрана необходима для того, чтобы все детали рисунка (надписи, мелкие элементы) были четко различимы на любом устройстве пользователя: как на компьютере, так и на планшете или смартфоне.
Код смены изображения размещается в файле дочерней темы. Изначально код использовался для отображения рекламных баннеров.
1 |
*автобаннер* .avtobanner-300×250{ displayblock; marginauto; } .avtobanner-468×60{ displaynone; marginauto; } .avtobanner-728×90{ displaynone; marginauto; } @media(min-width490px){ .avtobanner-300×250{ displaynone; } .avtobanner-468×60{ displayblock; } } @media(min-width750px){ .avtobanner-468×60{ displaynone; } .avtobanner-728×90{ displayblock; } } *конецавтобаннера* |
Сначала идет описание контейнеров под изображения, причем контейнер отображается на экране по умолчанию (), остальные – скрыты ().
При увеличении размера экрана до 490px () контейнер скрывается, а – отображается.
При увеличении размера экрана до 750px () контейнер скрывается, а – отображается. Контейнер остается скрытым, так как размер экрана больше 490px.
Состояние контейнеров в зависимости от размеров экрана описывает следующая таблица:
Контейнер | Размер экрана | ||
---|---|---|---|
до 490px | от 490px до 750px | от 750px | |
avtobanner-300×250 | block | none | none |
avtobanner-468×60 | none | block | none |
avtobanner-728×90 | none | none | block |
Если решите воспользоваться моим кодом, сначала протестируйте его как есть, перед тем, как будете изменять его под свои нужды.
Описание и предназначение таблиц базы данных
Работая с базой данных в целях администрирования я использую панель phpMyAdmin. На вашем хостинге или сервере может быть установлено другое программное обеспечение.
Таблица wp_commentmeta
Каждый комментарий, оставленный на сайте, содержит метаданные — эта информация хранится в этой таблице. Например, если установлен плагин Akismet для защиты от спама, то он будет записывать в неё свои данные: одобрен комментарий или нет, имеется ли пометка о спаме.
Таблица wp_comments
Название этой таблицы говорит само за себя — здесь хранятся оставленные к записям комментарии. Именно в этой таблице я переносил комментарий с одной страницы на другую, о чём писал в начале статьи.
Помимо текста комментария в таблице хранится дополнительная информация, включая имя, электронную почту и сайт автора, IP-адрес с которого бы отправлен комментарий, дату, время и многое другое.
Таблица wp_links
Эта таблица раньше хранила ссылки блогролла на Кодекс, wordpress.org и другие ресурсы. На блоге у меня были удалены все ссылки из консоли, поэтому на скриншоте ниже есть надпись «Ссылок не найдено», а таблица пуста.
Теперь эта функция устарела, но при необходимости её можно включить с помощью плагина Links Manager.
Таблица wp_options
Хранит основные настройки WordPress, в том числе параметры, доступные для изменения в консоли администрирования. Кстати, таблица wp_options очень интересна для изучения, но зачастую после установки и последующего удаления плагинов содержит лишние строки. У меня есть отличное руководство по чистке базы данных от «мусора».
Таблица wp_postmeta
Хранит огромное количество данных о записях и страницах сайта: информацию о прикреплённых файлах (изображения, документы, видео), данные заполняемых полей при создании или редактировании записей. Некоторые плагины могут добавлять свою собственную информацию в эту таблицу. Например, плагин All in One SEO Pack хранит здесь Title, Description и Keywords.
Таблица wp_posts
Самое ценное — контент — сосредоточено в таблице wp_posts. В ней хранятся сведения об авторе статьи, дата и время публикации, дата и время последнего изменения, непосредственно тексты, статус записи (опубликовано, черновик, на утверждении) и ещё очень много информации.
Таблица wp_termmeta
Каждый термин (категории, метки и термины пользовательских таксономий) содержит информацию, называемую метаданными, и хранится в этой таблице. Скриншот не прилагаю, так как у меня эта таблица оказалась пустой. Метки и пользовательские таксономии при этом не использую.
Таблица содержит категории, метки и термины пользовательских таксономий.
Таблица wp_term_relationships
Сообщения связаны с категориями и метками из таблицы wp_terms и эта связь здесь поддерживается. Ассоциация ссылок на соответствующие категории также хранится в этой таблице.
Таблица wp_term_taxonomy
В этой таблице описаны таксономии (категории, теги) для записей в таблице wp_terms. Устанавливается очередность и вложенность категорий, которые могут быть родительскими и дочерними, вот таблица wp_term_taxonomy и отслеживает иерархию между ними.
Таблица wp_usermeta
Эта таблица хранит метаданные зарегистрированных пользователей, их персональные настройки и данные профиля, такие как цветовая схема, контактные данные, биография, никнейм и другие.
Таблица wp_users
Таким вот образом организована структура базы данных WordPress, все таблицы взаимосвязаны между собой, содержат сериализированные массивы, поэтому изменение данных вручную может привести к сбою, помните об этом и соблюдайте осторожность при редактировании
Изменить изображение через Хуки
Тема может задавать ширину изображения, а владелец сайта может контролировать ширину и пропорции. Если нужно больше контроля над размерами миниатюр, есть некоторые дополнительные Хуки.
Для получения размеров изображений WooCommerce использует функцию wc_get_image_size().
Возвращаемое ею значение проходит через фильтр
Можно передать в этот хук массив с размерами, например такой:
Например, если хотите изменить миниатюру в галерее (gallery thumbnails) на 150х150px без обрезки, нужно добавить следующий код:
Этот метод не рекомендуется использовать, потому что он переопределяет настройки, заданные владельцем сайта.
Список Хуков, меняющих размеры изображений
Некоторые функции шаблонов WooCommerce пропускают размеры изображений через фильтры, поэтому вы можете использовать другие размеры в нужных местах, кроме зарегистрированных размеров изображений.
Фильтр | Где используется | Значение по-умолчанию |
---|---|---|
single_product_archive_thumbnail_size | Изображение продукта в каталоге | woocommerce_thumbnail |
subcategory_archive_thumbnail_size | Изображение подкатегории в каталоге | woocommerce_thumbnail |
woocommerce_gallery_thumbnail_size | Миниатюры в галерее | woocommerce_gallery_thumbnail |
woocommerce_gallery_image_size | Изображение в галерее на странице продукта | woocommerce_single |
woocommerce_gallery_full_size | Используется для зума изображений в карточке товара | full |
— размер зарегистрированный в WordPress (Настройки -> Медиафайлы)
Для примера, изменим миниатюры в галерее используя размер , зарегистрированный в wordpress место :
Этот метод используется ядром WooCommerce. Если тема имеет свои файлы шаблонов или свои функции для вывода изображений, то фильтры могут не работать.
Как обслуживать масштабированные изображения в WordPress
Для начала вам необходимо знать размеры изображений, которые будут использоваться на вашем сайте. Я говорю о изображениях баннеров, изображениях в блогах, граватаре и т. д.
Мы хотим знать, какой самый большой размер будет отображаться на каждом изображении, поскольку мы знаем, что все, что превышает этот порог, бесполезно.
Например, предположим, что я хочу использовать фотографию океана на главной странице моего сайта. Изображение в его неизмененном состоянии составляет 4534px x 3023px.
Для изображения в теле сообщения в блоге вам, вероятно, нужно будет обслуживать изображение в диапазоне 600px-960px, а для изображений, которые охватывают ширину экрана настольного компьютера, вы смотрите на что-то в диапазоне ширины 1600px.
Также имейте в виду, что вам нужно будет удвоить эти размеры для размещения экранов retina.
Чтобы найти размер для того, чтобы соответствовать идеально, мы будем искать изображение на сайте и открывать инструменты разработчика браузера.
Если вы используете Chrome, щелкните правой кнопкой мыши на изображении и перейдите к Inspect (проверить элемент).
В Chrome при наведении указателя мыши на URL-адрес изображения вы увидите размер, в котором отображается изображение, с исходным “естественным” размером изображения в скобках. Этот большой файл изображения — это то, что ваши посетители загружают.
Изображение более 3000 пикселей слишком велико.
Теперь, когда мы знаем, какого размера нам нужно изображение, мы можем изменить размер изображения в WordPress несколькими различными способами.
Загрузка файлов в библиотеку WordPress
Первый способ
На административной панели щелкните в разделе «Медиафайлы» на «Добавить новый».
Появится страница, с которой вы можете «Загрузить новый медиафайл» или медиафайлы.
(Flash-загрузчик позволяет загружать несколько файлов сразу.)
Второй способ
Кнопки загрузки медиафайлов
Когда вы в визуальном или HTML-редакторе WordPress создаете (редактируете) запись или страницу блога, вверху появляются кнопки добавления медиафайлов. Первая кнопка (на рисунке на нее указывает черная стрелка) — это кнопка добавления изображения. Кнопка добавления открывает окно, которое позволяет вставить в запись (или на страницу) новый файл, загрузив его в библиотеку, или существующий файл с другого сайта или из библиотеки медиафайлов WordPress. Загруженные с компьютера файлы добавляются в галерею записи (или страницы).
Добавление медиафайлов с компьютера
Лучшие практики WordPress для избранных изображений
Вот несколько дополнительных рекомендаций, которые вы могли бы рассмотреть при создании идеального избранного изображения WordPress.
Быть последовательным
При создании собственного изображения у вас есть возможность включить свой логотип и присвоить ему соответствующий бренд. Последовательный подход к дизайну ваших изображений помогает создавать бренды и легко различимы для ваших посетителей.
Используйте релевантные изображения
Мы обычно сначала смотрим на изображения, прежде чем смотрим на заголовок поста. Выбранные вами изображения могут не только привлекать пользователей; они также указывают на контекст страницы. По этой причине следует выбрать актуальное изображение. Тот, который точно представляет вашу страницу. В противном случае вы могли бы получить более высокий показатель отказов.
Убедитесь, что у вас есть законные права
Ищете стоковые изображения с таких сайтов, как Unsplash, Pixaby и других фото-сайтов без авторских прав? Совершенно никаких проблем! В противном случае помните о потенциальных проблемах с лицензированием.
При поиске изображений в Google обратите внимание на те, которые лицензированы Creative Commons. Рассмотрите этот вариант, только если вы не создаете свои собственные изображения
Как редактировать параметры изображения
Прежде чем мы перейдем к разделу, где Вы сможете обрезать, изменить размер и редактировать изображения, давайте посмотрим, как изменить некоторые параметры. Это поможет Вам организовать файлы на сайте, и будет полезно, чтобы посетитель и поисковые системы имели все дополнительные данные о файлах на Вашем сайте.
- Выберите любое изображение из библиотеки
- Появится всплывающее окно и покажет сведения об этом изображении
- Справа Вы найдете информацию, такую как имя файла, тип файла, дата загрузки, размер файла в байтах и размерность в пикселях
- Ниже Вы можете увидеть URL вашего изображения
- Чтобы отредактировать изображение, измените его заголовок, подпись, атрибут alt (показывается тем пользователям, которые не могут открыть фотографию) и описание
- Как раз под полем описания Вы можете увидеть, какой пользователь загрузил этот конкретный мультимедийный файл
- Чтобы отредактировать другую информацию, нажмите ссылку «Изменить другие детали (Edit more details)» внизу
Откуда они берутся и для чего нужны?
Они берутся из настроек, о которых ниже, а нужны для визуального сопровождения поста. Эти копии картинок называются Featured Images (Популярные или Избранные изображения).
Вот некоторые примеры использования Featured Images:
- Популярные изображения могут появляться в виде миниатюрок со ссылкой на пост на главной странице блога;
- Популярные изображения могут появляться над/под заголовком записи на странице конкретного поста;
- Популярные изображения могут отображаются в виде миниатюрок со ссылкой на пост в различного рода слайдерах и виджетах.
Виды Featured Images
Это могут быть изображения следующих настроек:
- Размер Миниатюры (Thumbnail)
- Средний размер
- Большой размер
- Исходное изображение, если оно больше, чем Большой размер
Настройки этих размеров изображения устанавливаются в Консоли: Настройки > Медиафайлы и, по умолчанию, имеют следующие размеры:
- Размер Миниатюры составляет: 150х150px (с функцией обрезки, которую рассмотрим ниже)
- Средний Размер: Максимальная ширина 300px, Максимальная высота 300px
- Большой размер: Максимальная ширина 1024px, Максимальная высота 1024px
Настройка размеров изображения
Понимание опции размера медиафайлов
WordPress использует два способа изменения размера изображений — метод «грубая обрезка«, и метод «мягкая обрезка» (или метод «изменение размера блока»). Для получения Среднего и Большого размера изображений используется метод «мягкой обрезки», который подразумевает, что изображение «растягивается» до наибольшей стороны (горизонтальной или вертикальной), а затем помещается внутрь «коробки», определенной настойками «Максимальная ширина» и «Максимальная высота».
Мягкая обрезка. Допустим, что вы загружаете изображение размерами 600х600px, и будет создано изображение Среднего размера (300х300px). В данном случае изображение не потеряет своих характеристик из-за соблюдения соотношения сторон 1:1. Однако, если исходное изображение будет 300px в ширину и высотой в 600px, а наибольшим размером в данном случае является высота, изображение сначала «растянется» по ширине до 600px, а затем обрежется до размеров 300х300px. Другими словами, исходное изображение искажается, пока не впишется в «коробку» 300х300px.
Метод «грубой обрезки» (или «жесткой обрезки») заключается в том, что WordPress обрезает изображение до жестко заданных размеров, и без дополнительных манипуляций.
Техническая сторона вопроса
Популярные изображения – это встроенная возможность в ВордПрессе. Для кастомной настройки такой возможности, эта функция должна быть подключена в вашей теме, через добавление кода в файле functions.php:
add_theme_support ('post-thumbnails');
После подключения этой функции мы сможем задействовать пользовательские (т.е. – свои) настройки размеров изображений, с помощью функции:
add_image_size ($name, $width, $height, $crop);
После того, как вы добавили эту функцию, новые размеры изображения будут создаваться дополнительно с изображениями по умолчанию в процессе загрузки медиа.
Папка для загрузки
Папки блога mblogm.ru
По умолчанию WordPress хранит медиафайлы в папке uploads внутри папки wp-content вашего блога WordPress.
Можно задать другую папку на административной панели в Параметры>Медиафайлы. (В версии 3.5 эта возможность исчезла, но ее можно восстановить: см. Исчезло поле для задания папки загрузки файлов в WordPress 3.5)
WordPress создаст папку uploads автоматически, но для этого необходимо задать для папки wp-content вашего блога WordPress права доступа 777 (через CPanel или через FTP-клиент). Когда папка uploads уже создана, в целях безопасности нужно назначить для папки wp-content более ограничивающие права доступа (Changing File Permissions).
Форматирование текстов WordPress в статьях
Чтобы начать форматирование статьи (поста) WordPress, зайди на вкладку Записи >>Добавить новую или Записи>>Опубликованные >>Все сообщения и выбери пост, который ты хочешь отредактировать.
Значки форматирования, добавленные в редактор сообщений WordPress, расположены в два ряда. По умолчанию второй ряд кнопок скрыт. Чтобы его открыть нажми крайнюю кнопку первого ряда.
Все кнопки подписаны.
Первый ряд кнопок
В первом ряду кнопок визуального редактора есть кнопки для выделения жирным шрифтом, курсивом или зачеркиванием текста.
Чтобы использовать, например, кнопку выделить текст полужирным, просто выделите текст, который ты хочешь отформатировать, и нажмите кнопку. После этого ты визуально увидишь, что этот текст выделен полужирным шрифтом.
Следующие два значка предназначены для маркированных и нумерованных списков. Если ты хочешь добавить список в сообщение, просто выдели строки списка, а затем нажмите на этот значок.
Значок кавычки является блоком цитаты. По умолчанию это добавит отступы, и текст будет выделен курсивом.
Примечание: твоя тема WordPress может менять внешний вид цитаты.
Далее кнопки параметров выравнивания текста. Ты можешь выбрать выравнивание влево, по центру или выровнять по правому краю.
Кнопка ссылка, позволяет быстро создать ссылку.
Следующий значок more это тег вставки формирования анонса текста. Этот тег отсечёт часть текста, для её показа в архивах сайта и на главной странице, в качестве анонса. По умолчанию, за анонсом будет ссылка «Читать дальше».
Следующая кнопка полноэкранный режим. Нажимаешь кнопку, маленький экран редактора превращается в большой экран без полей и виджетов. Чтобы выйти из полноэкранного режима, нажми «Esc» или кнопку «выйти из …».
Второй ряд кнопок редактора
По умолчанию, второй ряд кнопок редактора скрыт. Чтобы его открыть нажми крайнюю кнопку первого ряда.
Здесь ты можешь:
Добавить в текст, стили заголовка H1–H6: Просто выделить заголовок и нажать стиль заголовка h1-h6.
Подчеркнуть текст: выделить текст и подчеркнуть его.
Изменить цвет выбранного текста: Выделяете текст и меняете его цвет.
Следующий значок «Вставить как текст», предназначен для вставки текста с очисткой форматирования. Это значит, что если ты его нажмёшь, будет включен режим вставки простого текста. Содержимое будет вставляться в виде простого текста, пока ты не отключишь этот режим.
Далее значок в виде ластика. Называется «Очистить форматирование». Этой кнопкой ты можешь очистить формат Word выделенного фрагмента текста.
Произвольный символ: если нажать на эту кнопку, то всплывёт окно, где можно выбрать один из популярных специальных символов. Вы можете найти: валюты знак копирайта, знак торговой марки, математику и другие значки.
Уменьшить отступ: Двигает выделенный текст влево.
Увеличить отступ: Двигает выделенный текст вправо.
Отменить команду назад: Возвращает редактор на шаг назад, после совершенного действия.
Отменить команду вперед: То же, только вперёд.
Горячие клавиши (знак вопроса): Здесь справочная таблица горячих клавиш визуального редактора. На рисунке полная шпаргалка по горячим клавишам WordPress редактора.
Как добавить пользовательские размеры изображений в редактор Gutenberg
Чтобы в редакторе Gutenberg отображались пользовательские размеры изображений, нужно добавить приведенный ниже код в файл функций. Если вы создали нестандартный размер изображений для темы, то можете пропустить этот шаг.
Пользовательский размер изображений, который добавляется с помощью кода, приведенного ниже
Мы подключаемся к фильтру . В массив добавляем название нестандартного размера изображений, указанного в функции . А также значение, которое будет отображаться в раскрывающемся списке:
<?php add_filter( 'image_size_names_choose','wpmudev_custom_image_sizes' ); function wpmudev_custom_image_sizes( $sizes ) { return array_merge( $sizes, array( //Здесь добавляем пользовательский размер изображений 'custom-image-square' => __( 'Square' ), 'blog-width' => __( 'Blog Content Full Width' ), ) ); }
Сниппет кода для добавления пользовательского размера изображений в WordPress
Но сначала нужно повторно сгенерировать миниатюры.
Объединим все, что мы узнали, в один блок кода с реальным примером. Предположим, что нам нужно добавить в свой блог нестандартные размеры изображений:
- Основное изображение размером 1600 на 400 пикселей;
- Изображение с шириной 800 пикселей.
Обратите внимание, что я не обрезаю второе изображение, которое будет располагаться на всю ширину контента. Но я буду обрезать основные изображения, чтобы они выстраивались в ряд. Единственное изображение, которое я хочу добавить в выпадающий список редактора Gutenberg — это изображение блога
Так как я буду использовать в своей теме размер изображения, рекомендуемый WordPress
Единственное изображение, которое я хочу добавить в выпадающий список редактора Gutenberg — это изображение блога. Так как я буду использовать в своей теме размер изображения, рекомендуемый WordPress.
<?php // Сначала добавляем поддержку главного изображения add_theme_support( 'post-thumbnails' ); // Затем мы добавляем два пользовательских размера изображений add_image_size( 'featured-large', 1600, 400, true ); add_image_size( 'blog-width', 800, 600 ); // И затем добавляем пользовательский размер изображений, который охватывает область контента, в список выпадающего меню блока редактора Gutenberg add_filter( 'image_size_names_choose', 'wpmudev_custom_image_sizes' ); function wpmudev_custom_image_sizes( $sizes ) { return array_merge( $sizes, array( 'blog-width' => __( 'Blog Width' ), ) ); }
Следующим шагом будет повторное генерирование миниатюр.
Чтобы использовать пользовательское изображение для записей в цикле, я добавляю следующий код в файл или :
<?php get_header(); if (have_posts()) : while (have_posts()) : the_post(); ?> <h1><?php the_title() ;?></h1> <?php the_post_thumbnail( 'featured-large' ); the_content(); endwhile; endif; get_sidebar(); get_footer(); ?>
Обратите внимание, как я добавил в функцию. В результате изображение будет отображаться под заголовками записей в блоге, то есть над основным контентом
Что такое избранное изображение WordPress?
Показанное изображение привлекает внимание посетителей к вашему контенту и указывает, о чем ваши сообщения. Ваша активная тема WordPress также определяет, как избранные изображения будут отображаться на вашем сайте
Хотя они могут выглядеть по-разному в разных темах с точки зрения размера и размещения, в большинстве тем WordPress они включены
Ваша активная тема WordPress также определяет, как избранные изображения будут отображаться на вашем сайте. Хотя они могут выглядеть по-разному в разных темах с точки зрения размера и размещения, в большинстве тем WordPress они включены.
Это все, что вам нужно для добавления пользовательских размеров изображений
Как только вы поймете, как в WordPress работают нестандартные размеры изображений, то сможете изменять их в соответствии со своими потребностями и сэкономить много времени. Правильно подобранные размеры изображений помогают увеличить производительность сайта и улучшить ранжирование в поисковых системах, поэтому важно разобраться в этой теме. А для оптимизации изображений можно применять не только CDN, но и другие инструменты: отложенная загрузка и преобразование изображений в форматы следующего поколения
А для оптимизации изображений можно применять не только CDN, но и другие инструменты: отложенная загрузка и преобразование изображений в форматы следующего поколения.
Пожалуйста, оставляйте свои отзывы по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, лайки, подписки!
Пожалуйста, оставляйте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, лайки, подписки!
Пожалуйста, опубликуйте свои комментарии по текущей теме материала. За комментарии, подписки, отклики, дизлайки, лайки низкий вам поклон!
Вадим Дворниковавтор-переводчик статьи «Default WordPress Image Sizes and How to add Custom Sizes»
Изображение слишком большое – как обрезать картинку в редакторе блога?
При загрузке изображений со смартфонов или фотоаппаратов выясняется, что они очень большие. В WordPress есть замечательная функция – он автоматически создает три размера загруженного изображения: маленький, средний и большой. Однако, иногда возникает потребность обрезать фото до нужного размера. Конечно, WordPress – это не Photoshop, но и здесь есть несколько базовых встроенных функций, как, например: масштабирование, обрезка, вращение изображения.
Загрузите изображение: Добавить медиафайл » Загрузить файлы. С правой стороны в «параметрах файла» вы увидите ссылку «Редактировать». Щелкните по ней, и вы окажитесь в окне Редактирования изображения.
Здесь вы сможете увидеть базовые функции редактора: обрезка, поворот, изменение размера и т.д.
Как выровнять изображения по левому/правому краю?
Просматривая статьи в интернете, вы наверняка замечали, что в некоторых из них текст расположен вокруг небольших изображений. Это можно сделать с помощью функции «выровнить по левому/правому краю». При этом выровнять изображение можно непосредственно перед его загрузкой в запись.
Вначале при загрузке изображения в запись, текст будет расположен прямо под ним. Щелкните по фото и вы увидите строку с необходимыми опциями, также их можно выбрать, нажав на кнопку «Редактировать».
При нажатии перед вами появится окно редактора изображения, где можно выбрать необходимое выравнивание и сразу просмотреть, как текст будет обтекать картинку.
Функцию выравнивания можно также найти в панели инструментов текстового редактора. Щелкните по изображению, чтобы сделать его активным и выберите выравнивание по левому или правому краю – текст будет красиво обтекать картинку.
Как добавить фоновое изображение?
Во многих темах WordPress есть не только поддержка изображений для заголовка сайта, но и аналогичная функция для фонового изображения сайта. Чтобы проверить, если эта функция у выбранной вами темы, зайдите в админке во Внешний вид, там должна быть ссылка «Background».
Загрузите любое понравившееся изображения с компьютера или выберите его с Библиотеки файлов. Когда вы выберите изображения, вы сможете сделать предосмотр сайта, а также будут доступны функции редактирования фонового изображения. Например, вы сможете сделать стандартное фиксированное или мозаичное отображение, или оно у вас будет прокручиваться. Сохраните изменения и просмотрите, как все выглядит.