Медиабиблиотека
Страница «Как учиться» уже содержит вводный текст, два раздела и упорядоченный список. Добавим схему учебного маршрута, но сначала определим её роль. Изображение должно дополнять объяснение связи курсов; оно не заменяет список действий и не содержит единственную доступную информацию. Результат урока — согласованный медиаресурс: известный исходник, понятная подпись, разумный размер и предсказуемое использование в странице.
Медиабиблиотека WordPress хранит записи о загруженных файлах и связывает их с физическими ресурсами. Изображение может использоваться в нескольких документах. Поэтому удаление элемента библиотеки и удаление одного блока на странице — разные действия. Первое может повредить несколько материалов, второе меняет только конкретное содержимое. Поля библиотеки и варианты представления описаны в официальной документации. Рассмотрим связь этих полей с задачей читателя.
Исходник и публикационная копия
Для учебной схемы выберем растровый PNG learning-route.png размером 1200 на 600 пикселей. В архиве серии лежит описание схемы и паспорт ресурса, а не вымышленный загруженный файл или чужая фотография. Само изображение читатель готовит отдельно: четыре подписанных прямоугольника «HTML и CSS», «JavaScript», «Markdown», «Производительность» и соединяющие стрелки. Такой рисунок позволяет обсуждать качество, не привязываясь к неизвестной лицензии готового изображения из поиска.
Сохраните редактируемый исходник схемы в отдельном месте. В медиабиблиотеку загружайте публикационную копию. Эти файлы имеют разные цели: исходник нужен автору для изменения подписи, а PNG — браузеру для отображения. Если через год количество курсов увеличится, редактируемая версия избавит от перерисовки. Название публикационной копии пусть описывает назначение. Имя final-final-new2.png ничего не объясняет редактору, который позже будет искать ресурс среди сотен загрузок.
В паспорт внесём ширину, высоту, формат, автора, условия использования и страницы применения. Отдельно запишем размер файла после экспорта: например, целевое ограничение до 150 килобайт для простой схемы. Это ориентир, не измеренное свойство отсутствующего PNG. Если реальный экспорт весит существенно больше, проверьте палитру, прозрачность и ненужные метаданные. Не меняйте формат только потому, что другой считается современным: важны читаемость линий и фактический размер выбранного изображения.
Текстовая альтернатива и подпись
Вставьте блок изображения после раздела «Выберите маршрут». Альтернативный текст должен передавать функцию рисунка. Для нашей схемы подходит «Маршрут: HTML и CSS, затем JavaScript; Markdown и производительность изучаются после основ». Он объясняет порядок без описания цветов прямоугольников. Если такой порядок уже полностью изложен рядом и изображение исключительно декоративное, можно выбрать пустой alt. Однако это осознанное решение о дублировании информации, а не способ избежать заполнения поля.
Подпись под рисунком видна всем посетителям. Она может уточнить «Маршрут можно менять после проверки исходных знаний». Альтернативный текст выполняет другую задачу, поэтому не копируйте подпись в alt автоматически. Название вложения в медиабиблиотеке тоже не является универсальной заменой. На сайте, где одна картинка используется в разных контекстах, значения alt следует оценивать в каждом блоке: рисунок может выполнять различную смысловую функцию на главной странице и внутри урока.
Пример ниже показывает желаемую структуру итогового HTML. Это фрагмент для анализа вывода, а не блок WordPress с назначенным ID вложения: реальный ID и URL появятся в вашем стенде после загрузки.
<figure>
<img src="/wp-content/uploads/learning-route.png"
width="1200" height="600"
alt="Маршрут: HTML и CSS, затем JavaScript; Markdown и производительность изучаются после основ">
<figcaption>Маршрут можно менять после проверки исходных знаний.</figcaption>
</figure>Числа width и height описывают пропорцию и помогают браузеру заранее выделить место. CSS может показывать изображение уже, сохраняя соотношение сторон. Это отличается от загрузки огромной картинки без размеров, когда текст сначала занимает её будущую область, затем сдвигается. В реальном выводе WordPress может добавить srcset, sizes и другие атрибуты. Мы не обещаем конкретный автоматически сгенерированный набор, пока неизвестны настройки темы и обработанные размеры файла.
Разные размеры для разных мест
Для схемы внутри текста обычно нужен размер, соответствующий ширине содержимого. В карточке курса может понадобиться маленькая миниатюра, а в полноэкранном просмотре — большой исходник. Один ресурс не означает один одинаковый URL во всех этих местах: WordPress способен создавать производные размеры. После загрузки проверьте, существуют ли они физически и какую копию выбирает браузер. Если серверная обработка изображений недоступна, интерфейс библиотеки может показать файл, но ожидаемые миниатюры не появятся.
Рассмотрим ошибку: редактор выбирает маленькую миниатюру для схемы шириной в семьсот пикселей. Текст рисунка размывается. Увеличение CSS-размера не восстанавливает потерянные пиксели. Нужно выбрать подходящую производную копию либо изменить экспорт. Обратная ошибка — передавать 4000-пиксельное изображение ради карточки шириной двести пикселей. Оно может выглядеть чётко, но расходовать лишний трафик. Решение требует смотреть фактический запрос и размеры отображения, а не только внешний вид на быстром соединении.
Отдельная граница касается SVG. Этот формат удобен для схем, но файл может содержать активные элементы, ссылки и встроенный код. Не включайте произвольную загрузку SVG только ради данного урока и не переименовывайте расширение, обходя проверку типов. Наш PNG выбран в том числе для простого редакционного сценария. Если проекту понадобится SVG, отдельно определите доверенный источник, обработку файла и допустимые элементы; установка плагина загрузки сама по себе не устанавливает эти правила.
Изменение ресурса без потери связей
Если заменяется схема, сначала найдите все места её использования. Прямая замена файла на диске под прежним именем может оставить старое изображение в браузерном или промежуточном кеше. Создание нового вложения позволяет явно выбрать новую версию, но старые страницы продолжат ссылаться на предыдущую. У обоих подходов есть последствия; библиотека сама не принимает редакционное решение, какая версия является актуальной и кто обновляет ссылки.
Ожидаемое состояние после урока: у страницы study есть одна схема с разумной пропорцией, полезным alt и подписью; паспорт фиксирует права и исходник; изображение не является единственным носителем порядка курсов. Посмотрите страницу с отключённой загрузкой картинок и на узком экране. Смысл маршрута должен сохраняться, а текст не должен внезапно сдвигаться после появления файла. Эти просмотры и обработка PNG при подготовке не выполнялись. Их фактические результаты читатель записывает самостоятельно, прежде чем использовать такой ресурс в общей навигации или шаблонах.