通过 post-ID 和 ajax 更改 wordpress 中 div 内的 the_content() 内容
Change the_content() content inside a div in wordpress by post-ID with ajax
我正在尝试通过 post-id 和 ajax 更改模态框内的内容。
我对ajax的了解非常有限,仍在学习中..
所以我设法加载了 ajax 脚本,但是当我打开模式时,我立即从所有 post 中获取内容,而不是它上面的每个 post自己的。
我想要实现的是使用 ajax 快速查看 posts,
如何使用带有 ID 的 rel 属性来更改模态中的 the_content() 内容?
在 posts 循环中我有动态按钮 post-id:
<a href="#" rel="<?php the_ID(); ?>" class="btn btn-primary post-link" data-bs-toggle="modal" data-bs-target="#myModal">
QUICK VIEW
</a>
模态:
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div id="the-post-content" class="modal-content">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CLOSE</button>
</div>
</div>
</div>
</div>
在function.php中:
add_action( 'wp_ajax_load_post_content', 'load_post_content' );
add_action( 'wp_ajax_nopriv_load_post_content', 'load_post_content' );
function load_post_content() {
$the_post_id = $_POST['the_ID'];
$args = array(
'post_type' => 'post',
'p' => $the_post_id
);
$ajax_query = new WP_Query($args);
$the_content;
if ( $ajax_query->have_posts() ) : while ( $ajax_query->have_posts() ) : $ajax_query->the_post();
$the_content = the_content();
endwhile;
endif;
echo $the_content;
wp_reset_postdata();
die();
}
function enqueue_jquery_ajax(){
?>
<script>
jQuery(document).ready(function(){
jQuery(".post-link").click(function(){
var post_id = jQuery(this).data('id');
var ajaxurl = 'http://my-domain.com/wp-admin/admin-ajax.php';
jQuery.post(
ajaxurl,
{
'url': ajaxurl,
'action': 'load_post_content',
'the_ID': post_id
},
function(response){
jQuery('#the-post-content').html(response);
}
);
return false;
});
});
</script>
<?php
}
add_action('wp_enqueue_scripts','enqueue_jquery_ajax', 99);
顺便说一句。我知道我应该本地化脚本,但现在我只想让它工作..
更新:用这个函数替换你的 load_post_content 函数:
function load_post_content() {
$content_post = get_post($_POST['the_ID']);
$the_content = $content_post->post_content;
$the_content = apply_filters('the_content', $the_content);
$the_content = str_replace(']]>', ']]>', $the_content);
$title = get_the_title($content_post); // Title
$thumbnail = get_the_post_thumbnail($content_post); // Thumbnail
/* if you want display title and thubnails */
$the_content = $title.$thumbnail.$the_content;
print($the_content);
wp_reset_postdata();
die();
}
我正在尝试通过 post-id 和 ajax 更改模态框内的内容。
我对ajax的了解非常有限,仍在学习中..
所以我设法加载了 ajax 脚本,但是当我打开模式时,我立即从所有 post 中获取内容,而不是它上面的每个 post自己的。 我想要实现的是使用 ajax 快速查看 posts, 如何使用带有 ID 的 rel 属性来更改模态中的 the_content() 内容?
在 posts 循环中我有动态按钮 post-id:
<a href="#" rel="<?php the_ID(); ?>" class="btn btn-primary post-link" data-bs-toggle="modal" data-bs-target="#myModal">
QUICK VIEW
</a>
模态:
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div id="the-post-content" class="modal-content">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CLOSE</button>
</div>
</div>
</div>
</div>
在function.php中:
add_action( 'wp_ajax_load_post_content', 'load_post_content' );
add_action( 'wp_ajax_nopriv_load_post_content', 'load_post_content' );
function load_post_content() {
$the_post_id = $_POST['the_ID'];
$args = array(
'post_type' => 'post',
'p' => $the_post_id
);
$ajax_query = new WP_Query($args);
$the_content;
if ( $ajax_query->have_posts() ) : while ( $ajax_query->have_posts() ) : $ajax_query->the_post();
$the_content = the_content();
endwhile;
endif;
echo $the_content;
wp_reset_postdata();
die();
}
function enqueue_jquery_ajax(){
?>
<script>
jQuery(document).ready(function(){
jQuery(".post-link").click(function(){
var post_id = jQuery(this).data('id');
var ajaxurl = 'http://my-domain.com/wp-admin/admin-ajax.php';
jQuery.post(
ajaxurl,
{
'url': ajaxurl,
'action': 'load_post_content',
'the_ID': post_id
},
function(response){
jQuery('#the-post-content').html(response);
}
);
return false;
});
});
</script>
<?php
}
add_action('wp_enqueue_scripts','enqueue_jquery_ajax', 99);
顺便说一句。我知道我应该本地化脚本,但现在我只想让它工作..
更新:用这个函数替换你的 load_post_content 函数:
function load_post_content() {
$content_post = get_post($_POST['the_ID']);
$the_content = $content_post->post_content;
$the_content = apply_filters('the_content', $the_content);
$the_content = str_replace(']]>', ']]>', $the_content);
$title = get_the_title($content_post); // Title
$thumbnail = get_the_post_thumbnail($content_post); // Thumbnail
/* if you want display title and thubnails */
$the_content = $title.$thumbnail.$the_content;
print($the_content);
wp_reset_postdata();
die();
}