Рейтинг@Mail.ru

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

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

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

 

УжасноПлохоНормальноХорошоОтлично (4 оценок, среднее: 5,00 из 5)

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

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

    1. Константин Вендин

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

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

    1. Константин Вендин

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

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

    1. Константин Вендин

      Рад вам помочь.

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

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

    1. Константин Вендин

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

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

    1. Константин Вендин

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

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

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

    1. Константин Вендин

      Рады быть полезными!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

 

WordPress-блог © 2015-2017