如何基于 Bootstrap 创建 WordPress 响应式主题

由于有这么多具有​​不同分辨率、屏幕尺寸和操作系统的设备，响应式网站和应用程序已成为品牌在线形象的基本要求。

超过 52% 的网络流量来自移动设备，而且这个数字还在上升。 Web 开发人员、营销人员和设计师了解如果网站具有响应性并且可以在任何设备上轻松查看、导航和浏览，无论分辨率和纵横比如何，都具有巨大的潜力。

响应式主题是一种网页设计方法，其中网站元素根据屏幕尺寸和浏览器进行自我调整，以提高可读性、用户体验和加载时间。 开发人员和主题设计师正在利用响应式网站的概念获利。 许多品牌也越来越多地雇用 WordPress 开发人员，以使他们的网站具有响应性和移动友好性。

早在 2013 年 11 月，Google 网络垃圾邮件团队的负责人 Matt Cutts发布了一段视频，解释说响应式设计不会在 SERP 中对您产生负面影响。 此外，谷歌还发布了有关移动友好网站的指南，其中包含有关谷歌如何对待响应式网站的详细信息。

随着智能手机和其他类似设备的兴起，台式机和笔记本电脑的使用正在（缓慢）下降。 这意味着人们正在使用他们的智能手机搜索任何东西：从新闻到当地商店，从航班查询到最新电影。 这种上升趋势为在线社区带来了巨大的商机。

WordPress 和响应式 Web

WordPress 是最流行的 CMS，它为互联网的很大一部分提供支持。 它得到了强大的开源开发人员和设计师社区的支持。 随着响应式网页设计的兴起，许多知名主题开发者转向响应式设计并引入了易于理解的框架，如 Redux Framework、Carrington Core 和Bootstrap ，非常适合从头开始创建响应式 WordPress 主题。

什么是引导程序？

Bootstrap 是一个开源框架，用于移动友好的前端 Web 开发。 这意味着它可用于通过其基于 CSS 和 Java Script 的设计模板创建响应式 WordPress 主题。

Bootstrap 是一个工具包，可简化复杂 Web 应用程序的开发过程。 它是 Twitter 开发团队的创意，可供开源社区使用。 该框架因其轻量级结构而流行，因为它是用 LessCSS 编码的。

通过将 Bootstrap 添加到您的网站，您可以调用其类来添加预先构建的元素，如按钮、网格、表格、菜单等。同样，您可以使现有元素具有响应性，而无需添加复杂的媒体查询。

创建 WordPress Bootstrap 主题

创建 WordPress 引导程序主题实际上是一个 8 步过程。 好消息——构建一个 Bootstrap 驱动的主题很容易。

第 1 步：解压 Bootstrap

1. 首先，在您的域上安装 WordPress。
2. 下载并解压Bootstrap。
3. 完成后，使用 FileZilla 等 FTP 客户端进行连接。
4. 导航到wp-content > themes 。
5. 在Themes文件夹中创建一个新文件夹并将其命名为BootSTheme 。 将解压后的 Bootstrap 的内容上传到此文件夹。
6. 几乎每个 WordPress 安装都包含以下文件：

• 页脚.php
• 头文件
• 索引.php
• 样式文件

现在，在BootSTheme文件夹中创建四个具有上述名称的空文件。

第 2 步：配置引导程序

在 BootSTheme 文件夹中，打开style.css并粘贴以下代码。

 /*
主题名称：MyTheme
主题 URI：https://cloudways.com
描述：Mytheme 建立在引导程序上
版本：1.1
添加一名作者
作者 URI：https://cloudways.com
*/

这些基本上是提供有关主题的描述和详细信息的注释。 我强烈建议您更改这些评论以反映您主题的详细信息。

第 3 步：复制代码

对于本教程，我不会使用 Bootstrap 包中提供的所有 CSS 和 JS 文件。 要启动开发过程，请复制bootstrap.min.css文件中的代码并粘贴到style.css文件中。 此时， style.css文件应如下所示。

注意：您可以从 Bootstrap 网站获取完整的缩小 CSS 代码。

第 4 步：设置 HTML 模板

我需要一个基本的 HTML 模板来使用。 为了方便起见，我将使用这个HTML 主题。 我建议您下载以继续本教程。

WordPress 有内置函数get_header()和get_footer() ，它们默认分别调用文件header.php和footer.php 。

首先将 HTML 代码从顶部剪切到第一个容器 div 并将其粘贴到header.php文件中。 该文件将如下所示：

footer.php文件将包含其余的代码：

此时，如果您上传 Bootstrap WordPress 主题并激活它，您将看不到任何内容，因为index.php不包含任何内容。

为了加载页眉和页脚，我将使用 WordPress 内置函数来调用这些元素。 为此，将以下代码粘贴到index.php 中：

 <?php get_header(); ?>

<?php get_footer(); ?>

现在页眉和页脚元素将加载到我们的网站上，但我们将获得一个没有任何样式的基本页面。

第 5 步：设置页眉和页脚

在header.php文件中，我将使用 WordPress 函数echo get_stylesheet_uri()导入 Bootstrap 样式表（阅读更多WordPress Codex 中的函数）。 这会将style.css导入网站，您现在将看到一个顶部菜单栏。

您还可以通过在header.php文件的顶部添加以下代码来添加style.css 。

 <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri().'/style.css' ?>"> 

但这还不是全部，我们页面上的 JavaScript 功能仍然无法使用，我们也不会看到任何下拉菜单。 为了实现这一点，我们将通过在footer.php 中通过 URL 直接导入文件来导入我们的 js 文件。 在结束正文标记之前粘贴以下代码。

 <script src="../wp-content/themes/MyBSTheme/js/bootstrap.min.js"></script>

WordPress 以其定制和插件而闻名。 为了告诉 WordPress 在哪里放置插件钩子，我们将粘贴<?php wp_head(); ?>和<?php wp_footer(); ?>在header.php和footer.php文件中。 另外，要设置网站的动态标题，我们将使用wp_title(); <title>标签之间的header.php文件中的函数。

 <title><?php wp_title(' | ',true,'right'); ></title>

上面的代码将调用以'|'分隔的帖子标题比网站名称。 布尔值true将显示标题。 如果您将其设置为false ，它将只返回值而不显示它。 'right'将帖子标题的位置定义为分隔符的右侧。

第 6 步：显示精选帖子

接下来，我将动态调用帖子到主页（如 所示）并将它们显示在顶部（类似于我们在许多 WordPress 支持的网站上看到的特色帖子）。

将以下代码写入您的index.php ：

 <?php

query_posts('posts_per_page=1');

while(have_posts()) : the_post(); ?>
<div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?>&lt;/p>
</div>

<?php endwhile; wp_reset_query(); ?>

如您所见，我使用了一个while循环，并使用post_per_page将帖子数设置为 1 。 这一行只会在页面顶部显示最新的博客文章，循环关闭后， query_posts重置。

jumbotron 类在bootstrap.min.css文件中定义。 我将使用它通过使用 <h2> 标签和the_permalink()来设置特色帖子的样式； 功能。 超链接是在帖子标题上创建的， the_permalink(); 函数链接到整个帖子的 URL。 为了显示帖子的摘录，我使用了另一个内置的 WordPress 函数the_excerpt();。

第 7 步：列出您的类别

我现在将在主页左侧列出类别。 我将创建几个使用 Bootstrap 类和 WordPress 函数wp_list_categories() 设置样式的 div 实例； .

将以下代码粘贴到index.php 中：

 <div class="panel panel-default panel-body">
<div>
<div>

<ul>
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>

</div>
</div>
</div>

这将按名称列出具有良好悬停效果的类别。

第 8 步：显示最新的帖子和作者

最后，我们将在主页上显示最新的博客文章。 我们将开始另一个div标签，在这个div 下，我们将使用我们在特色帖子中使用的类似while循环技术，但我们不会使用query_posts()来限制它； .

 <div>

<?php while(have_posts()) : the_post(); ?>

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php the_excerpt(); ?></p>
<p> 由 <?php the_author() 发布； ?>

<?php endwhile; wp_reset_query(); ?>

</div>

WordPress 函数the_author() ； 并获取帖子作者的用户名。 我们可以使用它来动态显示每个帖子的作者姓名。

成功完成所有操作后，您将拥有一个如上图所示的页面。

在现有的 WordPress 主题中添加 Bootstrap

如果您使用的 WordPress 主题没有响应，您可以添加 Bootstrap 使其适合移动设备。 您可以通过两种不同的方式使用 WordPress 和 Bootstrap。

使用 CDN 添加引导程序

您可以通过简单地将其 CDN 添加到您的 header.php 文件来开始使用 Bootstrap 元素。

注意：此方法可能会导致兼容性问题，因此，请确保在添加以下代码之前进行完整备份。

 <!-- 最新编译和缩小的 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- 最新编译和缩小的 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

您可以使用 FTP 或使用插件访问 header.php 文件。 上面的代码包含提供更好性能的 CSS 和 JS 文件的缩小版本。

在functions.php中添加Bootstrap

在这种方法中，您需要下载 Bootstrap 库。 将 Bootstrap.min.css 文件和 Bootstrap-theme.min.css 文件上传到您的主题 CSS 文件夹，并将 Bootstrap.js 文件上传到您的 WordPress 主题名为“js”的主题文件夹。

现在，访问您的 functions.php 文件以将这些脚本排入队列。

在您的functions.php 文件中添加以下代码。

 函数 reg_scripts() {
    wp_enqueue_style('bootstrapstyle', get_template_directory_uri() .'/css/bootstrap.min.css');
    wp_enqueue_style('bootstrapthemestyle', get_template_directory_uri() .'/css/bootstrap-theme.min.css');
    wp_enqueue_script('bootstrap-script', get_template_directory_uri() .'/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');

您也可以跳过上传部分，直接像这样将引导 CDN 加入队列。

 函数 my_scripts_enqueue() {
    wp_register_script('bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery'), NULL, true );
    wp_register_style('bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, NULL, 'all' );

    wp_enqueue_script('bootstrap-js');
    wp_enqueue_style('bootstrap-css');
}
add_action('wp_enqueue_scripts', 'my_scripts_enqueue');

保存文件并将其上传回服务器。

下一步是什么？

本教程主要侧重于从 HTML 模板创建基本的 WordPress 主题，并使用 Bootstrap 3.x 使其具有响应性。 在以后的文章中，我会制作更多的页面，如 single.php、front-page.php 和 functions.php。 我还将解释如何从functions.php 文件中导入样式表和JavaScript。

如果您需要任何帮助，请在下面发表评论，我会尽快回复您。