wordpress主题制作菜鸟养成计划启动

wordpress的魅力在于折腾,折腾的focus就是主题。wordpress的众多fans是幸运的,因为有数不清的主题任你挑选;但有一句话怎么说来着,叫“众口难调”。网上下载的wordpress主题总是会有些地方自己看不顺眼,然后就想操刀修改主题代码;或者更能折腾的主儿就动了自己做主题的念想,你属于哪一种情况?

从我接触wordpress开始,就迷上了鼓捣主题这件事,虽然很费时间,但还是乐此不疲,前前后后已经折腾了半年多了,也摸索出了一点心得。ok,回到文章的题目上去,“wordpress主题制作菜鸟养成计划”,什么意思?意思很简单,就是我打算写一个wordpress主题制作的初级教程,初级到什么程度?初级到刚接触wordpress的小菜鸟都可以看懂的程度。

菜鸟这个词没有任何贬义,就是零基础的意思嘛,直到今天我也还是菜鸟,只不过是已经飞出去一段距离的菜鸟,哈哈。

自我开始学习wordpress主题制作,看了不少教程,就发现一个问题,国内关于wordpress主题制作的比较系统的教程很少,最有名的应该就是我爱水煮鱼翻译的小土豆的那个教程了,其他的也零零散散有一些,但质量水平参差不起了就;而且还有一个问题,就是目前的主题制作教程专业性有点高,不太适合小菜鸟学习,就那些术语能把人侃晕了。

所以嘛,所以我就动了自己写一个菜鸟级基础教程的念头。初步构想,这个教程制作出来的主题不会功能很强大,它将是一个具备基本博客功能的简约主题,css的渲染也会尽量简单,因为我们的重点是提供主题制作的基础性思路,想学会制作更高级的wordpress主题还是另请高明哈。

ok,让我们开始吧,今天先做准备工作。首先你需要下载一个编辑器,wordpress主题文件大概有三种类型,一种是php文件,一种是css文件,还有一种是js文件,这个都能看懂吧?php、css和js指代的是文件的后缀名,就和doc表示word文件一个意思。

编辑这三种文件,常用的编辑器是editplus以及notepad++,不会有人还在用万恶的记事本编辑器吧?那个实在是太难用了!editplus是收费软件,使用的话需要自己找一个注册码填上去,但优点是界面比较紧凑、清爽,我目前在用的就是editplus;notepad++是免费开源软件,我也安装了,但用的较少,个人感觉它的界面不如editplus紧凑,不过notepad++也有一个优点,它的界面具有折叠代码的功能。到底使用哪一款编辑器,大家随自己的喜好吧。

一个基本的wordpress主题是如何构成的?首先你需要给自己即将制作的主题起一个名字,比如我将要做的这个主题,它的名字叫starter theme,然后新建一个文件夹,文件夹的名字就是starter theme,这个文件夹的名字确定后尽量就不要修改了哦,否则会出错误的。下面给大家看看这个starter theme文件夹内都有什么文件。

starter theme主题文件构成

解释一下每个文件都是干什么用的,header.php、index.php、sidebar.php、footer.php、style.css是主题的核心文件,css规定的是网页的外观,即网页用什么背景,字体多大号,哪里需要显示图片等等,后面会再讲解css的问题的;四个php文件呢,其实就是把一个完整的网页给用小刀切割成了四大块,每一块区域显示各自的内容,就像我们玩过的拼图游戏一样。下面也贴一张图片,相信大家看了会有更直观的感受的。

anatomy-wordpress

那么其余那几个php文件是干什么的呢?single.php是用来显示一篇一篇的文章的,page.php是用来显示在wordpress后台添加的页面的,比如留言板页面,作者介绍页面等,archive.php是用来按类别显示文章的,比如显示2012年4月份的所有文章,比如发表在wordpress这个文章类别里的文章,而404.php则是用来显示错误页面的,比如有人访问了一个你的网站上不存在的页面,404.php就会显示在他的电脑屏幕上。

其实,上面结构图中的四个php文件以及style.css文件才是一个主题最核心的,而single.php等文件即使没有也没关系,wordpress程序会自动的用核心文件替换single.php文件的,不过显示效果可能不是特别好;因此,我们这个主题还是把single.php等文件添加上了。

可能你已经看过别人的主题,文件夹里的文件会特别多,但请注意,我们将要制作的是一个基础性主题,咱们暂时不需要那些很复杂很花哨的效果,所以文件数目会比较有限;总要明白,饭得一口一口吃,不能一口吃成个胖子的道理。

over,开篇先到这里,敬请期待后续教程。

评论

  1. 12 年前
    2012-4-22 20:47:51

    不错,都还看得懂。

  2. 12 年前
    2012-4-22 0:30:29

    目前还真没见到这么基础且通俗易懂的教程,给了个很好的学习方向,不过要快速,持续,保证质量的更新哦.(这个是个不小的挑战.)

    • 啄木游弋
      博主
      微凉的风
      12 年前
      2012-4-22 9:59:03

      哈哈,我只能尽量了,毕竟咱不是专业人士。一边摸索,一边调试代码,一般转化成通俗易懂的方式,是个大挑战!吐槽一下网上互抄的代码,好多都是失效的!

  3. 12 年前
    2012-4-21 21:19:11

    这个比较好,对我很实用。
    一般我就会简单的修改下,用的是Ultraedit。我用的是主题还是盗版的loper1.3,总感觉不是很爽。正好学习下。

  4. 12 年前
    2012-4-21 15:59:59

    不错 果然通俗易懂 多多更新呀

  5. 12 年前
    2012-4-21 13:09:30

    这么快就开始弄了呀~提到的那个翻译教程以前全都看过来着= =

    • 啄木游弋
      博主
      饭团同学x
      12 年前
      2012-4-21 13:11:06

      今天周末,正好没事,我就多写点。那个翻译教程是我看的第一个主题教程,感觉还不错,但对于初学者来讲,还是有点难度。

      • 啄木游弋
        12 年前
        2012-4-21 13:12:12

        似乎他的文章代码都有些错误,总之不能直接复制

        • 啄木游弋
          博主
          饭团同学x
          12 年前
          2012-4-21 14:28:49

          我会尽量把贴给大家看的代码,在自己的网站上进行验证的,放心好啦。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇