Представляем вашему вниманию подробный обзор возможностей Вордпресс, касающихся добавления и редактирования картинок. Из статьи вы узнаете, как вставить картинку в wordpress в любой элемент сайта (шапка, фон, "подложка" заголовка, запись, подвал, боковая панель), как отредактировать и хранить, как поставить ссылку на изображение. Мы рассмотрим все возможности, предоставляемые популярным движком Вордпресс (в его обновленной версии – Wordpress 5.3.2).

 

 

Меню статьи

 
 
 

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

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

Настройка добавленных фото

Прописываем alt, меняем размер, выравниваем, добавляем ссылку. Создаем галерею. С помощью встроенного редактора отобразим, обрежим, изменим пропорции объекта

Как добавить миниатюру записи и для чего она нужна

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

Как сделать картинку фоном заголовка

В Вордпрессе есть такая возможность. Рассмотрим основные способы

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

В Wordpress графические объекты сохраняются, как прикрепленные к определенным статьям (если их вставлять в CMS через текстовый редактор), либо сохраняются, как не относящиеся ни к одной записи

С какими ошибками часто сталкиваются вебмастера

При загрузке файлов в Wordpress иногда возникают ошибки разного рода: ошибка HTTP, ошибка «Невозможно создать каталог» и другие. Как их устранить?

Как лучше хранить картинки: на сервере или на сторонних сервисах

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

Как сделать картинку фоном страницы

В Вордпресс есть способы создать разное оформление страниц (с помощью плагинов, либо с помощью кода)

Как добавить картинку в тему Wordpress

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

Как вставить фото в базу данных Вордпресс

Вся информация о медиа сохраняется в базе данных (добавляется автоматически). Как информация влияет на продвижение в поисковиках, как её можно удалить?

 

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

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

skrin52 1

А затем выбрать блок формата «изображение» (или «галерея», если нужно выложить сразу несколько картинок). Так вы можете добавлять иллюстрации в любое место в статье.

skrin52 2

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

skrin52 3

С компьютера

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

skrin52 4

Из библиотеки файлов

Все загруженные с компьютера фотографии сохраняются в библиотеке. Их можно вставить тем же способом: выбрав формат блока «изображение», а затем нажав кнопку «добавить из библиотеки».

skrin52 5

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

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

skrin52 6

skrin52 7

С другого сайта

Если требуется фото с чужого ресурса, выберите третью кнопку: «Вставить с сайта» (недоступна в блоке «галерея»). И в появившееся поле введите url изображения.

skrin52 8

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

Уменьшим его до необходимого размера и разместим по центру. Напишем пояснение под фото (подпись).

skrin52 9

Настройка добавленных фото

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

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

skrin52 10

Но лучше редактировать медийную часть в самой библиотеке.

Что нужно прописать к каждой картинке

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

skrin52 11

Перейдите в библиотеку и выберите тот, который необходимо отредактировать, и увидите инструменты:

skrin52 12

  • поле «Атрибут Alt» необходимо заполнять всегда (кроме случаев, когда картинка выполняет лишь декоративную функцию, а не иллюстрирует написанное). Сюда вводится информация для поисковиков (иначе, чем через alt роботы поисковых машин не анализируют изображения), опишите коротко, используйте ключевое слово;
  • поле для ввода заголовка (обычно это наименование графического файла, которое можно заменить на произвольную надпись с ключевым словом);
  • поле для подписи – заполняется, чтобы читателю было проще понять, что иллюстрирует фото (если позволяет шаблон, подпись выводится прямо под иллюстрацией);
  • поле «Описание» также заполняется для поисковиков, можно дублировать alt.

Управление размером: рекомендуемый размер для Wordpress, сжатие, создание миниатюры

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

skrin52 13

Здесь можно выбрать либо полный размер фото, либо средний, либо размер миниатюры. Согласно параметрам, выставленным в WP по умолчанию (см. раздел консоли «Настройки», подраздел «Медиафайлы»),

  • полным является размер 1024х1024 (или «габариты» самой картинки, в нашем примере – на скриншоте выше – полным является размер 652х647),
  • средним – 300х300 (при сжатии один из параметров – ширина или высота – может оказаться меньше 300 пикселей, при этом другой будет выдержан строго в 300 пикселей),
  • при создании миниатюры изображение обрезается до 150х150 пикселей.

skrin52 14

Важно всегда соблюдать рекомендуемый размер, чтобы ресурс быстро прогружался и соответствовал требованиям современного посетителя. Не спроста максимальный предел в WP установлен на уровне 100 Mb. Если вы попытаетесь загрузить слишком большой файл, система выдаст ошибку. Если много, сайт будет долго открываться.

Рекомендуем предварительно сжимать каждый до подходящих нормативов (норматив для веб-ресурсов, сниженного качества и размера, с меньшим количеством цветов). Сделать это можно с помощью графического редактора, онлайн-сервиса или использовать специальный плагин. Например, бесплатный плагин Smush, который автоматически сжимает все изображения (его можно установить через раздел консоли WP «Плагины», как показано на скриншоте ниже).

skrin52 15

Выравнивание и обтекание текстом

Теперь мы знаем, как вставить картинку в текст в Wordpress. Знаем, как изменить размеры, что вписать в поля alt, подпись и пр. Следует также научиться выравнивать изображение.

После добавления иллюстрации к тексту вы получаете возможность управлять блоком: верхние кнопки блока, появляются, если навести курсор на блок с картинкой. Фотографию можно выровнять по левому, правому краю, по центру, растянуть по ширине содержимого, во всю ширину экрана. Однако иллюстрация сразу не встанет рядом с текстом. Чтобы добиться обтекания текстом, «схватите» блок с левого края и дотяните до нужного места. Например, отпустите рядом с абзацем и фотография идеально встанет.

skrin52 16

Можно выстроить объекты (картинки, видео, аудио, текст) в три столбца. Добавьте сначала блок формата «Колонки».

skrin52 17

Наведите курсор на блок с колонками, и в правом поле выберите количество колонок (например, 3). В каждую колонку вставьте объекты. Для этого наведите на плюсик в правом верхнем углу каждой колонки и выберите блок.

skrin52 18

Как сделать галерею или слайдер из нескольких фото

Тем же способом можно создать галерею. Просто выберите соответствующий блок. Загрузите несколько фото, отметив галочкой. Разместите в нужном порядке.

skrin52 19

skrin52 20

skrin52 21

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

skrin52 22

Благодаря же теме на некоторых фото появились надписи (только под теми, для которых мы заполнили поле «Подпись»). Если шаблон не дает возможности пролистывать изображения, как в слайдере, то добиться такого способа подачи можно с помощью специальных плагинов (Meta Slider, Smart Slider 3, Jetpack  и пр.).

Как вставить ссылку в картинку или ее подпись

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

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

skrin52 23

Вставьте ссылку. При необходимости включите опцию «Открывать в новой вкладке» (в новом окне браузера).

skrin52 24

Теперь при нажатии на фотографию пользователь будет переходить на определенную веб-страницу в интернете.

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

skrin52 25

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

Также в WordPress имеется встроенный графический редактор. С его помощью можно в любой момент изменить размер загруженной картинки, сжать её, обрезать, перевернуть, создать миниатюру с иными (чем по умолчанию) параметрами.

Зайти в редактор можно двумя способами.

  1. Зайдем в библиотеку, выберем изображение и найдем в низу кнопку «Редактировать».

skrin52 26

  1. После загрузки изображения в WP перейти по кнопке «Редактировать» (появится справа).

skrin52 27

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

skrin52 28

Спустите полосу прокрутки вниз и выберите миниатюру, чтобы произвести манипуляции с ней.

skrin52 29

В редакторе, открытом вторым способом, больше инструментов.

skrin52 30

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

Как добавить миниатюру записи и для чего она нужна

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

Откройте запись. В правой колонке найдите пункт «Изображение записи» и воспользуйтесь кнопкой «Добавить». Теперь пост будет опубликован в блоге (в новостной ленте) с картинкой, а не просто с заголовком и описанием.

skrin52 31

skrin52 32

Как сделать картинку фоном заголовка

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

В нашем примере использован шаблон BuildX. Эта тема позволяет легко поменять цвета текста, заголовков, поставить фоновое изображение и настроить его, а также изменить оформление отдельных элементов сайта. Если вы немного знакомы с языком css, ищите в настройках темы раздел «Дополнительные стили».

skrin52 33.1

Затем в новой вкладке браузера откройте свой сайт, наведите на любой пост и откройте кодировку (в разных браузерах открывается по-разному, в Яндекс Браузере достаточно кликнуть правой кнопкой мыши и нажать «Исследовать элемент»). Найдите опции (блок, описывающий характеристики заголовка), которые хотите изменить, скопируйте (например, ширина и высота header img).

skrin52 35

Вернитесь во вкладку с "Дополнительными стилями" и вставьте скопированный css-код в соответствующее поле. Поменяйте код: в нашем примере, мы увеличили ширину (до 110%). Не забудьте обновить (кнопка в верху слева, до обновления справа на сайте все изменения будут видны). Если, что-то сделаете не так, система выдаст ошибку и порекомендует перед обновлением устранить её.

skrin52 36

Подробнее о css-стилях можно прочесть здесь: каскадные таблицы стилей.

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

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

Некоторым изображениям стоит присвоить статус «прикрепленные». Для чего это нужно и как это сделать?

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

Отвязывать (откреплять) иллюстрации от поста стоит тогда, когда вы запланировали замену фотографий или решили загрузить какое-то заново (после некоторого редактирования).

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

skrin52 37

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

С какими ошибками часто сталкиваются вебмастера

При работе с изображениями можно столкнуться с ошибками, способы устранения которых хорошо известны вебмастерам.

Ошибка HTTP

Возникает по ряду причин, при загрузке файла в WP. Ошибка может быть временной (из-за превышения ресурсов сервера). Выждите пару минут и попробуйте снова. Попробуйте найти меньшего размера или в ином формате. Если ошибка осталась, значит сбой не временный, необходимо выяснить причину.

Попробуйте увеличить предел памяти: откройте wp-config.php на сервере и введите код: define( 'WP_MEMORY_LIMIT', '256M' );

Смените редактора изображений. Медиабиблиотека WP использует для обработки графических объектов два: GD Library и Imagick. Второй печально известен сбоями, смените в настройках по умолчанию этот модуль на первый (на GD Library). Вставьте следующий код в тему WP, в functions.php:

skrin52 38

Последний способ устранить ошибку, вернуть прежние настройки и добавить следующий код в .htaccess: SetEnv MAGICK_THREAD_LIMIT 1

Ошибка «Невозможно создать каталог»

Нередко при загрузке медиа появляется ошибка «Невозможно создать каталог wp-content». Такой сбой возникает, как правило, после глобальных изменений на сайте или переезда.

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

Иной способ устранить проблему – изменить права доступа к каталогу wp-content. Зайдите на хостинг (сервер), в файловый менеджер, найдите в папке с вашим сайтом папку wp-content, правой кнопкой вызовите меню, через которое можно задать права доступа. Задайте значение 755 (не стоит указывать 777 – это полный доступ, «развязывающий руки» взломщикам). Сохраните изменения.

В крайних случаях вебмастера вносят изменения в wp-config.php на хостинге (сервере), предварительно сохранив его копию. Перед надписью require_once(ABSPATH.'wp-settings.php'); надо вставить define('UPLOADS', 'wp-content/uploads');

Так мы принудительно указываем системе WP нужный путь к каталогу.

Проблема «Картинка на отдельном url»

Ещё одна частая ошибка, возникающая при добавлении иллюстрации в запись WP. Такой способ загрузки приводит к созданию страницы вложения (url с новым фото).

Чтобы не возникало проблем, вебмастера, разбирающиеся в кодировке, настраивают переадресацию (ввести специальный код в function.php) или запрещают поисковикам индексировать эти url (с помощью другого кода). Мы же попробуем запретить индексацию, внеся изменения в robots.txt, добавив строку Disallow: /*/?attachment_id=* 3. Переадресацию мы можем запустить через параметр Redirect attachment URLs to parent post URL (функция доступна в плагине Yoast SEO).

Самый простой способ решить проблему с дополнительными url - установить плагин Attachment Pages Redirect.

Как лучше хранить картинки: на сервере или на сторонних сервисах

Известно, что до 70% веса страницы приходится именно на графические объекты. Чтобы не тормозить открытие сайта, необходимо сжимать изображения, и чем меньше их будет на сервере (до нескольких сотен), тем будет выше скорость.

Если для проекта просто необходимо добавление огромного количества (тысячи тысяч) качественных («увесистых») фотографий, стоит задуматься о хранении их на сторонних сервисах (Яндекс.Диск, Google Диск, Amazon S3, Tumblr, социальные сети). Их услуги обойдутся дешевле, чем оплата дополнительного места хостинг-провайдеру. Чтобы не перегружать ресурс, вебмастера советуют размещать на сервере только миниатюры, а полномасштабный вариант «заливать» на облачный сервис. Быстрее всего открываются фотографии из Вконтакте: среднеразмерная прогружается за 0,7 секунд; с Pinterest – 0,9 с, с Яндекса – 1,8 с, из Tumblr – 1,9 с (с хостинга такая будет грузиться около 3 с).

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

Если вы решили ради безопасности работать с сервером, проработайте древовидную структуру папок (каталогов) для хранения. Это позволит оптимизировать работу, избежать переполнения папок. По возможности загружайте фото с других сайтов (они не попадают в библиотеку, в базу данных, а прогружаются прямо со стороннего ресурса).

Как сделать картинку фоном страницы

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

Плагины

Существует несколько бесплатных плагинов Wordpress, позволяющих поменять фон, вставить видео, анимацию и даже изменить вид каждого элемента сайта. Наиболее функциональным из них является SiteOrigin CSS. Рассмотрим, как с его помощью вставить фоновую картинку.

Установим плагин и перейдем к редактору CSS

skrin52 39

В открывшемся окне нажмите на значок просмотра.

skrin52 40

Мы перейдем к редактору CSS. Он представляет собой несколько окон, в самом большом мы увидим наш сайт. Чтобы выбрать элемент для редактирования, достаточно навести на него курсор и нажать. После чего можно приступить к настройкам (левая колонка). Выделим задний план, во вкладке Decoration загрузим медиафайл. А затем нажмем на галочку над вкладками.

skrin52 41

В редакторе CSS появится новый код, сохраним изменения с помощью кнопки. И проверим результат.

skrin52 42

skrin52 43

Отметим, что на других страницах фон не изменился (таким образом можно задать разное оформление). Так же меняется задний план и в шапке, и в подвале, и в боковой панели (сайдбаре).

С помощью кода

Ещё один способ установки фона на страницу и весь сайт – изменение кода css. Откроем таблицу стилей (style.css) в редакторе тем. Найдем селектор body и настройку background, если требуется изменить задний план всего сайта. Добавим картинку. Например, пропишем название нашего фонового изображения: background: url(bug.png).

Чтобы установить фон отдельной страницы, пропишем настройку background для пункта меню с определенным id. Вместо цвета укажим путь к медиа. Ещё проще установить картинку на задний план, если в теме предусмотрена возможность добавлять собственные стили css (в настройках сайта есть «Дополнительные стили»). Просто впишем в соответствующее поле код:

body.page-id-2.site-content {background: url("novyi-god-winter2.jpg") no-repeat center;}

Как добавить картинку в тему Wordpress

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

Через визуальные настройки

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

skrin52 44

Нажмем «Фоновое изображение» и загрузим.

skrin52 45

Далее можно выбрать позицию (разместить по центру, по верхнему краю или по нижнему), размер или сразу назначить одну из предустановок. Можно выбрать «повторять» и «прокручивать со страницей».

skrin52 46

Также в Вордпресс предусмотрена возможность публиковать страницы с фоновым изображением заголовка.

skrin52 47

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

skrin52 48

С помощью плагина

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

skrin52 49

Установим простой плагин – Simple Full Screen Background Image.

skrin52 50

Выберем изображение и сохраним.

skrin52 51

Для вставки иконок в пункты меню воспользуйтесь одним из двух самых удобных плагинов: Menu Image или Menu Icons. Первый имеет дополнительную опцию – «всплывание» иллюстрации при наведении на пункт меню. Во втором есть готовые иконки (весьма ограниченное количество). Сделайте выбор и установите через консоль WP.

Рассмотрим совместную работу этих плагинов (установим оба). Перейдём в настройки меню. В настройках каждого пункта меню появились новые опции:

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

skrin52 52

С помощью кода

Если возможностей шаблона недостаточно, изменить оформление сайта или отдельного элемента (шапки, футера) можно с помощью кода. Найдите таблицу стилей в редакторе тем (style.css), а в ней необходимый селектор (например, footer) и поменяйте код (пропишите путь к изображению).

Через файловый менеджер (на хостинге)

Код можно изменить и прямо в footer.php на сервере (находится в папке с названием вашей темы). Таким образом можно не только добавить картинку в качестве фона в футер уже привычным кодом (background: url("novyi-god-winter2.jpg"), но и удалить лишнюю информацию об авторе шаблона.

Для добавления иллюстрации в шапку перейдите в папку images (также находится в папке с названием темы) и замените шаблонное изображение на своё (но вставьте с тем же названием). Этот способ доступен, если шаблонное изображение предусмотрено темой.

Как вставить фото в базу данных Вордпресс

По-умолчанию Wordpress хранит медиафайлы в папке «загруженное» (на сервере, в каталоге wp-content, uploads). Внутри папки uploads автоматически создаются папки с цифрами, обозначающими год и месяц (соответствуют дате загрузки). Такая система позволяет организовать оптимальное хранение данных и не перегружать одну папку.

Также информация о загруженных медиа добавляется в базу данных, в формате текста (attachment), в таблице под названием posts. О миниатюре создается иная запись – в формате мета (thumbnail_id), которая появляется в таблице postmeta. Записи о графических объектах остаются в базе, даже если вы убрали объект из WP и с хостинга. Такую запись называют «битой», они вредят продвижению (особенно, если их довольно много). Их стоит удалить из базы. Добавлять фото в базу данных сайта нет необходимости, система Wordpress автоматически производит все необходимые записи.