1. 首页
  2. 网络干货

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

前言

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


现在该我们的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;

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

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

	<div class="uz-wenz">
		<a href="<?php the_permalink(); ?>" rel="external noopener nofollow" > <?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

其他

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

文章目录
  • 版权声明:本文基于《知识共享署名-相同方式共享 3.0 中国大陆许可协议》发布,转载请遵循本协议
  • 文章链接:https://ikmoe.com/5088.html [复制] (转载时请注明本文出处及文章链接)
上一篇:
:下一篇

6 条评论

gravatar

  1. Direct Lender Loans 1
    初来乍到

    personal loans unsecured loans personal fast cash online advance cash

    回复Direct Lender Loans
  2. Ylune 1
    初来乍到

    看了好想写一个主题。本来最近想自己造轮子写个基于 vue.js 框架的博客,UI已经画好在作业纸上了,时间好像不太够,干脆换wp,写个wp主题算了

  3. txh 1
    初来乍到

    哇!厉害呀! :纳尼!:

  4. 月宅 7
    樱花!

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

  5. c0smxsec 2
    喜欢月宅

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

    回复c0smxsec
  6. 月宅 7
    樱花!

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

当前页面评论被关闭,原因如下: