16 сентября

0 комментариев

Добавление изображений в WordPress-3 способа

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

Цели обучения

В этой статье вы узнаете:

  • как добавлять изображения в свои посты;
  • как редактировать изображения с помощью боковой панели и панели инструментов;

Добавление изображений в WordPress в ваши посты

Изображения являются неотъемлемой частью поста. Они оживляют ваши истории и позволяют вам представить свои идеи более ярко. Большинство сообщений содержат изображения, поэтому вы должны знать, как добавить их. Именно это вы узнаете в этой первой части этой темы.

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

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

Добавление изображения под абзацем

Чтобы добавить изображение под абзацем, выполните следующие действия.

  • Выберите блок, под которым вы хотите разместить изображение.
  • С помощью мыши щелкните левой кнопкой мыши в конце текста. Это будет позиционировать ваш курсор сразу после последнего предложения текста (см. изображение 1).
правильная позиция курсора

Изображение 1: правильная позиция курсора

  • Нажмите клавишу ввода на клавиатуре. Вы увидите новые опции под абзацем (см. изображение 2).
 Блок добавления параметров под абзацем

Рисунок 2: Блок добавления параметров под абзацем

  • Нажмите на значок плюс (1 на изображении 3). Появится всплывающее меню. Альтернативный шаг: Нажмите на иконку изображения, которое появляется, когда вы получаете новые варианты под абзацем (изображение 2). Появится блок изображения.
  • Выберите блок изображения из меню (3 на изображении 3). Ваш блок изображения будет добавлен в пост. Если блок изображения не появляется во всплывающем окне, в поисковой строке напишите запрос "изображение" (2 на изображении 3).
 Добавление блока изображения

Изображение 3: Добавление блока изображения

Добавление изображения выше или ниже абзаца

Чтобы добавить изображение над или под абзацем, выполните следующие действия. ⁱ

  • Выберите блок выше / ниже которого вы хотите разместить изображение.
  • Наведите указатель мыши на середину самой верхней / нижней части блока. Вы увидите значок плюса.
  • Нажмите на значок плюс, и появится всплывающее меню.
  • Выберите блок изображения из меню. Блок изображения будет добавлен в сообщение.
 опция «Добавить блок над абзацем»

Изображение 4: опция «Добавить блок над абзацем»

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

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

Добавление блока изображения с помощью панели инструментов

Чтобы добавить блок изображения с помощью панели инструментов, выполните следующие действия.

  • Нажмите значок плюса в крайней левой части панели инструментов.
  • Выберите блок изображения из меню. Блок будет добавлен в пост (изображение 5).
Блок изображения

Изображение 5: Блок изображения

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

Загрузка изображения

Загрузка изображений позволяет добавлять изображения, хранящиеся на вашем жестком диске, в ваши сообщения.

Загрузка изображения в ваш пост

Чтобы загрузить изображение в ваш пост, сделайте это:

  • Нажмите кнопку «Загрузить» в поле изображения (1 на изображении 6). Это откроет диалоговое окно.
  • Найдите изображение, которое вы хотите использовать, из папок на вашем компьютере (2 в изображении 6).
  • Выберите изображение (3 на изображении 6).
  • Нажмите Открыть (4 на изображении 6). Изображение теперь добавлено в ваш пост.
 Загрузка изображения

Изображение 6: Загрузка изображения

Теперь, когда ваше изображение добавлено в пост, вы увидите боковую панель с правой стороны экрана.

Если вы не видите панель, вы можете включить её, нажав на значок шестерёнки в верхнем правом углу страницы постредактирования (см. изображение 7). Это сразу откроет «Боковую панель».

значок шестерёнки в правом верхнем углу

Изображение 7: значок шестерёнки в правом верхнем углу

Боковая панель блока изображений

Каждый блок имеет разные параметры боковой панели. Давайте рассмотрим варианты в блоке изображения боковой панели (см. изображение 8).

 боковая панель блока изображения

Изображение 8: боковая панель блока изображения

  • Alt (альтернативный текст)

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

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

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

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

  • Размер изображения

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

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

Ранее мы говорили о настройках в предыдущем модуле.

В меню на боковой панели, чуть ниже размера изображения (2 на изображении 8), вы можете выбрать один из четырех размеров.

Вы также можете изменить размер изображения, набрав в желаемую ширину и высоту в доступных полях (3 на изображении 8) или выбрать один из доступных процентов.

Еще один способ изменить размер изображение, нажав, удерживая и перетаскивая синие точки, которые появляются на краях изображения при выборе блока изображения (изображение 9).

 Синие точки, которые вы можете использовать, чтобы изменить размер изображения

Изображение 9 : Синие точки, которые вы можете использовать, чтобы изменить размер изображения

  • Настройки ссылок

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

С помощью настроек ссылки (4 на изображении 8) на панели инструментов вы можете выбрать, хотите ли вы сделать изображение кликабельным и определить, что увидят ваши посетители, когда они нажимают на изображение. Варианты: ничего, медиа файл, страница вложения или пользовательский URL.

Если выбран по умолчанию вариант «None», изображение не будет ссылаться на что - либо, и изображение не будет кликабельным.

Ссылка на медиа файл будет делать изображение кликабельным. Когда посетители нажимают на него, изображение откроется во весь экран в той же вкладке. Если вы хотите, чтобы изображение открылось на другой вкладке, вы можете выбрать переключатель «Открыть в новой вкладке». Желательно использовать эту настройку только при необходимости.

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

Увязка к варианту «страницы вложений» требует объяснений. Когда вы загружаете что-то в WordPress, он автоматически создает страницу вложения для этой загрузки. В случае изображений страница вложения будет содержать заголовок изображения, само изображение, а также любую дополнительную информацию, которую вы хотите добавить, например, описание или подпись (см. изображение 10).

Итак, когда вы должны перейти на страницу вложения?

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

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

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

Наконец, вы можете связать своё изображение на собственный URL. Это полезно в тех случаях, когда Вы используете изображения из внешних источников. Связываясь с источником изображения, вы не только отдаёте должное автору, но вы также улучшаете ваши исходящие ссылки.

Пример страницы прикрепления изображения

Изображение 10 : Пример страницы прикрепления изображения

Новое: обновление WordPress 5.3 - Боковая панель изображений и панель инструментов

В обновлениях WordPress 5.3 и выше вы найдете настройки ссылки на панели инструментов, а не боковой панели (изображение 11).

Ссылка на варианты в WordPress 5.3 Ссылка на варианты в WordPress 5.3

 Изображение 11: Новая Ссылка на варианты в WordPress 5.3 и выше

Когда вы делаете выбор между файлом мультимедиа, страницей вложения или добавлением URL-адреса в поле ввода вы увидите новые опции (изображение 12).

Нажмите на стрелку, указывающую вниз расширить опции (там вы найдете переключатель «Открыть в новой вкладке»).

 Дополнительные параметры для ссылки на медиафайл в WordPress 5.3

Изображение 12: Дополнительные параметры для ссылки на медиафайл в WordPress 5.3 

Кроме того, в боковой панели изображения появилась новая опция, которая называется Стили.

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

новая опция стилей на боковой панели изображения

Изображение 13: новая опция стилей на боковой панели изображения

Добавление и редактирование изображений через медиатеку

Помимо загрузки, вы также можете добавлять изображения из медиа-библиотеки. В разделе библиотека, вы найдете медиа, которые вы уже загрузили на свой сайт.

Загрузка изображения из медиа библиотеки

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

  • Нажмите кнопку библиотеки мультимедиа в блоке изображения (см. изображение 5). Откроется экран библиотеки.
  • Выберите одно из доступных изображений, щелкнув по нему (1 на изображении 14).
  • Нажмите кнопку «Выбрать» в правом нижнем углу экрана (2 на изображении 14). Изображение теперь добавлено в пост.
 Экран библиотеки мультимедиа

Изображение 14: Экран библиотеки мультимедиа

Некоторые дополнительные параметры в медиа библиотеке

Есть и другие варианты, помимо добавления изображений к записи в медиа библиотеке (см. изображение 15). Вы также можете редактировать и удалять изображения. Кроме того, вы можете добавить альтернативный текст, заголовок, подпись и описание, а также скопировать ссылку на изображение.

 Дополнительные параметры в медиа библиотеке

Изображение 15: Дополнительные параметры в медиа библиотеке

  • Альтернативный текст

Это так же, как альтернативный текст, который вы можете добавить с боковой панели.

  • Название

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

  • Подпись

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

  • Описание 

Описание, которое вы добавите здесь, будет отображаться на странице вложения изображения (изображение 10).

  • Копировать ссылку

В этом окне вы можете найти и скопировать ссылку на изображение.

  • Редактирование изображения в медиатеке

При нажатии на ссылку «Редактировать изображение» (изображение 15) откроется новый экран. На этом экране вы можете редактировать изображение различными способами (изображение 16):

  • Вы можете масштабировать изображение, добавив желаемые размеры в доступные боксы.
  • Вы можете обрезать изображение.
  • Вы можете выбрать, будут ли применяться изменения к изображению, которое вы делаете вашим основным изображением (во всех размерах: оригинальное, среднее, большое) или только эскиз.
  • Вы можете обрезать, перевернуть и повернуть изображение вручную.
  • Вы также можете редактировать альтернативный текст отсюда. (Примечание: эта опция не доступна в WordPress 5.3. и выше)
Экран редактирования изображения

Изображение 16: Экран редактирования изображения

Вставка изображения из URL

В WordPress, есть возможность вставить изображение из внешнего источника. Изображения, которые вы добавляете таким образом, не сохраняются в вашей медиатеке.

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

  • Перейдите на страницу или местоположение изображения, которое вы хотите использовать.
  • Нажмите правой кнопкой мыши на изображение. Вы увидите всплывающее меню.
  • Нажмите на опцию «Копировать изображение URL / Копировать адрес изображения».
  • Вернитесь в редактор сообщений WordPress.
  • В поле изображения нажмите «Вставить из URL». Вы увидите новое окно.
  • Щелкните правой кнопкой мыши в поле. Появится всплывающее меню.
  • Выберите параметр «Вставить» во всплывающем меню.
  • Нажмите кнопку «Enter» на компьютере.

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

Примечание. Параметры связывания не отображаются на боковой панели WordPress 5.3 и выше. Вы можете найти их в Панели инструментов изображения. 

  • Убедитесь, что вы выбрали изображение, на которое хотите добавить ссылку.
  • На панели инструментов перейдите в Настройки ссылок (см. изображение 17).
  • Нажмите на поле ниже ссылки, чтобы вставить текст.
  • Добавьте исходный URL-адрес в поле URL-адрес ссылки.
  • Необязательно: Нажмите кнопку Открыть в новой вкладке, чтобы изображение открылось в новой вкладке при нажатии.
 Настройки ссылок на боковой панели

Изображение 17: Настройки ссылок на боковой панели

Перетаскивание изображения

Перетаскивание может быть одним из самых простых способов добавить изображение. Все, что вам нужно сделать это:

  • Найдите изображение на жестком диске.
  • Щелкните левой кнопкой мыши на изображении, чтобы выбрать его, и удерживайте его.
  • Перетащите изображение в блок изображения. Блок должен изменить цвет.
  • Опустите изображение в блок.

Фактически, вы можете делать точно такие же шаги, даже если у вас нет открытого блока изображения. Перетаскивая изображение прямо в пост, вы сможете решить, где изображение будет размещено с помощью индикаторной линии (см. изображение 18).

 Индикатор, показывающий, где будет размещено изображение

Изображение 18: Индикатор, показывающий, где будет размещено изображение

Использование панели инструментов с блоком изображения

Мы увидели различные способы добавления изображений в сообщение и способы их редактирования с помощью боковой панели и медиа библиотеки. Есть ещё несколько вариантов для изучения в панели инструментов (см. изображение 19).

 Параметры панели инструментов

Изображение 19: Параметры панели инструментов

С помощью панели инструментов вы можете сделать несколько вещей:

  • преобразовать изображение в другой тип совместимых блоков (1 на рисунке 19);
  • выровнять изображение (2 на рисунке 19);
  • отредактировать изображение (3 в изображении 19);
  • продублировать его;
  • вставить другие блоки до и после него;
  • добавить его в блоки многократного использования;
  • или удалить его (4 в изображении 19).

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

И когда вы нажмёте на точки дерева, которые показывают больше вариантов, вы увидите новую опцию, которая называется Группировать (4 на рисунке 19).

 Параметры панели инструментов изображения в WordPress 5.3

Изображение 20 : Параметры панели инструментов изображения в WordPress 5.3 и выше

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

То, во что вы можете превратить свой блок, будет отличаться в зависимости от типа блока, который вы трансформируете. Например, в этом случае мы имеем изображение.

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

Давайте рассмотрим два наиболее важных из них: обложка и блок галереи.

Добавление и редактирование блока обложки

Вы можете использовать изображение обложки в верхней части текста, вместо основного заголовка. Вы может даже выбрать использование обложек вместо подзаголовков, чтобы создать более стилизованный пост.

Для того, чтобы добавить блок обложки на свой пост:

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

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

  • Загрузите изображение в блок. Изображение, которое вы добавите, будет выглядеть затемненным, и вы будете иметь возможность написать текст поверх него.

На боковой панели (см. изображение 21) вы можете редактировать следующие аспекты изображения обложки: его фон, фокус фона, доминирующие цвета и яркость.

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

параметры боковой панели справа

Изображение 21: изображение обложки и параметры боковой панели справа

Добавление галереи

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

  • Нажмите значок плюса в верхнем левом углу панели инструментов. Появится выпадающее меню.
  • Введите «Галерея» в поле поиска, расположенное в верхней части раскрывающегося меню. Блок галереи должен появиться как результат поиска.
  • Выберите блок Галерея. Новый блок обложки будет вставлен в ваш пост.
  • Выберите и загрузите несколько изображений с жесткого диска или с носителя библиотека. Изображения будут добавлены в ваши сообщения в виде миниатюр.

Конечно, есть варианты для редактирования галереи (см. Рисунок 22). В боковой панели вы можете изменить количество столбцов, которые вы хотите, чтобы ваша галерея содержала.

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

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

 блок галерея в WordPress 5.3 и выше

Изображение 22: блок галерея в WordPress 5.3 и выше

Продолжение следует. В следующей статье мы поговорим о встраивании видео и вставок...


Теги:

WordPress


Об авторе

Александр Зарубин

Интернет-маркетолог и блогер, продвигаю партнёрские программы, записываю обучающие видео и курсы, тестирую плагины, скрипты и прочие инструменты интернет - продвижения.

Оставить комментарий

Ваш электронный адрес не будет опубликован. Необходимые поля отмечены

{"email":"Адрес электронной почты недействителен","url":"Адрес сайта недействителен","required":"Обязательное поле отсутствует"}

Создайте свой прибыльный блог за 3 дня