How to embed a blog on other site
table of contents
About “WP REST API”
Get the latest blog list with “WP REST API”
Display the latest blog list on other websites
Finally
How to embed a blog on other site, About “WP REST API”
How to embed a blog on other site, “WP REST API” is a mechanism that allows you to refer to (or update) various information registered in WordPress by accessing a specific URL (endpoint) on WordPress.
Originally it was a library that can not be used unless you install it yourself, but it has been installed as standard from WordPress 4.7.
If you have security-related plugins enabled, the “WP REST API” may not be available, so either disable the plugins or set the plugins before starting this work. Please change to allow the use of WP REST API.
Many endpoints are prepared in advance in “WP REST API”.
This time, let’s use the endpoint that retrieves posts.
How to embed a blog on other site, Get the latest blog list with “WP REST API”
How to embed a blog on other site, In this chapter, we will try to get what kind of data can be actually obtained by accessing the endpoint from a Web browser.
The endpoint to get the post information is / wp-json / wp / v2 / posts .
Get the information of the article you are looking for by accessing this URL with request parameters such as “publication date”, “publication status”, “poster”, “category / tag”, “number of items to be acquired”, and “sort order”. can do.
If you are accustomed to creating template files with WordPress, it will be easier to understand if you imagine it as the same as get_posts () .
Open a web browser and enter the following URL in the address bar.
<WordPress top page> / wp-json / wp / v2 / posts? _ Embed
It is successful if a lot of characters are displayed on the web browser as shown in the picture below.
This is a format of the content of the blog in the format of “JSON”, which contains information such as the title, text, and eye catch.
How to embed a blog on other site, Display the latest blog list on other websites
How to embed a blog on other site, Since we found that blog information can be obtained in step 2, we will analyze this information with JavaScript and create a mechanism to generate a list HTML of blog articles.
Since jQuery is used, please paste the tag for reading the core package of jQuery with CDN from the following site into the HTML file.
https://code.jquery.com/
When you click the link, the <script> tag will pop up.
Paste the displayed tag into <head> or <body> of the HTML file that outputs the list.
Clicking the blue button on the right will copy the tag, which is convenient.
First, add a <div> with an id to the HTML file of the page that displays the blog article to specify where the article will be displayed.
<div id = “wordpress_blog”> </ div>
Next, add an implementation to JavaScript to access the “WP REST API” endpoint.
<script>
$ (function () {
$ .ajax ({
type:’GET’,
url:'<WordPress top page> / wp-json / wp / v2 / posts? _ Embed’,
dataType:’json’
}) .done (function (json) {
// TODO Write a description to add HTML here
alert (JSON.stringify (json));
}) .fail (function (json) {
console.error (‘WordPress blog Failed to get the article.’)
});
});
</ script>
I’m using jQuery’s ajax method to access the “WP REST API” endpoint.
Don’t forget to set the type (access method) to “GET” and the dataType (data format of the execution result) to “json”.
How to embed a blog on other site, If the access is successful, the function specified in the argument of done, and if it fails, the function specified in the argument of fail is executed in the callback.
In the above source code, I want to try to access the endpoint first, so I implemented it to display the execution result as an alert inside done.
Save your changes and access the page in your web browser.
If the alert is displayed as shown below and the JSON string of the execution result is displayed, the access to the endpoint is successful.
If successful, this time create HTML that embeds blog information based on the execution result.
Please change the place that was set to TODO in the previous script as follows.
<script>
$ (function () {
$ .ajax ({
type:’GET’,
url:’http: // <WordPress top page> / wp-json / wp / v2 / posts? _ Embed’,
dataType:’ json’
}). done (function (json) {
var html =”;
// Iterate
for the number of articles $ .each (json, function (i, row) {
// Blog title
var title = row.title .rendered;
// blog URL
var link = row.link;
// blog body
var excerpt = row.excerpt.rendered;
// thumbnail image URL
var thumbnail
if (row [‘_ embedded’] [‘wp: featuredmedia ‘]) {
thumb = row [‘_ embedded’] [‘wp: featuredmedia’] [0] [‘media_details’] [‘sizes’] [‘full’] [‘source_url’]
}
html + ='<article class = “wp-article”>’;
html + ='<div class = “eyecatch”> <img src = “‘+ thumbnail +'”> </ div>’;
html + = ‘<h3> <a href=”‘+ link +'”>’ + title +'</a> </ h3>’;
html + ='<p>’ + excerpt +'</ p>’;
html + ='</ article>’;
});
// Add the formatted article information to the page
$ (‘# wordpress_blog’). Append (html)
}). fail (function (json) {
console.error (console.error (‘ ‘Failed to get WordPress blog post.’)
});
});
</ script>
Save your changes and revisit the page in your web browser.
The blog article posted on WordPress will be embedded and displayed on the corresponding page.
How to embed a blog on other site, Finally, adjust the appearance with a style sheet and you’re done.
div # wordpress_blog {
width: 100%;
position: relative;
}
div # wordpress_blog> article.wp-article {
width: 31%;
margin-right: 3%;
display: inline-block;
vertical-align: top;
}
div #wordpress_blog> article.wp-article: nth-child (3n) {
margin-right: 0;
}
div.eyecatch {
border: 1px solid # 000000;
margin-bottom: 20px;
}
div.eyecatch> img {
width: 100 %;
vertical-align: top;
height: auto;
}
HTML with the latest 5 blog posts embedded
Article acquisition source blog (WordPress, top page)
How to embed a blog on other site, Finally
How to embed a blog on other site, In this article, I explained how to embed a WordPress blog article on another website using the “WP REST API”.
The “WP REST API” has other endpoints with various functions from the beginning, and you can also create your own endpoints. Why don’t you master it and try to integrate WordPress with other websites and application.
