wordpress模板制作教程.pdf

wordpress 模板制作教程 一、模板制作常用软件： 1.1 图像处理软件 PhotoShop(简称PS): 下载 |教程 1.2 网页制作软件 Dreamweaver(简称DW)：下载 |教程 二、需要掌握的语言： 2.1 XHTML：简介 |教程 2.2 CSS：简介 |教程 2.3 英语：仅普通模板制作的话，不需要掌握太多的PHP语言，能看懂单词是什么意思就可以了。 三、开发环境： 建议安装Apache HTTP Server，在本机环境下调试模板，这样，每一次改动都可以即时的反馈出来。 四、入门阶段：从修改别人的模板开始 4.1 选择要修改的模板 如果想做自己的主题，建议初学者先选择一个结构类似的主题（三栏？两栏？右边栏？左边栏？），在他的基 动，参考对方代码的同时，巩固自己之前学过的知识。等积累了一定的经验并熟悉PHP语言后，再自行创建模板。 本文以两栏结构的 Sunshine 主题为例。 4.2 设计自己的主题 假如博主不喜欢黄色为主色调，我们需要做的是比照“模仿”作品，先用PS设计出自己需要的风格。 4.3 制作模板 在设计的过程中，我们了解到更改这个主题，其实只需要更改几个图片，并调整sidebar.php到右侧就可以了。 先从好改的地方下手，将Sunshine案例中的侧边栏sidebar.php从左侧换到右侧： 用DW（也可以用windows的记事本）打开style.css，搜索“#sidebar” 通过之前对CSS语言的学习，可以了解到，搜索结果中的#sidebar内的float:left是控制侧边栏左浮动的， 为float:right，并用同样的方法查找 #main，将他的右浮动属性更改为float:left，这样，侧边栏就换到了 容区换到了左侧。 注意：不同的主题作者，可能会应用不同的名称来定义“侧边栏”、“主内容区”，如果之前学过XHTML， 件中查找对应元素的标签。 下面开始图片的改动：打开header.php文件，查找到头部调用的图是”img/header.jpg”，然后用自己设 替换掉该文件。 用同样的方法替换掉img文件夹下的“top_bg.jpg”（从style.css文件中，我们可以知道这张图片的作用 背景图）“title_bg.jpg”等文件。 在图片替换的过程中，导航条的替换稍微有些难度： 导航条一共分为3个部分，“背景nav.gif”“当前所在的页面nav_hover.gif”和“分隔线nav_img.gif”，细 片替换完成后，一个主题基本上就修改完成了。点此查看修改后的主题 注意：在图片替换的过程中，可以发现，有些图片的宽度只有1像素，这是为了提高页面加载速度用CSS平铺背 做的优化处理。建议大家同样的背景图，切的越小越好。而有些图片宽度比较大，例如nav_hover.gif，这样做 当字数很多的时候，可以自适应大小，正常显示。 五、进阶：原创并优化主题 5.1 了解每个页面是做什么的 Header 模板文件:通常在这个文件中包含你博客的标题（title）和描述（description）。而且它们通常在整 持一致。 Index 模板文件：这个模板文件包含你的日志的标题，内容（每篇日志的文本和图片）和日志的元数据 （ 的信息，包括谁是作者，什么时候发表，在那个分类下，有多少留言等等）。Index.php 的改变，取决于 面。