Как изменить предварительный просмотр галереи на экране редактирования во вкладке "Визуальный" в классическом редакторе

Как изменить предварительный просмотр галереи на экране редактирования во вкладке “Визуальный” в классическом редакторе

На чтение 3 мин Опубликовано 27.11.2024

Содержание

Вопрос или проблема
Ответ или решение
Понимание структуры
Шаги по модификации
Заключение

Вопрос или проблема

Я модифицирую функцию gallery_shortcode() из media.php с помощью плагина.

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

Если вы осмотрите этот элемент, то превью галереи находится внутри div wpview, но я не могу найти, где это генерируется.

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

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

Ответ или решение

Изменение предварительного просмотра галереи на экране редактирования в разделах "Визуально" в классическом редакторе WordPress может быть непростой задачей, особенно если вы хотите адаптировать его под свои нужды. В этом ответе мы рассмотрим, как вы можете модифицировать функцию gallery_shortcode() из файла media.php, чтобы ваш кастомный шаблон галереи отображался в предварительном просмотре на странице редактирования.

Понимание структуры

В WordPress предварительный просмотр галерей создается внутри wpview div. Эти элементы генерируются JavaScript-ом, поэтому их сложно найти в обычных PHP-файлах. Однако есть возможность вмешаться в логику отображения и изменить HTML-код, который будет использоваться в редакторе.

Шаги по модификации

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

Отключение стандартного предварительного просмотра:
Вам нужно будет отключить стандартный визуальный вывод для galerу, чтобы добавить свой кастомный. Это можно сделать с помощью следующего кода:

add_filter('post_gallery', 'my_custom_gallery_preview', 10, 2);

function my_custom_gallery_preview($output, $attr) {
   // ваш кастомный HTML-код для предварительного просмотра
   $attachments = get_posts(array(
       'post_type' => 'attachment',
       'post_status' => 'inherit',
       'post_mime_type' => 'image',
       'posts_per_page' => -1,
       'post__in' => explode(',', $attr['ids'])
   ));

   $custom_output = '<div class="my-custom-gallery">';
   foreach ($attachments as $attachment) {
       $custom_output .= '<div class="my-gallery-item">';
       $custom_output .= wp_get_attachment_image($attachment->ID, 'thumbnail'); // или ваш размер изображения
       // добавление ваших кастомных данных
       $custom_output .= '<p>' . get_post_meta($attachment->ID, 'custom_meta', true) . '</p>';
       $custom_output .= '</div>';
   }
   $custom_output .= '</div>';

   return $custom_output;
}

Добавление стилей:
Для корректного отображения вашего кастомного предварительного просмотра вам необходимо добавить соответствующие CSS-правила. Это можно сделать через файл стилей вашего плагина или через админпанель:
```
.my-custom-gallery {
   display: flex;
   flex-wrap: wrap;
}

.my-gallery-item {
   margin: 5px;
   /* Другие стили */
}
```
Тестирование изменений:
Напоминаем, что после внесения изменений необходимо протестировать их на различных устройствах и браузерах, чтобы убедиться, что ваш кастомный предварительный просмотр работает корректно.
Перспектива на блок редактор:
В будущем, когда вы решите адаптировать ваш код для блока редактора, стоит учитывать, что механизм работы с редакторами может варьироваться. Вам придется изучить структуру блоков и взаимодействие с их атрибутами.

Заключение

Внесение изменений в предварительный просмотр галереи в классическом редакторе WordPress возможно, но требует понимания структуры кода и возможности их модификации. Следуя приведённым шагам, вы сможете успешно адаптировать вывод вашей галереи для более удобного редактирования. Опыт по работе с классическим редактором также будет полезен при освоении нового блокового редактора, где, безусловно, будут свои специфические нюансы.