когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
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»>×</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’а несколько элементов:
— 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>
‘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, то думайте сами.
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.