利用Bootstrap构建你的响应式Wordpress主题(一)

1、建立基本主题模板和安装主题
2、页头和页脚,加载引入我们主题必须的css,js文件
3、主题注册Bootstrap菜单、搜索框和导航
4、首页设计index.php
5、创建single.php页
6、创建sidebar.php页
7、创建comments.php页
8、创建archive.php页

1、为了调试方便,要在自己的电脑上搭建wordpress运行环境。建议阅读:
(1)XAMPP最流行的PHP开发环境|511遇见强烈推荐 http://www.511yj.com/wordpress-xampp-php.html
(2)Windows 服务器最傻瓜的Apache+PHP+mysql( APM 环境)ComsenzEXP安装图文教程 http://www.511yj.com/windows-apm-comsenzexp.html
(3)phpStudy 2016 (支持PHP7)让天下没有难配的php环境 http://www.511yj.com/wordpress-phpstudy-2016.html
2、懂一些html,css,php,mysql的基础。
3、能在自己的电脑上安装wordpress。建议阅读 自己动手在你的主机上安装wordpress图文教程
4、掌握Boorstap的一些基础知识。

您可以看看《WordPress主题制作基本模版文件以及基本函数》了解一下主题制作的基础知识。 http://www.511yj.com/wordpress-template-functiosn.html

在最简单的情况下,一个WordPress主题由两个文件构成:

index.php ------------------主模版

style.css ---------------------主样式表

以下不是必须的,但是有特殊意义的模版列表:

bootstrapwp

1、在wp-content > themes > 建我们的主题文件夹bootstrapwp
2、下载最新版 bootstrap
3、解压后把css,js,font三个文件放在我们的主题文件bootstrapwp里面,如下图

bootstrapwp

4、在文件夹bootstrapwp下建立两个文件index.php,style.css
用文本编辑器打开主题的style.css文件复制以下内容,复制时把注释删掉。

  1. /*  
  2. Theme Name: bootstrapwp  //这里填主题名称  
  3. Theme URI: http://www.511yj.com  //这里填主题介绍的网址,没有就填你的博客网址吧  
  4. Description: 基于Bootstrap框架构建的自适应Wordpress主题  //这里填主题的简短介绍  
  5. Version: 0.1  
  6. Author: 511遇见  
  7. Author URI: http://www.511yj.com  //作者的网址  
  8. Tags: Bootstrap,自适应,Wordpress   //标签,多个用半角逗号隔开  
  9. */

5、往主题目录里面上传一个名为screenshot.png的图片就行了,图片尺寸是300 * 225,我们现在准备进入到wordpress后台控制面板安并且到外观>主题。可应该可以看到“ Bootstrap WP”做为主题中的一个被列出来。

bootstrapwp

点击主题详情

bootstrapwp

点击 Bootstrap WP题下面的启用置它为网站的当前主题。
6、文件夹bootstrapwp下建立以下三个文件

头部 header.php, 使用get_header()嵌入;

侧栏 sidebar.php, 使用 get_sidebar();嵌入;

底部 footer.php, 使用 get_footer()嵌入;

在index.php中分别使用以上命令嵌入这三个文件

  1. <?php get_header(); ?>//调用头部文件的内容
  2. <?php get_sidebar(); ?>//调用边栏文件的内容
  3. <?php get_footer(); ?>//调用网页底部文件的内容

如果你想加载多个边栏,比如右边栏,先建立一个sidebar-right.php,主意命名格式sidebar-right,让后在引入文件中,php get_sidebar('right'); 这样就能加载多个边栏文件了。

  1. <?php get_header(); ?>//调用头部文件的内容
  2. <?php get_sidebar('right'); ?>//调用右边栏文件的内容
  3. <?php get_sidebar(); ?>//调用边栏文件的内容
  4. <?php get_footer(); ?>//调用网页底部文件的内容

当然不同的页头,页脚都可以使用这种载入方法,所以你可以在一个主题中创建不同的页脚,和页头文件,让你的主题风格多样性。


发布日期:

所属分类: BootStrap, WordPress 主题 标签: