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

WordPress主题模板修改制作入门之模板函数篇

在上篇介绍了 关于wp主题模板的文件结构 到现在又好几天过去了,时间真快啊,我一个模板断断续续的都还…

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

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

在开始说 wp 主题模板前,先简单说一下 div 和 css,div 也就是俗称容器,顾名思义,装网页内容的,完整格式是:<div class id>网页内容</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的:

WordPress主题模板修改制作入门之文件结构篇

本人Wordpress超级菜鸟,不懂php,在自己摸索修改模仿了几张Wordpress主题模板之后(…

<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

仿boblog主题mixice发布分享

关于主题 又是翻博客发现的一个老主题,一起加入“博客补完计划”。 这个主题模仿自 boblog,原 …

2. WordPress仿boblog“谷子骚”

WordPress 简单双栏主题“谷子骚”下载

关于主题 翻博客以前的文章,发现当时分享了这么个主题,还留有本地下载地址,下载下来一看,代码太旧了,…

3. WordPress仿QQ校友风格

WordPress仿QQ校友风格提供下载

主题太丑,就不折腾了 在一高中同学的blog上看到这款皮肤,虽然绿绿的,但是看着很感觉挺舒服的,很喜…

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

THE END

评论 20

  1. 🏅

    :razz:
    很有用啊,谢谢了。

  2. 🏅🏅🏅

    偶像!我飘过!

  3. 🏅

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

    1. 🏆🏆🏅

      一般情况下是在<div class="postmetadata">这个div里,不过不同的主题会捎有区别.

  4. 🏅

    不错,学习了!

  5. 🏅

    这行表情则么弄得

    1. 🏆🏆🏅

      添加表情看这里:http://lms.im/archives/243

  6. 🏆🏅🏅

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

    1. 🏅

      :eek: 世界太小了 在这里都能碰到木木…… O(∩_∩)O~ 博主…… 呵呵

        1. 🏅

          来支持下博主 :oops: O(∩_∩)O~ 又看到木木了……

  7. 🏆🏅🏅

    天天搞WP啊 :evil:

  8. 🏆🏅🏅

    嗯,那个主题加密咋个整的?

      1. 🏆🏅🏅

        你的博客是通过Prower v2改的还是自己写的,因为我看到Prower V2的影子了

        1. 🏆🏆🏅

          不是prower改的,不过原来订阅的那块图片是直接从它那拿的。

发表评论

幸会!