Flector

Как автоматически добавить атрибут lightbox ссылкам на картинки?

Добавленный атрибут rel=lightbox

Многие скрипты, которые реализуют эффект Lightbox при открытии картинок (когда картинка открывается в модальном окне на той же странице) требуют добавления к ссылкам на картинки атрибута rel="lightbox". Это необходимо, если выбранный вами скрипт не умеет парсить текст записей и самостоятельно находить ссылки только на картинки, игнорируя все остальные ссылки. Прописывать вручную этот атрибут для каждой вставляемой картинки может быть утомительным занятием, поэтому проще автоматически его добавить к ссылкам на картинки во всех записях сайта. Для этого вам необходимо вставить в файл functions.php вашей темы следующий код:

//добавление rel="lightbox" ссылкам на картинки start
function wph_auto_add_rel_lightbox($content) {
    $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 rel="lightbox"$6>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
add_filter('the_content', 'wph_auto_add_rel_lightbox');
//добавление rel="lightbox" ссылкам на картинки end

При необходимости атрибут rel="lightbox" меняется на любой другой атрибут, который требуется для скрипта вывода картинок в модальном окне.


Комментарии (13 комментариев)
  1. Здравствуйте. Функция рабочая, но почему то не вставляет rel="lightbox" к ссылкам на картинки сгруппированные в галереях. У Вас нет идей как это пофиксить?

    • Flector:

      поставить приоритет:

      add_filter('the_content', 'wph_auto_add_rel_lightbox', 999);

      должно помочь.

  2. Морис:

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

    • Flector:

      если вы файл залили через "медиафайлы" - то разницы нет. ну, если, конечно, не считать автоматически вставленных классов.

  3. Морис:
    1
    
    <a href="/wp-content/uploads/2017/04/image.png"><img src="адрес сайта/wp-content/uploads/2017/04/image-300x224.png" alt="бла бла бла" width="300" height="224" class="aligncenter size-medium wp-image-678" /></a>

    Вот так выглядит ссылка на картинку на сайте. Пробовал и через визуальный - не работает. Нет ни каких мыслей?
    И еще! Я пытаюсь добавить атрибут

    1
    
    rel="simplebox"

    , но думаю разницы в этом не должно быть. Я в коде заменил просто вместо lightbox поставил simplebox

    • Flector:

      движок не вставляет относительные пути - только полные. а так, особой разницы нет.

      не работает загрузка - отключаем все плагины, обновляем кэш в браузере - пробуем. не помогло? делаем тоже самое с темой.

  4. Морис:

    движок не вставляет относительные пути - только полные.

    Это я просто тут убрал url сайта, чтоб за спам не посчитали ))

    делаем тоже самое с темой.

    То есть ставим другую тему?

    • Flector:

      переключаемся на дефолтную - чтобы уж точно исключить проблему в теме.

    • Морис:

      К сожалению попробовал все что вы написали. Не работает функция как положено либо я туплю

  5. Морис:

    установил тему seventeen записал функцию, но все равно вставляет медифайлы без атрибута

    • Flector:

      плин, простите меня, я сразу то не врубился о чем вы. думал у вас вставка медиафайлов не работает в редакторе. этот код, что приведен - он меняет картинки внутри опубликованной записи, "на лету" - в редакторе картинки остаются прежними.

      • Морис:

        То есть нужно проверять уже готовую публикацию... Ну тогда все понятно. Щас проверю...

  6. Морис:
    1
    
    Щас проверю...

    Все работает. Спасибо большое ДРУГ!

Написать комментарий

Для вставки кода воспользуйтесь кнопкой "Код". Используйте предпросмотр!