ГлавнаяО WordPress

Как вставить картинку в WordPress: в текст, в миниатюру и в галерею

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

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

Но для начала рассмотрим, как загружаются картинки в WordPress.

Как вставить картинку в WordPressЗагрузка и редактирование изображений в WordPress

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

Перед тем, как вставить картинку в WordPress, в любое место сайта, её необходимо загрузить на сайт. Для этого переходим в пункт консоли «Медиафайлы» и выбираем подпункт «Добавить новый». Здесь нужно нажать кнопку «Выберите файлы» и выбрать на компьютере одну или сразу несколько картинок, которые нужно опубликовать. Начнётся их загрузка на сервер.

Загружать картинки также можно и непосредственно из редактора записей и страниц. Для этого нужно нажать на кнопку «Добавить медиафайл» над панелью инструментов.

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

  • Заголовок. Заполняется наименованием файла изображения. При необходимости можно изменить и вписать произвольное название для картинки. Желательно использовать ключевое слово.
  • Подпись. Подпись следует заполнять для посетителей. Если установленный шаблон поддерживает вывод подписи изображений, то он будет виден.
  • Атрибут Alt. Заполнение этого атрибута необходимо для поисковых машин. Они не могут воспринимать изображения, и смотрят на Alt. То, что будет написано в нём, так они и воспримут вашу картинку. Поэтому там нужно писать короткое описание того, что изображено. Было бы неплохо использовать в Alt ключевую фразу.
  • Описание. Его заполнять необходимо для поисковой системы. Туда следует написать короткое описание картинки, и желательно использовать ключевую фразу.
Как вставить картинку в WordPress

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

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

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

Для начала работы с ним, нужно нажать на кнопку «Редактировать» около картинки. Здесь вашему распоряжению будет несколько простейших инструментов редактирования: обрезать, повернуть в разные стороны, отразить в разные стороны, вернуть изменения или наоборот. Также имеется возможность изменять размер, масштабировать картинку и редактировать только миниатюру картинки, отдельно от основного изображения. В конце редактирования не забудьте нажать на кнопку «Сохранить».

Как вставить картинку в WordPress

  Редактирование картинки

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

Как вставить картинку в WordPress в текст записи или страницы

  1. Чтобы вставить картинку в WordPress в текст записи (или страницы), откройте её в консоли.
  2. Установите курсор в то место, где желаете разместить изображение.
  3. Нажмите на кнопку «Добавить медиафайл» и выберите нужную картинку во вкладке «Библиотека файлов» (если изображения не было загружен заранее, то загрузите его прямо отсюда через вкладку «Загрузить файлы», а потом выберите).
  4. При необходимости отредактируйте картинку, заполните все поля.
  5. Нажмите кнопку «Вставить в запись».
Как вставить картинку в WordPress

  Вставить картинку в запись/страницу

Картинка должна появиться в нужном месте.

Теперь её можно сориентировать. Если кликнуть на изображение мышкой, то появиться маленькая панель с кнопками для ориентации картинки: «По левому краю», «По правому краю», «По центру», «Без выравнивания», таким образом можно настраивать обтекание и положение изображения. Если нажать на «Изменить», то откроется панель редактирования картинки. Если «Удалить», то она удалится из записи.

Как вставить картинку в WordPress

  Сориентировать картинку в записи/странице

У картинки, размещённой в тексте страницы или записи, можно изменить событие, которое будет происходить при клике по ней. Для этого откройте окно редактирования нужной картинки, и обратите внимание на список «Ссылка» в секции «Настройки изображений»:

  • Медиафайл. При клике на картинку откроется картинка без оформления сайта.
  • Страница вложения. При клике на картинку откроется картинка, она будет на странице, оформленной как весь сайт.
  • Произвольный URL. Позволяет назначить открытие любой ссылки при клике на картинку.
  • Нет. Ничего не произойдёт при клике на картинку.
Как вставить картинку в WordPress

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

Как вставить картинку-миниатюру записи

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

  1. Откройте нужную запись.
  2. В правой колонке найдите блок «Миниатюра записи».
  3. Нажмите ссылку «Задать миниатюру» и выберите нужную картинку во вкладке «Библиотека файлов» (если изображения не было загружено заранее, то загрузите его отсюда через вкладку «Загрузить файлы», а потом выберите).
  4. Нажмите кнопку «Задать миниатюру».

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

Как вставить картинку в WordPress

  Установка миниатюры в запись

Как вставить галерею в запись

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

Для галереи сделайте следующее:

  • Откройте запись или страницу, в которую необходимо вставить галерею.
  • Нажмите на кнопку «Добавить медифайл».
  • Нажмите слева ссылку «Создать галерею».
  • Выберите нужных несколько картинок во вкладке «Библиотека файлов» (если изображения не были загружены заранее, то загрузите их отсюда через вкладку «Загрузить файлы», а потом выберите).
  • Нажмите кнопку «Создать новую галерею».
    Как вставить картинку в WordPress

      Создание галереи

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

 

УжасноПлохоНормальноХорошоОтлично (8 оценок, среднее: 4,25 из 5)
Оставьте комментарий:
комментариев 13
  1. Favorit:

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

    • Константин Вендин:

      Чтобы картинка была слева от текста, её нужно оринетировать налево. Для этого нужно кликнуть в редакторе на картинку и откроется окошко, чтобы настроить ориентацию изображения.

  2. Елена:

    Здравствуйте! Я вставила картинки в статью, в галерее они как прикрепленные. А если кликнуть на картинку в готовой статье , выскакивает надпись «Не найдено
    Извините, но запрошенную вами страницу найти не удалось. Попробуйте найти её с помощью поиска.» Что с этим делать?

    • Константин Вендин:

      Здравствуйте! Скорее всего проблема с постоянными ссылками на сайте или картинки были удаленны из библиотеки медиафайлов после публикации.

  3. Елена:

    Спасибо, Константин! Да, проблема была с ссылками. Я очень давно не занималась своим сайтом, оплачивала только его и совсем не заходила. А с 2014 года Word Press много раз обновлялся и почему- то все мои картинки стали по другому выглядеть. Вот теперь все привожу в порядок,но уже многое подзабыла и приходится заново всему учиться.

  4. Anna:

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

  5. Алина:

    Здравствуйте, Константин!
    У меня стоит задача загрузить картинку в текст по середине и размером на всю ширину текста. Но возникло две проблемы:
    1. Картинка не выравнивается по левому краю текста (выглядит так, будто стоит с красной строки).
    2. В смартфоне выглядит искажённой (сжатой по горизонтали и вытянутой вверх по вертикали).
    Как с этим справиться?
    И ещё — какой оптимальный размер картинок, чтоб из-за них не тормозил сайт?

    • Константин Вендин:

      Здравствуйте!
      Первые две проблемы возникают, скорее всего, из темы. Нужно редактировать CSS темы.
      Вес картинки я бы рекомендовал не более 1 Мб. Так она не будет нагружать сайт.

  6. Марина:

    Просто отличная статья, перечитала кучу всего про изображения и вот только у Вас нашла толковое описание процесса. У меня вопрос вот об этом, цитирую
    «Заголовок. Заполняется наименованием файла изображения. При необходимости можно изменить и вписать произвольное название для картинки. Желательно использовать ключевое слово.»
    Я несколько лет назад, не помню где что прочитала, начала изменять наименование файла изображения на надпись НА КИРИЛЛИЦЕ.На днях прочитала в инете на форуме,кто-то сказал, что произвольная фраза должна быть только на латинице. А Вы как думаете, обязательно ли на латинице?.В библиотеке медиафайлов никаких крякозябров.В коде статьи эти заголовки не выводятся.Главное, что если править на латиницу, так у меня море картинок с 2009 пошаговые рецепты. К тому же где это править, в библиотеке можно, но достаточно ли будет там исправить.Хочется узнать Ваше мнение о моей проблеме.

    • Константин Вендин:

      Спасибо! Рады стараться.

      Поле «Заголовок» лучше сделать на кириллице. Лишь название файла картинки рекомендуется сделать на латинице, однако и это не принципиально.

  7. Марина:

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

Я не спамлю...