Такое всплывающее окно в админке WordPress бывает нужно для многопользовательских сайтов. Например, каждый, кто зарегистрировался на сайте после активации попадает в т.н. “Консоль”, а там ему показывается модальное окошко с определённым текстом – поздравлнием/правилами/прочим.

Задача

Она довольно ясна и часто востребована. Поэтому, сформулировав её чётко и внятно, приступим к её реализации.

Как сделать всплывающее окно приветствия в админке WordPress, которое будет появляться при каждом заходе пользователя (но не админа) до тех пор, пока он не нажмёт кнопку “Больше не показывать”?

Решение

Тут есть два пути: использовать встроенные библиотеки (thickbox), либо подключить сторонние (bootstrap). У обоих вариантов есть свои минусы. Например, Thickbox слабоват в настройках и выводит модальное окно только при нажатии на ссылку. А вот Bootstrap может подпортить стили вашей админки, потому что подгрузит свои.

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

function my_bootstrap_modals()
{
 $screen = get_current_screen(); // проверка, где находимся в данный момент
 wp_register_script('modaljs', get_stylesheet_directory_uri() . '/assets/js/bootstrap.min.js', array('jquery'), '1', true); //ну вы поняли, этот файл должен быть уже на сайте в папке с Вашей темой
 wp_register_script('cookiejs', get_stylesheet_directory_uri() . '/assets/js/jquery.cookie.js', array('jquery'), '1', true);
 if ($screen->base == 'dashboard') { wp_register_style('modalcss', get_stylesheet_directory_uri() . '/assets/css/bootstrap.min.css', '', '', 'all');}; // подключить стили Bootstrap, если мы находимся на главной странице админки
 wp_enqueue_script('modaljs');
 wp_enqueue_script('cookiejs');
 wp_enqueue_style('modalcss');
}
add_action('admin_enqueue_scripts', 'my_bootstrap_modals');

Теперь нам нужно вывести модальное (всплывающее) окно в корне админки для всех, кто не администратор. Для этого мы добавим следующий код:

add_action('admin_footer', 'open_modal');
function open_modal()
{
 if (!current_user_can('manage_options')) { // если пользователь не может менять настройки сайта (значит, он не админ)
  $screen = get_current_screen();
// если текущее положение - основная страница "Консоли" и всплывающее окошко не запрещено куками 
  if (($screen->base == 'dashboard') && ($_COOKIE['no-modal'] !== '1')) { ?>
      <!-- Обычный код для Bootstrap модального окна -->
<div id="myModal" class="modal fade" tabindex="-1">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <button class="close" type="button" data-dismiss="modal">×</button>
                      <h4 class="modal-title">Привет!</h4>
                  </div>
                  <div class="modal-body">
                      <p>Вы находитесь в админке нашего сайта. Заполните, пожалуйста <a href="profile.php">ваш профиль</a>!</p>
                  </div>
                  <div class="modal-footer">
                      <button class="btn btn-default" type="button" data-dismiss="modal">Ок</button>
                      <button class="btn btn-primary no-more" data-dismiss="modal" type="button">Больше не показывать
                      </button>
                  </div>
              </div>
          </div>
      </div>
      <script>
          jQuery(document).ready(function () {
              jQuery('#myModal').modal('show'); // вывести модальное окно
          });
      </script>
      <script>
          jQuery(".no-more").click(function () {
              // если нажата кнопка "Больше не показывать", то записать в куки единичку и нарушить условие показа модального окна
              var d = new Date();
              d.setTime(d.getTime() + (1000 * 24 * 60 * 60 * 1000)); // не показывать 1000 суток
              var expires = "expires=" + d.toUTCString();
              document.cookie = 'no-modal' + "=" + 1 + ";" + expires + ";path=/";
          });
      </script>
  <?php }
 } ?>
<?php }

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

add_action('admin_head', 'center_bootstrap_modal');
function center_bootstrap_modal() {
  echo '<style>
.modal {
	text-align: center;
}
@media screen and (min-width: 768px) {
	.modal:before {
		display: inline-block;
		vertical-align: middle;
		content: " ";
		height: 100%;
	}
}
.modal-dialog {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
} 
  </style>';
}

Итоги.

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