海豚的WordPress Theme教程 part1

  这篇和接下来几篇可以看作是制作KD02这个模版的一些心得和总结,其中大有可能存在谬误或错漏之处,权作参考。不过话说回来,看完后自己弄个可以看看的模版还是没问题的。
  这篇内容很简单,只是介绍一下需要的工具和WordPress模版的基本结构文件。
工具:

  • 一个有代码高亮功能的编辑器,Windows推荐EditplusCrimson Editor,这两个比较小巧,而且后者是免费的。Linux我就不具体推荐了,估计大家都有自己顺手的。
  • FireFox + WebDeveloper,这个组合我提过很多次了,具体可以看一下链接里的介绍。
  • Internet Explorer,这个谁都有吧,做完了模版还是需要放到这里来看看的,我们不能回避占有量第一的事实,即使它并不标准。

文件:

  • 404.php
    404出错信息,当访问者输入了一个不存在的地址就会看到这个页面,可以在这里写一些有用的提示,或者直接给个404 error。
  • archive.php
    控制存档、分类、日期的输出页面。其实这些内容是可以单独控制的,不过大部分模版都不把它们分开对待。
  • comments-popup.php
    弹出留言窗口的输出格式。
  • comments.php
    留言部分的输出格式。
  • footer.php
    一般是用来输出页脚信息的,比如放些模版作者,版权信息之类。
  • header.php
    用来输出标题和菜单项,同时html文件的头信息也放在这里。
  • index.php
    整个首页的主体结构,正文内容输出部分就是放在这里的。
  • page.php
    “页”的模版文件,控制Page的输出内容。
  • screenshot.png
    从WP2.0开始,模版选择会提供缩略图,这个文件就是缩略图文件。
  • search.php
    搜索的结果输出页面。
  • searchform.php
    搜索框的格式定义。
  • sidebar.php
    用于输出侧栏内容。
  • single.php
    当点击一篇文章后,所展示的页面内容由这个文件来控制。
  • style.css
    所有所有页面的具体表现样式都由这个文件来控制。

  一旦做起来就会明白,WordPress把一个页面的内容分成了Header + Content + Sidebar + Search Form + Footer这样的结构,对于模版制作者和用户来说这都是一个方便的处理方式。所以,各位和我一样的初学者都不用担心,我们后面所作的和搭积木一样简单。

Technorati Tags: ,

24 Responses to “海豚的WordPress Theme教程 part1”

  • hhalloyy says:

    有些模板(尤其是应用好多Ajax技术的模板)会加一个循环体的文件,比如K2用的是theloop.php,然后在index.php,single.php,archive.php和search.php中调用这个theloop.php。我其实挺烦这样弄的,所以自己的K2把上面那几个文件自己重写了代码,省去了theloop。

    当然还有更简单的模板,省去更多的标准模板文件,或者弄得很怪,更让人烦。

  • icylife says:

    Crimson Editor也太旧了吧!好久没有更新过的样子,最新的版本还是04年的。

  • 牛犊 says:

    主要还是CSS的设计上需要一定的基础。

  • 薄荷 says:

    “我们后面所作的和搭积木一样简单”这句话我爱听,WP本身就是这种积木式的构架方式。期待您继续写下去……

  • kDolphin says:

    [quote comment=”1924″]Crimson Editor也太旧了吧!好久没有更新过的样子,最新的版本还是04年的。[/quote]
    够用就好,不在乎是什么时候的,不要束缚于软件的版本号。
    [quote comment=”1925″]主要还是CSS的设计上需要一定的基础。[/quote]
    我也是没怎么正经学过css,有些东西边作边学会比较快。

  • Richie says:

    我想学怎么单独制作一个links的页面,就像你的“http://blog.kdolph.in/links/”这个页面一样。谢谢~

  • kDolphin says:

    [quote comment=”1928″]我想学怎么单独制作一个links的页面,就像你的“http://blog.kdolph.in/links/”这个页面一样。谢谢~[/quote]
    既然开始写了,请等待,我都会说到的。

  • calon says:

    我先越俎代庖简单地说了吧,,免得人家等太久:)

    修改page.php,改名为links.php,加入get_links之类的函数,然后上传到主题目录下,具体内容参看
    http://codex.wordpress.org/Pages
    http://codex.wordpress.org/Template_Tags/get_links
    等等

  • minfox says:

    大声支持:海豚,BTW:你的留言CSS怎么做成这种效果的呀?是用PLUSIN还是用的CSS实现的呀?可以分享一下嘛??

  • minfox says:

    刚刚试了试KD02,和其它THEME的问题一样呀,在宽屏1650 1050或者更高(更高没试过,偶估计宽屏都会有这个问题)下面,就太小家子气了,内容变成窄窄的一溜。

  • kDolphin says:

    [quote comment=”1932″]大声支持:海豚,BTW:你的留言CSS怎么做成这种效果的呀?是用PLUSIN还是用的CSS实现的呀?可以分享一下嘛??[/quote]
    依靠css实现的,等后面几篇我都会讲到的,我准备直接写成构成KD02的过程。
    [quote comment=”1933″]刚刚试了试KD02,和其它THEME的问题一样呀,在宽屏1650 1050或者更高(更高没试过,偶估计宽屏都会有这个问题)下面,就太小家子气了,内容变成窄窄的一溜。[/quote]
    1650这样的分辨率实在是少数啊,不过我做过一个最大1024、最小720宽度的三栏框架,不过后来转做KD02了,或许以后会做一个那样的。

  • […] 研究了一下WP的THEME结构,倒是挺简单的,WP网站上有,海豚也写了一篇中文教程。提着GOOGLE找了找,一位重庆兄位写了一篇关于Wordpress数据库中的表、字段、类型及说明 突然想到,其实一个好的BLOG,一个好的THEME,并不是好看这么简单的,DONEWS有张锐叶子《关于互联网媒介的思考片断 》有点意思 […]

  • GLass says:

    在css上還是有點搞不清……
    用css寫模版其實也蠻難的@@

  • kDolphin says:

    大致思路就是xhtml用来控制内容,css来控制表现。稍微入一下门就可以实际操作来适应了。

  • […] 海豚的WordPress Theme教程 part1 (tags: wordpress) […]

  • […] 海豚微笑的背后 » Blog Archive » 海豚的WordPress Theme教程 part1 (tags: WordPress) […]

  • […] 海豚微笑的背后 » Blog Archive » 海豚的WordPress Theme教程 part1 (tags: wordpress theme) […]

  • […] 海豚微笑—WordPress的theme教程 […]

  • […] 原文较长,我缩减了。有些地方比较诙谐,对于我这个只会画画不擅长技术的人来说,里面的一些内容还是专了点,自己少有时间去钻技术,所以只拣着我用到的重点说说。 一,wp相关资料 插件相关: WordPress默认插件位于/wp-content/plugins/目录下。如果需要安装新插件,只需将插件上传到此文件夹,随后在siteAdmin的plugin选项内将该plugin激活即可。 免费插件收集: WordPress的插件目录(e文) wordpress插件秀(中文) 模板相关: WordPress的模板资源,可以浏览模板的缩略图,download并解压缩后将其上传至/wp-content/themes/文件夹下,随后可以在site Admin的Presentation选项内选择喜欢的模板并对其编辑。 一些theme 是外国人写的,所以中文字体大小和样式不一定好看;而且有些模板对IE的支持不好。需要简单的掌握一些修改theme的常识:  海豚微笑—WordPress的theme教程 HrR的D版WordPress的theme的说明 二,blog相关知识  1.blog,blogger和bsp; blog:是网络日志(weblog)的简写,是按照时间顺序以文章的形式在网络上定期发表内容的一种方式,属于网络共享空间的一种。blog最有代表性的两个特点应该是TrackBack和 RSS。 TrackBack:比如一篇blog,在这篇blog(post)下方,会有个“TrackBack”,如果你直接回复,用不着T。但是你要知道,还有很多有思想的人喜欢互相交流,ping来ping去(就是T来又T去)。既然有了技术含量,畏缩在别人的留言里当然不好,所以就在自己的地盘上开展重新讨论。但又很想能让对方知道他。这时,神奇的T就登场了,当在自己blog写完这篇post后,在send trackbacks to()这一填空中,只要填上对方那篇blog的t地址就完成了一个t。随后在对方blog的留言中,就会出现自己的水平论文(通常为摘要显示)。 RSS,和写blog的关系不大(和阅读别人的blog关系重大),简单的说RSS的意思就是Really Simple Syndication。  关于blogger,稍微懂点e文的人在明白blog的含义后就能明白blogger的含义了。这样不会出现“博客写博客”这样的经典表述。 BSP(Blog Service Provider)是网志服务提供商。也是目前大多数blogger的首选。国内的BSP也很多,但是目前sina这样的门户网站也屁颠儿屁颠儿的来分这杯羹,但是他的blog系统确实很变态,这是真的。 自己搭建blog的优越性是自由,至少是相对的自由。但是自己搭建blog容易冷清,毕竟不是每个人都能持续写出高水平的blog,所以不是每个人都愿意花费宝贵的时间来看你没有技术含量的自言自语。 小的BSP如同一个小社区,容易让大家彼此熟识;一个大的BSP如同一个大社区,容易抄作而让人出名。一个自己搭建的blog就如同在荒郊野岭盖房子,几天都没几个人来晃晃。到底怎么取舍,只能自己来决定。 3、选择blog程序  因为blog的流行,自然也会导致blog程序的增多,到底哪一个程序才是我想要的呢?技术人员会研究很多问题,而我认为,对于我们这样的非挨踢精英来说要考虑的问题并不多: […]

  • […] 要发布之前测试才发现原来我的themes乱七八糟的,如果新用户注册铁定会笑话!所以还是要从底学起。 参考海豚先生的制作教程很仔细。 […]

  • […] 海豚微笑最近在写的WordPress的theme教程; […]

  • Leon Scape says:

    海豚的WordPress Theme教程…

    学习:
    这篇和接下来几篇可以看作是制作KD02这个模版的一些心得和总结,其中大有可能存在谬误或错漏之处,权作参考。不过话说回来,看完后自己弄个可以看看的模版还是没问题的。
    这篇…

  • […] 海豚的WordPress Theme教程 part1 […]

Leave a Reply to 视网魔 » Blog 存档 » 视网魔WordPress常用插件【update:2006.7.1

Note: Commenter is allowed to use '@User+blank' to automatically notify your reply to other commenter. e.g, if ABC is one of commenter of this post, then write '@ABC '(exclude ') will automatically send your comment to ABC. Using '@all ' to notify all previous commenters. Be sure that the value of User should exactly match with commenter's name (case sensitive).