时间戳

首页 > 解决方案 > 如何将网站嵌入到 wordpress 页面中？

php - 如何将网站嵌入到 wordpress 页面中？

问题描述

我有一个 wordpress 网站和一个基于 mvc 框架的网站。假设 url 为

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

其实我想在http://example.wordpress/page上显示http://example.mvc的内容。

注意： http ://example.mvc有多个 url。它可以通过创建多个页面来实现，但我不想要这个。请帮我解决这个问题。

谢谢

标签： phpwordpressroutescustom-wordpress-pages

解决方案

首先，您需要编辑主题的 page.php。如果您不想对所有页面都这样做，您可以创建一个页面模板。只需复制 page.php 并将其命名为 page-yourname.php（选择您喜欢的名称）。在此页面顶部添加“模板名称：您的姓名”。这样，wordpress 会将其用作页面模板。您现在可以从“页面属性”下后端页面编辑右侧的下拉列表中选择它。

有多种方法可以显示来自另一个网站的内容。

  1. 使用 iframe：
<iframe src="http://example.mvc" width="100%" height="300">
</iframe>
  1. 使用嵌入：
<embed src="http://example.mvc" width="100%" height="300" />
  1. 使用 Rest API（也就是 Vue JS）

如果您只想从另一个 wordpress 站点获取帖子，您可以使用 Rest API 获取此帖子并将其显示在任何其他网页上。例如，您可以使用 Vue JS 在页面模板中显示它：

<!-- 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>

推荐阅读