Следующая статья поможет вам: Советы по редактированию WordPress, часть 2: изображения
У вас есть хорошо написанная статья, которую вы хотите опубликовать. Но вы знаете, что красивая картинка (или диаграмма) поможет привлечь внимание, которого заслуживает ваш контент. Итак, как разместить изображения в статье там, где вы хотите? WordPress дает вам возможность вставлять изображения в текст с соответствующим размером, полями и выравниванием, и все это без необходимости самостоятельно кодировать эти инструкции.
WordPress «из коробки» предоставляет несколько других важных функций редактирования изображений, о которых мы подробно расскажем в этой статье. Здесь также рассматривается отображение галереи, а также удобные инструменты оптимизации изображений, доступные с плагинами WP. Правильное отображение изображений и сопутствующей информации в ваших публикациях и страницах важно как по эстетическим, так и по техническим причинам.
Медиатека
Во-первых, давайте посмотрим на Медиа-библиотеку. Медиа-библиотека позволяет удобно загружать и получать доступ к файлам изображений и другому контенту вашего блога.
Изображения можно добавлять непосредственно в Медиа-библиотеку (Добавить новое) для использования позже или добавления из Добавить медиа кнопки на любой странице или в редакторе сообщений. В большинстве случаев вы загружаете изображения в форматах .jpg, .gif или .png для использования в сообщениях и страницах, но в медиатеку можно загрузить и несколько других типов изображений.
Размер файла!
Прежде чем загрузить изображение на свой веб-сайт, важно учитывать размер его файла, измеряемый в байтах содержащихся в нем данных. Фотографии, которые вы делаете на телефон или другие камеры, обычно намного больше, чем требуется для отображения на экране. Их следует оптимизировать (сжать до минимально необходимого размера) для использования на экране, иначе они могут загружаться медленно, особенно на мобильных устройствах. Время загрузки страницы является фактором, определяющим рейтинг страницы для поисковых систем.
Однако сжатие изображений является бременем для создателей контента, которые могут не иметь или не знать, как использовать программное обеспечение для оптимизации, такое как Photoshop. Существуют также разные лучшие практики оптимизации изображений с помощью SEO и маркетинга в социальных сетях.
WordPress не оптимизирует изображения автоматически, но есть плагинные решения которые, среди прочего, сжимают файлы в фоновом режиме во время загрузки. Некоторые из этих плагинов также могут ограничивать размеры изображения заданной шириной и высотой в пикселях. Прочтите статью по ссылке, чтобы понять возможные варианты и просмотреть сравнение результатов сжатия, доступных для пяти популярных плагинов сжатия изображений.
Изображение, используемое в качестве полноэкранного изображения, как правило, не должно превышать 100 килобайт. Сохранение размеров файлов ваших изображений может даже быть включено в процесс отслеживания эффективности маркетинга, поскольку они могут влиять на время загрузки страницы. Изображения, используемые в сообщениях блога или других статьях, обычно имеют размер от 20 до 30 КБ.
Размер изображения — еще один фактор, учитываемый при использовании экрана. Нет смысла использовать на вашем сайте изображения, которые выше или шире, чем необходимо. Изображения уменьшатся, чтобы заполнить доступное пространство. Тем не менее, в любом случае придется загрузить весь файл, а это пустая трата времени и трафика. Хорошее эмпирическое правило — ограничить самую большую сторону изображения 1280 пикселями. Это вместит более 90 процентов посетителей вашего сайта. Если вам нужно настроить таргетинг на самые широкие мониторы, изображения должны иметь размер от 1920 до 2560 пикселей.
Добавление изображений на страницы и публикации
Во-первых, убедитесь, что у вас есть разрешение на использование изображения. Это чрезвычайно важно. Использование изображения без разрешения может подвергнуть вас серьезной ответственности. Итак, если вы не создавали фотографию самостоятельно или не имели явного разрешения на ее использование, либо купите права на веб-сайте стоковой фотографии, либо найдите изображения на бесплатные источники изображений. Перейдите по ссылке, чтобы узнать больше о библиотеках изображений, использующих лицензии Public Domain или Creative Commons.
Именование
Выбрав изображение, обязательно сохраните его под значимым именем. Имя файла должно описывать картинку и поддерживать содержание статьи. Люди могут искать ваш контент в Интернете. Текст, содержащийся в именах ваших файлов, поможет им найти его. Именование изображений может стать важной частью SEO нового веб-сайта и постоянной оптимизации.
Сценарий 1. Выравнивание изображения внутри абзаца по правому краю.
- Поместите курсор в пространство над абзацем, который вы хотите обернуть вокруг левой части изображения.
- Загрузите изображение в медиатеку с помощью кнопки «Медиа».
- Как только изображение загрузится, откроется медиатека. Справа находятся параметры, необходимые для отображения вашего изображения.
- Всегда заполните поле «Замещающий текст», потому что оно отображает текст в случае, если изображение не может быть отображено, и позволяет поисковым системам идентифицировать ваши изображения для поиска и по другим причинам. Замещающий текст также позволяет программам чтения с экрана помочь людям с нарушениями зрения. Текст тега Title появляется при наведении курсора мыши на изображение. (В этой статье вы можете игнорировать поле описания.) Узнайте больше об этих основных атрибутах изображения.
- Подпись: Если вы хотите добавить подпись к изображению, WordPress отобразит текст подписи в соответствии со стилями отображения подписи из вашей темы WordPress.
- Выберите желаемое выравнивание изображения, в данном случае «Выравнивание по правому краю».
- Выберите подходящий размер. Когда вы загружаете, WordPress автоматически создает группу изображений с уменьшающейся шириной и высотой от полного размера до миниатюр. Таким образом, вам, возможно, не потребуется загружать изображения именно тех размеров, которые вы хотите видеть в своей статье, что освобождает вас от необходимости делать это с помощью программного обеспечения перед публикацией. Эта группа изображений также используется WordPress для адаптивного отображения изображений, то есть масштабирования их по ширине экрана вашего читателя.
- Связывание: по умолчанию WordPress будет ссылаться на полноразмерную версию вашего изображения. Вы можете изменить это на любое другое место назначения ссылки или вообще не иметь ссылки.
- Предварительный просмотр результата. В вашем результате могут отображаться разные стили полей и заголовков, как определено в таблице стилей вашей темы WordPress. Но в целом ваше изображение должно появиться в правой части столбца статьи с текстом, обтекающим его:
- Сохранить черновик или опубликовать
Редактирование
- Вернуться в визуальный редактор
- Нажмите на изображение, чтобы открыть меню редактирования изображения. Есть четыре значка выравнивания: слева, по центру, справа и нет. (Если вы не выберете «Нет», изображения по умолчанию будут выравниваться по левому краю, если иное не указано в правилах таблицы стилей, регулирующих их поведение). Используйте значок x, чтобы удалить изображение, или щелкните карандаш, чтобы отредактировать атрибуты или даже заменить их.
- После нажатия на значок карандаша появляется большое окно редактирования изображения. Здесь вы можете изменить любые атрибуты или применить расширенный параметр, например добавить классы стилей.
- Нажмите «Редактировать оригинал» справа, чтобы просмотреть дополнительные функции редактирования изображений. Слева расположены значки поворота и переворачивания изображения, а также серые значки обрезки и отмены/повтора.
- Масштабирование и обрезка. Нажмите на символы вопросительного знака, чтобы просмотреть дополнительную информацию. Изображения всегда можно уменьшить, однако избегайте их увеличения, поскольку это снижает качество изображения.
- Чтобы обрезать изображение, щелкните его мышкой и перетащите по нему. Появится выделенный прямоугольник, показывающий область изображения, которую нужно сохранить после обрезки. Вы также можете указать конкретное соотношение сторон в поле справа. Поиграйте с этими элементами управления и посмотрите, что произойдет. Если вы удовлетворены обрезанной областью, щелкните значок обрезки над изображением и сохраните его. (Вы не уничтожите исходное изображение. После того, как вы примените изменения в масштабировании или обрезке в этом окне, появится кнопка «Восстановить изображение», позволяющая в любой момент вернуться к исходной загрузке. Однако обязательно сохраните исходный файл на своем компьютере на случай, если что-то пойдет не так.)
Редакции
Иногда дела идут не так, как планировалось, или вы передумаете и решите вернуться. WordPress делает это очень легко, используя панель «Ревизии» на экранах редактора.
- Прокрутите вниз до нижней части редактора сообщений. Вы должны увидеть что-то вроде этого:
- Если вы этого не сделаете, вам необходимо включить его, открыв вкладку «Параметры экрана» в правом верхнем углу рабочего стола WP. Нажмите «Параметры экрана». Чтобы сделать панель «Редакции» видимой, установите флажок.
- Выберите нужную вам ревизию и следуйте инструкциям на экране.
Галереи
WordPress поставляется с галереей миниатюр. Сначала мы расскажем, как добавить галерею без добавления плагина галереи:
- Поместите курсор в редактор сообщений, где вы хотите отобразить галерею изображений, и нажмите кнопку «Добавить медиа». Обратите внимание на параметры, перечисленные слева. Вверху — «Создать галерею».
- Нажмите «Создать галерею», и медиатека снова отобразится, но теперь вы можете выбрать несколько элементов одновременно или загрузить новые.
- Загрузите свою группу изображений или выберите несколько из библиотеки. Затем нажмите «Создать новую галерею».
- Экран изменится, и вы сможете выбрать параметры галереи, включая количество столбцов, размер изображения и ссылки. Большую часть времени вы будете ссылаться на медиа-файл.
- Нажмите «Вставить галерею», и она появится в редакторе.
- Предварительный просмотр или сохранение изменений. Вот как выглядит галерея миниатюр в опубликованной статье после выбора трех столбцов изображений размером с миниатюру.
Редактирование галерей
- В редакторе сообщений щелкните в любом месте галереи, отображаемой в вашей статье. Появится вкладка редактирования, поэтому нажмите на значок карандаша.
- Здесь вы можете добавлять или удалять изображения, изменять их порядок, редактировать подписи и так далее.
Создание более продвинутых галерей
WordPress отлично справляется с отображением сетки миниатюр с границами, гибкими полями и подписями. Но у него нет расширенных функций галереи, таких как слайд-шоу или альтернативные макеты. Галерея миниатюр не полностью адаптивна, и вы не можете перемещаться между изображениями, не возвращаясь к статье и не нажимая на другое изображение.
Создание галерей с помощью плагина
К счастью, можно легко получить расширенные функции галереи для своего блога, установив плагины галереи. Мы покажем вам, как использовать один из самых популярных примеров от Envira.
- Перейдите в «Плагины», «Добавить новый» и введите Envira Gallery в поле поиска.
- Нажмите «Установить сейчас», затем «Активировать плагин».
- Затем наведите указатель мыши на Envira в меню слева и выберите «Добавить новый».
- На открывшемся экране вы можете загрузить новые изображения или выбрать из других источников (что откроет медиатеку). Здесь мы выбрали несколько фотографий, которые уже загрузили:
- Значок карандаша на каждом изображении позволяет вам устанавливать ссылки, замещающий текст и т. д. По умолчанию каждое изображение будет иметь подпись с именем изображения, но вы можете удалить эту информацию при редактировании изображения. windows.
- На вкладке «Конфигурация» вы определяете количество столбцов и некоторые другие функции отображения. Вы можете принять значения по умолчанию для этого упражнения.
- Дайте галерее имя и опубликуйте ее, а затем вернитесь к своему сообщению.
- Вы увидите, что кнопка «Добавить галерею» теперь доступна на экране редактора сообщений. Поместите курсор в то место, где вы хотите разместить галерею, и нажмите кнопку «Добавить галерею». Опубликованные галереи появятся на новом экране. Плагин автоматически добавит к вашему сообщению «короткий код», который WordPress будет интерпретировать для отображения галереи при просмотре опубликованного сообщения.
- Сохраните черновик или опубликуйте и просмотрите новую галерею. Вы увидите свои изображения в привлекательном мозаичном макете, и каждое из них откроется в удобном лайтбоксе.
- Поэкспериментируйте с различными настройками и функциями и добавьте еще множество функций, обновившись до премиум-версии.
Терпение!
Чтобы преодолеть незнакомство с интерфейсом, потребуется немного практики. Всегда оставляйте себе достаточно времени для редактирования изображений. Делайте перерывы. Делайте паузу, чтобы прочитать экран между каждым шагом. Единственный способ научиться это делать – это делать! Очень скоро эти задачи станут вашей второй натурой.
Если вам нужна помощь в реализации вашей цифровой стратегии, наше маркетинговое агентство в Хьюстоне может помочь! Компания WIX существует уже более 30 лет и на собственном опыте испытала эволюцию цифрового маркетинга, разработки и дизайна индивидуальных веб-сайтов.
Свяжитесь с нами сегодня запланируйте консультацию, и вместе мы узнаем, как улучшить прибыль вашего бизнеса!
