wordpress模板制作实战教程.pdf

wordpress模板制作教程一、模板制作常用软件：1.1图像处理软件PhotoShop(简称PS):下载|教程1.2网页制作软件Dreamweaver(简称DW)：下载|教程二、需要掌握的语言：2.1XHTML：简介|教程2.2CSS：简介|教程2.3英语：仅普通模板制作的话，不需要掌握太多的PHP语言，能看懂单词是什么意思就可以了。三、开发环境：建议安装ApacheHTTPServer，在本机环境下调试模板，这样，每一次改动都可以即时的反馈出来。四、入门阶段：从修改别人的模板开始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的改变，取决于你在博客面。Sidebar模板文件：这个模板文件控制你的页面链接列表，类别链接列表，存档链接列表，blogroll列表和其他Footer模板文件：像header.php模板文件一样，footer通常不会因为页面的改变而改变，你可以在这里放置但是通常是版权信息。（为提升页面加载速度，我会把统计代码等载入比较费时间的东西放在这个文件中最后载5.2常用模板标签及调用方法：WordpressTemplateTags写在最后的话：你能做什么，取决于自己学到了多少。对知识掌握的越多、越牢固，能实现的功能也就越多。这不仅仅是在玩BL精通，这些知识足以改变自己的生活。精通设计，可以做“网页设计工程师”、“交互设计师”、“UI设计师”；精通X可以做“页面重构工程师”、“前端开发工程师”；精通插件制作，可以去做PHP程序员。在Google有一句话，I把一件事做到极致，都会有所收获。希望此文能对您有所帮助。欢迎访问我的博客http://06551.com免费分享教程，爱心接力分享ing!