How to embed a WordPress article on another website [closed]

do you try the WordPress REST Api? It is an easy way to add content from your WordPress Site to an other website.

EDIT:

After the comment form Mark Kaplun, i edited my answer and add a small example of “how to use the WordPress REST API”.

The base path of the API is always “/wp-json/wp/v2/” and it returns an JSON string.

Example url:

https://wptavern.com/wp-json/wp/v2/

To get the data for an specific post, you can use for instance the slug or the post id.

Example post:

https://wptavern.com/an-update-to-my-gutenberg-experience

Call the REST API with the slug:

https://wptavern.com/wp-json/wp/v2/posts?slug=an-update-to-my-gutenberg-experience

Call the REST API with the post id:

https://wptavern.com/wp-json/wp/v2/posts/79564

i created this small code example with jquery and not with angularjs, because i haven’t any experience with this js framework. Sry.

<!DOCTYPE html>
<html>
   <head>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
          integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"></script>

    <style>
        body {
          background: white;
          font-family: Helvetica;
        }

        #post-title {
          border: 1px solid green;
          padding: 5px;
        }

        #post-content {
          border: 1px solid blue;
          padding: 5px;
        }

        #post-link {
          border: 1px solid red;
          padding: 5px;
        }
    </style>

    <script>

        $( document ).ready(function() {

            $.ajax({
                type: 'GET',
                url: "https://wptavern.com/wp-json/wp/v2/posts/79564", 
                dataType: 'json',
                success: function(json)
                {
                    $('#post-title').html(json.title.rendered);

                    $('#post-content').html(json.content.rendered);

                    $('#post-link').html(json.link);

                }
          });

        });

    </script> 

</head>

<body>

    <div>POST Title</div>
    <div id="post-title"> </div>

    <div>POST Content</div>
    <div id="post-content"></div>

    <div>POST Link</div>
    <div id="post-link"></div>

</body>

see the code in action: https://jsfiddle.net/5zqc3mdL/11/

Related Posts: