查看完整版本: [模板制做指南]手把手教你做主题(WP Sharp主题移植教程)

[模板制做指南]手把手教你做主题(WP Sharp主题移植教程)

Author: Small Potato
Author URI: [url=http://www.wpdesigner.com/]http://www.wpdesigner.com/[/url]

适用于最新的1.7,default.html 模板中有较详细的注释,可以自行修改

使用方法:

1.将 STYLE 中文件传Zblog的STYLE文件夹下
2.备份你的TEMPLATE文件,然后用包中的覆盖
3.zblog后台->网站设置->界面样式名称 设为 sharp
4.文件重建

请尊重设计者的劳动,版权归WP,Z-Blog以及主题原作者所有!

[color=DarkRed][2007.2.8 更新] [/color]对b_article_comment.html与b_article-guestbook.html稍做修改
[color=DarkRed][2008.6.8 更新] 更新一个ZTI包，适用于1.8最新版[/color]

首页及分页模板移植教程[完成5个模板文件]

[b]前言:[/b] 简单的主题移植其实并不难,所要做的只是替换相应的标签,小改点原样式表.但如果不移植模板,只在样式表上做移植则相对较难,而且实现的效果有限.

[b]模板[/b]：指Z-Blog程序中[b]TEMPLATE[/b]文件夹下的文件

zblog的首页模板由 default.html 定
分页包括分类显示页,同一tag显示页,由catalog.html定 ,其结构跟 default.html 是一样的,做好 default.html 后复制一个改个名就是catalog.html 了.

default.html 中只引用其它三个模板:
[list=1]
[*]b_article-multi.html,文章摘要,其引用标签是<#template:article-multi#>[*]b_article-istop.html,置顶文章 自动显示,可以由b_article-multi.html修改来[*] b_pagebar.html 分页条 ,引用标签是<#template:pagebar#>[/list]
模板移植前需要:
[list=1][*][url=http://themes.wordpress.net/]下载WP主题[/url](废话:L ),[*][url=http://themes.wordpress.net/testrun/?wptheme=1501]保存该主题的首页和日志页的页面源代码[/url](只要将其中相应内容换成zblog的相应标签就成zblog的模板了),[*][url=http://bbs.rainbowsoft.org/viewthread.php?tid=253&extra=page%3D1]Z-Blog模版标签库及相关说明[/url](必备),[url=http://bbs.rainbowsoft.org/viewthread.php?tid=517&extra=page%3D1]默认模板侧边栏代码说明[/url](方便查阅)[*]Z-Blog默认模板(当然是在此基础上改咯)[/list]
实战阶段:

[size=3][b]1.[/b][/size]default.html 制作
[list=1][*]   对你保存的wp主题的首页[url=http://themes.wordpress.net/testrun/?wptheme=1501]源代码[/url]精简,即页面上的文章删去只剩一篇,侧边栏留一两个模块当参考[*]   把文章代码复制至b_article-multi.html中,然后用<#template:article-multi#>[*]   对应修改侧边栏[*]   对应修改页面底部的声明,以上两个可以应用到各主模板中的[/list][size=3][b]2.[/b][/size]b_article-multi.html制作
     对应wp的文章源代码修改,即用zblog的模板标签替换,如文章标题用<a href="<#article/url#>"><#article/title#></a>文章内容用<#article/intro#>换等等.

[size=3][b]3.[/b][/size]b_article-istop.html可由b_article-multi.html修改来,即在标题改成: [color=DarkSlateGray]置顶:<a href="<#article/url#>"><#article/title#></a>,[/color] b_pagebar.html用默认的就可以,对应WP主题修改也行

[[i] 本帖最后由 月上之木 于 2007-2-11 01:40 编辑 [/i]]

单日志页模板移植教程[完成9个模板文件]

zblog的单日志页模板由 single.html定,其用到的模板相对多一点
[list=1][*]b_article-single.html               单日志页文章,引用标签是<#template:article-single#>[*]b_article_trackback.html         引用列表,<#template:article_trackback#>[*]b_article_mutuality.html         相关文章,<#template:article_mutuality#>[*]b_article_comment.html         评论条,<#template:article_comment#>[*]b_article_commentpost.html   评论发表框,<#template:article_commentpost#>[*]b_article_commentpost-verify.html  验证码的模板,<#template:article_commentpost-verify#>[*]b_article_nvabar_l.html与b_article_nvabar_r.html 为上下文导航模板,<#template:article_navbar_l#>与<#template:article_navbar_r#>[/list]精简保存的wp主题的日志页源代码,即删去大多评论,侧边栏,留一两条做参考

[size=3][b]1.[/b][/size]single.html 制作
   single.html 跟default.html 几乎一样,最简单的方法是把做好的default.html 中的DIV层覆盖默认的single.html 中的DIV,然后将<#template:article-multi#>换成<#template:article-single#>,去掉分页条,再改下侧边栏就完成了

[size=3][b]2.[/b][/size]b_article-single.html 制作
   b_article-single.html 中的文章部分跟b_article-multi.html差不多,不过把标题的链接去掉,改下文章底部的显示内容.
   对应wp主题的日志页源代码修改其它内容. 文章后的附带修改起来会麻烦一点点,评论条,相关文章等模板内规定的只是单条内容的样式,所以其外层标签要写在这里面

[size=3][b]3.[/b][/size]b_article_comment.html, b_article_commentpost.html, b_article_commentpost-verify.html 制作
  对应wp主题的日志页中单评论条源代码做修改,zblog默认模板中的引用按钮改不来可以不要.
  1.7中的验证码图片大小是50*11的,默认被拉伸到60*20,建议修改.

[size=3][b]4.[/b][/size]b_article_mutuality.html 及 b_article_trackback.html 制作
  这两个没有源码可以参考,不过可以对照前面改好的模板做相应调整

[[i] 本帖最后由 月上之木 于 2007-2-11 14:41 编辑 [/i]]

完成其它模板,样式表移植及细化,还有其它[结束篇]

Z-Blog 1.7中共有18个模板文件,经过以上两[color=Gray][color=Silver]大[/color][/color]步,完成了其中的14个,还有4 个:
[list=1][*]search.html         搜索页[*]tags.html            TagCloud,标签集显示[*]b_article_tag.html      单个tag的显示样式[*]b_article-guestbook.html    留言板的显示样式[/list]有了前面做的模板基础,这个改起来就简单了

[size=3]1.[/size]search.html 是default.html 简化版,侧边栏留个搜索就行了
[size=3]2.[/size]tags.html    是single.html 结合b_article-single.html中的文章部分 的简化版
[size=3]3.[/size]b_article_tag.html 就不用改了
[size=3]4.[/size]b_article-guestbook.html 是b_article-single.html 的简化版

OK!完成模板部分了!移植过程完成了大半部分,接着就是样式表的移植了.

所谓样式表的移植其实只是将WP主题中的样式表改名及对就Z-Blog本身的特点做点调整而已.WP主题中的样式表一般不只一个,主样式放在style.css中,图片放在主题文件的images目录中,而Z-Blog的一般做法是只有一个CSS样式表,图片放在样式同名文件夹下.

如,WP的Sharp主题下有两个CSS文件,除了style.css外还有一个style_comments_popup.css专门定义评论条的样式,我们把这两个合并成一个:sharp.css ,其中的图片路径全部替换成sharp/XXX, 图片文件夹改名成sharp

另外,还要改下引用(quote),代码(code),评论回复()及多媒体(media)标签的显示样式.有时候还要自定义评论发表框的样式.
WP中引用为 <blockquote>,代码为<code>,所以只要在这两个前加 .quote , .code,就可以了,评论回复的样式对应引用样式改. .media可以对应默认的改.

[b]结束语:[/b]以上都只是我的经验之谈,配上模板元素说明的图,希望对各位移植其它主题有帮助.如果你移了个漂亮的主题来不要忘了分享哦~.

好帖，一定要顶！

可以划归<模版制作指南>了,不错:victory:

实战篇!!!

真详细。谢谢。
每个人发帖或回答都这样就好了。

辛苦了

谢谢

收藏再説。

太好了````十分感谢````

呵呵.确实不错.很详细.
不过现在没时间看.
等晚上自己一个人在电脑前慢慢琢磨.呵呵.
我的blog:
[url]http://www.tobad.cn/blog[/url]

回帖是礼貌，谢谢分享！

谢谢啦，一直在找这个`

谢谢楼主啦~一直在找这个东动

好东西啊

这个一定要顶！！！这个帖子不仅可以作为制作主题使用而且在修改原版程序的时候也可以进行参考、对照

:kiss: :kiss: :kiss: :kiss:

"对你保存的wp主题的首页源代码精简,即页面上的文章删去只剩一篇,侧边栏留一两个模块当参考"

谁能说详细点啊，谢啦！！！

回复 #17 jazzy85 的帖子

:L
打开wp主题的演示页面,文件->页面另存为...
再打开这个文件~~~页面上的文章代码删去只剩一篇,侧边栏留一两个模块当参考~~对应zblog模板标签进行替换~~~结束

ps:希望这个教程对大家了解Zblog的模板结构有所帮助...

好人

正在找,好辛苦.

正在找,好辛苦.,谢谢.
顶!

不错的的教程!~~

谢谢楼主..
分享是美德..

把文章代码复制至b_article-multi.html中,然后用<#template:article-multi#>

是把什么文章代码复制上去？还有，为何我新建的页面只能显示原标签？是否要include什么？

恩,有时间再琢磨.....
[url]http://blog.519f.com[/url]