Чиним лайтбокс на сайте

Часть 1. История вопроса

Было: Картинки в старых статьях открывались красиво, то есть всплывали отдельным окном, а в новых статьях этот механизм не работает.
Причина: Старый плагин WP JQuery Lightbox умер (вероятно не совместим с новым PHP). Новый Simple Lightbox не видел картинки, потому что у них не было правильных ссылок.

Термины:

Лайтбокс (Lightbox) — это когда кликаешь на картинку, она плавно всплывает, фон темнеет
Mixed Content — когда сайт на https://, а картинки грузятся по http:// (браузер блокирует)
Сниппет (Snippet) — кусочек PHP-кода, который делает одну задачу и отключается

Часть 2. Схема: как картинка попадает в лайтбокс

Если картинка не открывается в лайтбоксе, стоит проверить, есть ли вокруг неё ссылка <a href=»…»> в HTML-коде статьи.

Часть 3. Где в редакторе WordPress прячется «Ссылка на медиафайл»

В новом редакторе (Gutenberg / Блочный редактор):

Шаг	Что делать	Где искать
1	Нажимаем на картинку	Она выделится голубой рамкой
2	Смотрим на верхнюю панель инструментов	Там появится иконка «цепочка» или выпадающий список
3	Выбираем «Медиафайл» (Media File)	Или «Ссылка на файл»
4	Обновляем статью	Готово!

В старом редакторе (Classic Editor):

Нажать на картинку
Нажать иконку «Карандаш» (Изменить)
В поле «Ссылка на» выбрать «Файл медиа»
Обновить

Часть 4. Замена старого плагина на новый

«WP JQuery Lightbox» перестал работать возможно из-за новых версий PHP или WordPress.

Деактивируем старый плагин (пока не удаляем)
Устанавливаем новый: Simple Lightbox

Плагины — Добавить новый — поиск «Simple Lightbox»

Установить — Активировать

Проверяем настройки:

Плагины – Установленные – Simple Lightbox

Плагин должен быть включён для записей и страниц

Simple Lightbox сам подхватывает все картинки, которые уже имеют правильные ссылки. Новые картинки нужно вставлять с опцией «Медиафайл» (см. Часть 3).

Часть 5. Исправляем ссылки на картинки

Проблема: При переводе сайта на протокол https, часть материала, в том числе изображения остались с http

В консоли браузера (F12) были красные ошибки «Mixed Content»

Лечение через плагин Better Search Replace:

Шаг	Действие
1	Установить плагин Better Search Replace
2	Инструменты → Better Search Replace
3	Поиск: https://masterf1.ru (или старый адрес хостинга)
4	Замена: https://masterf1.ru
5	Выбрать все таблицы (или хотя бы wp_posts)
6	Сначала нажать «Выполнить пробный запуск» — проверить, сколько замен
7	Если всё ок — снять галочку «пробный запуск» и выполнить замену
8	Повторить для http://www.masterf1.ru, http://a0372646.xsph.ru

Результат: 5200 замен! Все ссылки на картинки стали https.

Часть 6. Автоматическое исправление изображений во всех статьях

Проблема: Даже после замены протоколов, в новых статьях у картинок не было ссылок. Лайтбокс не работал.

Решение: Разовый PHP-скрипт, который пробежит по всем статьям и обернёт картинки в ссылки.

Для решения подойдёт плагин для сниппетов, например WPCode:

Устанавливаем плагин WPCode
Добавляем новый скрипт: WPCode — Add Snippet — Add Your Custom Code

Название: «Разовый фикс картинок»
Тип кода: PHP Snippet

Вставляем код

// Разовый фикс картинок — оборачивает все img в ссылки
if (!get_option('wpcode_images_fixed_done')) {
    $posts = get_posts(array(
        'posts_per_page' => -1,
        'post_type' => array('post', 'page'),
        'post_status' => 'publish'
    ));
    
    $fixed = 0;
    
    foreach ($posts as $post) {
        $content = $post->post_content;
        
        // Ищем картинки и оборачиваем в ссылки
        $pattern = '/<img(.*?)src="([^"]+\.(jpg|jpeg|png|gif|webp))"(.*?)>/i';
        $new_content = preg_replace_callback($pattern, function($m) {
            // Проверяем, нет ли внутри ссылки
            if (preg_match('/<a.*?>.*?' . preg_quote($m[0], '/') . '.*?<\/a>/i', $m[0])) {
                return $m[0]; // Уже есть ссылка — не трогаем
            }
            return '<a href="' . $m[2] . '">' . $m[0] . '</a>';
        }, $content);
        
        if ($new_content !== $content) {
            wp_update_post(array('ID' => $post->ID, 'post_content' => $new_content));
            $fixed++;
        }
    }
    
    update_option('wpcode_images_fixed_done', $fixed);
    add_action('admin_notices', function() use ($fixed) {
        echo '<div class="notice notice-success"><p> Обработано статей: ' . $fixed . '</p></div>';
    });
}

// Разовый фикс картинок — оборачивает все img в ссылки

if (!get_option('wpcode_images_fixed_done')) {

$posts = get_posts(array(

'posts_per_page' => -1,

'post_type' => array('post', 'page'),

'post_status' => 'publish'

));

$fixed = 0;

foreach ($posts as $post) {

$content = $post->post_content;

// Ищем картинки и оборачиваем в ссылки

$pattern = '/<img(.*?)src="([^"]+\.(jpg|jpeg|png|gif|webp))"(.*?)>/i';

$new_content = preg_replace_callback($pattern, function($m) {

// Проверяем, нет ли внутри ссылки

if (preg_match('/<a.*?>.*?' . preg_quote($m[0], '/') . '.*?<\/a>/i', $m[0])) {

return $m[0]; // Уже есть ссылка — не трогаем

}

return '<a href="' . $m[2] . '">' . $m[0] . '</a>';

}, $content);

if ($new_content !== $content) {

wp_update_post(array('ID' => $post->ID, 'post_content' => $new_content));

$fixed++;

}

update_option('wpcode_images_fixed_done', $fixed);

add_action('admin_notices', function() use ($fixed) {

echo '<div class="notice notice-success"><p> Обработано статей: ' . $fixed . '</p></div>';

});

}

6. Указываем расположение: «Только администратор»

Активируем код

Заходим в админку — при запуске страницы скрипт автоматически переберёт все страницы и выведет уведомление «Обработано статей: XXX»
Отключаем сниппет! Чтобы не грузить систему

Часть 7. Используемые плагины

Simple Lightbox	Плагин для эффекта всплывающей картинки
Better Search Replace	Плагин для массовой замены текста в базе данных
WPCode	Менеджер сниппетов (кусочков кода), которые можно включать/выключать

Master F1