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, 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。
作者:辛晶晶 日期: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文档,用色块把大致的样子表现出来,内容如下:
header
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。
WordPress 主题制作指南(二)
WordPress 主题制作指南(一)
WordPress 主题制作指南(三)
WordPress 主题制作指南(四)
WordPress 主题制作指南(五)
wordpress主题制作教程简单说明
wordpress主题制作教程6?–?sidebar.php制作流程
仿制WordPress主题
WordPress的架设指南
WordPress 主题教程 #1:介绍
WordPress主题完全翻译教程 ? Wopus中文博客平台 - Wordpress
wordpress主题下载 吾铺博客
黑莓WordPress主题: BerryPress | 帕兰映像
WordPress 主题教程 #3:开始 Index.php
WordPress 主题教程 #4a:Header 模板
WordPress 主题教程 #5:主循环
WordPress的架设指南-钱涂无量
WordPress的架设指南-钱涂无量
数据库设计指南(二)
主题电脑主题制作教程
wordpress
WordPress 主题教程 #2:模板文件和模板
WordPress 主题教程 #4b:Header 模板 2
搭建自己的Blog平台 -- WordPress 新手指南