Интересный сайт. Факты и решения

Увеличение картинки для сайта WordPress shadowbox

1425 просмотров Сайты Нет комментов »

fikcshadowИспользование плагинов в движке своего сайта не является хорошей идеей, так как плагин подгружает дополнительные скрипты для реализации опциональности в админке и другого часто не используемого мусора. При достаточном количестве установленных плагинов сайт может долго загружаться. Поэтому для реализации возможности увеличения изображения на сайте под управлением WordPress не будем использовать плагины.

Данный эффект в интернетах можно наблюдать под названием Lightbox или Shadowbox. Будем использовать уже готовый пакет скриптов и стилей от Shadowbox.js.
 

5 шагов для реализации увеличения изображения shadowbox на сайте:

  1. Нам потребуется скачать этот (Shadowbox.js) пакет. Можете его скачать на официальном сайте (по ссылке выше) или с моего сайта отсюда (разница в том, что я избавил подключаемый пакет от мусора).
  2. Извлеките папку shadowbox из архива или создайте папку shadowbox и поместите туда все файлы из архива.
  3. Затем загрузите папку shadowbox в папку темы оформления сайта работающего на wordpress (/wp-content/themes/название_темы/shadowbox/).
  4. Далее нужно подключить скрипт и стили к сайту, вписываем в файле header.php Вашего шаблона следующее:
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/shadowbox/shadowbox.css">
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/shadowbox/shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init();
    </script>
  5. Теперь нужно присвоить в ссылках изображений атрибут rel= «shadowbox», сделать это можно прописав следующий код в файле functions.php:
    <?php
    add_filter('the_content', 'addrellightbox');
    function addrellightbox($content) {
           global $post;
           $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
           $replacement = '<a$1href=$2$3.$4$5 rel="shadowbox" title="'.$post->post_title.'"$6>';
           $content = preg_replace($pattern, $replacement, $content);
           return $content;
    }
    ?>
    

После выполнения данных манипуляций на вашем сайте должен заработать эффект увеличения изображения shadowbox по клику.

Если возникли проблемы по установке скрипта, задавайте вопросы в комментариях, так же буду рад читать Ваши отзывы. Спасибо за внимание.

Поделитесь, пожалуйста:

Оставь свой коммент