wordpress主题制作菜鸟教程基础篇

想到你马上就可以做出属于自己的wordpress主题,是不是很激动也很兴奋?请淡定,这篇文章还是不会告诉你如何编写主题代码,咱们需要继续打基础,作为一只菜鸟,需要有打好基础的觉悟;了解php、html、css文件的基础性语句书写规范,构建wordpress主题页面结构框架图,这是本文需要完成的任务。

先来个最简单的,我给它起了个名字叫“有始有终”,就是说无论你写的是html语句、php语句、还是css语句,有开头还必须有结尾,程序语句始终保持闭合状态,浏览器才能正确解析并且显示出想要的效果来。

比如,在html代码中,<body>代表你开启了一个代码的开关,当你把想写的代码写完之后,你必须要使用一个</body>符号来关闭这个代码开关,这不仅符合程序编码的要求,还具有一种对称的美感,大家想一想是不是这个道理?<body>只是我举得一个例子,在html中的其他标记也要遵守有始有终的原则,这个很容易记住,再多举几个例子吧,只要出现了<div>, 那么它的后面必须有一个</div>和它配对,出现了<h1>, 后面也必须有一个</h1>和它配对。

有始有终原则在php语句中也是必须遵守的,一个规范化的php语句的格式:<?php   代码1;代码2;  ?> ,大家看到了吧,所有的php程序语句都要以<?php 开头,以?>配对结尾,每一句代码之间还要使用英文的分号进行隔开。嘿嘿,这个配对不是完全对称啊,没办法,人家就是这样规定的。

css语句中的配对就更容易了,它是用花括号来进行语句的打开和关闭的,即用{ 符号来打开一个语句,再用 } 符号来关闭一个语句。举个简单的例子吧,body{background-color:red;}  ,这就是一个最简单的css语句啦,花括号外面的东西告诉浏览器你的css设置要施加到谁的身上,很显然,这句代码是要施加到body身上的,body是什么?就是你的整个电脑屏幕!花括号里面的东西,告诉浏览器你想要的效果是什么,这句代码是定义背景颜色的,它将你的整个电脑屏幕的背景颜色定义成了红色。ok,就这么简单。

好了,上面的有始有终原则希望大家一定要记住。接下来我们讲网页结构的知识。

wordpress主题文件虽然是php编码的,但是它依然摆脱不了html的影响,它还是需要使用html标记进行网页结构的布局。插一句,网上讲解css的教程中提到了“盒子”模型,其实我觉得html网页结构也可以认为是一个个的“盒子”,当然更好的比喻是“拼图”,整个网页是一个拼好的大图片,不同的标记代表的就是一小块一小块的小图片。拼图游戏大家都不陌生,应该更好理解。

常用的html语法标记符号,body、div、p、span、h1~h6;现在由于html5的引入,又增加了header、footer、section、article、aside等标记符号。有没有感觉头有点晕?没关系,你就把这里每一个语法标记符号想象成一个个的小图片,下面我们就要用它们来玩拼图游戏,拼成一个网页。一定要记住,在拼图的时候有一个有始有终原则要遵守哈。

下面展示一下咱们即将制作的这个主题的网页结构示意图,鼠标单击可以放大,看的更清楚一些。

basic-framework

我相信,大家都能看懂我是怎么拼的这个图了吧?不就是用一小块一小块的排列起来,然后就构成了最大的那个wrapper图片么?对不对?不明白的欢迎给我留言探讨哈。

下面我来给出上面这个拼图效果的html编码,很容易的,大家都能看懂的我相信。

<div id="wrapper">

<header>
</header>

<section id="main">

<section id="posts">
</section>

<aside id="sidebar">
</aside>

</section>

<footer id="footer">
</footer>

</div>

有始有终的原则,大家检查一下我的代码,是不是都完美的实现了?解释一下id是用来干什么的,以免有看不懂的。id其实是css的专用选择器,它就像是身份证号码似的,咱不是上面说了嘛,像div、header等都好比是拼图,那么id就是相当于给拼图编号或者说是起名字啦,比如下面的这句代码,它的意思就是告诉浏览器,我是一个名字叫做wrapper的div,就这么简单。

<div id="wrapper"></div>

over,这一篇文章的内容你掌握了吗?


29 comments

发表评论

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

Time limit is exhausted. Please reload CAPTCHA.