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

  • 2017-08-12
  • 492
  • 2
  • 0

前言


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

 ps:由于转义问题,空格自动变成%20,出现%20的地方自行替换为空格,如有不适,请前往原作者网站。

:AC_斜眼:


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

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

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

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

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

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

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

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

body{
	margin:0;
	padding:0;
}

完成了背景色与字体颜色后,我们需要设置下文章标题的样式,将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%20the_permalink();%20?>"> <?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

原作者信息:http://ikmoe.com/5088.html 来源:月宅酱

第一章:

[教程]小伟教你写自己的WordPress主题-第一章:内容

评论

  • 月宅回复
    QQbrowser 9 QQbrowser 9 Windows 7 Windows 7

    不来逛逛,我差点忘了更新这个系列哈哈哈(你的那啥代码框。。。太不方便看了,那啥,对比色不是很好)

    • Waylee回复
      MIUI Browser 9 MIUI Browser 9 Android 6.0.1 Android 6.0.1

      是啊,代码框有bug,一直搞不来,有点郁闷。

发表评论