如何将网站嵌入 wordpress 页面？

Question

I have one wordpress website & one mvc framework based website. let suppose url's as

1. http://example.wordpress
2. http://example.mvc

Actually I want to show content of http://example.mvc on http://example.wordpress/page .

Note: The http://example.mvc has multiple urls. It can be achieve by creating multiple pages but I don't want this. Please help me to solve this.

Thanks

Answer 1

First of all you need to edit the page.php of your theme. If you do not want to do it for all pages, you can create a page template. Just copy the page.php and call it page-yourname.php (choose name you like to). At top of this page you add "Template Name: Yourname". This way wordpress will use it as a page template. You can now choose it from the dropdown on the right side on your page edit in backend under the "page attributes".

There are multiple ways to display content from another website.

1. Using iframes:

---

<iframe src="http://example.mvc" width="100%" height="300">
</iframe>

2. Using embed:

---

<embed src="http://example.mvc" width="100%" height="300" />

3. Using Rest API (and ie Vue JS)

---

If you just want to get the posts from another wordpress site you can use the Rest API to get this posts and display it on any other webpage. For example you can use Vue JS to display it inside of your page template:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="posts">
    <div v-bind:key="post.title.rendered" v-for="post in posts">
        <a v-bind:href="post.link"><img v-bind:src="post._embedded['wp:featuredmedia']['0'].media_details.sizes.medium_large.source_url"></a>
        <a v-bind:href="post.link"><h4 v-html="post.name"></h4></a>
        <p v-html="post.title.rendered"></p>
    </div>
</div>

<script>
new Vue({
el: '#posts',
data: {
    posts: [],
},
mounted() {
    fetch("https://yourWordpressURLhere.com/wp-json/wp/v2/posts?per_page=20&_embed=wp:term,wp:featuredmedia")
        .then(response => response.json())
        .then((data => {
            this.posts= data;
        }))
}
});
</script>