打造基于Bootstrap的WordPress主题

发布时间:2018-10-10 11:56:20

打造基于Bootstrap的WordPress主题

简介

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的,虽然设计组件等比我上文介绍的复杂得多,但是原理类似,只要付出心血,就一定能够设计出自己满意的主题。 写在最后,我想谈谈为什么要自己建站建博客。现在大家的生活都社交化了,人们的生活都放在微博、微信也许还有人人,可是那些地方太吵太杂,因此想有一个地方静一静,记录沉淀自己的生活,仅此而已。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”营销推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质 量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体营销推广吧,我们和你一起,开创互联网营销大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。