Статьи

Как изменить атрибуты изображения в сообщениях WordPress

Сентябрь 8, 2018

WordPress позволяет пользователям размещать изображение на странице или публиковать контент. Как правило, создается следующий HTML-код: 


<img src="http://www.mysite.com/wp-content/uploads/2011/07/myimage.jpg" 
alt="my image" title="my image title" 
width="100" height="100" class="aligncenter size-full wp-image-123" />

Ничего страшного, но что, если вы хотите:

  • добавить свои собственные классы
  • удалить домен из URL (вероятно, ненужный, если вы не используете RSS-каналы)
  • удалить атрибуты ширины и высоты для масштабированных изображений в адаптивном дизайне?

К счастью, WordPress предоставляет несколько функций фильтра, которые помогут вам изменить HTML. Они могут быть помещены в файл functions.php вашей темы или в плагин .

важно: код <img> создается при вставке

В отличие от других фильтров содержимого WordPress, теги <img> генерируются, когда редактор вставляет изображение в сообщение. Следовательно, эти функции не изменят код для изображений, которые уже были добавлены в сообщение.

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

Изменение класса изображения

Самый простой и наиболее часто используемый фильтр для класса изображения: 

 
function image_tag_class($class, $id, $align, $size) {
	return $align;
}
add_filter('get_image_tag_class', 'image_tag_class', 0, 4);

Функция image_tag_class () принимает 4 строковых параметра: существующий класс, идентификатор изображения (числовой), выравнивание (нет, слева, справа, по центру) и размер (обычно «полный»). Возвращает строку, которая станет классом тега <img>. В этом примере мы просто возвращаем строку выравнивания.

Расширенная модификация изображения

Если нам нужно внести фундаментальные изменения в тег <img>, нам нужен фильтр, который может изменять возвращаемый HTML-код напрямую, используя замены строк или регулярных выражений, например 

 
function image_tag($html, $id, $alt, $title) {
	return preg_replace(array(
			'/'.str_replace('//','//',get_bloginfo('url')).'/i',
			'/s+width="d+"/i',
			'/s+height="d+"/i',
			'/alt=""/i'
		),
		array(
			'',
			'',
			'',
			'alt="' . $title . '"'
		),
		$html);
}
add_filter('get_image_tag', 'image_tag', 0, 4);

Функция image_tag () принимает 4 строковых параметра: сгенерированный HTML, идентификатор изображения (числовой), текст alt и заголовок. В этом примере мы удалили имя домена из URL src, удалили атрибуты высоты и ширины и заменили пустые атрибуты alt текстом заголовка. Вы можете изменить функцию соответственно для ваших собственных замен.

Хотя изменение тега HTML <img> не нужно каждый день, полезно знать, что WordPress поддерживает эту функцию.

42
Share: