WordPress通過div中的Ajax加載帖子詳細信息和內容

Question

我已將post-id信息存儲在data-*屬性中，我希望通過&.ajax()函數在div中顯示此內容。 這是我正在處理的代碼。

1. 顯示帖子拇指的列表項

    <li class="homus-partners-section-single" data-post-id="<?php the_ID(); ?>"> <?php the_post_thumbnail(); ?> </li> 

2. 我要顯示項目的div

    <div class="homus-partners-detalis"> <div class="homus-partners-detalis-img"> <?php the_post_thumbnail(); ?> </div> <div class="homus-partners-detalis-info"> <h4> <?php the_title(); ?> </h4> <p> <?php the_content(); ?> </p> </div> </div> 

3. Ajax函數

    $(document).delegate('li.homus-partners-section-single', 'click', function(event) { event.preventDefault(); var pb_post_id = $(this).data('post-id'); var data = { 'action': 'GetPost', postURL : pb_post_id, }; $.post(ajaxURL, data, function(response) { $( '.homus-partners-detalis' ).html(response); }); }); 

4. php功能

    function GetPost(){ $cat = $_POST['catURL']; get_template_part($cat); exit(); } add_action('wp_ajax_nopriv_GetPost', 'GetPost'); 

---

編輯2

現在我的代碼看起來像這樣，但是我沒有答案

1. 可點擊元素的標記

    <li class="homus-partners-section-single" data-post-slug="<?php echo $post->post_name;?>"> <?php the_post_thumbnail(); ?> 

2. 我要在其中顯示項目的div

     <div class="homus-partners-detalis"> <?php get_template_part('single_pb_post_details'); ?> </div> 

3. PHP的我在div打電話

     <div class="homus-partners-detalis-img"> <?php the_post_thumbnail(); ?> </div> <div class="homus-partners-detalis-info"> <h4> <?php the_title(); ?> </h4> <p> <?php homus_excerpt('homus_pb_excerpt'); ?> </p> </div> 

4. Ajax功能

     $(document).delegate('li.homus-partners-section-single', 'click', function(event) { event.preventDefault(); var pb_post_slug = $(this).data('post-slug'); var data = { 'action': 'GetPostDetails', postURL : "single_pb_post_details.php?slugid="+ pb_post_slug, }; $.post(ajaxURL, data, function(response) { $( '.homus-partners-detalis' ).html(response); alert('Got this from the server: ' + response); }); }); 

5. php功能

    function GetPostDetails(){ $details = $_POST['postURL']; get_template_part($details); exit(); } add_action('wp_ajax_nopriv_GetPostDetails', 'GetPostDetails'); 

Answer 1

由於get_template_part僅接受不帶擴展名的文件名，因此在注釋中，我們已到達以下代碼：

$(document).delegate('li.homus-partners-section-single', 'click', function(event) {
    event.preventDefault();
    var pb_post_slug = $(this).data('post-slug');
    var data  = {
        'action': 'GetPostDetails',
        postURL : "single_pb_post_details",
        post_id : pb_post_slug
    };
    $.post(ajaxURL, data, function(response) {
        $( '.homus-partners-detalis' ).html(response);
        alert('Got this from the server: ' + response);
    });
});

響應ajax請求的php代碼：

function GetPostDetails(){
    get_template_part($_POST['postURL']);
    wp_die();
}
add_action('wp_ajax_GetPostDetails', 'GetPostDetails');
add_action('wp_ajax_nopriv_GetPostDetails', 'GetPostDetails');

在模板文件中，您可以使用以下命令檢查post_id值：

$_POST['post_id'];