WordPress主题模板修改制作入门之DIV+CSS篇

看一下时间,上一篇关于wordpress模板函数到现在已经一个月过去了,时间过的真是快啊。其实关于div和css并没有什么东西可写,因为本身我自己是一个菜鸟,左思右想不知道能写什么,但是想想自己以前从对div和css一无所知到看的懂,并能加以修改所花的漫长时间上,所以还是决定写一些,可能会零碎、不专业和肤浅,但希望对像我这样业余的初学者有一些帮助吧。

我一直觉得利用wordpress来学习div和css是非常好的,原因有2,一是wordpress是纯div和css构架,二是wp的div不会很复杂(当然,你也可以把它搞的非常复杂,不过这些是牛人做的),但是涉及的css又非常完整,因为它本身就是一个独立的涉及各方面的但是不复杂的网站。

在开始说wp主题模板前,先简单说一下div和css,div也就是俗称容器,顾名思义,装网页内容的,完整格式是:<div>网页内容</div>,因为一个页面通常会涉及很多的容器,所以要给容器贴上标签以便容易区别和确认,有的标签可能在一个页面里是独立的,只能被用一次,或只用到一次,而有的标签在页面里会反复的被使用到。

对于这两种情况又加以区分:

第一种:独立的,只能用一次或只使用一次的标签,我们用ID来表示,格式是<div id=”标签名”>网页内容</div>

第二种:通用的,经常被用到的标签,用class来表示,格式是<div class=”标签名”>网页内容</div>

有一点需要说明的是,能用id的地方一定可以用class,用class的地方不一定就能用id,但是对于id的唯一性,最好是用id的地方还是用id的好

以我目前的水平,所有涉及div的知识,我知道的就上面这两个了,div装着网页内容被放在一个页面上是至上而下排列的,如果你想按你的意思让各个div容器放在你想要的位置,就得用css来格式定义它,定义div的样式和位置是通过定义上面说的给div确定的标签来实现的。

在css(style.css文件)里对于ID和CLASS标签是通过#、.两个符号来认识的,ID对应的是“#”,CLASS对应的是“.”(英文输入状态下的句号)。具体格式如下:

网页页面上内容:<div id=”id”>id标签下div容器里的内容</div><div class=”class”>class标签下div容器里的内容</div>

css文件里的内容:#id {给id标签容器定义的样式1; 给id标签容器定义的样式2;}  .class{给class标签容器定义的样式1; 给class标签容器定义的样式2;}

总体上就是这样,现在结合wordpress模板来简单说一下,从第一篇我介绍的wp主题模板的文件结构中已经了解各文件是怎么组合的了,我们以组合后的首页为例来看看大多数wordpress是怎么设置div的:

<div id=”wrapper”>——这个是最大的容器,包含所有页面内容的,因为它是唯一的无论哪个页面都只用到一次,所以用id来定义它,当然你也可以用class。

<div id=”header”>这里是头部的内容,也是唯一的</div>

<div id=”content”>页面主要内容部分,也是唯一的</div>

<div id=”comment”>评论部分内容(不在首页),也是唯一的</div>

<div id=”sidebar”>侧边栏的容器,也是唯一的</div>

<div id=”footer”>底部的内容,也是唯一的</div>

</div>这里是收起最大的容器wrapper的,不能丢了。

我们再来看一下index.php里的div设置:(谷歌浏览器奔溃,吓我一跳,还好,这以上的内容都在。。。)

引用header文件

<div id=”content”>——这个容器含侧边栏,一般放在header.php最下面

<div id=”main”>——这个是内容容器

<div class=”title”>日志的题目,不唯一</div>

<div class=”postmeta”>题目下的日期等等之类的,不唯一</div>

<div class=”entry”>日志内容或日志摘要</div>

</div>收起main容器

引用侧边栏

</div>收起conten容器,一般在footer.php文件最上面

关于CSS的属性说多不多,说少也不少,不过足够让我们这样的初学者头晕脑涨的了,而且,各种各样的浏览器对一些属性的兼容性又有所不同,所以,如果你要自己弄wp的主题模板,除了要在本机上搭个php环境外,你还得装至少两个的浏览器,IE和firefox,当然,你也可以不鸟ie浏览器的用户。

下面是我自己捣鼓的几个wp皮,还有两个没弄完整。

1. 仿boblog主题mixice

2. WordPress仿boblog“谷子骚”

3. WordPress仿QQ校友风格

4. 本站目前在用的这个。。。

作者: LMS

天行贱,君子自强自息。

标签

《WordPress主题模板修改制作入门之DIV+CSS篇》有20个想法

  1. 说的非常好呀!完全说清楚ID和class的区别和使用注意点啦,对理解CSS有很大帮助的!支持

  2. 博主我只想问一下“LMS Published@11:41, 2009-07-10, 330 views, 15 comments ”这几个字的代码在哪里修改啊?我想修改这几个的颜色……谢谢!

发表评论

电子邮件地址不会被公开。 必填项已用*标注