WordPress 多站点：显示 wp post 到静态 Html 站点

Question

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

我已经知道对于 WP 信号站点，这段代码工作正常，在本教程中给出：

https://www.cocoonfxmedia.co.uk/blog/displaying-wordpress-posts-in-html-page 这适用于单一站点但是此代码不适用于 wp multisites 它给出“Database connecting error”

Answer 1

一旦您想从数据库中获取数据并将其显示在页面上，就不会将其视为静态页面。

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

我会像 Wordpress 那样通过 PHP 获取数据库 https://www.w3schools.com/php/php_mysql_select.asp

并使用此代码从数据库的数据创建文档 How to create new html pages on a server via html/javascript form input

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

Answer 2

你可以得到你的 wordpress 网站的 posts 和其他 api 并使用 javascript 在静态 html 上显示 posts ] 网站。

我会给你一个使用 Vue JS 的代码示例。

在您的 html 页面上，您将 vue js 添加到您的 <head> 部分：

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

这就是使用 vue js 所需要做的全部，太棒了。

现在我们需要一个 javascript 文件，例如将其命名为 app.js 并将其包含在 html 页面的底部，使用：

<script src="app.js"></script>

在此 app.js 文件中，您将获取 post 并将其保存到 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 以获取特色图片和 post 项（也许您需要在输出中使用它）。

供大家参考，如需获取其他post类型： https://developer.wordpress.org/rest-api/reference/

所以我们现在在 data object 中有了我们的 post。我们现在可以在 div 内的 html 页面中使用此数据，id 为 #posts。您必须在 html 页面的 <body> 中包含以下代码：

<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 循环遍历您的 post 并将始终显示带有特色图像（中等大小）和 post 标题的 div 容器，链接到post.

的详情页

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

当然还有其他方法使用 Rest API 并使用 javascript 显示 wordpress posts。但是 Vue JS 是一个最先进的框架，并且具有非常好的性能，所以我会推荐使用它。

WordPress 多站点：显示 wp post 到静态 Html 站点

WordPress Multisite: Showing wp post to Static Html site

html

php

wordpress

multisite