欢迎来到天天文库
浏览记录
ID：10059130
大小：32.50 KB
页数：9页
时间：2018-05-23
《基于bootstrap和wordpress个人博客的搭建》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。
1、基于Bootstrap和Wordpress个人博客的搭建【摘要】随着互联网的加速发展，网页成为互联网不可分割的一部分，但不断加快的开发节奏，使开发者编写一个一体化的网站所用时间大大减少，随之而来的，出现了越来越多的网页框架，使用此类框架，就不必完整编写全部的内容，只需关注表现的样式，这无论从安全性还是便捷性上，都得到了大大的提升。本文讲述了采用Bootstrap框架和Wordpress内容管理系统相结合的方式，快速而有效地开发一个个人博客的详细过程。【关键词】网站;Bootstrap;Wordp
2、ress;个人博客1.引言面对日新月异的技术发展，特别是信息技术更迭越来越快，传统的网页开发方式无法满足现在更新的节奏，高效而实用的开发技术不断涌现出来。使用别人的技术为自己所用可以大大简化开发的流程和复杂程度，并且流行的框架不仅代码优美利于修改而且运行迅速，本文采用Wordpress和Bootstrap这两个流行的框架来迅速开发一个实用并且易用的个人博客。2.平台简介2.1Wordpress简介9WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPr
3、ess具有插件架构和模板系统。Alexa排行“前100万”的网站中有超过16.7%的网站使用WordPress。WordPress用户可以安装和切换主题。主题可让用户不改变博客内容和结构的情况下更改界面和WordPress站点的功能，可以在WordPress的“外观”管理工具中安装，或者通过FTP上传至主题文件夹，也可以通过编辑主题中的PHP和HTML代码自定义主题。2.2Bootstrap简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Ma
4、rkOtto和JacobThornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它是由动态CSS语言Less写成。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个界面美观、功能完备的网站。3.可行性分析9WordPress是一种内容管理系统（cms），它注重的是内容，WordPress这类CMS就可以帮助程序员快速开发一个博客，他有后台，有前台，数据库也是自己设定好的，用户只需要关注写作。用户在后台写完一篇文章发布后，
5、WordPress会自动发布到前台页面上显示，不需要考虑中间运行情况，都由WordPress封装好了。这样一来，搭建一个博客就非常简单。但是，前台是Wordpress给定好的，那就意味这所有使用WordPress的人前台都是一样的。WordPress自然也提供了解决办法，他把前台的样式称之为主题，在主题中心中提供了成千上万的主题，这些主题都是由开发者上传，可以免费使用，挑选自己喜欢的主题，安装后就可以在前台显示。虽然安装了主题，但是并不是主题能满足所有的用户，用户想要自定义自己的主题，就可以使用
6、BootStrap开发。Bootstrap是一个封装了很多组件的框架，比如说按钮，表单，还有便捷地定位功能，使用这些快捷的框架，可以很方便地开发一个自己的博客，也就是自定义的主题。4.主题开发在进行主题开发之前，必须搭建相应的开发环境，由于Wordpress是采用PHP语言，所以必须搭建PHP运行环境。这里，采用WampServer软件搭建完成。4.1目录结构主题目录在wp-content/themes/文件夹下，其中各个文件功能及文件名对应如表1所示：表1主题文件对应关系Tab.1Themef
7、ilecorrespondence文件名描述功能Index.php首页文件显示首页header.php头文件各个页面包含的头文件9Single.php文章文件显示单个文章Style.css样式文件所有文件的样式简单的来说，index.php和single.php很相似，只是主体部分不相同，index.php是首页部分，显示的是文章摘要，不显示全部内容，方便浏览者访问，而single.php是文章部分，显示单个的文章，文章下面还有评论，但他们都包含header.php，因为他们的头是相同的（此处省
8、略footer.php和siderbar.php）。4.2新建主题在theme文件夹下，建一个以主题名为名字的文件夹即可，例如以test为名字新建一个文件夹，里面新建两个文件index.php和style.css，并不写入任何代码。在Wordpress后台管理中发现一个新主题，主题就是新建的文件夹的名字。写入以下代码：<html><head><title>helloworld</title><style>body{background-
此文档下载收益归作者所有
