如何将一个静态网站与WordPress整合在一起

迪鲁宾
127 阅读5分钟

很多人仍在使用静态网站，从不需要经常更新信息的家庭经营企业，到需要快速发布东西而不需要花费太多时间和精力的大型团队。

你可能也因为这些原因想要一个静态网站：

  1. 速度：页面加载迅速
  2. 需要最少的技能：没有太多经验的网络开发人员可以很容易地进行项目工作
  3. 托管很容易：今天的市场提供了多种选择来托管你的静态网站（如AWS S3、Azure Storage、Netlify和其他）。

到目前为止，我们已经谈到了为什么你可能会选择静态网站以及它们的优点。

但是，如果你想在你的网站上快速添加内容或只更新其中的一部分呢？如果你想在你的网站上添加一个博客以获得新的访问者呢？

这是我过去几次不得不处理的问题：客户要求我为他们的网站添加动态内容，而他们没有预算或时间来创建一个新项目。幸运的是，WordPress帮助我找到了一个解决方案。让我们看看是怎样的。

WordPress如何帮助我

WordPress是行业中快速写博客和发布内容的标准。仪表板是直观的，易于使用。管理员也可以添加新的用户，并通过选择适当的角色来指定他们的权限。

WordPress公开了Rest APIs，以帮助开发者建立与WordPress本身和第三方服务的集成。

因此，我决定通过调用WordPress APIs提供的/wp/v2/posts 端点，将一个WordPress博客与我客户的静态网站整合起来。在接下来的步骤中，我将解释我是如何做到的以及为什么。

项目设置

首先，我想分享一下我在这篇文章中要做的网站。没有太多花哨的东西。我选择了这个Bootstrap静态模板。

bootstrap_template

正如你所看到的，我们可以把页面分为三个不同的主要部分：

  1. 公司介绍（图片+口号）
  2. 行动呼吁卡（中间的灰色区域）
  3. 一行有三张卡片

我将在第三部分整合我们的WordPress博客：

bootstrap_template_card

每篇文章都将由一个卡片代表，用户将能够阅读文章的标题、摘要，并通过点击蓝色按钮 "阅读更多 "进入文章内容。该按钮将打开一个模式，在那里将显示帖子的内容。

让我们看看我们的WordPress实例是如何工作的

让我们看一下我们的WordPress实例，看看我们有什么。如果我登录到仪表板并进入帖子部分，我看到我已经发布了三个帖子。第1号文章，第2号文章，和第3号文章。

每篇文章都有一些 "Lorem ipsum "内容。所以，在这篇文章的结尾，我希望这些文章能像上面提到的那样显示在三个不同的卡片中。

elenco_post_wp

如何与WordPress APIs一起工作

WordPress的API有很好的文档，并由一个巨大而热情的社区维护。让我们看看我如何用现有的API来处理帖子。

所以，一旦进入文档页面，我就点击 "Endpoint Reference"，然后是 "post"。正如我之前所说，我想检索我在我的实例上发表的所有帖子。我进入 "List Posts"，读到 "查询此端点以检索帖子的集合。你收到的响应可以使用下面的URL查询参数进行控制和过滤。"

听起来这就是我正在寻找的东西。根据文档，这就是请求：

https://<BASE_URL>/wp-json/wp/v2/posts

在开始实施之前，我用Postman进行测试。这就是我得到的东西：

postman

正如预期的那样，我得到了一个JSON，其中包含我在WordPress实例上创建的帖子的相关信息。

编写代码的时间

为了完成这个实现，我将编辑index.html，并创建一个叫做blog.js的新文件。

在index.html中，我将删除静态卡片，添加一个加载器，使其在等待API调用响应时出现，并添加一个id--"wrapper"--到我希望帖子的卡片出现在DOM元素中。它看起来像这样：

<div id="wrapper" class="row gx-4 gx-lg-5">
	<div id=spinner class="text-center">
		<div class="spinner-grow spinner-grow-lg">
			<span class="visually-hidden">Loading...</span>
		</div>
	</div>
</div>

在blog.js文件中，我获取了URL，第一个.then() ，检查响应是否正常：

fetch('https://<BASE_URL>/wp-json/wp/v2/posts').then(function (response) {
	if (response.ok) {
        return response.json();
	} else {
		return Promise.reject(response);
	}
})

使用第二个then() ，我从DOM中移除旋转器，并为我在JSON中找到的每个帖子映射卡片和模态。我选择只显示该博客的最新三篇文章。它看起来像这样：

.then(function (data) {
    spinner.remove()
    for (let i = 0; i < 3; i++) {
      
        cardCreation = '<div class="col-md-4 mb-5">'
        cardCreation += '<div class="card h-100">'
        cardCreation += '<div class="card-body">'
        cardCreation += '<h2 id="test" class="card-title">' + data[i].title.rendered + '</h2>'
        cardCreation += '<p class="card-text">' + data[i].excerpt.rendered + '</p>'
        cardCreation += '</div>'
        cardCreation += '<div class="card-footer"><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-' + data[i].id + '">Read More</button></div>'
        cardCreation += '</div>'
        cardCreation += '</div>'

        modalCreation = '<div class="modal fade" id="modal-' + data[i].id +'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">'
        modalCreation += '<div class="modal-dialog" role="document">'
        modalCreation += '<div class="modal-content">'
        modalCreation += '<div class="modal-header">'
        modalCreation += '<h5 class="modal-title" id="exampleModalLongTitle">' + data[i].title.rendered + '</h5>'
        modalCreation += '</div>'
        modalCreation += '<div class="modal-body">' + data[i].content.rendered + '</div>'
        modalCreation += '<div class="modal-footer">'
        modalCreation += '<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>'
        modalCreation += '</div>'
        modalCreation += '</div>'
        modalCreation += '</div>'
        modalCreation += '</div>'
  
        document.querySelector("#wrapper").insertAdjacentHTML("beforeend",cardCreation)
        document.querySelector("#wrapper").insertAdjacentHTML("beforeend",modalCreation)
      }
})

最后，我使用catch() 方法来处理错误。我决定添加一个Bootstrap危险的横幅，在这里我解释了出错的原因，并添加了一个链接到用户可以找到有用的资源：

.catch(function (err) {
    spinner.remove();
    errorMsg = '<div class="alert alert-danger" role="alert">'
    errorMsg += 'Sorry, we can\'t retrieve posts at the moment. Please visit www.ourblog.com'
    errorMsg += '</div>'

    document.querySelector("#wrapper").insertAdjacentHTML("beforeend",errorMsg)

	console.warn('Something went wrong.', err);
});

我用浏览器打开index.html文件，现在我看到卡片上显示着我的WordPress博客的文章

bottstrap_con_post_wp

为了测试一切是否正常，我向我的博客添加了一个新的帖子。这是我在我的静态网站上看到的情况。

4posts

如果我点击 "阅读更多"，我在一个模式中看到帖子的全部内容。

modal

这就是我如何整合静态网站和WordPress博客，你可以在这里找到完整的代码。我希望你觉得这篇文章有用。欢迎分享！

avatar
文章
阅读
粉丝