Php WordPress Multisite：向静态Html站点显示wp帖子

如何将WP帖子显示到HTML静态页面

我已经知道，对于WP singal站点，此代码可以很好地工作，这在本教程中给出：

这对单一站点来说是很好的

---

但是这段代码不适用于wp multisites，它给出了“

数据库连接错误”

“

只要您想从数据库获取数据并在页面上显示它们，就不能将其视为静态页面

我唯一能想到的是用一个脚本（即PHP）获取数据库，该脚本创建一个HTML静态页面，将数据复制并粘贴到数据库本身上

我会像Wordpress一样通过PHP获取数据库

并使用此代码从数据库的数据创建文档

---

通过这种方式，您将使用从数据库获取的数据创建一个新的静态HTML页面。

您可以使用rest api获取wordpress网站的帖子，并使用javascript在静态HTML网站上显示帖子

我将给出一个使用Vue JS的代码示例

在您的html页面上，包括vue js，并将其添加到

部分：

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

在这个

app.js

文件中，您将获得帖子并将其保存到

posts:[]

。将以下代码放入javascript文件中：

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

在这段代码中，我们创建了一个新的vue实例，并将其分配给id为

#posts

的元素，然后从

fetch

中的wordpress页面获取数据，并使用

&_embed

来获取特征图像和帖子术语（可能您需要在输出中使用它）

如果您需要获取其他帖子类型，请参考：

因此，我们现在在

数据

对象中有了帖子。现在我们可以在div内的html页面中使用这些数据，id为

#posts

。您必须在html页面的

中包含以下代码：

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

v-for

循环浏览您的文章，并始终显示带有特色图像（中等大小）和文章标题的div容器，链接到文章的详细信息页面

---

因此，使用wordpress作为后端，vue js作为前端javascript框架，您可以在静态html页面上显示wordpress帖子

---

当然，还有其他使用RESTAPI和用javascript显示wordpress帖子的方法。但是Vue JS是一个最先进的框架，性能非常好，所以我建议您使用它。

您需要连接Wordpress站点的数据库以显示其中的帖子。这将不是一个静态网站。它本质上是动态的。你想要实现什么还不清楚。您可以解释一下吗？您可以使用javascript（例如vue js是一个易于实现的选择）通过Rest API获取wordpress网站的帖子，以在外部html页面上显示帖子。这就是你想要实现的吗？只需要在html页面中显示wp multisite中的站点帖子，但不知道如何通过php代码连接数据库？@rank Hy yes你能分享重置API教程或代码吗？我使用vue js添加了我的答案，希望能有所帮助！感谢@rank，它做的事情和学习一样好，我只是想问一下，我们能做和php代码相同的事情吗？很高兴能帮上忙！这将是另一个问题。如果你愿意，你可以创建新的问题，并在评论中发布链接，以便我得到通知。请确保您首先尝试搜索，可能已经回答了类似的问题。谢谢你，祝你今天愉快！

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