使用AJAX將Wordpress帖子內容加載到DIV中

Question

幾天前我發佈了一個關於如何在我正在開發的自定義Wordpress模板中使用Scroll to Single Post的問題。我在堅果殼中需要的是在單擊特定鏈接時將單個帖子加載到定義的DIV中，然後向下滾動到保存新加載內容的DIV。考慮到Wordpress或任何其他CMS的動態內容性質，該鏈接的URL不能是絕對的。

不幸的是，當時沒有任何具體的答案，所以我決定稍微探聽一下。由於主要問題是動態加載內容，因此我決定放大如何使用Wordpress上的AJAX實現它：

到目前爲止，我從Emanuele的一篇很棒的文章（Loading WordPress posts with Ajax and jQuery） Feronato。他基本上將帖子ID存儲在可點擊鏈接的rel屬性中，然後調用它。好吧，還有其他一些步驟可以使這項工作成爲可能，但是我現在只提到帖子ID的原因是因爲它似乎是這個等式中唯一不正確的部分;帖子ID加載到鏈接的rel屬性中，但無法加載到.load函數中。

只給你什麼，我已經在我的標記至今得到一個更好的主意：

阿賈克斯/ JQUERY IN的header.php

$(document).ready(function(){ 

    $.ajaxSetup({cache:false}); 
    $(".trick").click(function(){ 
     var post_id = $(this).attr("rel"); 
     $("#single-home-container").html("loading..."); 
     $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}); 
    return false; 
    }); 

}); 

的index.php

<?php get_header();?> 

<!--home--> 
<div id="home"> 

<!--home-bg--> 
<img class="home-bg" src="<?php bloginfo('template_url');?>/images/home-bg.jpg" /> 
<!--home-bg--> 

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 

    <a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>"> 

     <div class="box element col<?php echo rand(2,4); ?>" id="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>">    

      <?php the_post_thumbnail(); ?> 

      <span class="title"><?php the_title(); ?></span>  

      <span class="ex"><?php the_excerpt(); ?></span> 

     </div> 

    </a> 

    <?php endwhile; endif; ?> 

</div> 
<!--home--> 

<div id="single-home-container"></div> 

SI NGLE-HOME.PHP（這是一個自定義模板）

<?php 

    /* 
    Template Name: single-home 
    */ 

?>  

<?php 

    $post = get_post($_POST['id']); 

?> 

    <!--single-home--> 
    <div id="single-home post-<?php the_ID(); ?>"> 

    <!--single-home-bg--> 
    <div class="single-home-bg"> 

    </div> 
    <!--single-home-bg--> 

    <?php while (have_posts()) : the_post(); ?> 

     <!--sh-image--> 
     <div class="sh-image"> 

      <?php the_post_thumbnail(); ?> 

     </div> 
     <!--sh-image--> 

     <!--sh-post--> 
     <div class="sh-post"> 

      <!--sh-cat-date--> 
      <div class="sh-cat-date"> 

       <?php 

        $category = get_the_category(); 
        echo $category[0]->cat_name; 

       ?> 

       - <?php the_time('l, F jS, Y') ?> 

      </div> 
      <!--sh-cat-date--> 

      <!--sh-title--> 
      <div class="sh-title"> 

       <?php the_title();?> 

      </div> 
      <!--sh-title--> 

      <!--sh-excerpt--> 
      <div class="sh-excerpt"> 

       <?php the_excerpt();?> 

      </div> 
      <!--sh-excerpt--> 

      <!--sh-content--> 
      <div class="sh-content"> 

       <?php the_content();?> 

      </div> 
      <!--sh-content--> 

    </div> 
    <!--sh-post-->   

    <?php endwhile;?> 

    <div class="clearfix"></div>  

    </div> 
    <!--single-home--> 

只是爲了記錄：當後ID加載失敗，我嘗試安裝在埃馬努埃萊Feronato的演示中使用特定庫布裏克的主題並作出必要的改變根據他的指導，但沒有任何工作。

有沒有人有任何想法發生了什麼事情，或者如果有任何其他方式動態加載帖子ID到.load功能？

Answer 1

嘛，靠運氣的行程和一些咖啡與香菸，我設法解決這個問題：

這裏就是我所做的：

1.測試，如果文章ID在rel屬性捕獲並正確加載post_id變量

我在AJAX/JQUERY代碼片段中插入了一個警報回調，以查看帖子ID是否加載到post_id變量權限中。這是它的樣子：

$(document).ready(function(){ 

    $.ajaxSetup({cache:false}); 
    $(".trick").click(function(){ 
     var post_id = $(this).attr("rel"); 
     alert(post_id); 
     $("#single-home-container").html("loading..."); 
     $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}); 
    return false; 
    }); 

}); 

所以，當我點擊鏈接時，回電給出了與帖子相關的準確帖子ID。這種方法將問題直接分解到.load（）函數中定義的URL。似乎帖子ID不足以將帖子加載到定義的DIV中。

2。將鏈接的rel屬性從帖子ID更改爲帖子永久鏈接

我決定，因爲帖子ID顯然不起作用，所以我會在鏈接的rel屬性中使用帖子的永久鏈接標籤。這是怎麼鏈接的版本看起來像以前：

<a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>"></a> 

，這是它看起來像現在：

<a class="trick" rel="<?php the_permalink ?>" href="<?php the_permalink();?>"></a> 

3.編輯.load（）函數的URL /值

繼此之後，我不得不對AJAX/JQUERY片段進行更改，以便它不再使用帖子ID：

$(document).ready(function(){ 

     $.ajaxSetup({cache:false}); 
     $(".trick").click(function(){ 
      var post_link = $(this).attr("rel"); 
      $("#single-home-container").html("loading..."); 
      $("#single-home-container").load(post_link); 
     return false; 
     }); 

    }); 

從上面可以看到，我已經將鏈接的rel屬性值（現在是帖子的永久鏈接）並將其引入到post_link變量中。這使我可以簡單地將該變量放入.load（）函數中，替換http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}，這顯然不起作用。

VOILA！問題解決了。

儘管我還沒有測試這個，但我相信在這個實例中使用固定鏈接實際上是根據Emanuele Feronato在他的post中的指示，切斷了在Wordpress中更改永久鏈接結構的需求。

因此，如果任何人有意將Wordpress帖子動態加載到定義的DIV中，您可以嘗試一下！

Answer 2

而不是使用：

var post_id = $(this).attr("rel"); 

你應該直接獲取HREF。他們都是一樣的。

var post_id = $(this).attr("href"); 

這有助於兩件事情：

1. 少標記在你的HTML
2. 您使用相對的數據屬性，這是不符合HTML5非常明智的選擇時下望而卻步。 （read here）