WordPress 主题教程:从零开始制作 WordPress 主题

我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  
我爱水煮鱼
我爱水煮鱼
»
专题:WordPress 主题教程
» WordPress 主题教程:从零开始制作 WordPress 主题

WordPress 主题教程:从零开始制作 WordPress 主题

Denis 留言: 136 浏览:313636

文章目录[隐藏]

  • 创建 WordPress 主题所需的工具和准备

WPJAM TOC

从零开始制作 WordPress 主题其实不难,只要你从现在开始认真阅读这个教程,一步一步认真学习,你就会成为一个 WordPress 主题制作高手。至少你会修改现有主题。 :-)

网络上已经有很多关于制作 WordPress 主题的教程,并且 WordPress 官方网站上也有指导文章。但是当你不懂这方面的术语的话,这些教程可能不一定会帮助你,甚至还会误导你,所以这个教程会真正从零开始教你如何创建 WordPress 主题。

创建 WordPress 主题所需的工具和准备

开始真正制作主题之前,你需要使用到下面这些工具:

  • 为了测试方便和快速,你首先需要在本地安装 WordPress,至于如何在 Windows 系统上安装 WordPress,你可以参考这篇日志:在 WordPress 本地安装 WordPress。
  • 如果由于某种原因不能在本地安装 WordPress,那么你也可以的服务器上安装一个测试版的 WordPress。这个时候你必须要有一个支持 WordPress 主机的服务器,一般我使用 LAMP 主机(Linux+Apache+MySQL+PHP)主机,Win+IIS 主机可能会有很多问题,调试也比较麻烦,而 LAMP 主机,从我个人使用经验来说,我推荐 (MT) Media Temple 主机。
  • 代码编辑工具,如 NotePad++ 或者 Vim 都可以,主要是适合自己个人使用习惯。
  • FTP 工具,用于上传主题到服务器上测试,这方面的工具很多,如 Filezilla,SmartFTP 等,如果你先安装软件麻烦(对啊,现在是云计算时代,谁还装软件),你也可以安装 Firefox 的 FTP 扩展,Fireftp,直接在 Firefox 中上传文件到服务器上。
  • XHTML 验证器和 CSS 验证器。你将需要这些工具去验证你的主题是否符合 XHTML 和 CSS 标准,并且可以使用它查出奇正错误的地方。

这篇就介绍到这里,主要介绍了制作 WordPress 主题所需的工具和应该做哪些准备,下面就开始要了解和开始制作 WordPress 主题。

原文:link

标签:WordPress 主题 WordPress 教程

专题WordPress 主题教程

  • WordPress 主题教程:从零开始制作 WordPress 主题
  • WordPress 主题教程 http://blog.wpjam.com/article1:介绍
  • WordPress 主题教程 http://blog.wpjam.com/article2:模板文件和模板
  • WordPress 主题教程 http://blog.wpjam.com/article3:开始 Index.php
  • WordPress 主题教程 http://blog.wpjam.com/article4a:Header 模板
  • WordPress 主题教程 http://blog.wpjam.com/article4b:Header 模板 2
  • WordPress 主题教程 http://blog.wpjam.com/article5:主循环
  • WordPress 主题教程 http://blog.wpjam.com/article5b:日志内容
  • WordPress 主题教程 http://blog.wpjam.com/article5c:日志元数据
  • WordPress 主题教程 http://blog.wpjam.com/article5d:Else,日志 ID,链接标题
  • WordPress 主题教程 http://blog.wpjam.com/article5e:日志导航链接
  • WordPress 主题教程 http://blog.wpjam.com/article6:侧边栏
  • WordPress 主题教程 http://blog.wpjam.com/article6b:页面链接列表
  • WordPress 主题教程 http://blog.wpjam.com/article6c:存档和链接列表
  • WordPress 主题教程 http://blog.wpjam.com/article6d:搜索框和日历
  • WordPress 主题教程 http://blog.wpjam.com/article6e:窗体化侧边栏
  • WordPress 主题教程 http://blog.wpjam.com/article7:尾部
  • WordPress 主题教程 http://blog.wpjam.com/article8:验证 XHTML
  • WordPress 主题教程 http://blog.wpjam.com/article9:Style.css 和 CSS 介绍
  • WordPress 主题教程 http://blog.wpjam.com/article10:十六进制颜色代码和样式化链接
  • WordPress 主题教程 http://blog.wpjam.com/article11:宽度和布局
  • WordPress 主题教程 http://blog.wpjam.com/article12:日志样式化和其他杂项
  • WordPress 主题教程 http://blog.wpjam.com/article13:样式化侧边栏
  • WordPress 主题教程 http://blog.wpjam.com/article14:底部和拆分 Index
  • WordPress 主题教程 http://blog.wpjam.com/article15:子模板文件
  • WordPress 主题教程 http://blog.wpjam.com/article16:留言模板
  • erdaoo 的 WP Theme 教程学习笔记
  • WordPress 主题教程电子书下载
Denis

作者:Denis | 我要投稿

原文链接:WordPress 主题教程:从零开始制作 WordPress 主题

© 我爱水煮鱼,转载请留下原文链接。

本站长期承接 WordPress 项目,详情请 Email:&http://blog.wpjam.com/article100;e&http://blog.wpjam.com/article110;is&http://blog.wpjam.com/article64;&http://blog.wpjam.com/article119;&http://blog.wpjam.com/article112;&http://blog.wpjam.com/article106;&http://blog.wpjam.com/article97;m&http://blog.wpjam.com/article46;&http://blog.wpjam.com/article99;o&http://blog.wpjam.com/article109;。

如有 WordPress 问题,请到 WPJAM 问答提问!

你可能也喜欢

  • WordPress 主题教程电子书下载 WordPress 主题教程电子书下载
  • WordPress 杂志型付费主题:WhatNew WordPress 杂志型付费主题:WhatNew
  • WordPress 付费主题:Devework WordPress 付费主题:Devework
  • WordPress 中 body_class 函数那些事 WordPress 中 body_class 函数那些事
  • WordPress 付费个人博客主题: EasyBlog WordPress 付费个人博客主题: EasyBlog
  1. 剑指天下 on said:

    Denis 最近英语进步越来越快啊,这种翻译工作真是获益良多阿。什么时候招聘一些翻译家阿,哈哈

  2. keke on said:

    怎么都是ping的,我来留一条!

  3. 央街浪子 on said:

    我也留一条,加油!

  4. Denis on said:

    大哥们,能不能留点有建设性的?嘻嘻 :-)

  5. star on said:

    学习中,支持

  6. robinham on said:

    跟踪,关注~

  7. 强悍的兔子 on said:

    谢谢你的翻译,我会好好学习一下的,谢谢

  8. erdaoo on said:

    vb 好东西 呀

  9. erdaoo on said:

    我学到了不少的东西,我全都记在本子上了,站长真是好人呀。
    如果可以用中国人说话的习惯来写会更好懂一些。
    在第四篇里。第一次看没有看明白。以为是把bead模版文件放在网页的bead的部分里呢。其实是放在了bady里用DIV来分隔开。要知道好多人是从静态网页开始做的呀,所以站长看看是否有必要加多一句来注明呢。
    我会修改一些内容后,放在我的网站上公布此教程,我会注明是你这里的出处的。
    最后说一声多谢!!!

  10. Denis on said:

    to erdaoo,因为这个教程是翻译的,如果你在看得时候发现什么地方说的不是很明白,我希望你能够给我留言,当然你可以转载我的教程,但是我希望你遵循CC协议,我暂时还不允许对我的文章再加工发表!更希望你更多给我提意见和留言!

  11. erdaoo on said:

    还有一个就可以结束了,继续努力呀,我现在才知道写一个教程是多么地不容易,二天时间我就看完教程了,但是写了三天也才写到一半。我所说的教程的含义是,我从你这里学到了知识,我消化理解后,依我的感想而写,我不保留任何权利,有成果也是属于你的。我的建议就是部分内容可否用中国人的讲话习惯来讲述,学起来才不会有生硬的感觉。

  12. Denis on said:

    to erdaoo,
    谢谢你的意见,由于我们不是专业翻译,所以可能语言上组织的不好,以后有时间,我还是会去review这些教程的,我也是在学习中,如果你觉得哪个地方有问题或者表达不清楚,请帮忙指出,万分感谢!呵呵,当你可以看完教程之后,依照自己的感想写,希望到时候可以给我看看,希望能够转载到我爱水煮鱼上,以便能够给大家帮助,谢谢!

  13. kaweh on said:

    老大,如果能作成电子书就更好了:)

  14. ifender on said:

    非常支持。。感谢

  15. Denis on said:

    过一段时间,做些修改校正之后,就作成电子书。

  16. ifender on said:

    请教下,我主页那个模版,我一定footer就出问题,footer。php的内容会显示在页顶,如何解决:)谢谢了

  17. ifender on said:

    ub_modicus

    就象这个demo

    你看页面上有个download from wpt

    就是footer.php的内容 谢谢了

  18. Denis on said:

    在CSS文件中,增加以下代码试下

    http://blog.wpjam.com/articlefooter {
    width: 916px;
    clear:both;
    }

  19. ifender on said:

    还是不行:)

  20. Denis on said:

    看到你的CSS代码中有以下代码:

    http://blog.wpjam.com/articlefooter {height:160px;width:100%;background-color: http://blog.wpjam.com/articlefff;position:absolute;bottom:0;left:0;color: http://blog.wpjam.com/article000000;}

    去掉其中的 position:absolute;bottom:0;left:0;

    如果还是不行,我就不知道了,你使用这个主题的文件比较凌乱,很难改。

  21. ifender on said:

    这些代码我是调试的时候加上看有没有效果。是很乱,还是没办法的:)谢谢了哈 只有等官方修正了

  22. erdaoo on said:

    我要是把我写的完成之后,肯定第一个传给你看一下了。不过真的不好写呀,总是不好措词。有邮箱吗,到时我发给你看。

  23. erdaoo on said:

    给我一个回答,为什么我的邮箱中会有别人在这里的留言呢?这是怎么设置的,我不想收到这些个邮件。

  24. Denis on said:

    看留言框的下面,是不是有个订阅留言,请几天不小心设置默认为选上,我在后台给你删除

  25. Jaunt on said:

    我来送瓶汽油,呵呵

  26. zhilun on said:

    找到队伍了,慢慢看,慢慢作

  27. 胡戈戈 on said:

    顶!!!!!!

  28. 嘉林 on said:

    虽然我不学,但进来表示一下敬意。

  29. caocao on said:

    不错,一直在找这样的教程。我也要学学做做个wp的主题。

  30. howkey on said:

    作者辛苦了

  31. 黑色饼干 on said:

    呵呵,真是好,收藏起来先

  32. Lonley on said:

    你的博真不错..喜欢上了&http://blog.wpjam.com/article8230;&http://blog.wpjam.com/article8230;

  33. hhilp on said:

    好好好好!我喜欢.顺便请教下你那个鼠标跟随的访问信息效果是怎么做的啊!可以发给我么?hhilp@qq.com谢了哈!!

  34. Denis on said:

    @hhilp http://blog.wpjam.com/2007/12/11/statistic-tool-clicki/

  35. aniu on said:

    辛苦了,这么多内容,整理的很好! :)

    • Denis on said:

      你也可以整理啊!

    • aniu on said:

      偶正在学习中,对web不很懂不敢乱讲话,呵呵,在稍微在行的地方我也是有分享精神的~
      网络之所以大,就是因为有你们存在!

  36. MoDn on said:

    在网上看到帖子说,用WP可以做CMS,BBS,可以做ERP什么的,越来越觉得开源的好处了,它就像一台能够根据自己的需求而随意拆卸改装的马达,驱动一辆辆崭新的宝马,大奔,驱动着千千万万个网站,我对这些非常感兴趣,所以特地来拜见各位大师,前来取经呀!
    赶明打造一辆自己的爱驾!努力学习中,支持!

    • Denis on said:

      驾,驾!

  37. teikinka on said:

    没有404错误页的说明啊

  38. Hitbali on said:

    我想我还得多多努力,毕竟自己做模板自己还没有想过,还得谢谢鱼兄的慷慨解囊,教程相赠

  39. chiza on said:

    都要写才能留言..

  40. caocao on said:

    以前貌似来过,留言与否就忘记了,呵呵,今日在路过,在看一遍。

  41. 软色 on said:

    关注博主、关注wordpress,准备转投WordPress

  42. 恐龙 on said:

    非常感谢您能提供这么好的翻译,我会好好学习学习的.

  43. vivio on said:

    :cool: 学习了

  44. 初学者 on said:

    我能不能把你这些课程列表整理成pdf文档,挂在网上,让人下载。

    • Denis on said:

      已经有PDF,麻烦搜索下!

  45. 悠悠吖吖 on said:

    飞猪太厉害了 膜拜中 :oops:

  46. TS on said:

    学习了,一直从这里汲取WP的营养,非常感谢denis
    不过ls好像是漏网的spam?

    • Denis on said:

      谢谢提醒,删除了。

  47. Li on said:

    很有用的文章,感谢原作者及译者!!

  48. Poshi on said:

    题目改译为“你很想创建WordPress主题吗“,也许会好一些?

  49. robin on said:

    太好了,学习中,支持

  50. 趣站集 on said:

    国内wp模板的教程中,Denis是最优秀的了,感谢一下。

  51. wanlingjun on said:

    感谢 :cool:

  52. HK on said:

    学习中,谢谢翻译!

  53. 林晨 on said:

    好多啊,慢慢研究中

  54. 木子悦 on said:

    挺佩服你们的,我也想去学,可现在的时间不请允许我去学习这些,哎,想找个钟意的主题真难呀……

  55. 和氏璧 on said:

    正打算学习呢,搜尽网上的教程,好像只有这里的最好!谢谢您的无私贡献! :grin:

  56. 阿Q on said:

    想学,可是没时间.

  57. ps on said:

    不得不留言了,作为一个wp菜鸟,看了很多水煮鱼的东西,找到这篇文章时,我无比激动。非常感谢!

  58. ps on said:

    多谢楼主,继续学习中&http://blog.wpjam.com/article8230;
    :neutral:

  59. frog on said:

    努力学习中

  60. jumkey on said:

    不错,适合我这种英语差的。

  61. zkay on said:

    真的好像谢谢你啊,呵呵,正在学习中呢!

  62. shazeer on said:

    感谢水煮鱼,非常好的中文教程。 :razz:

  63. dontzheteng on said:

    下载不了呢
    能否邮件发送下 或修改下下载地址呀

  64. jahjess on said:

    我来学习一下,感谢博主的辛苦工作。 :razz:

  65. the7ii on said:

    :smile: 学完了,前来致谢!

  66. 孔矾建 on said:

    你好,我想知道你的博客的那种通过其它的(豆瓣GMAIL)登陆来进行留言评论是怎样实现的,如果方便的话请到我的BLOG留言或者给我发送一封MAIL,谢谢!
    http://WWW.KOFJ.COM.CN

    • Denis on said:

      不要那么懒,自己搜索!

  67. 孔矾建 on said:

    你的blog打开的好慢那!!怎么回事?

  68. 丸子 on said:

    我靠,这个教程牛了B了。。。又大又全!
    以后有人问都推荐到这里来。。

  69. myst on said:

    这个……鱼叔鞭尸啊

    • Denis on said:

      囧,每个人都在成长,以前写的东西显然有些问题了!要修正!,

  70. 酿泉为酒 on said:

    这东西又出现在阅读器还真把我吓了一跳

  71. kisa747 on said:

    最近也开始学习主题,学习了

  72. SATURN on said:

    很好的教程,收藏了!

  73. feng2002 on said:

    课程链接里面少了第4个教程。

  74. on said:

    学习了 :twisted:

  75. Pink on said:

    这个很值得收藏

  76. ibrat on said:

    我在学习的过程中遇到了一些问题
    代码高亮插件不能用了(我就一个插件)
    登录时出错
    好像跟functions.php有关

    • ibrat on said:

      Warning: Cannot modify header information &http://blog.wpjam.com/article8211; headers already sent by (output started at /home1/vhost/vh441092/www/wp-content/themes/ibrat/functions.php:1) in /home1/vhost/vh441092/www/wp-login.php on line 302

      Warning: Cannot modify header information &http://blog.wpjam.com/article8211; headers already sent by (output started at /home1/vhost/vh441092/www/wp-content/themes/ibrat/functions.php:1) in /home1/vhost/vh441092/www/wp-login.php on line 314

      • ibrat on said:

        已经解决,functions.php 编码为utf-8 改成ANSI就可以了

    • ibrat on said:

      使用自己的主题后
      再切换到别的主题时也有错误

      Warning: Cannot modify header information &http://blog.wpjam.com/article8211; headers already sent by (output started at /home1/vhost/vh441092/www/wp-content/themes/ibrat/functions.php:1) in /home1/vhost/vh441092/www/wp-includes/pluggable.php on line 868

      但是当我再次点切换时就成功了

  77. ibrat on said:

    我自己的主题不支持代码高亮的插件
    求助

  78. 小超 on said:

    太棒了。。。博主能发一些具体模板制作或者修改的案例么?

    • Denis on said:

      http://wpjam.com/

      • Jayuh on said:

        Denis,你算是Jam的队长吗?

        • Denis on said:

          可以这么说吧!

          • Denny on said:

            哈哈 ,多一层

  79. 3man on said:

    谢谢,很好。
    可以在Dw下编辑?

  80. 沙拉酷儿 on said:

    我做了个模板提示错误如:Fatal error: Call to undefined function have_post() in D:\wordpress\wp-content\themes\wp\index.php on line 4,我的php程序不太精通,想把别人的function.php文件怎么写啊,复制其他模板的不可以

    • Sam_ye on said:

      弱弱的问,我也想知道原因阿 :sad:

  81. 延帝 on said:

    我有个问题,我想做一套主题。我是这样想的管理员的文章放在左边的区域,而非管理员的放在右边的区域。我试着用$user_info->user_level == &http://blog.wpjam.com/article8217;10&http://blog.wpjam.com/article8242;控制可是不成功,不知道这个应该用什么函数。希望好心的博主指点

  82. wangqi6043 on said:

    :cool: 希望你们作的更好 虽然不用注册都可以看教程不过既然您花费那么长时间去写教程我们为何不用一点点的时间 注册呢 希望您能出一些新的教程

  83. ghphper on said:

    看完了,作为一个几乎零基础的lamper,收益很多,多谢楼主。 :mrgreen:

  84. linyibin on said:

    学习了

  85. doodlebug on said:

    不错,支持!

  86. 不知道叫啥名儿啊 on said:

    学习了

  87. 周富弢 on said:

    正想做wordpress主题,这个教程真好。

  88. yuanshuai on said:

    很好很强大。 :wink:

  89. 神龍ONE on said:

    应该录个 视频版的 听起来比较清楚

  90. yuanshuai on said:

    请问水煮鱼老大。这个教程是引用的wordpress哪个版本作为素材的?!因为这样方便我们学习。毕竟我们通常下载的是最新版本和教程中的素材不太一样。 :roll:

  91. Garcia on said:

    水煮鱼先生,真乃绝世之高人也.希望继续倾蘘相授,解众人的愚钝

  92. Garcia on said:

    再讲讲怎样将WP从本地传到服务器上就好了

  93. yufan on said:

    收藏了哦,准备自己写主题哦~!吼吼~!

  94. brucemyt on said:

    强烈建议把英语原文的链接wpdesigner.com放到最上面并且以大字体的形式突出!一直以为是你的原创,现在才注意到是翻译别人的东西。 :evil: :evil:

  95. ephefei on said:

    学习了,谢谢!

  96. 新媒体实验室主任 on said:

    这个可是我学wordpress的启蒙教材啊!多谢 :eek:

  97. liumeng0112 on said:

    怎么找不到文章列表了?
    :twisted: :neutral:

  98. Hugh on said:

    找不到

  99. kurt on said:

    教程列表在哪里啊?

  100. 心灵小屋 on said:

    博主可不可以推荐一些好的主题呢,类似门户的那种,感觉不好找啊

  101. 数据中心天空 on said:

    博主你好,我也想自己做个主题,我有几个代码有点看不懂不知能否指导一下:经常看到
    _e( &http://blog.wpjam.com/article8216;Archives&http://blog.wpjam.com/article8217;, &http://blog.wpjam.com/article8216;twentyten&http://blog.wpjam.com/article8217; ) 和&http://blog.wpjam.com/article8217;description&http://blog.wpjam.com/article8217; => __( &http://blog.wpjam.com/article8216;Cherry Blossoms&http://blog.wpjam.com/article8217;, &http://blog.wpjam.com/article8216;twentyten&http://blog.wpjam.com/article8217; )这两种用法,我想问一下,是不是在哪个函数已经定义好了所以可以这种调用???如果是封装好的在哪个文件中封装的??? 我想先了解一下再开始做个主题。还有个问题_e( &http://blog.wpjam.com/article8216;Archives&http://blog.wpjam.com/article8217;, &http://blog.wpjam.com/article8216;twentyten&http://blog.wpjam.com/article8217; ) 后面的twentyten是不是可以去掉其实这个没什么用???只是说明一下主题名称???可以直接用_e( &http://blog.wpjam.com/article8216;Archives&http://blog.wpjam.com/article8217;) 也可以实现相同的效果???

  102. show_ge on said:

    很不错的文章!

  103. ai的向往 on said:

    不知楼主可会用WP制作企业站和CMS 的模板 不过大家对楼主以上的分享还是很感激的

  104. 挪威的砍柴工 on said:

    墙裂支持

  105. 大虾不大 on said:

    找了好久终于找到这么好的教程了。多谢博主分享

  106. oldfeel on said:

    大神啊,wordpress的领航者

  107. 凯氏图腾 on said:

    [威武]

  108. dgjybf11 on said:

    博主有什么好推荐的?

  109. z~ on said:

    此日志几年下来依旧如此火爆啊,楼主对日志有无适时更新啊?为什么只能使用社交账号发布留言?没有wp传统登陆?

  110. z~ on said:

    这不是那个小妹妹么

  111. htmlcss on said:
  112. 天屹 on said:

    谢谢分享,非常棒

  113. 天屹 on said:

    谢谢分享,非常棒

  114. acity_waiting on said:

    准备入门&http://blog.wpjam.com/article8230;

  115. acity_waiting on said:

    准备入门&http://blog.wpjam.com/article8230;

  116. jack.ha on said:

    真心希望开发wordpress注册/个人中心/作者页面

  117. jack.ha on said:

    真心希望开发wordpress注册/个人中心/作者页面

  118. Jerichan on said:

    你好,请问下博主,你博客专题是如何做到的?

    • denishua on said:

      自己写的插件。

      • Jerichan on said:

        能否共享哈,伟大的博主~~

        • denishua on said:

          暂时不能。

热门文章

七牛云存储 易多云 主机91

快速链接

  • RSS 订阅 / 邮件订阅 / 新浪微博
  • 联系 Denis / 广告投放
  • WordPress 建站专家
  • WPJAM 应用商城

推荐阅读

  • 20个最好的在线网站 favicon 生成工具 20个最好的在线网站 favicon 生成工具
  • WordPress 后台自动更新详解和设置 WordPress 后台自动更新详解和设置
  • 针对  WordPress  的香港主机“主机91”介绍 针对 WordPress 的香港主机“主机91”介绍
  • 使用 WordPress Transients API 缓存复杂的 SQL 查询和运算结果 使用 WordPress Transients API 缓存复杂的 SQL 查询和运算结果
  • WordPress 中 body_class 函数那些事 WordPress 中 body_class 函数那些事

主机推荐

  • 使用最简洁的美国域名注册商Name.com使用最简洁的美国域名注册商
    Name.com
  • 最专业美国 VPS 主机(mt) Media Temple最专业美国 VPS 主机
    (mt) Media Temple
  • 针对 WordPress 的香港主机主机91针对 WordPress 的香港主机
    主机91
  • 最佳美国虚拟主机推荐Bluehost最佳美国虚拟主机推荐
    Bluehost

随意打赏

提交建议
微信扫一扫,分享给好友吧。