Как отобразить картинку на wordpress

Качественный вывод изображений на WordPress

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

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

WordPress генерирует кучу дополнительных размеров изображений. Для начала надо убрать их.

Инструкция вывода изображений в шаблоне сайта на WordPress

1. В разделе Настройки -> Медиатека везде ставим ноль.

Это нужно для того, чтобы нигде не дублировались значения. А если появляются новые изображения, то можно было бы легко вычислить, что они не ваших рук дело, а кого-нибудь плагина.

2. Заходим в файле functions.php и добавляем следующие размеры.

// Миниатюра в админ панели
add_image_size( ‘thumbnail’, 100, 100, true );

// Архивы
add_image_size( ‘post-thumbnail’, 270, 200 );

// Обычный формат записи
// Архивы при разрешении Retina
add_image_size( ‘medium’, 600, 400 );

// Записи при разрешении Retina
add_image_size( ‘large’, 1200, 800 );

В результате WordPress будет генерировать 4 размера изображений.

Почему не нужно вставлять никуда кроме миниатюр значение «crop»? Об этом можно почитать по уже ранее приведенной ссылке.

Важно указать в functions.php названия, которые уже зарезервированы WordPress-ом для изображений. Если назвать их иначе, то могут возникнуть какие-нибудь нестыковки. Например, не должным образом может работать функция srcset. О ней чуть ниже.

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

Второе изображение (post-thumbnail) будет выводиться в списке разделов. Его размер не будет виден в списке доступных для загрузки в запись изображений. А следовательно не будет мешать и мозолить глаза.

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

Последний размер, который будет генерироваться это large. Он должен быть в 2 раза больше medium. И вот почему.

img scrset для the_post_thumbnail

В WordPress начиная с версии 4.4 был введен для изображений параметр srcset. Если посмотреть на изображения в коде сайта на WordPress, то оно будет выглядеть следующим образом:

Для чего это нужно. При разных разрешениях экрана монитора будет отдаваться разные размеры картинок. Работает функция в WordPress автоматически, нужно лишь создать для неё соответствующие условия.

Что мы и сделали. Мы загружаем картинку минимального размера (нами утвержденного) в свою статью. И для неё же генерируется изображение с разрешением в 2 раза выше. Такая картинка загрузится на сайт, если он будет просматриваться с дисплеев повышенной плотности пикселей (Retina и т.д).

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

$arr = array(‘title’ => esc_attr( $title_attribute ), ‘alt’ => esc_attr( $title_attribute ) );

echo get_the_post_thumbnail( $post->ID, ‘post-thumbnail’, $arr );

Из кода можно увидеть, что изображение будет выводить в пост размеры указанные в названии post-thumbnail. Именно для этого он был записан в файл functions.php.

Для записей нам такой маленький размер не нужен (в контексте данного примера). Возможно у вас будут другие размеры для других задач. Важно понять, что изображения должны генерироваться в двух разрешениях: одно меньше — другое в два раза больше. И первое изображение мы выводим на сайте, а второе подключится автоматически. Также следует придерживаться название закрепленных за WordPress.

При вставке в статью будут следующие размеры:

Можно заметить, что есть ещё размер полный. Этот размер оригинального изображения. С помощью плагина Resize Image After Upload можно утвердить его границы. Например, обрезать до 1920 пикселей или меньше. Это же изображение будет выводиться, если кликнуть на картинку.

Дополнительно картинки можно сжать или растянуть с помощью стилей CSS на всю читаемую область, но в данной статье об этом касаться не будем.

Читайте также

• 
• 
• 
• 

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

Источник

Миниатюры записей и страниц в WordPress. Как задать и как вывести миниатюру поста?

Чуть больше практики по работе с миниатюрами WordPress в моём видеоуроке.

Потрясающая фишка в WordPress!

Начну с нуля. Итак, для начала вы должны понять разницу между миниатюрами и обычными изображениями из поста. Миниатюра — это что-то вроде превьюшки к посту, в самом посте она может даже и не использоваться.

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

В общем ладно, в двух словах, миниатюра — это изображение-превью к постам, которое:

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

По сути вы можете использовать ее даже в качестве фона сайта, т.е. для каждой записи — собственный фон.

Шаг 1. Включение поддержки миниатюр для вашей темы WordPress

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

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

Если вы не хотите использовать миниатюры во всех типах постов сразу, вы можете подключить их например только для записей ( post ):

или только для страниц ( page ):

или только для записей и только для страниц:

Можно ли назначить миниатюру таксономии WordPress?

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

Шаг 2. Как установить миниатюру для поста?

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

Способ 1. Метабокс «Миниатюра записи»

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

Для начала посмотрите в правую верхнюю часть страницы (возможно ее потребуется проскроллить к началу). Там должна быть вот такая вкладка Настройки экрана:

Открыв её, нам нужно убедиться, что напротив Миниатюра записи стоит галочка:

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

Способ 2. Кнопка «Добавить медиафайл»

Итак, переходим на страницу редактирования поста и нажимаем кнопку Добавить медиафайл:

В появившемся окне кликаем по ссылке Задать миниатюру:

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

Шаг 3. Выводим миниатюры постов на страницах сайта

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

Рассмотрим оба случая.

the_post_thumbnail() и get_the_post_thumbnail(). Стандартный способ вывода миниатюр.

get_the_post_thumbnail()	the_post_thumbnail()
Возвращает миниатюру поста в виде HTML-тега , возвращаемый HTML-код можно использовать в других функциях или записать в переменную.	Выводит миниатюру поста, является эквивалентом для:
Позволяет в качестве первого параметра указать ID поста, миниатюру которого нужно получить.	При помощи этой функции можно вывести только миниатюру текущего поста из цикла.
В качестве второго параметра можно указать размер получаемой миниатюры, по умолчанию — размер, заданный в Параметры > Медиафайлы.	В качестве первого параметра можно указать размер выводимой миниатюры.

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

Этот пример выводит заголовки (функция the_title()) и миниатюры постов со ссылками (функция the_permalink()) на сам пост.

Тот же самый пример для функции the_post_thumbnail():

Получение URL миниатюры при помощи функции wp_get_attachment_image_src() и get_post_thumbnail_id()

Функция wp_get_attachment_image_src() нужна для получения параметров изображения — его URL, ширины и высоты (в данном случае нам будет интересен именно URL). Она не работает в цикле и её обязательным параметром является ID вложения (ID миниатюры в данном случае).

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

Посмотрим, как это будет выглядеть на примере:

Как видите, в качестве второго параметра мы также можем указать размер получаемого изображения в виде строки ( один из зарегистрированных размеров, например thumbnail , medium , large , full и т.д.) или в виде массива array( 100, 100 ) . Чтобы миниатюры на сайте получались качественными, задавайте соответствующие размеры.

Как выбрать область обрезки миниатюры?

Уверен, что у вас уже бывали случаи, когда WordPress выбирал область обрезки изображения не так, как хотелось бы, например, у человека могла отрезаться половина головы, или бы мы могли потерять часть логотипа компании при обрезке и другие важные детали.

Для того, чтобы вы смогли сами выбирать область картинки для отображения на сайте, установите себе плагин Manual Image Crop. Этот плагин позволяет для каждого загруженного изображения для его каждого размера вручную установить область, отображаемую на сайте. Потрясающий инструмент!

Смотрите также

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник