使用AJAX將Wordpress后期內容加載到DIV中

Question

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

不幸的是，在那個時間點沒有任何具體的答案，所以我決定窺探一下。 由於主要問題是動態加載內容，我決定放大我在Wordpress上使用AJAX的方法：

到目前為止，我從Emanuele Feronato的一篇精彩帖子（ 用Ajax和jQuery加載WordPress帖子 ）中得到了一個小小的想法。 他基本上將帖子ID存儲在可點擊鏈接的rel屬性中，然后調用它。 好吧，還有一些其他步驟可以使這項工作，但我現在只提到帖子ID的原因是因為它似乎是方程式中唯一不正確的部分; post ID加載到鏈接的rel屬性中，但無法加載到.load函數中。

只是為了讓你更好地了解我到目前為止在我的標記中得到了什么：

HEADER.PHP中的AJAX / JQUERY

$(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>

SINGLE-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無法加載時，我嘗試安裝Emanuele Feronato演示中使用的特定Kubrick主題，並根據他的指南做了必要的更改，但沒有任何效果。

有沒有人知道發生了什么或者是否有其他方法可以將帖子ID動態加載到.load函數中？

Answer 1

好吧，幸運的是，一些咖啡加香煙，我設法解決了這個問題：

這是我做的：

1.測試是否在rel屬性中捕獲了帖子ID並在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屬性中使用post的永久鏈接標記。 這就是它的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的永久鏈接），並將其拋入post_link變量。 這使我能夠簡單地將該變量放入.load（）函數中，替換為http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id} http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}顯然不起作用。

瞧！ 問題解決了。

雖然我還沒有對此進行測試，但我相信在這種情況下使用固定鏈接實際上不需要按照Emanuele Feronato在其帖子中的指示更改Wordpress中的永久鏈接結構。

因此，如果有人有意圖將Wordpress帖子動態加載到已定義的DIV中，您可以試試這個！

Answer 2

而不是使用：

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

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

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

這有助於做兩件事：

1. HTML中的標記較少
2. 您遠離使用rel作為數據屬性，這對於HTML5來說不是一個非常明智的選擇。 （ 在這里閱讀 ）