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

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

.

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

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

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

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

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

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

2. Отключение стандартного предварительного просмотра:
   Вам нужно будет отключить стандартный визуальный вывод для 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;
   }

3. Добавление стилей:
   Для корректного отображения вашего кастомного предварительного просмотра вам необходимо добавить соответствующие CSS-правила. Это можно сделать через файл стилей вашего плагина или через админпанель:

   .my-custom-gallery {
      display: flex;
      flex-wrap: wrap;
   }
   
   .my-gallery-item {
      margin: 5px;
      /* Другие стили */
   }

4. Тестирование изменений:
   Напоминаем, что после внесения изменений необходимо протестировать их на различных устройствах и браузерах, чтобы убедиться, что ваш кастомный предварительный просмотр работает корректно.

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

Заключение

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