Применяйте фильтры при загрузке поста через ajax.

Содержание

Вопрос или проблема
Ответ или решение
Правильный подход загрузки контента через AJAX
Шаг 1: Обновление вашего AJAX вызова
Шаг 2: Использование wp_send_json_success
Шаг 3: Обновление Javascript
Заключение

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

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

Ниже я показываю, как я это делаю, но когда контент возвращается, фильтры the_content не применяются, и многие функции не отображаются (пагинация, которую я добавил, и, вероятно, функциональность темы и других плагинов, связанных с записью).

Вот моя ajax функция:

jQuery(document).ready(function($) {
    $(document).on('click', '#upp-pagination a', function(event) {
        event.preventDefault();

        var page = $(this).parent().attr('class').replace(/\D/g, '');
        var postID = $('#upp-pagination').attr('class').replace(/\D/g, '');

        $.ajax({
            url: upppagination.ajaxurl,
            type: 'post',
            data: {
                action: 'load_page',
                page: page,
                postID: postID
            },
            success: function (result) {
                var newPage = result;

                $('div.entry-content').html(newPage);
            }
        });
    });
});

А это функция на сервере, которая возвращает страницы:

public function loadPage() {
    $postID = $_POST['postID'];
    $page = $_POST['page'];

    $post = get_post($postID);

    $content = $post->post_content;

    if ( false !== strpos( $content, '<!--nextpage-->' ) ) {
            $content = str_replace( "\n<!--nextpage-->\n", '<!--nextpage-->', $content );
            $content = str_replace( "\n<!--nextpage-->", '<!--nextpage-->', $content );
            $content = str_replace( "<!--nextpage-->\n", '<!--nextpage-->', $content );

            // Игнорировать nextpage в начале контента.
            if ( 0 === strpos( $content, '<!--nextpage-->' ) )
                    $content = substr( $content, 15 );

            $pages = explode('<!--nextpage-->', $content);
    } else {
            $pages = array( $post->post_content );
    }

    $page = $pages[$page - 1];

    $response = apply_filters('the_content', $page);
    wp_send_json($response);
}

Я использую правильный подход и как могу применить фильтры? Есть идеи?

Возможно, вам стоит загрузить все элементы на странице сразу, а затем использовать jQuery, чтобы отображать нужное количество за раз. Например:

По умолчанию вы можете загрузить (в DOM) и скрыть их все, а затем загружать по 4 за раз, используя метод slice в jQuery.

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

<script>
$(function(){
    $(".video_single").hide(); //скрыть все div с классом container
    $(".video_single").slice(0, 4).fadeIn(); // показать первые 4 div container
    $("#load_more").click(function(e){ // кнопка для загрузки большего количества
        e.preventDefault();
        $(".video_single:hidden").slice(0, 4).fadeIn(800); // выбрать следующие 4 скрытых div и показать их

        if($(".video_single:hidden").length == 0){ // проверить, остались ли скрытые div
            $("#load_more").hide(); //если больше нет скрытых div, скрыть кнопку       
        }
    });
});
</script>

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

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

Правильный подход загрузки контента через AJAX

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

Шаг 1: Обновление вашего AJAX вызова

Ваш текущий PHP-код для обработки AJAX-запроса уже содержит вызов apply_filters('the_content', $page);, что правильно. Однако убедитесь, что вы также правильно обрабатываете данные, чтобы избежать потенциальных проблем с безопасностью.

Шаг 2: Использование wp_send_json_success

Вместо wp_send_json используйте wp_send_json_success, чтобы возвращать структурированный ответ и облегчить обработку на стороне JavaScript:

public function loadPage() {
    if( !isset($_POST['postID']) || !isset($_POST['page']) ) {
        wp_send_json_error('Invalid request');
        return;
    }

    $postID = intval($_POST['postID']);
    $page = intval($_POST['page']);

    $post = get_post($postID);
    if (!$post) {
        wp_send_json_error('Post not found');
        return;
    }

    $content = $post->post_content;

    if ( false !== strpos($content, '<!--nextpage-->') ) {
        $content = str_replace("\n<!--nextpage-->\n", '<!--nextpage-->', $content);
        $content = str_replace("\n<!--nextpage-->", '<!--nextpage-->', $content);
        $content = str_replace("<!--nextpage-->\n", '<!--nextpage-->', $content);

        if (0 === strpos($content, '<!--nextpage-->')) {
            $content = substr($content, 15);
        }

        $pages = explode('<!--nextpage-->', $content);
    } else {
        $pages = array($post->post_content);
    }

    if (isset($pages[$page - 1])) {
        $pageContent = $pages[$page - 1];
        $responseContent = apply_filters('the_content', $pageContent);
        wp_send_json_success($responseContent);
    } else {
        wp_send_json_error('Page not found');
    }
}

Шаг 3: Обновление Javascript

Теперь обратите внимание на JavaScript часть. После получения ответа от сервера, обрабатывайте успешный и ошибочный случаи:

jQuery(document).ready(function($) {
    $(document).on('click', '#upp-pagination a', function(event) {
        event.preventDefault();

        var page = $(this).parent().attr('class').replace(/\D/g, '');
        var postID = $('#upp-pagination').attr('class').replace(/\D/g, '');

        $.ajax({
            url: upppagination.ajaxurl,
            type: 'post',
            data: {
                action: 'load_page',
                page: page,
                postID: postID
            },
            success: function (response) {
                if(response.success) {
                    $('div.entry-content').html(response.data);
                } else {
                    console.error(response.data);
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX request failed: ' + status + ' ' + error);
            }
        });
    });
});

Заключение

Этот подход обеспечивает правильное применение фильтров при загрузке контента через AJAX, что может помочь избежать проблем с отсутствующими элементами управления, такими как пагинация или другие функциональные возможности темы или плагинов. Постоянное тестирование и обратная связь помогут вам обеспечить плавную интеграцию ваших решений. Данный метод не только улучшает функциональность вашего плагина, но и гарантирует, что пользовательский интерфейс останется интуитивным и отзывчивым.