javascript - 在 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) 获取我的 feed 源。然后我使用示例 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 就是为此类内容而设计的。您可以按类别、标签和其他方式以 RSS 源的形式显示帖子 taxonomies 。很容易

• 如果您不太擅长编写代码，您可以找到许多 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>

<小时/>

You need to configure the next options

var MYBLOG_LIMIT = 1; will define how many posts will show. By default is 1. var MYWRAPPER_CLASS = ‘homeblog’; – the class name of HTML element where the post(s) will be shown. var blog = WP.open(‘https://www.fldtrace.com/’); – this should link to your blog main domain (mandatory) by default, will be shown the post thumbnail and title both linked. The rest is CSS customization, including adjusting the thumbnail size.

了解更多 here来源文章。