Как вызвать функцию JavaScript после обновления записи на экране редактирования записи в панели администратора WordPress?

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

if ( ! function_exists( 'vn_add_metabox' ) ) {
    function vn_add_metabox () {
        add_meta_box('vn_youtube_single_metabox', __('Ссылка на Youtube', WP_THEME_TEXTDOMAIN), 'show_vn_youtube_link_metabox', array('post', 'page'), 'side', 'low');

    }
    add_action( 'add_meta_boxes', 'vn_add_metabox' );
}

if (!function_exists('show_vn_youtube_link_metabox')) {
    function show_vn_youtube_link_metabox()
    {
        global $post;
        show_vn_input_text('vn_youtube_link'); // <input type="text" name ="vn_youtube_link" value="VALUE_POST_META" />
        echo '<br/>'.vn_get_youtube_iframe(get_post_meta( $post->ID, 'vn_youtube_link', true )); /*<iframe class="youtube-video-iframe" src="'.VIDEO_LINK.'?rel=0" width="790" height="496" allowtransparency="true" style="width:100%;" frameborder="0" allowFullScreen allow="encrypted-media" ></iframe> */
    }
}

if ( ! function_exists( 'vn_save_metabox_value' ) ) {
    function vn_save_metabox_value ( $post_id, $post ) { // Сохранение данных в базе WordPress.
        // избежание потери данных из-за автоматического сохранения
        if ( ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) || ( defined( 'DOING_AJAX' ) && DOING_AJAX ) || isset( $_REQUEST[ 'bulk_edit' ] ) ) {
            return $post->ID;
        }
        // Проверка прав доступа пользователя.
        if ( ! current_user_can( 'edit_post', $post->ID ) ) {
            return $post->ID;
        }

        vn_save_meta_box_content($post, 'vn_youtube_link');

        return $post->ID;
    }

    add_action( 'save_post', 'vn_save_metabox_value', 1, 2 );
}

if ( ! function_exists( 'vn_save_meta_box_content' ) ) {
    function vn_save_meta_box_content ( $post, $meta_box_id, $input_name="" ) {
        if ( ! isset( $input_name ) || empty( $input_name ) ) {
            $input_name = $meta_box_id;
        }

        if ( ! isset( $_POST[ $input_name ] ) || empty( $_POST[ $input_name ] ) ) {
            delete_post_meta( $post->ID, $meta_box_id );
        } else {
            if ( get_post_meta( $post->ID, $meta_box_id, true ) ) {
                update_post_meta( $post->ID, $meta_box_id, $_POST[ $input_name ] );
            } else {
                add_post_meta( $post->ID, $meta_box_id, $_POST[ $input_name ] );
            }
        }
    }
}

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

Для того чтобы выполнить JavaScript-функцию после обновления поста на экране редактирования постов в админ-панели WordPress, вы можете воспользоваться хуком save_post в комбинации с AJAX-запросом. Ниже приведены шаги для реализации такого подхода.

Шаг 1: Добавление скрипта

В вашем файле functions.php добавьте код для подключения вашего JavaScript-файла на странице редактирования постов.

function vn_enqueue_admin_scripts($hook) {
    if ('post.php' !== $hook && 'post-new.php' !== $hook) {
        return;
    }

    wp_enqueue_script('vn-custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true);

    // Передаем переменные в скрипт
    wp_localize_script('vn-custom-script', 'vnAjax', array(
        'ajaxUrl' => admin_url('admin-ajax.php')
    ));
}

add_action('admin_enqueue_scripts', 'vn_enqueue_admin_scripts');

Шаг 2: Создание JavaScript-файла

Создайте файл custom.js в папке вашего темы и добавьте следующий код:

jQuery(document).ready(function($) {
    // Слушаем событие обновления поста
    $('#post').on('submit', function() {
        // Используем таймер, чтобы дождаться выполнения AJAX запроса WordPress
        setTimeout(function() {
            // Здесь будет ваша функция для отображения iframe
            var youtubeLink = $('input[name="vn_youtube_link"]').val();
            if (youtubeLink) {
                // Отображаем iframe
                $('#youtube-container').html('<iframe class="youtube-video-iframe" src="' + youtubeLink + '?rel=0" width="790" height="496" allowtransparency="true" style="width:100%;" frameborder="0" allowFullScreen allow="encrypted-media"></iframe>');
            }
        }, 1000); // задержка в 1000мс (1 секунда) чтобы дождаться окончания AJAX
    });
});

Убедитесь, что вы добавили элемент с id="youtube-container" в ваш метабокс, чтобы отображать iframe:

function show_vn_youtube_link_metabox() {
    global $post;
    // Ваш код для отображения поля и фрейма
    echo '<input type="text" name="vn_youtube_link" value="' . esc_attr(get_post_meta($post->ID, 'vn_youtube_link', true)) . '" />';
    echo '<div id="youtube-container">';
    echo vn_get_youtube_iframe(get_post_meta($post->ID, 'vn_youtube_link', true));
    echo '</div>';
}

Шаг 3: Обработка AJAX-запросов (если требуется)

Если вам нужно сделать AJAX-запрос к серверу после выполнения обновления, вы можете создать обработчик AJAX-события. Это может быть полезно, если вы хотите обновлять данные с сервера.

В functions.php добавьте следующий код:

function vn_ajax_handler() {
    // Ваш код для обработки AJAX
    // Можно обратиться к базе данных, обновить информацию и вернуть ответ

    wp_send_json_success(); // Успешный ответ
}

add_action('wp_ajax_vn_my_custom_action', 'vn_ajax_handler');

Вывод

Теперь, когда вы сохраняете пост в админ-панели, после завершения обновления будет запущена функция JavaScript, которая обновит fрейм с содержимым на основе видео с YouTube.

Эта реализация обеспечивает плавную работу в интерфейсе администрирования, позволяя динамически обновлять содержимое без перезагрузки страницы. Если у вас есть дополнительные вопросы или рекомендации, пожалуйста, дайте знать!