在html页面上加载WordPress帖子
我试图在静态的html页面上加载WordPress之外的帖子。到目前为止，我有一个使用React、http://v2.wp-api.org/和https://github.com/mzabriskie/axios的工作示例。这个使用react的工作示例当前正确地显示了这些帖子，但是它很脆弱，并且没有倒退。这里的例子，https://codepen.io/krogsgard/pen/NRBqPp/
我使用这个例子来使用axios axios.get(this.props.source)获取我的提要源。然后，我使用示例function函数获取我最近的三篇文章，包括标题和图像，并通过以下方式将它们加载到静态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方法来使用一些辅助工具来实现这一点。如果我忘记将特征图像包含到帖子中，那么这些帖子将不会失败加载。任何想法或例子都将不胜感激！
回答 1
Stack Overflow用户
发布于 2017-05-31 09:11:09
你在努力工作。Wordpress CMS是为这样的东西而设计的。您可以按类别、标记和其他https://codex.wordpress.org/Taxonomies以RSS提要的形式显示帖子。很容易
·如果您对代码不太熟悉，那么您可以找到许多窗口小部件来处理大部分工作。
·如果您需要自己动手，下面的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’；-将显示post的HTML的类名。var blog =WP.open(‘https://www.fldtrace.com/’)；-默认情况下，这应该链接到博客主域(强制)，将显示文章缩略图和标题。其余的是CSS定制，包括调整缩略图大小。
在源文章中阅读更多的这里。
https://stackoverflow.com/questions/44290684
复制
![[译]《iOS Human Interface Guidelines》——Table View表视图](https://ask.qcloudimg.com/http-save/yehe-4630144/9edd66dc169bdc130a867305ce1298ec.jpeg)
腾讯云开发者
