eurobyte.ru - мощные сервера с Дата-центрами в Нидерландах и Москве. От 159 ₽/мес.

Обернуть картинки (тег img) в ссылку (тег a) с url самой картинки

Когда я впервые создал свой сайт, я сделал так, чтобы у всех изображений по умолчанию не было ссылок (image_default_link_type = none). Теперь я используют Lightbox, поэтому мне нужно сделать все изображения во всех постах на сайте такими, чтобы по ним можно было кликнуть.

Мне нужно перевести все изображения во все постах из вида:

<img src="https://example.com/wp-content/uploads/2018/04/Apple-iPhone-6-0.jpg" alt="" width="1500" height="1000" />

в 

<a href="https://example.com/wp-content/uploads/2018/04/Apple-iPhone-6-0.jpg">
<img src="https://example.com/wp-content /uploads/2018/04/Apple-iPhone-6-0.jpg "alt =" "width="1500" height="1000"/>
</a>

Конкретный пример с сайта:

<img class="alignnone size-full wp-image-40443" src="http://example.com/wp-content/uploads/2017/09/maxresdefault.jpg" alt="Mosaic Mac App Window Tidy Download review 13" width="640" height="1136" />

<img class="alignnone size-full wp-image-93257" src="http://example.com/wp-content/uploads/2017/09/caliyan.jpg" alt="" width="1500" height="1000" />

Нужен такой вид:

<a href="http://example.com/wp-content/uploads/2017/09/maxresdefault.jpg">
	<img class="alignnone size-full wp-image-40443" src="http://example.com/wp-content/uploads/2017/09/maxresdefault.jpg" alt="Mosaic Mac App Window Tidy Download review 13" width="640" height="1136" />
</a>

<a href="http://example.com/wp-content/uploads/2017/09/caliyan.jpg">
	<img src = "http://example.com/wp-content/uploads/2017/09/caliyan.jpg "alt =" "width =" 1500 "height =" 1000 "/>
</a>

Условия:

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

  • Подстановка ссылок должна работать только в постах posts (не на страницах page)
0
Сергей
7.5 лет назад
контентрегулярные выражения
  • 1
    Kama 9879
    ## делает IMG тег анкором ссылки на картинку указанную в этом теге, чтобы её можно было увеличить и посмотреть.
add_filter( 'the_content', function( $content ){

  // пропускаем если в тексте нет картинок вообще...
  if( false === strpos( $content, '<img ') )
	return $content;

  if( ! is_main_query() || ! in_array( $GLOBALS['post']->post_type, ['post'] ) )
	return $content;

  $img_ex = '<img[^>]*src *= *["\']([^\'"]+)["\'][^>]*>';
  $content = preg_replace_callback( "~(?:<a[^>]+>\s*)$img_ex|($img_ex)~", function($mm){
	// пропускаем, если картинка уже со ссылкой
	if( empty($mm[2]) )
	  return $mm[0];

	return '<a href="'. $mm[3] .'">'. $mm[2] .'</a>';
  }, $content );

  return $content;
}, 5 );

    Приоритет хука возможно нужно будет поменять.

    -

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

    $content = preg_replace( "~<a[^>]+href[^>]+\.(?:jpg|jpeg|png|gif)[^>]+>\s*(<img[^>]+>)\s*<\/a>~", '$1', $content );
    7.5 лет назад #
    anseme 7.5 лет назад

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

    Kama 7.5 лет назад

    Так их можно добавлять, сюда кликай:

    DmitryCh 7.4 года назад

    Здравствуйте. Долго искал это же решение, спасибо, супер! Но у меня немного другое условие, все как топикстартер описал, но в a href должна быть ссылка на оригинальный jpg из родительской директории. Т.е. в теле поста стоит миниатюра, а разворачивать нужно оригинал с тем же именем, но в родительской папке (дочерняя всегда thumb). По аналогии с примером, должно быть так:

    <a href="http://example.com/uploads/parent/maxresdefault.jpg">
	<img class="alignnone" src="http://example.com/uploads/parent/thumb/maxresdefault.jpg" />
</a>

    Не поможете с решением? Заранее спасибо.

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