0°

[教程]月宅教你写WordPress主题-第二章:美化



前言

接着上一章继续吹水,这篇是教你如何美化上一篇的内容。主题嘛,随便写写,只会教你一些简单的东西喔,并不会深入喔,但可以写一套主题喔,以下内容为了方便,均换成拼音代替。


现在该我们的css上场啦,打开它!还有index.php!

首先我们需要一个最外层的div来管理整个页面的主要布局,在<body>的下面与</body>的前面写<div class=”uz-buju”>与</div>。此时的内容应该为:

到css文件下,我们写入下面的代码,为了方便看见布局,我们来给它加点颜色。并且把它居中过去,比较好看。

.uz-buju{
	background: #FFCCD6;
	width: 80%;
	margin: 0 auto;
}

上面这段css预览后的样子:


首先这个本地屁眼作为我们的标题,当然是要够大了!设置下他的颜色、大小、位置。(你会发现蓝色比较丑,这里在css最上面写入)

a{ 
 text-decoration:none;
 color:#fff;
}

设置标题

.uz-h1{
	font-size: 70px;
	text-align: center;
        font-weight: bold;
}

你会发现顶部和周围都有空行,接下来设置在css内写

body{
	margin:0;
	padding:0;
}

完成了背景色与字体颜色后,我们需要设置下文章标题的样式,将div加入到如图位置。

	<div class="uz-wenz">  </div>

可能有的人喜欢用图片做背景的,这里也来加一下。直接拿body开刀就好,新建一个名为img的文件,用来专门放图片,然后设置它的各项background设置。

body{
	margin:0;
	padding:0;
	background: url(img/bj.jpg);
	background-repeat:no-repeat; 
	background-size:cover;
	background-attachment:fixed;
}

修改下.uz-buju的css,加入下面的代码

	border-radius:20px 20px 20px 20px;
	margin-top: 20px;

此时我们的博客页面已经变成这样了,而且访问速度那叫一个快

接下来加入新的div标签并且把uz-wenz修改为如下,再加入新的标签uz-wenz-text,然后到css文件去编辑它。

	<div class="uz-wenz">
		<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a>
		<div class="uz-wenz-text"><?php the_content(); ?>
	</div>

这里的uz-wenz与text都需要进行修改(复制覆盖吧。)

.uz-wenz{
	font-weight: bold;
	font-size: 40px;
	background:#00BEEE;
	width: 100%;
	border-radius:20px 20px 0px 0px;
}

.uz-wenz-text{
	font-weight: bold;
	font-size: 20px;
	background: #88E7FF;
}

此时的博客首页:

结束

本次的文章先说到这里了,为了以后的继续编写,先把首页的布局进行了一定设置。在看了两篇文章后,你已经掌握了WordPress博客主题的制作了吗?是不是很简单呀。轻轻松松撸出一个自己的博客首页!

此时的CSS文件与index

其他

在填完坑后,放出该教程的所有源码,届时你将得到一个博客源码。

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
等待编辑中
6 条回复 A 作者 M 管理员
  1. 看了好想写一个主题。本来最近想自己造轮子写个基于 vue.js 框架的博客,UI已经画好在作业纸上了,时间好像不太够,干脆换wp,写个wp主题算了

  2. 哇!厉害呀!

  3. 签到成功!签到时间:上午1:59:04每日打卡,月宅祝你生活越过越好喔~

  4. 自从看了博主的魔改,眼前一闪一闪的

  5. 签到成功!签到时间:下午10:37:15每日打卡,生活更精彩哦~

欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论