WordPressの投稿をHTMLページに読み込む

Question

静的なHTMLページにWordPress外の投稿を読み込もうとしています。これまでのところ、React、http://v2.wp-api.org/およびhttps://github.com/mzabriskie/axiosを使用した実例があります。反応を使用しているこの作業例では、現在適切に投稿を表示していますが、脆弱でフォールバックはありません。 Codepen example here、https://codepen.io/krogsgard/pen/NRBqPp/

この例では、axios axios.get(this.props.source)を使用してフィードソースを取得しています。それから私は例がタイトルと画像を含め、私の最新の3件の記事をつかむと、正しくロード

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")); 

を経由して、静的なHTMLページにそれらをロードする機能を反応させ使用します<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 blog = WP.open（ 'https://www.fldtrace.com/'）; - これはあなたのブログ のメインドメイン（必須）にリンクする必要があります。投稿サムネイル とタイトルがリンクされています。残りはサムネイルサイズを調整する を含むCSSのカスタマイズです。

続きを読むhereソース資料で