WordPress主题制作全过程(三):HTML静态模板制作

日期: 标签:WordPress教程主题制作
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我

制作WordPress需要了解PHP,但是不管怎样,你的博客页面都是一张网页,网页之所以能够在浏览器中显示出来,是因为最终传送给浏览器的是HTML、CSS和JS等终端代码,最终由这些代码控制浏览器的显示结果。制作WordPress主题也不例外,它们都是网页,网页最基本的是HTML。要想制作WordPress主题,首先得设计主题界面,含蓄、简约、厚重、奔放……,风格完全随你,接着再将你的设计理念转化为.html,并能在浏览器中正常显示出来。

本系列教程不会教你如何去设计博客的界面,也不会教你HTML和CSS基础知识,而是假定你已经有HTML和CSS基础了,如果你不会HTML,也不会CSS,后面的东西恐怕对你来说就像天书了。

本系列教程将使用由tutsplus无偿提供的html模板Aurelius为例,来讲解WordPress主题的制作过程,其他模板的制作也类似。下面提供该HTML模板文件下载,我们将以此来练习如何将HTML静态页面与PHP代码结合,制作WordPress主题。下载后,里面的html文件都是可以直接双击打开的。

下载此文件

可能这个模板并不适合每个人的口味,但这个用于我们的主题制作练习已经足够了。另外你可能会诧异,怎么是英文版的?放心,到了后面你就会知道,是否英文版都没多大关系。下面说说下载到的这些文件的用途:

  • 首页:index.html
  • 存档页:archive.html
  • 页面:page.html
  • 文章页:single.html
  • 联系页:contact.html
  • 无边栏页:full_width.html
  • 图片:/images/
  • 样式表:style.css
  • 缩略图:screenshot.png

大多数博客所能看到的页面类型也基本就这些。你可能已经注意到,不管你用哪个WordPress主题,不同的文章页面除了标题和内容不同以外,其他东西基本都是一样,这就是所谓的模板。

今天的重点就是下载我上面提供的静态html网页文件,敬请期待下面的内容。

WordPress主题制作全过程完整列表:

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜即刻 https://www.ludou.org/create-wordpress-themes-html-template.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者。

29 条留言

点此留言
  1. 老李 老李

    我一直搞不清制作主题是应该先制作PSD文件,还是先写那些php文件

    • www.datianjing.com www.datianjing.com

      @老李 先用ps画,制作psd,然后切片,之后写div+css

  2. Ludou

    没有PSD,没有HTML,就不知道在哪写PHP

  3. 老实人 老实人

    有你这系统的文章,再用WP就会简单些了。

  4. mmmfff

    楼主看看那个html模板的下载链接下载下来的zip文件是无法解压的!直接到tutsplus下载了Aurelius,发现已经与该教程里用的不一样了。

  5. mmmfff

    终于把模板下载下来了,直接用另存为或迅雷都不行,得用在新网页打开链接的方式,打开的是冷龙的live,在那上面可以下载。

  6. 像风一样自由

    很给力的wordpress入门教程!赞!!

  7. 烤虾网 烤虾网

    看懂了一部分 需要细细琢磨!

  8. 凡哥 凡哥

    学习中

  9. softly

    博主 为什么我下载了是 aurelius.zip; 后面有个; 我重命名后 ; 这个去掉后,这个包打开里面什么也没有了

    • Ludou

      @softly 未发现你所说的问题。另外请使用浏览器默认的下载功能下载。

  10. MM

    http://www.ashuwp.com/courses/simple/79.html
    这个是盗版你的么,先看的这个,点下载下不来到你这来了

    • Ludou

      @MM 随便怎么盗版吧,他也不知道个所以然

      • 风影

        @Ludou 下载解压后,是个没有后缀的名为aurelius文件

  11. 风影

    终于下载成功了,IE下载解压后无法使用,我用google浏览器下载成功。

    • Ludou

      @风影 使用ie下载确实有问题,现已修正,可使用ie下载

  12. 陈宇恒 陈宇恒

    教程的主题文件下载不了是怎么回事 求博主发送文件到我的邮箱

    • Ludou

      @陈宇恒 鼠标左键单击“下载这个文件”,进入下载界面,选择对应图标即可下载

  13. ding

    看来这个下载设置有问题,下了5次,都下载不了!!

  14. ly710

    文件不能下载,博主能发一份给我吗?

  15. 天计 天计

    问一下博主、我准备了静态页面、然后将css从images里剪切出来、修改了index里的css路径、就在设置路径为自动查找css、或者设置成css现在的路径,时,dw在css路径下几行处报错了,语法错误、咋回事?

  16. key key

    那个包下载不了 一直提示请按提示点选正确的图标 但我图标选择的是对的

  17. shenlun

    它这个要弄成标签调用的就发好了,我是网站美工出身,以前公司的CMS都是标签的,直接细化年月日时分秒这处,各是各的标签,只要懂一点就能做网站,而且网站布局想怎么做就怎么做,那些标签可以组合出几万种效果来,可能系统老早以前就不更新,现在找的CMS基本上没有标签调用的

  18. 小陈

    请问页面中的脚本该怎么办。

  19. 菜鸟头头 菜鸟头头

    很好,博主用心了。我们也是用心学习的

发表留言