最后更新时间为 2018年10月10日
简介
WordPress是基于PHP的常用个人信息发布平台，很多个人网站都基于此打造。关于WordPress：http://wordpress.org/ Bootstrap是Twitter发布的前端开发框架，让web开发更迅速、简单。关于Bootstrap：http://getbootstrap.com/
动机
最早接触WordPress是在2010年，使用WordPress搭建了自己的个人网站，非常方便。WordPress自带的主题很不错，加上可以在线下载很多的精美主题，所以个性化不是什么问题。但是每个人都希望拥有独一无二的东西，所以自己跟着我爱水煮鱼（http://blog.wpjam.com/）的教程，做了一套简单的主题。工作后感觉时间过的很快，也逐渐淡出了人人网，因此自己的网站就肩负起记录生活的重任。虽然是做后台开发工作，但也对前端的一些东西还是比较感兴趣。随着移动互联网的兴起，响应式布局（Responsive Design）开始流行。在很多前段UI框架中，Bootstrap发展很快，除了支持响应式设计，还提供了很多组建，让前台开发更加方便。喜欢Bootstrap的简洁，并且需要解决之前主题的一些问题，因此决定重新开发一套基于Bootstrap的WordPress主题。
WordPress主题框架
WordPress主题都存放在”/wp-content/themes/“文件夹中，每个主题拥有自己的文件夹。一个最简单的WP主题，至少包括：index.php, style.css两个文件。一般的网页设计，从上到下一般分为header，body，footer三个部分，因此可以单独的建立header.php, footer.php两个文件，不同的页面通过<?php get_header(); ?>及<?php get_footer(); ?>来组装成一个完整页面，达到共用的目的。先不用管这两个文件的内容，我们先写一个简单的index.php页面。 index.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>S&G</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>OK, 最基本的index.php完成了，但是目前和WordPress及Bootstrap一毛钱关系都没有，不过你可以应用这个主题，虽然只能显示“Hello, World!”。接下来我们就要用到WordPress及Bootstrap提供的各种强大功能。 导航栏是一个网站最基本的内容，因此我们首先打造导航栏。WordPress展示内容可以通过Post及Page，一般导航栏中就是各个Page的链接。WordPress部署好后，会建立一个Sample Page，我们可以使用<?php wp_list_pages(); ?>来输出各个页面的链接。我们把index.php中的<body>标签中内容分为header,main,footer三个部分，并且加上输出导航栏的代码，新的index.php变化为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>S&G</title>
</head>
<body>
<div class="header">
<ul>
<?php wp_list_pages(array('title_li' => '')); ?>
</ul>
</div>
<div class="main">
<h1>Hello, World!</h1>
</div>
<div class="footer">
</div>
</body>
</html>效果如下，比较丑。 接下来，我们就要使用Bootstrap来进行基本布局及导航栏的打造。首先下载Bootstrp库，并放置到自己的主题目录下。bootstrap需要jquery，所以同样下载好。修改后的文件结构如下： 使用bootstrp，我们需要在<head>中引用bootstrap.css及bootstrap.js两个文件(或者其相应的压缩版本)。bootstrap包括了导航条组件，使用起来只要按照相应的文档结构编写并标注相应的类即可使用。修改过的index.php代码并添加新的内容后，index.php如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>S&G</title>
<link rel="stylesheet" type="text/css" href="http://in.sdo.com/<?php bloginfo('stylesheet_url');?>" >
<link rel="stylesheet" type="text/css" href="http://in.sdo.com/<?php echo get_template_directory_uri(); ?>/bootstrap/css/bootstrap.css" >
<script type="text/javascript" src="http://in.sdo.com/<?php echo get_template_directory_uri(); ?>/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://in.sdo.com/<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.min.js"></scrip>
<?php wp_head();?>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://in.sdo.com/<?php echo home_url(); ?>">S&G</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<?php wp_list_pages(array('title_li' => '')); ?>
</ul>
</div>
</div>
</div>
</div>
<div class="main">
<div class="container">
<h1>Hello, World!</h1>
</div>
</div>
<div class="footer">
<div class="text-center">
<p>S&G©2013</p>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>现在的页面如下： 现在，基于Bootstrap的基本主页搭建完了，虽然还没有文章内容，但是我们需要将index.php的header和footer拆解出来，这样 就可以在各个页面复用。拆解后的三个文件分别如下： header.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>S&G</title>
<link rel="stylesheet" type="text/css" href="http://in.sdo.com/<?php bloginfo('stylesheet_url');?>" >
<link rel="stylesheet" type="text/css" href="http://in.sdo.com/<?php echo get_template_directory_uri(); ?>/bootstrap/css/bootstrap.css" >
<script type="text/javascript" src="http://in.sdo.com/<?php echo get_template_directory_uri(); ?>/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://in.sdo.com/<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.min.js"></scrip>
<?php wp_head();?>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://in.sdo.com/<?php echo home_url(); ?>">S&G</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<?php wp_list_pages(array('title_li' => '')); ?>
</ul>
</div>
</div>
</div>
</div>
<div class="main">index.php
<?php get_header(); ?>
<div class="container">
<h1>Hello, World!</h1>
</div>
<?php get_footer(); ?>footer.php
</div>
<div class="footer">
<div class="text-center">
<p>S&G©2013</p>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>至此，基本的框架 搭建完毕，下面我们就可以针对细节及具体页面开发。
主页设计
主页的设计因人而异，对于我来说，网站以记录生活为主，并且自己比较喜欢摄影，因此主页打算放上自己的文章。由于我的每篇文章都有featured image，因此打算使用卡片式的设计。WordPress获取文章，需要用到一个重要的概念：The Loop。简单来说，就是在你的主题模板中，有一个php循环，每个循环内部，可以获取这篇文章的所有信息，比如标题，内容，图片等等。在这个循环内部，我们编写模板来展示文章。在我的设计中，每篇文章为一张卡片，那怎样能够简单整洁又能够具有响应式的布局呢？这时候就要用到Bootstrap的栅格系统。 在之前的代码中，已经可以看到，有个“.container”类。这个类就是将内容居中，并且根据不同设备大小来使内容适应屏幕。在container中，加入一个类为“.row”的div，并在row中加入类为“.col-md-x”的div，需要布局的内容就放在不同的col-md-x中。默认情况下，一个row会被分成12列，因此指定col-md-x中的x，就能指定这个div占用几列。在这里，md是中等屏幕的意思，除此之外，还有ld，sm，xs等类，比如sm就是小屏幕（平板）的意思，响应式布局也就在这里体现。比如下边的代码：
<div class="row">
<div id="div1" class="col-md-3 col-sm-4"></div>
<div id="div2" class="col-md-4 col-sm-5"></div>
</div>就表示div1在中等屏幕中，占据12列中的3列，而在小屏幕中占据4列，div2在中等屏幕中，占据12列中4列，在小屏幕中占据5列。 根据上面的布局及The Loop，修改后的主页如下，每篇文章包括featured image，标题，简介，及时间。修改后的index.php如下： index.php:
<?php get_header(); ?>
<div class="container">
<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="col-md-4 col-sm-6">
<div class="thumbnail div-post-content">
<image class="img-vertical-center img-responsive" src="http://in.sdo.com/<?php echo get_template_directory_uri()."/image/img".rand(1,3).".jpg";?>"/>
<a href="http://in.sdo.com/<?php the_permalink() ?>" rel="postlink" title="<?php the_title_attribute(); ?>">
<h4 class="text-left"> <?php the_title(); ?></h4>
</a>
<div class="div-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="div-meta-data">
<span><?php the_time('Y-m-d')?> by <?php the_author();?><span>
</div>
</div>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, this page does not exist.'); ?></p>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>在大屏幕的表现如下：可以看到，对于不同的屏幕，Bootstrap的栅格系统能够很好的支持响应式布局，因此我们能够做到一套主题适应多种大小的屏幕。 经过一些细节的雕琢，至此，主页的布局及编写到此结束。
阅读页设计
WordPress中，每篇文章的展示需要single.php，如果没有的话，系统会默认调用index.php。相对而言，个人感觉阅读页的设计会相对复杂一点，因为页面组成部分更多，而且每个部分的设计又不同。一般的阅读页面，左边为文章内容，占据大部分宽度，右侧有一个窄条的面板，用来放置分类、网站管理、最近评论、最近文章等内容。面板的这部分，可以单独的编写sidebar.php来实现，并且WordPress支持动态内容面板，有多个Widget可以使用。除了面板外，还有一个重要的文件就是functions.php，这个文件可以写一些自定义的函数，用来覆盖系统函数的默认行为及其他的一些设置，大大提高了个性定制程度。关于sidebar.php的定制，网上文章很多，再此就不展开讲，如果没有sidebar.php文件的话，系统会默认输出一个列表。除了文章内容及右侧面板，一般评论会放在页面最下方，WordPress对文章评论也提供了很好的支持。评论也可以自定义，通过function.php及comments.php的组合就可以做到，同样我们使用WordPress默认的获取评论的方法来得到。 我们首先编写single.php的内容，以它为框架在细化每一个部分。singe.php同样用到了The Loop，因此可以将index.php复制一份来修改。修改后的如下： single.php：
<?php get_header();?>
<div class="container">
<?php while(have_posts()):the_post();?>
<div class="row">
<div class="col-md-9">
<div class="thumbnail">
<div class="post-content">
<h2 class="post-title"><?php the_title(); ?></h2>
<div>
<?php the_content(); ?>
</div>
<ul class="pager">
<li class="next"><?php previous_post_link('%link'); ?></li>
<li class="previous"><?php next_post_link('%link'); ?></li>
</ul>
</div>
<div class="post-comment">
<?php comments_template(); ?>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php endwhile;?>
</div>
<?php get_footer();?>首先，我将所有的内容放入一个container中居中，然后通过bootstrap的栅格系统分为左9右3的布局。右三用来输出sidebar的内容，通过<?php get_sidebar(); ?>可以得到一个默认的输出。左9从上到下依次为文章标题，正文及评论，获取评论是通过<?php comments_template(); ?>来得到。编写列表的css稍微美化一下，现在打开一篇文章的效果如下：
可以看到右侧的sidebar很丑，评论框也不怎么好看，因此可以通过自己定制sidebar及comment form来实现美化。具体的编码不详细展开，大家可以看看WordPress的官网来参考一下。 一般来说，如果是单纯的文字博客，上面的框架已经搭好，大家可以自己根据需求定制外观。 WordPress强大的功能及灵活性，可以使我们轻松搭建自己的网站，并且非常多的插件，使得个人建站大大的简化。使用Bootstrap，可以极大地简化前端开发的工作，并且拥有丰富的组件及设计，支持响应式布局，是非常好的前端框架，让你的网站更加的个性。 本文只是从最简单的方式来介绍使用Bootstrap开发WordPress 的主题的过程，很多细节及设计都没有展开。如果开发一个完整且个性的主题，让自己的网站独一无二，还是需要更多的时间来细化很多东西。例如，我们创新院的博客也是基于WP的，并且使用的主题也是基于Bootstrap的，虽然设计组件等比我上文介绍的复杂得多，但是原理类似，只要付出心血，就一定能够设计出自己满意的主题。 写在最后，我想谈谈为什么要自己建站建博客。现在大家的生活都社交化了，人们的生活都放在微博、微信也许还有人人，可是那些地方太吵太杂，因此想有一个地方静一静，记录沉淀自己的生活，仅此而已。
湘公网安备43020002000238