Как добавить rel=»lightbox» для всех изображений в блоге

Как добавить rel="lightbox" для всех изображений в блоге | n-wp.ru
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Многие пользуются плагинами или скриптами, которые открывают изображения в модальном окне. В большинстве из этих плагинов стандартом стало использование эффекта lightbox — изображение открывается в модальном окне поверх затемненного содержимого. Таким образом использование подобного эффекта концентрирует внимание читателей на самом изображении. Для того, чтобы активировать подобный эффект, часто требуется в код прямой ссылки, указывающей наизображение, вставлять <

 inline="yes">rel="lightbox"

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

Как добавить rel=lightbox для всех изображений в блоге

Для автоматического добавления <

 inline="yes">rel="lightbox"

в коды прямых ссылок, указывающих на изображения, откройте файл functions.php, и добавьте в него:

add_filter('the_content', 'addrellightbox');
function addrellightbox($content) {
       global $post;
       $pattern ="/<a>/i";
       $replacement = '<a rel="lightbox">post_title.'"$6>';
       $content = preg_replace($pattern, $replacement, $content);
       return $content;
}

Этот код создает фильтр, через который пропускаются все ссылки, ведущие к файлам с расширениями bmp, gif, jpeg, jpg и png. Фильтр на лету добавляет в ссылку <

 inline="yes">rel="lightbox"

. Удобно то, что вы легко можете изменить фильтр, добавив в него другой тег, и это изменение автоматически заработает в блоге.

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. Баф

    Подскажите, а как сделать то же самое, но для комментариев?

    И ещё, может быть можно, чтобы в комментариях и постах любая ссылка на рисунок получала обрамление в виде тега

    [img][/img]

    ?

    Ответить
    1. как сделать то же самое, но для комментариев?

      Добавьте первой строчкой кода:

      add_filter('comment_text', 'addrellightbox');
      Ответить
    2. может быть можно, чтобы в комментариях и постах любая ссылка на рисунок получала обрамление в виде тега img

      Изменить код по аналогии:

      add_filter('the_content', 'addrellightbox');
      add_filter('comment_text', 'addrellightbox');
      function addrellightbox($content) {
             global $post;
             $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
             $replacement = '[img]<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>[/img]';
             $content = preg_replace($pattern, $replacement, $content);
             return $content;
      }
      Ответить
      1. Баф

        К сожалению после замены получается вот так:
        [img]http://bafff.ru/blog/wp-content/uploads/2011/09/comm.PNG[/img]

        Ответить
      2. Баф

        Пока отключил…

        Ответить
        1. Баф

          А сейчас пробовал вставить картинку в комментарий, чтобы она открылась в новом окне — ох я и намучался!

          Так что эту переделку я очень хочу внедрить у себя

          p.s. а как привязать себе аватарку у вас?

          Ответить
          1. Ответить
  2. Баф

    И это только работает для вновь вставляемых в посты рисунков? А ко всем старым рисункам нет возможности добавить этот фильтр?

    Ответить
    1. Баф

      Т.е. как видите в этом посте http://bafff.ru/blog/?p=1609 ничего не поменялось. Хотя, может я слишком многого хочу? :)
      Просто тогда я не понимаю зачем это нужно, т.к. все ссылки на картинки и так открываются в просмотрщике без дополнительных пассов…

      Ответить