创建 WordPress 循环并自定义 CSS

已发表: 2022-10-24

假设您已完成第 1 部分，在本节中，我们将创建WordPress 循环并自定义 CSS。 WordPress 循环是 WordPress 用于在您的网站上显示内容的 PHP 代码。 为了编辑循环，您需要熟悉 PHP。 如果你不是，网上有很多资源可以帮助你学习基础知识。 当您对 PHP 有了基本的了解后，打开您的文本编辑器并创建一个名为 loop.php 的新文件。 在这个文件中，我们将创建 WordPress 循环。 您需要做的第一件事是告诉 WordPress 加载我们在第 1 部分中创建的 header.php 文件。将以下代码添加到 loop.php： 接下来，我们需要创建 WordPress 循环。 该循环负责显示您网站上的所有内容。 它通过遍历 WordPress 数据库中的所有帖子并将它们显示在页面上来实现这一点。 要创建循环，请将以下代码添加到 loop.php： 此代码检查 WordPress 数据库中是否有任何帖子。 如果有帖子，它将遍历每个帖子并将其显示在页面上。 现在我们已经设置了循环，我们需要在其中添加一些内容。 对于这个例子，我们将只显示每篇文章的标题和内容。 在循环中添加以下代码： 此代码显示每个帖子的标题和内容。 现在我们已经设置了循环，我们需要添加一些 CSS 来设置它的样式。 在您的文本编辑器中，创建一个名为 style.css 的新文件。 将以下代码添加到 style.css： .post { margin-bottom: 40px; 这段代码在每篇文章的底部添加了一个边距。 这将有助于分隔页面上的帖子。 现在我们已经设置了循环和 CSS，我们需要向我们的主题添加更多文件。 在您的文本编辑器中，创建一个名为 footer.php 的新文件。 将以下代码添加到脚注

（第 2 部分）Bootstrap 为 WordPress 主题做了什么，以及为什么它如此受欢迎。 本教程是一系列教程的第二部分，它将引导您完成使用 Bootstrap CSS 框架从头开始创建 WordPress 主题的过程。 这是我们关于创建页眉区域、导航、侧边栏和页脚区域的讨论的第三部分，也是最后一部分。 要将博客标记为活动，标语和博客名称现在将显示在页面顶部。 在页脚区域，将有一个名为页脚 - 版权文本的小部件。 以下是将本节合并到 WordPress 中的几个选项。 通过向其添加额外的小部件和小部件区域来对 WordPress 主题进行小部件化。

要启动 bootstrapstarter_widgets_init() 函数，请将以下行添加到 footer.php 文件：footer-copyright-text 和 sidebar-module-inset。 这里有两个侧边栏：一个具有灰色背景，另一个具有黑色背景。 当您第一次查看入门模板时，小部件顶部小部件 (About) 会出现橙色背景，如果您输入标题，它将自动包裹在 h4 标签中。 使用 dynamic_sidebar() 我们可以显示分配给称为页脚 - 版权文本的区域的小部件。 使用本分步教程中的分步说明创建功能齐全的博客侧边栏。 最终的 index.php 文件包含结果：Results 函数，可以在博客区域之后找到。 这是论文的最终版本，可在此处下载。

它还提供了针对导航栏和侧边栏的CSS 修复和调整。 在此页面上，您可能会遇到外部附属链接，如果您使用它们，可能会导致向 LyraThemes.com 支付佣金。 我们对本页上的书面意见或评论不作任何陈述或声明。

我们可以在 WordPress 中使用 Bootstrap 主题吗？

学分：Colorlib

在 WordPress 中使用 Bootstrap 的最简单方法是激活已经支持它的响应式主题。 使用 Bootstrap，您无​​需从主题开发人员处下载或安装即可使用它，因为该框架包含在他们的许多主题中。

主题或插件安装并不像使用 WordPress 创建Bootstrap 网站那么简单。 要创建 WordPress 主题，您必须拥有 WordPress 托管帐户。 通过利用 Bootstrap 作为基础，WordPress 和 Bootstrap 可以协同工作。 许多技术细节都隐藏在两个系统的用户友好界面下。 您将无法经常从头开始构建 WordPress 主题。 要了解基于 Bootstrap 的 WordPress 主题，请从以前的版本中复制一些必要的文件。 主题将被称为 WPBootstrap 并且目录将被赋予相同的名称（小写）。

如何将 Bootstrap 添加到 WordPress 主题？ 有几种选择。 以下是您可以合并到 header.php 和 footer.php 文件中的 Bootstrap CSS 和 JavaScript 库。 通过将预览图像上传到主题目录，然后使用 screenshot.png 文件，可以将预览图像添加到主题中。 创建 WordPress 主题需要大量工作，因此我建议从另一个主题复制文件。 因为 Bootstrap 有自己的一套规则和实践，所以也必须遵循学习它们的程序。 事实上，WordPress 和 Bootstrap 都有热情的社区，所以你永远不知道接下来会发生什么。

Bootstrap 比 WordPress 好吗？

信用：模板烤面包机

如果您刚刚开始并且对网页设计知之甚少，那么使用 Bootstrap 是一个好主意，因为它易于学习和使用。 如果您想提高网站设计技能，WordPress 可能是更好的选择。

在开发网站时，很难在 Bootstrap 和 WordPress 之间做出选择。 在这里，我们将对 Bootstrap 和 WordPress 进行快速比较，并对其进行全面细分。 使用这种方法，您可以决定最适合您网站的平台。 Bootstrap 网站的加载成本低于 WordPress 网站。 可以从任何设备访问使用 Bootstrap 构建的网站。 最好的 WordPress 网站在大屏幕上效果最好，无论是在个人电脑、平板电脑还是笔记本电脑上。 您必须是一名程序员才能在 Bootstrap 中为您的网站或页面进行页面搜索引擎优化。

React-Bootstrap 是一个结合了 React 的强大功能和 Bootstrap 的灵活性的库。 Bootstrap 4 是一个强大的平台，具有响应式设计、一致的设计以及它所缺乏的所有功能。 启动和运行不会有任何问题，因为它使用起来非常简单，学习起来也很简单。 React-Bootstrap 是一个出色的库，用于创建高质量、响应式的 Web 应用程序。