Реализуйте всплывающее окно в Wordpress на стороне администратора через CDN Wordpress.

Содержание

Вопрос или проблема
Ответ или решение
Теория
Пример
HTML-структура
Скрипты и стили
Обработка событий и AJAX
Применение

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

Я хочу внедрить CDN на стороне администратора WordPress, как мне это сделать (начинающий в WordPress)

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Документ</title>
  <!-- Включить jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Bootstrap CSS (для стилизации модальных окон) -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap JS (для функционала модальных окон) -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <table class="wp-list-table widefat fixed striped">
    <thead>
      <tr>
        <th scope="col" class="manage-column">Id</th>
        <th scope="col" class="manage-column">User-Id</th>
        <th scope="col" class="manage-column">Просмотр данных</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>20</td>
        <td><a href="/dashboard/wp-admin/admin.php?page=excel-data-importer&amp;id=1" class="mr-3 view-data" title="Обновить запись"
            data-toggle="tooltip" data-id="1"><span class="fa fa-pencil"></span>Просмотр данных</a></td>
      </tr>
      <tr>
        <td>2</td>
        <td>1</td>
        <td><a href="/dashboard/wp-admin/admin.php?page=excel-data-importer&amp;id=2" class="mr-3 view-data" title="Обновить запись"
            data-toggle="tooltip" data-id="2"><span class="fa fa-pencil"></span>Просмотр данных</a></td>
      </tr>
      <tr>
        <td>3</td>
        <td>1</td>
        <td><a href="/dashboard/wp-admin/admin.php?page=excel-data-importer&amp;id=3" class="mr-3 view-data" title="Обновить запись"
            data-toggle="tooltip" data-id="3"><span class="fa fa-pencil"></span>Просмотр данных</a></td>
      </tr>
      <tr>
        <td>4</td>
        <td>21</td>
        <td><a href="/dashboard/wp-admin/admin.php?page=excel-data-importer&amp;id=4" class="mr-3 view-data" title="Обновить запись"
            data-toggle="tooltip" data-id="4"><span class="fa fa-pencil"></span>Просмотр данных</a></td>
      </tr>
    </tbody>
  </table>

  <!-- Модальное окно для отображения данных -->
  <div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="dataModalLabel">Просмотр данных</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Данные будут загружены здесь -->
          <div id="modalDataContent"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      // Обработка клика по ссылкам "Просмотр данных"
      $('.view-data').on('click', function(e) {
        e.preventDefault(); // Предотвращение стандартного поведения ссылки

        var id = $(this).data('id'); // Получение ID из атрибута data-id

        // Получение данных через AJAX
        $.ajax({
          url: '/dashboard/wp-admin/admin.php?page=excel-data-importer&id=' + id,
          method: 'GET',
          success: function(response) {
            // Заполнение модального окна полученными данными
            $('#modalDataContent').html(response);
            // Показ модального окна
            $('#dataModal').modal('show');
          },
          error: function(xhr, status, error) {
            console.error('Ошибка получения данных:', error);
            $('#modalDataContent').html('<p>Ошибка загрузки данных.</p>');
            $('#dataModal').modal('show');
          }
        });
      });
    });
  </script>
</body>
</html>

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

Чтобы реализовать всплывающее окно в административной панели WordPress с использованием CDN (Content Delivery Network), необходимо следовать нескольким шагам. Ваша цель – интеграция jQuery и Bootstrap через CDN для работы с модальными окнами, а также обеспечение корректной загрузки данных через AJAX. В этом ответе я подробно объясню, как это сделать, опираясь на предоставленный вами HTML-код.

Теория

Веб-технологии, такие как jQuery и Bootstrap, широко используются для создания интерактивных и удобных интерфейсов. Использование CDN позволяет быстрее загружать эти библиотеки, так как они часто кэшируются в браузерах пользователей. jQuery облегчает манипуляцию с DOM и обработку событий, а Bootstrap обеспечивает стилизацию и функциональность модальных окон.

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

Пример

Ваш код демонстрирует пример, в котором используется таблица, отображающая пользователей, с возможностью просмотра данных в модальном окне. jQuery используется для обработки кликов по ссылкам "View Data", а Bootstrap отвечает за функциональность модального окна.

HTML-структура

Вы используете стандартную таблицу WordPress для отображения данных. Каждая строка таблицы содержит ссылку для открытия модального окна. Модальное окно реализовано с использованием компонент Bootstrap и содержит заголовок, тело для данных и кнопку закрытия.

<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="dataModalLabel">View Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="modalDataContent"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Скрипты и стили

Подключение jQuery и Bootstrap через CDN обеспечивает возможность быстрого и надежного доступа к этим библиотекам. Это полезно не только для скорости, но и для обеспечения актуальности версий библиотек.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Обработка событий и AJAX

С использованием jQuery добавляется обработчик событий для клика на ссылки "View Data". При нажатии ссылка перехватывается, и запускается AJAX-запрос для получения данных. Полученные данные загружаются в тело модального окна, которое затем отображается.

$('.view-data').on('click', function(e) {
  e.preventDefault();

  var id = $(this).data('id');

  $.ajax({
    url: '/dashboard/wp-admin/admin.php?page=excel-data-importer&id=' + id,
    method: 'GET',
    success: function(response) {
      $('#modalDataContent').html(response);
      $('#dataModal').modal('show');
    },
    error: function(xhr, status, error) {
      console.error('Ошибка при получении данных:', error);
      $('#modalDataContent').html('<p>Ошибка загрузки данных.</p>');
      $('#dataModal').modal('show');
    }
  });
});

Применение

Для интеграции данной функциональности в WordPress следует разместить код в разделе вашей темы или плагина, который отвечает за отображение элементов интерфейса в административной панели. Это может быть JavaScript-файл или же сам файл PHP, который выводит нужные элементы. Убедитесь, что все скрипты и стили правильно включены в очередь, используя wp_enqueue_script и wp_enqueue_style, чтобы избежать конфликтов с другими скриптами и стилями.

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

Реализуйте всплывающее окно в WordPress на стороне администратора через CDN WordPress.