基于Bootstrap和Wordpress个人博客的搭建
时间：2022-08-25 11:10:56
【摘要】随着互联网的加速发展，网页成为互联网不可分割的一部分，但不断加快的开发节奏，使开发者编写一个一体化的网站所用时间大大减少，随之而来的，出现了越来越多的网页框架，使用此类框架，就不必完整编写全部的内容，只需关注表现的样式，这无论从安全性还是便捷性上，都得到了大大的提升。本文讲述了采用Bootstrap框架和Wordpress内容管理系统相结合的方式，快速而有效地开发一个个人博客的详细过程。
【关键词】网站;Bootstrap;Wordpress;个人博客
1.引言
面对日新月异的技术发展，特别是信息技术更迭越来越快，传统的网页开发方式无法满足现在更新的节奏，高效而实用的开发技术不断涌现出来。使用别人的技术为自己所用可以大大简化开发的流程和复杂程度，并且流行的框架不仅代码优美利于修改而且运行迅速，本文采用Wordpress和Bootstrap这两个流行的框架来迅速开发一个实用并且易用的个人博客。
2.平台简介
2.1 Wordpress简介
WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPress具有插件架构和模板系统。Alexa排行“前100万”的网站中有超过16.7%的网站使用WordPress。WordPress用户可以安装和切换主题。主题可让用户不改变博客内容和结构的情况下更改界面和WordPress站点的功能，可以在WordPress的“外观”管理工具中安装，或者通过FTP上传至主题文件夹，也可以通过编辑主题中的PHP和HTML代码自定义主题。
2.2 Bootstrap简介
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和JacobThornt on合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它是由动态CSS语言Less写成。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个界面美观、功能完备的网站。
3.可行性分析
WordPress是一种内容管理系统（cms），它注重的是内容，WordPress这类CMS就可以帮助程序员快速开发一个博客，他有后台，有前台，数据库也是自己设定好的，用户只需要关注写作。用户在后台写完一篇文章后，WordPress会自动到前台页面上显示，不需要考虑中间运行情况，都由WordPress封装好了。这样一来，搭建一个博客就非常简单。但是，前台是Wordpress给定好的，那就意味这所有使用WordPress的人前台都是一样的。WordPress自然也提供了解决办法，他把前台的样式称之为主题，在主题中心中提供了成千上万的主题，这些主题都是由开发者上传，可以免费使用，挑选自己喜欢的主题，安装后就可以在前台显示。虽然安装了主题，但是并不是主题能满足所有的用户，用户想要自定义自己的主题，就可以使用BootStrap开发。Boot strap是一个封装了很多组件的框架，比如说按钮，表单，还有便捷地定位功能，使用这些快捷的框架，可以很方便地开发一个自己的博客，也就是自定义的主题。
4.主题开发
在进行主题开发之前，必须搭建相应的开发环境，由于Wordpress是采用PHP语言，所以必须搭建PHP运行环境。这里，采用WampServer软件搭建完成。
4.1 目录结构
主题目录在wp-content/themes/文件夹下，其中各个文件功能及文件名对应如表1所示：
表1 主题文件对应关系
Tab.1 Theme file correspondence
文件名 描述 功能
Index.php 首页文件 显示首页
header.php 头文件 各个页面包含的头文件
Single.php 文章文件 显示单个文章
Style.css 样式文件 所有文件的样式
简单的来说，index.php和single.php很相似，只是主体部分不相同，index.php是首页部分，显示的是文章摘要，不显示全部内容，方便浏览者访问，而single.php是文章部分，显示单个的文章，文章下面还有评论，但他们都包含header.php，因为他们的头是相同的（此处省略footer.php和siderbar.php）。
4.2 新建主题
在theme文件夹下，建一个以主题名为名字的文件夹即可，例如以test为名字新建一个文件夹，里面新建两个文件index.php和style.css，并不写入任何代码。在Wordpress后台管理中发现一个新主题，主题就是新建的文件夹的名字。写入以下代码：
<html><head><title>hello world</title><style>body {background-color： silver;}
</style></head><body>hello world</body></html>
Wordpress的前台样式背景色为silver，内容为hello world字样。可见，对index.php的修改可以在前台显示，所以可以把样式放在style.css中。将body{background-color： silver;}放入style.css中，然后在index.php的head标签中写入：<linkhref=”<？phpbloginfo（‘stylesheet_url’）;？>”rel=”stylesheet”>以此引入style.css。刷新后效果不变，外部的style.css引入成功。至此，可以发散地编写我们自定义的样式。
4.3 文章调用
Wordpress对文章的调用，是采用调用封装好的函数的方式。在body中复制以下代码：<body>
<？php if（have_post（））：？>
<？php while（have_post（））：the_post（）; ？>
<a href="http://<？php the_permalink（）;？>"><？php the_title（）; ？></a>
<？php the_time（"Y-m-d"）; ？>
<？php the_author（）; ？>
<？php the_content（）; ？>
<？php endwhile ？>
<？php endif ？>
</body>
图1 效果显示
Fig.1 Show results
从图1中可以看出，文章相应的信息都被调用出来了，但并没有给定样式，后面再给定，下面我们分析一下几个函数：
表2 函数及功能
Tab.2 Functions and features
函数 功能
<？phpif（have_posts（））：？><？phpendif？> 判断是否有文章，有文章则显示。
<？phpwhile（have_posts（））：the_post（）;？><？phpendwhile？> while循环遍历所有的文章。
<？phpthe_permalink（）;？> 每篇文章对应的超链接。
<？phpthe_title（）;？> 文章标题。
<？phpthe_time（"Y-m-d"）;？ 文章创建时间，可自定义格式。
<？phpthe_author（）;？> 文章作者，默认为admin。
<？phpthe_content（）;？> 文章内容。
相同的原理，我们写下显示单个文章的页面single.php，函数基本和index.php用到的函数一样（只是多了评论栏，为了方便，去掉评论栏，所以二者一样），复制一份index.php改名为single.php，点击文章的标题，或者下面的阅读更多，都能跳转到单个文章页面。
可以发现，调用出来的文章显示是没有任何样式的，外部的样式怎么显示，这个文章就怎么显示，就好像盖一个房子，房子的骨架都已经确定好，门的位置，窗户的位置都已经定好，就差给房子码砖了，砖头有了，就差一个好看的骨架了，下面就开始使用Bootstrap打造这个骨架。
4.4 使用Bootstrap框架
首先引用Bootstrap文件，如下：
@importurl（‘bootstrap/css/bootstrap.css’）;
@importurl（‘bootstrap/css/bootstrap-responsive.css’）;
事先从Bootstrap案例中找到了一个相当不错的模板，我现在将它改造改造作为自己的主题模板，复制该模板的源代码到index.php中，然后进行修改。
图2 Bootstrap模板
Tab.2 Bootstrap Template
图3 完成效果
Tab.3 Complete results
导航栏对应文章标签，去掉登录表单。projectname和helloworld对应站点标题（在后台常规选项中有设置），下面的介绍对应副标题，这样我就可以动态更新站点。用相应的Wordpress函数去替代原本模板中的文字。
到这里，就完成了全部的开发过程。
5.结论
在整个开发的过程中，问题是不可避免的，例如：无法获得文章，标签获取错误等等问题，最为有效的方法就是借助于网络，可以从官方文档上获取很多有用的信息。面对开发速度需求越来越快，所需技术越来越多的时代，已经不可能完全掌握所有的技术再去进行开发，相反的，快速的学习、查找、获取有用的知识进行开发，成为主流的开发方式，一定要善于快速学习并加以应用。
参考文献
[1]（澳）威利，汤姆森.武欣等译.php和mysqlweb开发[M].北京：机械工业出版社，2009.
[2]（美）赞德斯彻.陈浩等译.深入PHP：面向对象、模式与实践[M].北京：人民邮电出版社，2011.
[3]温谦.HTML+CSS网页设计与布局从入门到精通[M].北京：人民邮电出版社，2008.
[4]（美）NicholasC.Zakas.JavaScript高级程序设计[M].北京：人民邮电出版社，2013.
[5]单东林，张晓菲，魏然.锋利的jQuery（第二版）[M].北京：人民邮电出版社，2013.
[6]Wordpress官方文档[OL].http：///WordPress_Lessons.
[7]Bootstrap官方文档[OL].http：///2.3.2.
作者简介：夏立波（1994―），男，现就读于吉林农业大学信息技术学院。
通讯作者：毕春光（1977―），女，吉林长春人，硕士，吉林农业大学讲师，研究方向：计算机农业应用，数据库应用。
