RSS-подписка

RSS-лента

Новые статьи

Последние комментарии


Получать обновления на эл. почту

Ваш e-mail:

Рассылка новостей от Loco

Оборачиваем изображения в ссылки с помощью хука add_filter('the_content', ...) в functions.php

Нет картинки Задача: сделать все вставленные изображения в посте ссылками и привесить на них эффект Lightbox

Для этого в файл functions.php добавляем хук:

add_filter( 'the_content', function( $content ){

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

  if( ! is_main_query() || ! in_array( $GLOBALS['post']->post_type, ['page'] ) )
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] .'" data-lightbox="frommetal">'. $mm[2] .'</a>';
  }, $content );

  return $content;
}, 10000 ); 
Происходит подмена картинок оборачиванием их ссылками на изображения.
Последний параметр пришлось установить побольше, например 1000, это приоритет применения фильтра, так как в Wordpress использую ещё плагин Site Origin для визуального редактора и из-за него этот хук не срабатывал на тех страницах/постах, которые оформлялись с Site Origin.
 
Lightbox привешивается с помощью атрибута data-lightbox="frommetal"
 
Также в footer.php добавляю 
<script src="/wp-content/themes/vantage/js/jquery.maskedinput.min.js" type="text/javascript"></script>
<script src="/wp-content/themes/vantage/js/lightbox2/dist/js/lightbox.min.js"></script>
 
 
 
 
 
Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.