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, то думайте сами.