WordPress как на ладони
Официальная конференция по WordPress в Moскве 18-19 августа, начало в 9:00 wordpress jino

Обернуть картинки (тег 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://wptest.ru/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://wptest.ru/wp-content/uploads/2017/09/caliyan.jpg" alt="" width="1500" height="1000" />

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

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

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

Условия:

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

  • Подстановка ссылок должна работать только в постах posts (не на страницах page)
0
Сергей
4 месяца назад
  • 1
    Kama6672
    ## делает 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 );
    anseme 4 месяца назад

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

    Kama 4 месяца назад

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

    DmitryCh 2 месяца назад

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

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

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

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