0

I am trying to load posts outside WordPress on a static html page. So far I have a working example using React, http://v2.wp-api.org/ and https://github.com/mzabriskie/axios. This working example using react currently displays the posts properly but it is fragile and there is no fall back. Codepen example here, https://codepen.io/krogsgard/pen/NRBqPp/

I use this example to get my feed source using axios axios.get(this.props.source). Then I use the examples react function to grab my latest three posts, including titles and images and load them into a static html page via

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

My blog's source wp json is

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

Which correctly loads my latest 3 blog posts into the <div id="blog-posts"> I'm looking for a vanilla js way to do this with some fallback helpers. In case I forget to include the featured image to a post, the posts will not fail to load. Any ideas or examples would greatly be appreciated!

  • not sure what is actually the question here, and how is the react code relevant in any way. The way it sounds to me, you want to rewrite a react depended code into vanilla JS, but if that is the case how is it specific to wordpress? – Mark Kaplun May 31 '17 at 17:53
  • I used the react example because it was the only working example I could find. I'm trying to find a simple example of using something like wordpress.org/plugins/json-api and loading json through javascript. Looking for any working example or documentation – Mills May 31 '17 at 17:58
0

If you want get posts in html file why so much trouble? just use rss feed of your wordpress website(or any website) in your html.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.