在单个页面上按ID加载下一篇帖子

时间：2016-04-16 作者：Dimitrov

我希望这个话题不要重复。我看到了一些类似的话题，但没有一个能解决我的问题，所以我决定换一个。

情况是这样的。我有一张单人床。php贴子，带有defualt wordpress评论模板。。。因此，当我单击按钮时，我正在加载下一篇文章，使用json非常容易，在当前文章的下面（类似于无限滚动）。问题是短代码也不能从json和注释模板中呈现。我使用的是蜡笔代码荧光笔插件，当在单个页面上打开一篇文章时，它会呈现出来，但当加载json时，不会。

以下是我的一些代码，您可以了解我的想法：

functions.php

function renderArticle($pid) {
    //apply_filters($post) = do_shortcode($post);
    ob_start();
    $post = get_post($pid);
    ?>
    <article class="article" data-id="<?php print $post->ID ?>" data-url="<?php print the_permalink(); ?>">
        <div class="title"><?php print apply_filters(\'the_content\', $post->post_title) ?></div>
        <div class="content"><?php print apply_filters(\'the_content\', $post->post_content) ?></div>
        <div class="post-date"><?php print apply_filters(\'the_content\', $post->post_date) ?></div>
        <?php comments_template(); ?>
    </article>
    <?php
    $data = ob_get_clean();
    vd($data);
    $json = json_encode($data, JSON_PRETTY_PRINT);
    print $json;
}
function parameter_queryvars_pid($qvars) {

    $qvars[] = \'pid\';
    return $qvars;
}

add_filter(\'query_vars\', \'parameter_queryvars_pid\');
add_action(\'pre_get_posts\', function ($query) {

    global $wp;
    global $wp_query;

    if (!is_admin() && $query->is_main_query()) {
        if ($wp->request == \'next-post\') {
            if (isset($wp_query->query_vars[\'pid\'])) {
                $pid = $wp_query->query_vars[\'pid\'];
                renderArticle($pid);
            }
        }
    }
});

load.js

$("button#load").on("click", function () {
    $.ajax({
        type: "GET",
        url: window.location.origin + "/next-post",
        data: {
            pid: 120
        },
        dataType: "json",
        success: function (data) {
            console.log(data);
            $("body").append($(data));
        },
        failure: function (errMsg) {
            alert("Oooooppps. Try again.");
            return false;
        }
    });
});

single.php

<div class="post-listing">
    <article class="article" data-id="<?php print $post->ID ?>" data-url="<?php print the_permalink(); ?>">
        <div class="title"><?php print apply_filters(\'the_content\', $post->post_title) ?></div>
        <div class="content"><?php print apply_filters(\'the_content\', $post->post_content) ?></div>
        <div class="post-date"><?php print apply_filters(\'the_content\', $post->post_date) ?></div>
        <?php comments_template(); ?>
    </article>
</div>
<button id="load">Load more</button>

这几乎是。如果我缺少一些资源，请让我知道，我会提供。

我希望你们能帮我。

干杯

1 个回复

最合适的回答,由SO网友:Dimitrov 整理而成

看来我找到了解决这个问题的方法，而且很容易。所以我将发布所有代码，以备将来使用：

single.php

<?php get_header(); ?>
<?php
$post = get_post();
$post_cat = get_the_category($post);
$data = collection_data_json($post_cat[0]->term_id, $post->ID);
$data_details = collection_order_permalink($data);
$author_id = intval($post->post_author);
?>
<script type="text/javascript">
    var cat = "<?php print $post_cat_id ?>";
    var pid = "<?php print $post->ID ?>";
    var post_details = <?php print $data ?>;
    var post_order = <?php print $data_details ?>;

</script>

<script type="text/javascript" src="<?php print get_template_directory_uri() ?>/lib/js/single-post.js"></script>
<div class="entries" id="entries">
    <article class="article" data-url="<?php echo get_the_permalink($post->ID); ?>" data-id="<?php print $post->ID ?>">
        <h1 class="start-indicator"><?php print $post->post_title ?></h1>
        <div class="meta">
            <span class="time"><?php print $post->post_date ?></span>
            <span class="category"><?php print $post_cat[0]->name ?></span>
        </div>
        <div class="category-mobile"><?php print $post_cat[0]->name ?></div>    
        <div class="meta meta-mobile">By <a href="<?php print get_author_posts_url($author_id) ?>"><?php print get_userdata($author_id)->display_name ?></a>, <?php print the_author_meta("job_position", $author_id); ?> at WePay | <?php print $post->post_date ?></div>
        <div class="speed-reading">
            <img src="<?php print get_template_directory_uri() ?>/images/speed-reading-black.png" alt="Estimated reading time">
            <span><?php print reading_time($post->post_content, intval(get_option("reading_time"))) ?></span>
        </div>
        <div class="description">
            <div class="post-by">
                <figure>
                    <img src="<?php print get_avatar_url($author_id); ?>" alt="<?php print get_userdata($author_id)->display_name ?>" title="<?php print get_userdata($author_id)->display_name ?>">
                    <figcaption>By <a href="<?php print get_author_posts_url($author_id) ?>" title="<?php print get_userdata($author_id)->display_name ?>"><?php print get_userdata($author_id)->display_name ?></a>, <?php print the_author_meta("job_position", $author_id); ?> at WePay</figcaption>
                </figure>
            </div>
            <?php print apply_filters("the_content", $post->post_content); ?>
        </div>
        <!-- End -->
        <div class="author">
            <a href="<?php print get_author_posts_url($author_id) ?>"> - <?php print get_userdata($author_id)->display_name ?></a>
        </div>
        <div class="about-author">
            <h3><span>About the author</span></h3>
            <div class="avatar">
                <img src="<?php print get_avatar_url($author_id); ?>" alt="<?php print get_userdata($author_id)->display_name ?>">
            </div>
            <div class="caption">
                <p class="position"><a href="<?php print get_author_posts_url($author_id) ?>" title="<?php print get_userdata($author_id)->display_name ?>"><?php print get_userdata($author_id)->display_name ?></a>, <?php print the_author_meta("job_position", $author_id); ?> at WePay</p>
                <p class="bio"><?php print the_author_meta("description", $author_id) ?></p>
                <p><a href="<?php print get_author_posts_url($author_id) ?>" class="more" title="More blog posts by <?php print get_userdata($author_id)->display_name ?>">More blog posts by <?php print get_userdata($author_id)->display_name ?></a></p>
            </div>
        </div>
        <div class="article-social">
            <h4>Follow us on</h4>
            <div class="social">
                <a href="http://twitter.com" class="t" title="Follow us on Twitter"></a>
                <a href="http://facebook.com" class="f" title="Follow us on Facebook"></a>
                <a href="http://linkedin.com" class="l" title="Find us on Linkedin"></a>
            </div>
        </div>
        <?php comments_template() ?>
    </article>
</div>

<!-- Social Icons -->
<div class="share-post">
    <div class="share-on-twitter">
        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php print get_the_permalink($post->ID); ?>" title="Share this post on Twitter">
            <span class="shares"></span>
            <img src="<?php print get_template_directory_uri() ?>/images/twitter.png" alt="Twitter">
            <img src="<?php print get_template_directory_uri() ?>/images/t.png" alt="Twitter" class="hover">
        </a>    
    </div>
    <div class="share-on-facebook">
        <a href="https://twitter.com/home?status=<?php echo get_the_permalink($post->ID); ?>" title="Share this post on Facebook">
            <span class="shares"></span>
            <img src="<?php print get_template_directory_uri() ?>/images/facebook.png" alt="Facebook">
            <img src="<?php print get_template_directory_uri() ?>/images/f.png" alt="Faceook" class="hover">
        </a>    
    </div>
    <div class="share-on-linkedin">
        <a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo get_the_permalink($post->ID); ?>" title="Share this post on Linkedin">
            <span class="shares"></span>
            <img src="<?php print get_template_directory_uri() ?>/images/linkedin.png" alt="Linkedin">
            <img src="<?php print get_template_directory_uri() ?>/images/l.png" alt="Linkedin" class="hover">
        </a>    
    </div>
</div>
<?php get_footer(); ?>

single-post.js

var pc = 1;

$(document).ready(function () {
    post_order = formatCollection(post_order);
    post_details = formatCollection(post_details);

    function formatCollection(objCollection) {
        var items = {};
        var i = 0;
        for (var index in objCollection) {
            items[i] = objCollection[index];
            i++;
        }
        return items;
    }

    function set_first_url() {
        $("body").append($("<input>").attr("type", "hidden").attr("id", "url-identifier").attr("data-url", post_order[pc]));
    }
    set_first_url();

    function set_next_url(position) {
        if (pc >= Object.keys(post_order).length) {
            console.log("no posts left");
            remove_url_identifier();
            return false;
        }
        else {
            $("body").find("#url-identifier").detach();
            $("body").append($("<input>").attr("type", "hidden").attr("id", "url-identifier").attr("data-url", post_order[position]));
        }
    }

    function append_next_article(article) {
        $("div#entries").append(article);
    }

    function remove_url_identifier() {
        $("body").find("#url-identifier").detach();
    }

    function crawl_url(url) {
        $.ajax({
            type: "GET",
            url: url,
            success: function (data) {
                var article = $(data).find("div#entries article.article");
                append_next_article(article);
                pc++;
                set_next_url(pc);          
            },
            failure: function (errMsg) {
                alert("Oooooppps. Something happened. Don\'t tell my boss !");
                return false;
            }
        });
    }

    $(document).scroll(function (e) {
        if (processing)
            return false;
        if ($(window).scrollTop() >= ($(document).height() - $(window).height())) {
            processing = true;
            var next_url = $("body").find("#url-identifier").data("url");
            if (typeof next_url === "undefined")
                return false;
            crawl_url(next_url);

            unique = [];
            processing = false;
        }
    }); 
});

single-next.php

function collection_order_permalink($collection) {
    $collection = json_decode($collection);
    for ($i = 0; $i < count($collection); $i++) {
        $collection[$i] = get_permalink($collection[$i]->ID);
    }
    return json_encode($collection, JSON_PRETTY_PRINT);
}

function sort_collection_data($collection, $arrkey) {

    $result = [];
    $result[0] = $collection[$arrkey];
    for ($i = 0, $t = 1; $i < count($collection) - 1; $i++, $t++) {
        if ($i == $arrkey) {
            $t -= 1;
            continue;
        }
        $result[$t] = $collection[$i];
    }
    return $result;
}

function collection_data_json($cat, $pid = null) {
    $args = [\'post_type\' => \'post\', \'posts_per_page\' => 999999, \'cat\' => $cat, \'orderby\' => "date"];
    $allCategoryPosts = new WP_Query($args);
    $allCategoryPosts = $allCategoryPosts->posts; // Collection with the original post order
    $multikey = multidimensional_search($allCategoryPosts, $pid);
    $ordered = "";
    if ($multikey !== false) {
        $ordered = sort_collection_data($allCategoryPosts, $multikey);
        $ordered = filter_date($ordered);
        $ordered = filter_permalink($ordered);
        $ordered = filter_author($ordered);
    }
    return json_encode($ordered, JSON_PRETTY_PRINT);
}

小码农CODE

在单个页面上按ID加载下一篇帖子

相关推荐

使用应用程序密码从AJAX获取401