WordPress AJAX. Делаем вывод поста в модальном окне по нажатию кнопки

Предисловие

Надо мне тут для одного проекта вывести пост в модальном окне, для каждого поста свой конечно же. Но дело такое, я ни фига не по AJAX’у и javascript, и в wordpress с ajax всё сложно из-за видимости функций его самого. Начал искать что да как… А на просторах рунета ничего нет (типичная проблема) и то, что на «инглише» тоже не алё. Пришлось писать самому. И теперь после всей боли и страданий делюсь практикой создания подобного. Сразу оговорюсь, что вёрстка проекта на bootstrap и вызывал модалку его методами.

Как вывести пост wordpress в модальном окне по AJAX

Первое, разберёмся как вообще выводить записи wordpress в его цикле и для чего это нужно. Нужно это для того, чтобы не возникало проблем с вызовом таких функций, как the_title(), get_the_post_thumbnail(), the_content() и т.д.
Если вы будете выводить их не в цикле, то придётся пользоваться «всяким», чтобы у вас выводилось нужное вместо undefine

Вывод поста в цикле wordpress c передачей ID поста

Приведённый ниже код мы можем выводить где угодно в файлах, к которым подключена шапка сайта.

$args = array(
'p' => $postID, // ID поста
'post_type' => 'any'
);
$recent = new WP_Query($args);
while ( $recent->have_posts() ) : $recent->the_post();?>

<!--Вывод поста функциями, например, the_title(); -->

<?php endwhile; ?>

где p — это id поста

Включаем поддержку AJAX в вашей теме

Чтобы подключить вашу функцию AJAX в wordpress, нужно в файле function.php дописать пару строк.

// в functions.php
add_action('wp_ajax_my_action', 'data_fetch');
add_action('wp_ajax_nopriv_my_action', 'data_fetch');

my_action можете заменить любым другим именем, наверно даже со SLUG’ом вашей темы. data_fetch — это та функция которую вы будете объявлять для исполнения.

Объявляем функцию AJAX

Объявляем data_fetch(); в файле function.php после строк, которые мы написали ранее

function data_fetch($postID){
    $postID=intval( $_POST['param'] );
    
    $args = array(
    ‘p’ => $postID, // ID of a page, post, or custom type
    //’post_type’ => ‘any’
    );

    $recent = new WP_Query($args);

    while ( $recent->have_posts() ) : $recent->the_post();?>

        <div class=»modal-header»>
        <button type=»button» class=»close» data-dismiss=»modal» aria-label=»Close»><span aria-hidden=»true»>&times;</span></button>
        <?php the_title( ‘<h2 class=»modal-title text-center»>’, ‘</h2>’ ); ?>
        </div>

        <div class=»row»>

        <div class=»col-lg-3″>

            <img src=»<?php echo get_the_post_thumbnail_url(); ?>» class=»instaupp-img img-circle»>

        </div>
            <div class=»col-lg-9″>
                <p><i>Описание</i></p>
                <?php the_content(); ?>
            </div>
        </div>

    <?php endwhile; ?>
<?php
    die();
}

У меня получилась такая функция: $postID=intval( $_POST[‘param’] ); мы будем ловить с помощью jquery уже на странице и передавать функции. Ещё, в функции я вывел несколько элементов в цикле wordpress’а :

<?php the_title( '<h2 class="modal-title text-center">', '</h2>' ); ?>

— заголовок записи;

<?php echo get_the_post_thumbnail_url(); ?>

—  cсылка на миниатюру записи; <?php the_content(); ?> — содержание записи. Всё остальное в функции — вёрстка.

Скрипты Jquery для работы функции.

Забыл сказать, что для работы всего этого нужно jquery. Но если у вас bootstrap, то вы и так подключили его еще на стадии вёрстки.

По идее, правильным способом было подключить все скрипты через функцию wp_enqueue_scripts(), но т.к. я торопился, то сделал «дерьмокод» и просто объявил функцию ftdfft(); и вызвал её вот так add_action(‘wp_footer’,’ftdfft’, 1000). Так делать нельзя. 1000 в подключении — это приоритет. Чтобы подключалось в самом конце

Содержание скриптов:
1-й

<script>
function fetch(e){var param = $(e.target).attr('data-ajax-param');
 // Находим id поста по нажатию кнопки. У кнопки должен быть атрибут data-ajax-param равный id поста, например, data-ajax-param="11"
  $.post('wp-admin/admin-ajax.php', {'action':'my_action', 'param':param}, function(response){
   $('.modal-content.ajax').html(response);
});
}
</script>

2-й

<script>
$( '[data-ajax-param]' ).click(function (e) {
 fetch(e);
});
</script>

‘param’:param это то, что мы передаём функции data_fetch($postID) и она передаётся как id поста. .modal-content.ajax — это селектор блока, в который будет вставляться контент вашей записи.

Что осталось сделать?

Вывести модальное окно

Выведите html модельного окна в вёрстке страницы, на которой будет всё происходить. Не забудьте, что у блока, в котором будет выводиться контент, должен быть class=»modal-content ajax»

У кнопки вызова модального окна вывести id

В дата data-ajax-param нужно вывести id записи. Если ваша кнопка выводится в цикле, то можно вывести вот так — <?php the_ID(); ?>

Назначить вызов модального окна

У той же кнопки, что и имеет ID нужно приписать вызов модалки, например, data-toggle=»modal» data-target=».bs-example-modal-lg», конечно же, указав правильный селектор вашего модального окна. Если вы не на bootrap, то думайте сами.