WordPress 主题制作指南(二)

来源:百度文库 编辑:神马文学网 时间:2024/06/05 03:00:47
WordPress 主题制作指南(二)
作者:辛晶晶 日期:2007-10-06
字体大小:小中大

A、创建你的主题文件夹。
转到你的 WordPress 主题文件夹,应该在xampp/htdocs/wordpress/wp-content/themes。创建一个新的文件夹,命名为 demo1。
B、创建 index.php 和 style.css 文件。
C、安装你的主题。
打开浏览器。在地址栏输入http://localhost/wordpress/wp-login.php。登录到你的 WordPress 管理界面。(这里能够看到 WordPress 登录页面是因为你在第1步的时候启动了 Xampp。否者的话,在这里你的浏览器会报找不到的错误。)在管理界面下到 Presentation 菜单并点击名字为 demo1 的主题去激活它。
D、编辑 index.php 文件。
首先先决定模版的整体样式,demo1被决定为两栏模版、固定宽度、居中,所不同的是在内容和页脚中间我决定增加一个区块。由此先做一个简单的html文档,用色块把大致的样子表现出来,内容如下:

content


content, menu, sub-menu, footer这四个div都从属于page这个div,这样只需要对page作定义就能控制整个blog内容、侧栏、页脚的位置了。header部分一开始是决定放一个100%宽度的图片,所以独立在page之外。
接下来创建style.css来定义页面的具体表现:
html, body { margin: 0; padding: 0; }   #header { float:left; overflow:hidden; display:inline-block; background:#fcc; height:140px; width:100%; }   #page { width:784px; margin:0 auto 0 auto; padding:0 0 0 0; }   #content { float:left; overflow:hidden; display:inline-block; background:#9cf; width:520px; height:340px; padding: 0 0 0 0; }   #menu { float:right; overflow:hidden; display:inline-block; background:#ffc; width:213px; height:340px; }   #sub-menu { float:left; overflow:hidden; display:inline-block; background:#cfc; width:100%; height:140px; }   #footer { float:left; overflow:hidden; display:inline-block; background:#ccf; width:100%; }
接下来就是把这个index.html文件拆成WordPress模版文件中的header.php, index.php, sidebar.php, footer.php。