我有一个模态,当文章被点击时会弹出,以显示里面的内容。它在首页上运行良好,但在右侧我也有所有列出的类别的侧边栏,也与aerupon调用一起工作,根据点击的类别过滤出文章。
现在,每当访问者点击侧边栏上的类别时,首页上的内容就会被更新为与该类别相关的新帖子,这是可以的。但是如果我试图点击帖子,那么在首页上显示内容的模式就无法正常工作了?这里可能有什么问题?
我用来发射火箭的按钮
<a href="#" type="button" class="view-post" data-postid="<?php the_ID(); ?>" data-slug="<?php echo get_post_field('post_name', $post_id); ?>"></a>
字符串
modal-admin.js
jQuery(document).ready(function($) {
$('.view-post').click(function(e) {
e.preventDefault();
var postID = $(this).data('postid');
var postSlug = $(this).data('slug');
// changing URL based on the post slug
window.history.pushState(null, null, postSlug);
$.ajax({
url: wpAjax.ajaxUrl, // WordPress AJAX endpoint
type: 'post',
data: {
action: 'get_post_content',
post_id: postID,
},
success: function(response) {
$('#modal-content-placeholder').html(response);
$('#modal').show();
}
});
});
$('.homeInner').click(function() {
$('#modal').hide();
});
$(window).click(function(event) {
if (event.target == $('#modal')[0]) {
$('#modal').hide();
}
});
});
型
modal-callback.php
<?php
function get_post_content() {
$post_id = $_POST['post_id'];
$post_slug = $_POST['post_slug'];
$args = array(
'p' => $post_id,
'post_type' => 'post',
);
$singlePostQuery = new WP_Query($args);
if ($singlePostQuery->have_posts()) {
while ($singlePostQuery->have_posts()) {
$singlePostQuery->the_post();
// Display the post content here
the_content();
}
} else {
// No posts found
echo 'No posts found';
}
wp_die();
}
add_action('wp_ajax_get_post_content', 'get_post_content');
add_action('wp_ajax_nopriv_get_post_content', 'get_post_content');
型
Ajax文件和回调函数,用于在我使用的侧边栏中进行过滤
filter-apache.js
(function($){
$(document).ready(function(){
$(document).on('click', '.js-filter-item', function(event){
(event).preventDefault();
var category = $(this).data('category');
var categorySlug = $(this).data('slug');
// changing URL based on the category slug
window.history.pushState(null, null, categorySlug);
$.ajax({
url: wpAjax.ajaxUrl,
data: {
action: 'filterterm',
category: category,
taxonomy: $(this).data('taxonomy'),
posttype: $(this).data('posttype')
},
type: 'post',
success: function(result){
$('#response').html(result);
},
error: function(result){
console.warn(result);
}
});
});
});
})(jQuery);
型
ajax-callback.php
<?php
add_action('wp_ajax_nopriv_filterterm', 'filter_ajax_term');
add_action('wp_ajax_filterterm', 'filter_ajax_term');
function filter_ajax_term(){
$category = $_POST['category'];
$args = array(
'post_type' => $_POST['post'],
'posts_per_page' => -1,
'orderby' => 'NAME',
'order' => 'ASC'
);
if ($category !== null && isset($category) && $category !== '' && !empty($category)) {
$args['tax_query'] =
array(
array(
'taxonomy' => $_POST['taxonomy'],
'field' => 'id',
'terms' => array((int)$category)
)
);
} else {
$all_terms = get_terms(array('taxonomy' => 'acquisition', 'fields' => 'slugs'));
$args['tax_query'][] = [
'taxonomy' => 'acquisition',
'field' => 'slug',
'terms' => $all_terms
];
}
$the_query = new WP_Query( $args ); ?>
<div class="blogPostsWrapper mt-10">
<div class="grid grid-cols-3 gap-4 mr-5">
<?php if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php get_template_part( 'partials/blog', 'card' ); ?>
<?php endwhile; endif; ?>
</div>
</div>
<?php
die();
}
?>
型
blog-card.php
<div class="blogCardBlackOverlay">
<div class="col-span-1 shadow-2xl">
<?php $thumb = get_the_post_thumbnail_url(); ?>
<div class="relative blogPostCard rounded-2xl" style="background-image: linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.3) 130%), url('<?php echo $thumb;?>')">
<h1 class="blogPostCard_title font-sans text-white font-bold text-start"><?php the_title(); ?></h1>
<!-- Gettng custom taxonomies associate with teh post -->
<?php
$post_id = get_the_ID();
$terms = get_the_terms($post_id, 'acquisition');
if ($terms && !is_wp_error($terms)) {
$first_term = reset($terms); ?>
<span class="blogCard_taxonomy__item py-1 px-4 text-sm rounded-2xl absolute bottom-4 right-4 font-medium item-<?php echo $first_term->slug; ?>"><?php echo $first_term->name; ?></span>
<?php
}
?>
<!-- Reading time -->
<div class="blogPost_readingTime__wrapper">
<?php
$readingTime = get_field('reading_time');
?>
<div class="blogPost_readingTime text-white text-avenir absolute bottom-4 left-4">
<i class="fa-regular fa-lightbulb"></i>
<span><?php echo $readingTime; ?></span>
</div>
</div>
<a href="#" type="button" class="view-post" data-postid="<?php the_ID(); ?>" data-slug="<?php echo get_post_field('post_name', $post_id); ?>"></a>
</div>
</div>
</div>
型
2条答案
按热度按时间yqhsw0fo1#
问题似乎是(根据我们对这个问题的讨论),
字符串
脚本被添加到首页,而不是其他页面。您需要确保正确添加了应该在单击锚时触发事件的脚本。
7fyelxc52#
让它工作,所以这是解决方案
而不是
字符串
应使用一种方法
型