wp模板制作详细教程

 时间:2024-10-27 16:41:36

1、模板制作常用软件:

2、1图像处理软件PhotoShop(简称PS)

3、2网页制作软件Dreamweaver(简称DW)

4、需要掌握的语言:

5、1XHTML:简介|教程2.2CSS:简介|教程2.3英语:仅普通模板制作的话,不需要掌握太多的PHP语言,能看懂单词是什么意思就可以了。

6、开发环境:

7、建议安装ApacheHTTPServer,在本机环境下调试模板,这样,每一次改动都可以即时的反馈出来。

8、入门阶段:从修改别人的模板开始

9、1选择要修改的模板如果想做自己的主题,建议初学者先选择一个结构类似的主题(三栏?两栏?右边栏?左边栏?),在他的基础上进行改动,参考对方代码的同时,巩固自己之前学过的知识。等积累了一定的经验并熟悉PHP语言后,再自行创建模板。本文以两栏结构的Sunshine主题为例。4.2设计自己的主题假如博主不喜欢黄色为主色调,我们需要做的是比照“模仿”作品,先用PS设计出自己需要的风格。

wp模板制作详细教程

11、3制作模板在设计的过程中,我们了解到更改这个主题,其实只需要更改几个图片,并调整sidebar.php到右侧就可以了。

wp模板制作详细教程

13、先从好改的地方下手,将Sunshine案例中的侧边栏sidebar.php从左侧换到右侧:用DW(也可以用windows的记事本)打开style.css,搜索“#sidebar”

wp模板制作详细教程

15、通过之前对CSS语言的学习,可以了解到,搜索结果中的#sidebar内的float:left是控制侧边栏左浮动的,我们将其更改为float:right,并用同样的方法查找#main,将他的右浮动属性更改为float:left,这样,侧边栏就换到了右侧,主内容区换到了左侧。注意:不同的主题作者,可能会应用不同的名称来定义“侧边栏”、“主内容区”,如果之前学过XHTML,可以在.php文件中查找对应元素的标签。

16、下面开始图片的改动:打开header.php文件,查找到头部调用的图是”img/header.jpg”,然后用自己设计的头部通栏图替换掉该文件。

wp模板制作详细教程

18、用同样的方法替换掉img文件夹下的“top_bg.jpg”(从style.css文件中,我们可以知道这张图片的作用是给页面平铺背景图)“title_bg.jpg”等文件。在图片替换的过程中,导航条的替换稍微有些难度:

wp模板制作详细教程

20、导航条一共分为3个部分,“背景nav.gif”“当前所在的页面nav_hover.gif”和“分隔线nav_img.gif”,细心将这些图片替换完成后,一个主题基本上就修改完成了。点此查看修改后的主题注意:在图片替换的过程中,可以发现,有些图片的宽度只有1像素,这是为了提高页面加载速度用CSS平铺背景的方法来做的优化处理。建议大家同样的背景图,切的越小越好。而有些图片宽度比较大,例如nav_hover.gif,这样做的目的是,当字数很多的时候,可以自适应大小,正常显示。

21、进阶:原创并优化主题

22、1了解每个页面是做什么的Header模板文件:通常在这个文件中包含你博客的标题(title)和描述(description)。而且它们通常在整个博客中保持一致。

wp模板制作详细教程

24、Index模板文件:这个模板文件包含你的日志的标题,内容(每篇日志的文本和图片)和日志的元数据(指的是每篇日志的信息,包括谁是作者,什么时候发表,在那个分类下,有多少留言等等)。Index.php的改变,取决于你在博客的那个页面。

wp模板制作详细教程

26、Sidebar模板文件:这个模板文件控制你的页面链接列表,类别链接列表,存档链接列表,blogroll列表和其他widget。

wp模板制作详细教程

28、Footer模板文件:像header.php模板文件一样,footer通常不会因为页面的改变而改变,你可以在这里放置任何东西,但是通常是版权信息。(为提升页面加载速度,我会把统计代码等载入比较费时间的东西放在这个文件中最后载入)

wp模板制作详细教程

30、2常用模板标签及调用方法:WordpressTemplateTags

  • 沙白螺冬瓜海虾汤
  • 巴丹吉林沙漠自助游攻略
  • 哪些人群最应该吃海参
  • 血精症怎么治疗
  • 如何辨别哪些是正规的直销公司?
  • 热门搜索
    命运多舛怎么读 风是怎么形成的 老公用英语怎么说 音标怎么读 脚后跟疼是怎么回事 苹果pay怎么用 营业执照怎么办 电脑内存不足怎么清理 母亲节贺卡怎么做 我的世界花盆怎么做