在 html 页面上加载 WordPress 帖子

Question

我正在尝试在静态 html 页面上加载 WordPress 之外的帖子。到目前为止，我有一个使用 React、http://v2.wp-api.org/ 和 https://github.com/mzabriskie/axios 的工作示例。这个使用 react 的工作示例当前可以正确显示帖子，但它很脆弱并且没有回退。 Codepen 示例在这里，https://codepen.io/krogsgard/pen/NRBqPp/

我使用此示例通过 axios axios.get(this.props.source) 获取我的提要源。然后我使用示例 react 函数来抓取我最近的三篇文章，包括标题和图片，并通过

将它们加载到静态 html 页面中

 render: function render() {
    return React.createElement(
        "div",
        { className: "post-wrapper" },
        this.state.posts.map(function (post) {
            return React.createElement(
                "div",
                { key: post.link, className: "post" },
                React.createElement(
                    "h2",
                    { className: "post-title" },
                    React.createElement("a", {
                        href: post.link,
                        dangerouslySetInnerHTML: { __html: post.title.rendered }
                    })
                ),
                post.featured_media ? React.createElement(
                    "a",
                    { href: post.link },
                    React.createElement("img", { src: post._embedded['wp:featuredmedia'][0].source_url })
                ) : null
            );
        })
    );
}

我博客的源码wp json是

React.render(React.createElement(App, { source: 
"myBlogURL.com/wp-json/wp/v2/posts/?_embed&per_page=3" }), 
document.querySelector("#blog-post"));

正确地将我最新的 3 篇博文加载到 <div id="blog-posts"> 我正在寻找一种香草js方法来使用一些后备助手来做到这一点。如果我忘记在帖子中包含特色图片，帖子将不会无法加载。任何想法或示例将不胜感激！

Answer 1

您正在为此努力工作。 Wordpress CMS 就是为这样的东西而设计的。您可以按类别、标签和其他taxonomies 以 RSS 提要的形式显示帖子。很容易

• 如果您不太擅长代码，您可以找到很多widgets，它们可以完成大部分工作。

• 如果您需要自己做，下面的 JSON / jQuery 应该可以帮助您。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'></script>

---

<script type="text/javascript">
var MYBLOG_LIMIT = 3;
var MYWRAPPER_CLASS = 'homeblog';

var WP={open:function(b){var a={posts:function(){var d=MYBLOG_LIMIT;var e=0;var c={all:function(g){var f=b+"/api/get_recent_posts/";f+="?count="+d+"&page="+e+"&callback=?";jQuery.getJSON(f,function(l){var k=l.posts;for(var j=0;j<k.length;j++){var h=k[j];h.createComment=function(i,m){i.postId=h.id;a.comments().create(i,m)}}g(k)})},findBySlug:function(f,h){var g=b+"/api/get_post/";g+="?slug="+f+"&callback=?";jQuery.getJSON(g,function(i){h(i.post)})},limit:function(f){d=f;return c},page:function(f){e=f;return c}};return c},pages:function(){var c={findBySlug:function(d,f){var e=b+"/api/get_page/";e+="?slug="+d+"&callback=?";jQuery.getJSON(e,function(g){f(g.page)})}};return c},categories:function(){var c={all:function(e){var d=b+"/api/get_category_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.categories)})}};return c},tags:function(){var c={all:function(e){var d=b+"/api/get_tag_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.tags)})}};return c},comments:function(){var c={create:function(f,e){var d=b+"/api/submit_comment/";d+="?post_id="+f.postId+"&name="+f.name+"&email="+f.email+"&content="+f.content+"&callback=?";jQuery.getJSON(d,function(g){e(g)})}};return c}};return a}};

var blog = WP.open('https://www.fldtrace.com');
blog.posts().all(function(posts){
  for(var i = 0; i < posts.length; i++){
    jQuery('.'+MYWRAPPER_CLASS).append(function(){
      return (posts[i].thumbnail) ? '<a class="lastpost_title" href="'+posts[i].url+'">
<h4>'+posts[i].title+'</h4>

</a><a href="'+posts[i].url+'"><img src="'+posts[i].thumbnail+'"/></a>' : '<a href="'+posts[i].url+'">
<h4>'+posts[i].title+'</h4>

</a>';

    });
  }
});
</script>

---

<div class="homeblog">
</div>

---

您需要配置下一个选项

var MYBLOG_LIMIT = 1;将定义将显示多少帖子。默认 是 1. var MYWRAPPER_CLASS = ‘homeblog’; – HTML的类名 将显示帖子的元素。 var 博客 = WP.open('https://www.fldtrace.com/'); - 这应该链接到你的博客 主域（必填）默认情况下，将显示帖子缩略图 和标题都链接。剩下的就是 CSS 自定义，包括 调整缩略图大小。

在源文章中阅读更多here。