扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
bootstrap是前端框架,是构建网站静态页面用的!
创新互联专业为企业提供图木舒克网站建设、图木舒克做网站、图木舒克网站设计、图木舒克网站制作等企业网站建设、网页设计与制作、图木舒克企业网站模板建站服务,十余年图木舒克做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
wordpress是建站程序,是网站后端方面的内容
在我们开始前还有一点事情需要你去做:
安装WordPress
下载并解压缩 Bootstrap
安装主题测试驱动插件*
* 如果你想在一个线上的网站上创建一个主题并且不想在你开发的过程中让人们看到新主题,你正好需这个插件。
一旦你准备好这些事情,打开你带有WordPress所有文件的目录并导航至wp-content themes。
在你导航至那个文件夹后,创建一个叫“wpbootstrap”的新文件夹,在文件夹里面粘贴bootstrap文件夹。
在那个文件夹里面创建一个新文件叫index.php。
现在我们将要把基本营销网站的源码拷贝并粘贴到index.php里面。下面是你所要用到的源码。我们仅链接了代码的一个文本版本,因为它太长了不能嵌入在这里。
bootstrap-demo-source-code
现在我们有了一个静态的html页面,我们将要继续去创建一个主css页面。WordPress需要一个显示在style.css页面顶部的特殊格式的注释,它使用这个注释来获得关于你这个主题的所有信息。
在你的index.php页面所在文件夹中创建一个新文件并命名为style.css,WordPress需要一个带有特定名称的CSS文件style.css,所以我们不将其命名为其它任何名称否则我们的主题将不能工作。
创建完了style.css文件,在文件头部添加注释:
/*
Theme Name: WP Bootstrap
Theme URI: http //teamtreehouse com/wordpress-bootstrap-theme-tutorial
Description: A demo theme built to accompany the Treehouse blog post a href="http //teamtreehouse com/wordpress-bootstrap-theme-tutorial"How to Build a WordPress Theme with Bootstrap/a.
Author: Zac Gordon
Author URI: http //teamtreehouse com/
Version: 1.0
Tags: responsive, white, bootstrap
License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http //creativecommons org/licenses/by-sa/3.0/
This simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap web site http //twitter github com/bootstrap/examples/hero html
*/
在我们安装和开始构建我们新主题前,我们最后需要做的是上传一张将会在WordPress管理区显示我们主题的图片。这张图片需要为300*225像素并且要命名为“screenshot.png”,你可以用下面这张图片或做张你自己的。
你的文件夹结构现在看起来和下面的一样:
我们现在准备进入到控制面板安装我们的新主题。登录到控制面板并且到外观主题。可应该可以看到“WP Bootstrap”做为主题中的一个被列出来。
点击WP Bootstrap主题下面的激活设置它为网站的当前主题。
注意: 如果你正在使用一个线上的网站并且不想让人们看到这个主题正在开发中,确保安装并激活 Theme Test Drive plugin。
两个不是一类东西,没有可比性。
WordPress是一个CMS系统,可以搭建博客及网站。
bootstrap仅是一个移动优先的前端库,单独用只能制作静态网站。
可以用BootStrap制作WordPress主题。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流