Bootstrap 和 WordPress 如何协同工作

已发表: 2022-05-05

WordPress 和引导程序

大多数人可能都熟悉这句话，“自力更生”。 虽然它通常用于表示“依靠自己取得成功”，但这个短语最初是用来指代不可能的事情——毕竟，你不能用自己的靴子提升自己。

但与流行说法的目标不同，将 Bootstrap 框架与 WordPress 托管服务一起使用并非不可能。 Bootstrap 旨在使响应式网页设计变得无忧无虑，是当今最流行的创意网页工具之一。

在这个简短的指南中，我们将解释 WordPress Bootstrap 的来龙去脉——它是什么，为什么如此受推崇，以及如何使用它。

目录
1. WordPress 和引导程序
2.什么是 WordPress 的引导程序？
3.为什么在 WordPress 中使用 Bootstrap？
4.前 5 个免费 Bootstrap WordPress 主题
4.1。 1. 未来
4.2. 2.匀称
4.3. 3. 新闻杂志
4.4. 4. 伊迪
4.5. 5.闪闪发光
5.如何将 Bootstrap 添加到 WordPress
5.1。 第 1 步：采取必要的预防措施
5.2. 第 2 步：打开 WordPress 主题编辑器
5.3. 第 3 步：粘贴参考代码
5.4. 第 4 步：完成
6.使用 Bootstrap 和 WordPress 让不可能成为可能

什么是 WordPress 的引导程序？

Bootstrap 最初由 Twitter 的一组开发人员设计，是一个开源框架，可让您轻松创建响应迅速、外观专业的网站。 特别是，强调构建适合移动设备的网站。

在这种情况下，术语“框架”是指预先编写的代码部分（在本例中为 HTML、CSS 和 JavaScript），您可以将其用作设计网站的起点。 Bootstrap CSS 的即插即用理念使其成为刚开始使用 WordPress 开发的用户的理想选择，但对经验丰富的开发人员同样有用。 由于该框架是免费和开源的，因此您可以添加或编辑代码行，根据您的个人需求对其进行定制。

简而言之，Bootstrap 处理了一些有助于网站顺利运行的棘手的幕后编程细节，让您可以专注于访问者可见的网站前端部分。

为什么在 WordPress 中使用 Bootstrap？

Bootstrap 是一种多功能工具，有助于创建自定义的响应式站点。 但不要只相信我们的话——即使是像 Nintendo 和 Spotify 这样的跨国公司也使用 Bootstrap 开发了令人惊叹的网站。 以下是将 Bootstrap 组件集成到 WordPress 网站的众多原因中的一些：

  • 它面向移动设备使用——也许最重要的是，Bootstrap 模板可以轻松构建“移动优先”网站。 移动用户在网络流量中所占的比例越来越大——85% 的美国人拥有智能手机，15% 的美国成年人只通过移动设备访问互联网。 如果您的网站不适合移动设备，那么您就会错失不断增长的客户群。
  • 它是开源的——当一项技术开源时，这意味着任何人都可以查看和修改源代码。 因为代码对每个人都是可见的，所以有一种透明感。 更重要的是，开源软件通常更安全，因为开发人员社区可以快速修补任何问题。
  • 它有助于提高网站速度——Bootstrap 促进了精益、快速加载网站的开发。 您可以使用该框架将有用的功能直接构建到您的自定义 WordPress 主题中，而不是依赖 WordPress 插件来获得附加功能。 使用更少的插件，您的网站将运行得更快。
  • 它可以节省您的时间和精力——借助数十种预构建的 WordPress 定制器功能，例如按钮、导航栏、手风琴、工具提示等，Bootstrap 让 Web 开发人员轻松创建漂亮的交互式网站​​​。 这些元素所需的所有代码都已经编写好了，因此您可以花更少的时间进行编程，而将更多的时间用于设计一个令人难忘的 WordPress 网站。
  • 很容易找到帮助——作为构建响应式网站的最流行工具之一（超过 20% 的网站使用 Bootstrap，包括 Netflix 和 Target 等企业），您很少会遇到其他人尚未解决的问题. 通过无穷无尽的论坛、教学视频和支持文档，任何人都可以学习掌握 Bootstrap。
  • 它负责浏览器兼容性——使用称为 Reboot 的 CSS 更改集合，Bootstrap 可帮助您的网站在各种浏览器和设备上一致呈现，创建一个响应式网站，从而提升整体客户体验。
  • 它是免费的——与 WordPress 一样，Bootstrap 可以 100% 免费下载和使用。

前 5 个免费 Bootstrap WordPress 主题

在 WordPress 中开始使用 Bootstrap 的最简单方法是激活已经使用它的响应式 WordPress 主题。 许多主题开发人员在他们的主题中包含该框架，因此您可以利用 Bootstrap 而无需下载和设置它。

如果您想立即开始尝试 Bootstrap，有几十个免费的 WordPress 主题可供选择。 以下是我们的一些最爱，排名不分先后：

1. 未来

Futurio 具有广泛的潜在应用程序（包括创意组合、电子商务网站和博客），是 Web 开发专业人士和新手的绝佳选择。 这是一个加载速度非常快的主题，部分归功于它使用 Bootstrap 来添加功能。

话虽如此，该主题仍然与大多数 WordPress 插件兼容。 最重要的是，您可以从他们的任何一键式演示站点中进行选择，并在几分钟内安装一个功能齐全的网站。

加上 SEO 优化和多语言支持，很容易看出为什么 Futurio 进入前五名。

2.匀称

Shapely 是一个单页 WordPress 主题，这意味着网站的所有内容都存在于一个登录页面上。 虽然这似乎不受欢迎，但单页网站实际上提供了最佳的移动体验，因为用户可以无缝滚动浏览不同的部分。

无论您是要添加推荐信、产品信息、号召性用语还是更多，Shapely 都可以轻松完成。 该主题响应迅速，对 SEO 友好，并支持大多数免费和付费的 WordPress 插件。

3. 新闻杂志

对于复杂的博客、杂志或在线报纸，有 NewsMag。 这个主题利用 Bootstrap 的力量来提供一个时尚、自适应、SEO 就绪的网站。

从四种不同的博客页面样式中进行选择，或者根据自己的喜好挖掘和自定义主页。 突出的特点包括：

  • 自定义背景
  • 联系表格
  • 谷歌字体
  • 特色帖子横幅
  • 响应式视频
  • 动态小部件
  • 滑块

对于您所有的在线媒体需求，NewsMag 就是您的不二之选。

4. 伊迪

Illdy 有一种时尚的感觉，使其适用于任何业务或产品。 这个主题的好处并不仅限于视觉吸引力。

对于一个免费的主题，Illdy 的用途非常广泛——从个人博客到成熟的企业都有潜在的用途。 多亏了 Bootstrap，使用 Illdy 构建的网站可以在智能手机、平板电脑和台式电脑上流畅运行。

Illdy 最有趣的方面是能够以“实时预览”模式开发您的网站。 此功能允许您在进行更改时查看站点上的更改。

5.闪闪发光

Sparkling 是极简主义的大师班。 凭借适合任何应用程序或行业的流畅界面，这个免费的 WordPress 主题是最好的主题之一。

除了对 SEO 友好的设计外，Sparkling 还包含滑块、流行的帖子小部件、社交图标集成以及添加作者传记的功能。 Sparkling 拥有 20 多种可用语言并支持无限滚动，是正确完成 Bootstrap 的一个明显例子。

如何将引导程序添加到 WordPress

虽然它不是专门为 WordPress 设计的，但可以通过各种方法将 Bootstrap 添加到任何 WordPress 站点。 然而，这个过程确实涉及潜入 WordPress 的表面之下，所以一点编程知识会有很长的路要走。 考虑到这一点，我们已经尽可能清楚地概述了最简单方法的步骤，以便任何人都可以开始使用 Bootstrap 5——该框架的最新版本。

第 1 步：采取必要的预防措施

每当您计划对 WordPress 主题进行更改时（无论多么小），首先必须做两件事：

1. 备份您的网站– 如果过程中出现问题，您可以随时从最近的备份重新开始。

2. 创建一个子主题并在那里进行所有更改- 在 WordPress 中编辑您的父主题是不可取的，因为您冒着覆盖主主题中代码的风险。

如果您不从这两个保护措施开始，您可能会丢失所做的任何更改，或者更糟糕的是，导致您的整个网站停止工作。

第 2 步：打开 WordPress 主题编辑器

首先，登录您的 WordPress 仪表板。 从那里，您将从右侧菜单中选择外观，然后单击主题编辑器。 导航到主题标题部分 (header.php)。

第 3 步：粘贴参考代码

现在您已经打开了主题标题，您需要在 <head> 标记下方粘贴一行代码，注意不要删除或覆盖任何现有代码。 在撰写本文时，用于引用 Bootstrap 的代码为：

<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” 完整性=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3” crossorigin=”anonymous”>

Bootstrap 使用 CDN jsDelivr 通过此代码提供 Bootstrap 编译 CSS 的缓存版本。 请务必查看 Bootstrap 网站并复制最新的样式表。

第 4 步：完成

剩下要做的就是单击蓝色的更新文件按钮，清除浏览器缓存，然后重新打开 WordPress。 您现在可以参考内置到您的主题中的 Bootstrap，您可以开始使用它来优化您的网站。

使用 Bootstrap 和 WordPress 让不可能成为可能

如果您已经在使用 WordPress 作为内容管理系统，那么您会因为许多相同的原因而喜欢 Bootstrap：它是免费的、开源的，并且是用于 Web 开发的强大工具。

一旦您拥有启用了 Bootstrap 的 WordPress 主题，完美的补充就是来自 WP Engine 的闪电般快速的托管 WordPress 托管计划。 有了这些准备就绪的 Web 解决方案，您就可以实现以前认为不可能的事情——在不破坏银行的情况下构建世界级的网站。