Картинки WordPress – как добавить, оформить картинку WordPress
Картинки WordPress

Картинки WordPress – как добавить, оформить картинку WordPress

От автора

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

Про картинки WordPress

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

Медиаиблиотека сама по себе примечательный инструмент системы. Библиотека WordPress, может быть самостоятельным  хранилищем файлов. У любой картинки помещенной в библиотеку есть свой URL, по которому её можно разместить на любом стороннем сервисе или сайте Интернет. Картинка будет спокойно лежать в библиотеке сайта, в статусе «неприкрепленная», до тех пор, пока у вас есть сайт WordPress.

Неприкрепленные картинки добавляются на сайт из вкладки Медиабиблиотека, на кнопке «Добавить новую». 

В отличие от неприкрепленной, прикрепленной картинка становится автоматически, если её добавить при публикации или редактировании материала.

Отличие неприкрепленной и прикрепленной картинки

Картинки WordPress могут иметь два статуса: прикрепленная и неприкрепленная. Статус неприкрепленная получает любая картинка, добавленная в медиабиблиотеку не из редактора записей (страниц).

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

неприкрепленная картинка

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

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

Чем неприкрепленная картинка отличается от прикрепленной?

  • Во-первых, если в редакторе записи на кнопке «Медиафайлы» ты захочешь посмотреть «Фото этой записи», то неприкрепленных картинок фильтр не покажет.
  • Во-вторых, неприкрепленная картинка не попадет в простую галерею статьи, сделанную при помощи шорткода gallery.
  • В-третьих, все картинки, добавленные в статью по произвольному URL, будут неприкрепленные.
  • В четвертых, все картинки, импортированные с другого сайта WordPress, будут не прикрепленными, хотя и поменяют URL при импорте.

Как и зачем прикреплять картинки?

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

отвязать картинку

прикрепить картинку

Кроме этого записи в библиотеке фильтруются по статусу.

фильтр фото

неприкрепленные картинки

Зачем прикреплять картинки?

Остается последний вопрос, зачем прикреплять картинки. Я уже сказал, что не прикреплённая картинка не попадает в простую галерею статьи. Также, есть плагины, которые выводят картинки записей, они тоже не подхватят не прикрепленную картинку.

Как добавить картинку WordPress в статью

Освоим добавление картинки в статью. Если ты хочешь добавить картинку WordPress в статью или на страницу, используй кнопку «Добавить медиафайл» в редакторе материала. Это отличный инструмент, покажу, как с ним работать.

Существует 3 способа добавить картинку в материал (пост или страницу сайта).

  1. Через загрузчик системы с компьютера;
  2. По URL картинки;
  3. Из библиотеки сайта.

Загрузчик системы

Загрузчик системы работает, как в Медиабиблиотеке, так и в Редакторе материалов. Кстати, в виджете «Текст» он тоже работает.

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

размер загрузчика wordpress

Чтобы добавить картинку в статью, нужно:

  1. В редакторе материала нажать кнопку «Добавить медиафайл»;
  2. Выбрать способ добавления картинки «Загрузить»;
  3. Далее загрузить картинку из каталога компьютера или положить картинку с вкладки компьютера перетаскиванием.

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

Добавить медиафайл

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

Например, ты вставляешь первую картинку в статью и в окне предварительного оформления картинки меняешь размер с большого, на средний. Все последующие картинки сайта будут, по умолчанию, вставляться с размером «Средний».

Вставка картинки по URL (с сайта)

Если ты используешь для сайта картинки со сторонних серверов или другого сайта, то картинки (файлы) можно вставлять по их URL. Для этого:

  1. В редакторе нажать кнопку «Добавить медиафайл»;
  2. Выбрать способ добавления картинки «Вставить с сайта»;
  3. Вписать URL картинки и вставит её в материал.

Важно! Этот способ добавления картинок не работает в медиабиблиотеке. Там работает только загрузчик.

вставить картинку wordpress с сайта

Добавляя картинку по URL, ты можешь:

  • Добавить подпись (будет видна под картинкой),
  • Создать атрибут alt (возьми за правило заполнять этого атрибут всегда).

Также можешь указать:

  • Расположение (Слева, По центру, Справа, Нет)
  • Выбрать Ссылку картинки (Адрес картинки, Произвольный URL (сделать картинку ссылкой) или поставить Нет (без ссылки)).

Расположение слева, справа это wordpress обтекание картинки текстом.

Вставка картинки из библиотеки

Аналогична вставке через загрузчик, только на вкладке “Добавить медиафайл” выбрать нужно не “Загрузить файлы”, а “Библиотека файлов”. Кстати, библиотека файлов фильтруется по дате и не только.

Вставка картинки из библиотеки

О теге alt картинки

Тег alt картинки это одна из «фишек» оптимизации и его заполнение нужно взять за правило. Поясню почему.

Если картинка отражается корректно, тег alt картинки в отличие от подписи, не виден пользователю. Зато тег alt прекрасно видят роботы поисковых систем. Более того, alt заменяет картинку, и его видят пользователи, если браузер не показывает картинку на сайте. Ты, наверное, встречал такие «скрытые», а по сути, битые фото на сайтах (смотрим фото).

тег alt картинки

Редактирование картинки (параметры изображения)

После добавления картинки в материал, может возникнуть желание изменить картинку или её положение. Современный редактор WordPress позволяет это сделать максимально просто и быстро быстрым редактором фото.

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

быстрый редактор картинки wordpress

Нажимая на крест, ты удалишь картинку из статьи, но не из библиотеки. Если не хватает инструментов быстрого редактирования, нужно нажать на картинку и открыть окно полного редактирования (значок карандаш). Здесь можно редактировать и оформить картинку по любому желанию. Смотрим параметры редактирования по пунктам сверху вниз:

Блок 1.

Блок 1 редактора фото

Подпись: видна под картинкой пользователю;

Атрибут alt: форма заполнения тега alt картинки.

Блок 2. Настройки изображения

Блок 2 редактора фото

Расположение — меняет положение картинки по отношению к тексту;

Размер — меняем размер картинки в статье. Можно выбрать из размеров указанных в базовых настройках сайта (миниатюра, средний, большой, полный) или указать произвольный размер по желанию.

Ссылка — имеет три варианта:

1. Ссылка «Медиафайл» — при открытии картинки пользователь увидит её в браузере отдельным файлом с адресом wordpress путь к картинкам, в виде:

/domains/…/wp-content/uploads/2018/03/foto.jpg.

2. Страница вложения — откроется отдельная страница сайта attachment, которая называется страница вложения. Это будет страница сайта, на которой система покажет картинку в полном размере окруженную виджетами сайта.

3. Произвольный URL — из картинки можно сделать ссылку и в этом поле указать произвольный URL, внутренний или внешний.

4. Нет — картинка просто будет видна на сайте в заданном размере. При этом показ картинки без ссылки в новом окне (вкладке) браузера не заблокирован.

Блок 3. Дополнительные настройки

Блок 3 редактора фото

Дополнительные настройки используются для тонкой, пользовательской настройки картинки. Интересен заголовок картинки (title) и чек «Открыть в новом окне».

Если ты предполагаешь использовать картинки, как отдельные страницы своего сайта, то с точки зрения SEO разумно заполнить тег Title и открывать картинку в новом окне.

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

Блок справа

редактор оригинала картинки

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

редактор оригинала картинки

К слову сказать, про оригинал фото. Когда ты добавляешь картинку на сайт, система создает несколько копий картинки с разными размерами. Размеры копий совпадают с настройками медиафайла в общих настройках (миниатюра, средний, большой, полный). Все картинки лежат в каталоге /…/wp-content/uploads/ согласно твоим настройкам для медиафайлов.

Напомню, по умолчанию, картинки лежат в каталогах с названием «/…/wp-content/uploads/Год/Месяц». Если не выделить эту настройку в настройках медиафайлов, структуру каталогов для фото нужно строить самому по FTP.

Результат

Смотрим результат добавления картинки WordPress в статью в двух редакторах визуальном и текстовом с разными параметрами картинки.

Вывод

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

Я постарался как можно подробнее рассказать про картинки WordPress, их добавление и редактирование. Если есть вопросы, задавайте их в комментариях или форме обратной связи.

©WPkupi.ru

Еще статьи

Похожие посты:

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.